1063

Створення таблиць і форм мовою html

Лабораторная работа

Информатика, кибернетика и программирование

Створення форм і таблиць, вивчення синтаксису і тегів цих елементів, набуття навиків у використанні цих елементів при розробці власних сторінок.

Украинкский

2013-01-06

528 KB

21 чел.

МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ

КАФЕДРА КОМПЮТЕРНИХ МЕРЕЖ

Звіт

З лабораторної роботи №1

з дисципліни «Мережі інформаційних технологій»

на тему: «Створення таблиць і форм мовою html»

Перевірив:                                                                              

к.т.н., старший викладач

кафедри комп’ютерних мереж

Тазетдінов В. А.

_________________

_________________

Виконав:

студент 1 курсу

групи КМ-115

Грузиненко.В.В

______________________

Черкаси 201

Тема: Створення таблиць і форм  мовою html.

Мета: навчитися створювати форми і таблиці, вивчити синтаксис і теги цих елементів, набути навиків у використанні цих елементів при розробці власних сторінок.

Стислі теоретичні відомості

Основні атрибути таблиці

BORDER 

Даний атрибут використовується в тегі TABLE. Якщо даний атрибут присутній, границя таблиці прорисовується для всіх комірок і для таблиці в цілому. BORDER може приймати числове значення, що визначає ширину границі, наприклад, BORDER=3.

ALIGN 

Якщо атрибут ALIGN є присутнім усередині тегів <CAPTION> і </CAPTION>, то він визначає положення підпису для таблиці (зверху або знизу). За замовчуванням ALIGN=top. Якщо атрибут ALIGN зустрічається усередині <TR>, <TH> чи <TD>, він керує положенням даних в комірках по горизонталі. Може приймати значення left (ліворуч), right (праворуч) чи center (по центру).

VALIGN 

Даний атрибут зустрічається усередині тегів <TR>, <TH> і <TD>. Він визначає вертикальне розміщення даних в комірках. Може приймати значення top (нагорі), bottom (внизу), middle (по середині) і baseline (всі комірки рядка притиснуті догори).

NOWRAP 

Даний атрибут говорить про те, що дані в комірці не можуть логічно розбиватися на кілька рядків і повинні бути представлені одним рядком.

COLSPAN 

Указує, яку кількість комірок буде об'єднано по горизонталі для зазначеної комірки. За замовченням - 1.

ROWSPAN 

Вказує, яку кількість комірок буде об'єднано по вертикалі для зазначеної комірки. За замовченням - 1.

COLSPEC 

Даний параметр дозволяє задавати фіксовану ширину стовпчиків або в символах, або у відсотках, наприклад, COLSPEC="20%".

Теги форми

Тег <TEXTAREA> використовується для того, щоб дозволити користувачу вводити більш одного рядка інформації (вільний текст). От приклад використання тега <TEXTAREA>:

<TEXTAREA NAME="address" ROWS=10 COLS=50>

Москва,

Дмитровське шосе,

д.9Б, офіс 448

</TEXTAREA>

Атрибути, що використовуються всередині тега <TEXTAREA>, описують зовнішній вигляд і ім'я значення, що вводиться. Тег </TEXTAREA> необхідний навіть тоді, коли поле введення порожнє. Опис атрибутів:

NAME - ім'я поля введення;

ROWS - висота поля введення в символах;

COLS - ширина поля введення в символах.

Якщо необхідно, щоб у поле введення за замовчуванням видавався який-небудь текст, то необхідно вставити його усередині тегів <TEXTAREA> і </TEXTAREA>.

Тег <INPUT> використовується для введення одного рядка тексту або одного слова. Атрибути тега:

CHECKED - означає, що CHECKBOX чи RADIOBUTTON буде обраний.

MAXLENGTH - визначає кількість символів, що користувачі можуть ввести в поле введення. При перевищенні кількості припустимих символів браузер реагує на спробу введення нового символу звуковим сигналом і не дає його ввести. Не плутати з атрибутом SIZE. Якщо MAXLENGTH більше чим SIZE, то в полі здійснюється скролінг. За замовчуванням значення MAXLENGTH дорівнює нескінченності.

NAME - ім'я поля введення. Дане ім'я використовується як унікальний ідентифікатор поля, по якому, згодом, можна одержати дані, які поміщаються користувачем у це поле.

SIZE - визначає візуальний розмір поля введення на екрані в символах.

