1063

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

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

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

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

Украинкский

2013-01-06

528 KB

22 чел.

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

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

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

Звіт

З лабораторної роботи №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, набув навиків у створені таблиць , а також  розробив власну сторінку.


 

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

39165. Анализ конкурентоспособность в процессе жизненного цикла предприятия 312 KB
  Эта концепция используется для создания и сбыта продукции разработки стратегии маркетинга с момента поступления товара на рынок до его снятия с рынка. Это анализ возможностей производства продукции. Выбранная тема актуальна для данного дипломного проектирования потому что необходимо анализировать конкурентоспособность на каждом этапе жизненного цикла товара для организации эффективного сбыта продукции пользующейся спросом на рынке. Это анализ возможностей производства продукции.
39166. Исследование коронного разряда в плотном газе 90.7 KB
  Коронный разряд является самостоятельным разрядом в сравнительно плотном газе. Если к двум электродам между которыми находится газовый промежуток приложить электрическое поле то при определенной разности потенциалов между электродами которую назовем критической и обозначим через...
39168. Фактори, чинники та критерії конкурентоспроможності товару 109.5 KB
  Найчастіше під конкурентоспроможністю товару мають на увазі: властивість сукупність властивостей товару та його сервісу яка характеризується ступенем реального або потенційного задоволення ним конкретної потреби порівняно з аналогічними товарами представленими на цьому ринку; характеристику товару що відображає його відмінність від товаруконкурента за ступенем відповідності конкретній суспільній потребі та за витратами на її задоволення; спроможність товару відповідати вимогам даного ринку у період що аналізується; здатність...
39169. Конституционное право зарубежных стран 4.56 MB
  В учебнике освещаются основные понятия и институты зарубежного конституционного права раскрываются его предмет система источники. Предмет источники и система конституционного права зарубежных стран. Предмет конституционного права зарубежных стран. Источники конституционного права зарубежных стран.
39170. Базова апаратна конфігурація 68.75 KB
  Персональний компютер - універсальна технічна система. Його конфігурацію (склад устаткування) можна гнучко змінювати в міру необхідності. Тим не менш, існує поняття базової конфігурації, яку вважають типовою. У такому комплекті комп'ютер зазвичай поставляється. Поняття базової конфігурації може змінюватися. В даний час в базовій конфігурації розглядають чотири пристрої
39171. Основные положения по нормоконтролю и предварительной защите дипломных работ 729 KB
  Общие требования кафедры к содержанию и структуре дипломной работы 10 4.Общие требования кафедры к оформлению дипломной работы 11 5.Образцы оформления и требования к оформлению отдельных фрагментов дипломной работы: 13 титульный лист образец 1 14 реферат...
39172. ДЕРЖАВНЕ ПРАВО ЗАРУБІЖНИХ КРАЇН 3.29 MB
  Тимченко ДЕРЖАВНЕ ПРАВО ЗАРУБІЖНИХ КРАЇН Рекомендовано Міністерством освіти і науки України як навчальний посібник для студентів КИЇВ2005 вищих навчальних закладів УДК342187075. Б 86 Державне право зарубіжних країн: Навчальний посібник. 504 с ISBN 9663640545 Навчальний посібник являє собою комплекс навчальнометодичних матеріалів до курсу Державне конституційне право зарубіжних країн який є обов'язковим для викладання у вищих юридичних закладах IIIIV рівня акредитації. 2005 Центр навчальної літератури 2005...
39173. Аудит финансовых результатов предприятий торговли ООО «Рассвет» 513.5 KB
  Прибыль конечный финансовый результат слагается из финансового результата от реализации продукции работ услуг основных средств и иного имущества предприятия и доходов от прочих операций уменьшенных на сумму расходов по этим операциям. Они более полно чем прибыль отражают окончательные результаты хозяйствования потому что их величина показывает соотношение эффекта с наличными или использованными ресурсами. В результатах деятельности предприятия заинтересованы учредители предприятия которые получают дивиденды инвесторы...