Хід роботи

  1.  Відкрив лабораторну роботу №2  і прочитав умову завдання.
  2.  Відкривши браузер для виходу в інтернет почав підбирати фон для мого сайту.
  3.  Потім в Adobe Photoshop виконав “нарізку зображення” щоб потім вставити його в таблицю.
  4.  Стровив файл формату html  і приступив до написання коду
  5.  Задав фон тегом <BODY BACKGROUND=" ">.
  6.  Написав заголовок сайту і додав посилання на мою Лабараторну №1.
  7.  Створи таблицю за допомогою тега <table> і інших і додав до неї  нарізку зображення”.
  8.  Нижче створив таблицю калорійності продуктів.
  9.   За допомогою різних тегів (<td>,<tr> і інші) привів її до симпатичного вигляду.
  10.   Перевірив створений сайт за допомогою браузера Google Chrome.
  11.  Перевірив посилання на ссилання.
  12.  Переконавшись у  працездатності всіх функцій зі спокійною душею продовжив грати  в Need For Speed.

HTML код

<HTML>

<body>

<HEAD><TITLE> Web - програмування </TITLE></HEAD>

<BODY BACKGROUND="http://stockarch.com/files/10/01/bokeh_background5601.jpg">

<center>

<p style="text-align: center;font-family: Monotype Corsiva ;font-size:30.0pt"><a style="color:#7fc7ff"><marquee>Лабораторна робота №2</marquee></a></p>

<p style="text-align: center;font-family: Monotype Corsiva ;font-size:15.0pt"><a style="color:#000000"><a href="LAB_1.html">Лабораторна робота №1</a></p>

<table align="center" border=5 bordercolor=breen >

<CAPTION align=bottom > блабла</CAPTION>

<tr bordercolor="#99FF66">

<td width="130px" height="130px" >

<img src="1.jpg"

</td></a>

<td width="130px" height="130px" >

<img src="2.jpg"  </tr>

</td></a>

<tr><td width="130px" height="130px" >

<img src="3.jpg"

</td></a>

<td width="130px" height="130px">

<img src="4.jpg"

</td></a>

</td>

</tr>

</table>

<p style="font-family: ''Candara'';  text-align:center;line-height:5px;font-size:25pt"><FONT COLOR=#42aaff>Таблица калорийности продуктов</p></FONT COLOR=#42aaff>

<table class="products" cellpadding="0" cellspacing="0" width="100%">

<tr class="head">

<td class="left" width="60%">Продукт</td>

<td width="10%">Ккал</td>

<td width="10%">Белки</td>

<td width="10%">Жиры</td>

<td width="10%">Углеводы</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Гречневая каша</td>

<td style="color:#FFF;">132</td>

<td style="color:#FFF;">4.5</td>

<td style="color:#FFF;">2.3</td>

<td style="color:#FFF;">25</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Гречневая каша вязкая на воде</td>

<td style="color:#FFF;">90</td>

<td style="color:#FFF;">3.2</td>

<td style="color:#FFF;">0.8</td>

<td style="color:#FFF;">17.1</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Гречневая каша из крупы ядрица</td>

<td style="color:#FFF;">101</td>

<td style="color:#FFF;">3</td>

<td style="color:#FFF;">3.4</td>

<td style="color:#FFF;">14.6</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Кукурузная крупа</td>

<td style="color:#FFF;">337</td>

<td style="color:#FFF;">8.3</td>

<td style="color:#FFF;">1.2</td>

<td style="color:#FFF;">75</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Кукурузные хлопья</td>

<td style="color:#FFF;">363</td>

<td style="color:#FFF;">6.9</td>

<td style="color:#FFF;">2.5</td>

<td style="color:#FFF;">83.6</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Манная каша на воде</td>

<td style="color:#FFF;">80</td>

<td style="color:#FFF;">2.5</td>

<td style="color:#FFF;">0.2</td>

<td style="color:#FFF;">16.8</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Манная каша на молоке</td>

<td style="color:#FFF;">98</td>

<td style="color:#FFF;">3</td>

<td style="color:#FFF;">3.2</td>

<td style="color:#FFF;">15.3</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Манная крупа</td>

<td style="color:#FFF;">328</td>

<td style="color:#FFF;">10.3</td>

<td style="color:#FFF;">1</td>

<td style="color:#FFF;">73.3</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Овсяная каша на воде</td>

<td style="color:#FFF;">88</td>

<td style="color:#FFF;">3</td>

<td style="color:#FFF;">1.7</td>

<td style="color:#FFF;">15</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Овсяная каша на молоке</td>

<td style="color:#FFF;">102</td>

<td style="color:#FFF;">3.2</td>

<td style="color:#FFF;">4.1</td>

<td style="color:#FFF;">14.2</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Овсяная крупа</td>

<td style="color:#FFF;">303</td>

<td style="color:#FFF;">11</td>

<td style="color:#FFF;">6.1</td>

<td style="color:#FFF;">65.4</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Овсяные хлопья</td>

<td style="color:#FFF;">366</td>

<td style="color:#FFF;">11.9</td>

<td style="color:#FFF;">7.2</td>

<td style="color:#FFF;">69.3</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Перловая каша рассыпчатая</td>

<td style="color:#FFF;">106</td>

<td style="color:#FFF;">3.1</td>

<td style="color:#FFF;">0.4</td>

<td style="color:#FFF;">23</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Перловая крупа</td>

<td style="color:#FFF;">320</td>

<td style="color:#FFF;">9.3</td>

<td style="color:#FFF;">1.1</td>

<td style="color:#FFF;">73.7</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Пшенная каша вязкая на воде</td>

<td style="color:#FFF;">90</td>

<td style="color:#FFF;">3</td>

<td style="color:#FFF;">0.7</td>

<td style="color:#FFF;">17</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Пшенная каша рассыпчатая</td>

<td style="color:#FFF;">135</td>

<td style="color:#FFF;">4.7</td>

<td style="color:#FFF;">1.1</td>

<td style="color:#FFF;">26.1</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Пшенная крупа</td>

<td style="color:#FFF;">348</td>

<td style="color:#FFF;">11.5</td>

<td style="color:#FFF;">3.3</td>

<td style="color:#FFF;">69.3</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Ржаные хлопья</td>

<td style="color:#FFF;">343</td>

<td style="color:#FFF;">6.4</td>

<td style="color:#FFF;">3.2</td>

<td style="color:#FFF;">82.6</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рис белый</td>

<td style="color:#FFF;">344</td>

<td style="color:#FFF;">6.7</td>

<td style="color:#FFF;">0.7</td>

<td style="color:#FFF;">78.9</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рис коричневый</td>

<td style="color:#FFF;">331</td>

<td style="color:#FFF;">6.3</td>

<td style="color:#FFF;">4.4</td>

<td style="color:#FFF;">65.1</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рис полированный</td>

<td style="color:#FFF;">330</td>

<td style="color:#FFF;">7</td>

<td style="color:#FFF;">1</td>

<td style="color:#FFF;">71.4</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рис рассыпчатый</td>

<td style="color:#FFF;">113</td>

<td style="color:#FFF;">2.4</td>

<td style="color:#FFF;">0.2</td>

<td style="color:#FFF;">24.9</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рисовая каша на воде</td>

<td style="color:#FFF;">78</td>

<td style="color:#FFF;">1.5</td>

<td style="color:#FFF;">0.1</td>

<td style="color:#FFF;">17.4</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Рисовая каша на молоке</td>

<td style="color:#FFF;">97</td>

<td style="color:#FFF;">2.5</td>

<td style="color:#FFF;">16</td>

<td style="color:#FFF;">3.1</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Ячменная каша</td>

<td style="color:#FFF;">310</td>

<td style="color:#FFF;">11.5</td>

<td style="color:#FFF;">2</td>

<td style="color:#FFF;">65.8</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Ячменная крупа</td>

<td style="color:#FFF;">324</td>

<td style="color:#FFF;">10</td>

<td style="color:#FFF;">1.3</td>

<td style="color:#FFF;">71.7</td>

</tr>

<tr>

<td class="left" style="color:#FFF;">Ячменные хлопья</td>

<td style="color:#FFF;">355</td>

<td style="color:#FFF;">9.8</td>

<td style="color:#FFF;">3.6</td>

<td style="color:#FFF;">79.4</td>

</tr>

</table>

</BLOCKQUOTE>

<a name="ex1"></a>

<p style="text-align: center;font-family: Georgia;font-size:17.0pt"><FONT COLOR=#e684e2><i> "Таблица (из лат. tabula «доска»)"</p> </center>

<p style="text-align: center;font-family: Georgia;font-size:13.0pt"><FONT COLOR=#6600ff><i>  — способ передачи содержания, заключающийся в организации структуры данных, в которой отдельные элементы помещены в ячейки, каждой из которых сопоставлена пара значений — номер строки и номер колонки. Таким образом, устанавливается смысловая связь между элементами, принадлежащими одному столбцу или одной строке. </p> </ul>

</FONT></FONT COLOR=#6600ff></p> </center>

</body>

</HTML>

Скріншоти виконаної роботи

 

Висновки

На даній лабораторній роботі вивчив синтаксис найбільш поширених тегів мови HTML, набув навиків у створені таблиць , а також  розробив власну сторінку.


 

А также другие работы, которые могут Вас заинтересовать

30692. Черты драмы и трагедии в пьесе А.Н. Островского «Гроза». Роль второстепенных персонажей в художественной структуре пьесы 13.41 KB
  Роль второстепенных персонажей в художественной структуре пьесы. Такая популярность и актуальность пьесы объясняется тем что в Грозе сочетаются черты социальнобытовой драмы и высокой трагедии. В центре сюжета пьесы конфликт чувства и долга в душе главной героини Катерины Кабановой. Но еще Добролюбов указывал на то что на протяжении всей пьесы читатели думают не о любовной интриге а обо всей жизни.
30693. Анализ стихотворения Шепот, робкое дыханье 13.34 KB
  Любимая пора влюбленных ночь: Свет ночной ночные тени Стихотворение начинается с появления самих героев: Шепот робкоедыханье. И не случайно со слова шепот ведь ночью нельзя кричать тем более насвидании. Чувства героев развиваются от шепота и робкого дыханья к рядуволшебных изменений милого лица.
30694. «Отцы и дети» в одноименном романе И.С. Тургенева 14.14 KB
  Все эти новомодные веяния вызывают у Кирсанова возмущение и гнев. Все слова Кирсанова лишь слова так как не подкреплены никаким действием. Базарову человеку стремительному деятельному претит все из чего состоит Кирсанов.В финале романа мы узнаем что Кирсанов переехал в Германию и что сами немцы принимают его за англичанина.
30695. Типы носителей информации и их особенности 109.15 KB
  В современном обществе, где информация проблема носителей информации встала очень остро, так как объемы информации, генерируемые пользователями, возрастают в геометрической прогрессии.
30696. Мотив дороги в произведениях отечественной классики 19 века 25.31 KB
  Есенина Мотив дороги звучит в двух значительнейших произведениях 19 века. Образ дороги в этом произведении не выходит на первый план. Образ дороги здесь традиционный символ жизненного пути.
30697. Стихотворное новаторство В.В. Маяковского. Чтение наизусть и анализ стихотворения «А вы могли бы?» 12.76 KB
  Чтение наизусть и анализ стихотворения А вы могли бы. Тема этого стихотворения желание и способность лирического героя изменить в корне обыденную ни чем не примечательную жизнь причем сделать это так как никто другой и не подумал бы. Идея же заключается в названии стихотворения и в последних строках:А вы ноктюрн сыграть могли быНа флейте водосточных трубКаждая строка этого стихотворения вызов каждое слово экспрессивно и ярко; при своей лаконичности стихотворение оставляет более глубокое впечатление чем многие более длинные...
30698. Психологизм изображения внутреннего мира личности в лирике А.А.Ахматовой (на примере 3–4 стихотворений по выбору экзаменуемого). Земное и вечное в стихотворении «Приморский сонет» 15.95 KB
  Облик героини поэзии Ахматовой предстает в житейской простоте но в нем заключается пафос сильной личности. Ее лирическая героиня не отражает персональной судьбы Ахматовой а отражает проявление женской доли женского голоса. Предметный мир воспринимается уже в ином виде: три ступеньки кажутся вечностью любимый прием Ахматовой оксюморон темный дом свечи горевшие равнодушножелтым огнем. То в образе лирической героини проступают черты самой Ахматовой которая не верит что все происходит именно с ней насмешницей любимицей всех...
30699. Стихотворение А. Блока «Незнакомка» 12.25 KB
  Блока Незнакомка Тема страшного мира звучит в третьем томе стихотворений А. Это лишь внешняя видимая сторона страшного мира. При этом все зримые образы материального мира у Блока обретают символический подтекст. Повествование о ресторанной встрече превращается в рассказ о человеке угнетенном пошлостью окружающего мира его стремлении освободиться от этого.
30700. АНАЛИЗ 1 ГЛАВЫ 1 ЧАСТИ «МАСТЕРА И МАРГАРИТЫ» 20.62 KB
  Патриавшие пруды это центр Москвы давно пользующийся дурной славой Время года месяц: Весна май Время суток: Небывало жаркий закат странности возникающие в это время на Патриарших: одновременная икота литераторов; отсутствие в жаркое время отдыхающих под липами; появление прозрачного человека в клетчатом пиджаке; чувство необоснованного страха появившегося у Берлиоза...