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


 

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

803. Растения, содержащие алкалоиды 232.17 KB
  Алкалоиды с азотом в боковой цепи - эфедрин из различных видов эфедры, сферофизин из травы сферофизы солонцовой, колхицин и колхамин из клубнелуковиц безвременников. Алкалоиды с конденсированными пирролидиновыми и пиперидиновыми кольцами (производные тропана) - гиосциамин, атропин, скополамин из красавки, белены, дурмана.
804. Теория и особенности познания 235.5 KB
  Познание как предмет философского анализа. Структура знания. Чувственное и рациональное познание. Теория истины. Понятие как основная форма рационального познания.
805. Экоинформационные системы как инструмент комплексного маниторинга окружающей среды 284.5 KB
  История возникновения экоинформатики. Задачи решаемые экоинформационной системой. Информационное обеспечение подготовки и принятия управленческих решений по охране природы и здоровья человека. Обмен информации о состоянии окружающей среды об других экоинформационных системах.
806. Радиальная скорость 234.5 KB
  Несущая частота сигнала наземного передающего пункта. Релятивистские частотно-фазовые соотношения между параметрами сигналов. Геоцентрические радиус-векторы передающего пункта, космического аппарата и приемного пункта .
807. Зоогигиена с проектированием и строительством животноводческой фермы 230.5 KB
  Роль конструктивных решений животноводческих помещений в формировании оптимального микроклимата и комфортных условий для животных. Характеристика площадки для строительства. Состав основных производственных зданий. Взаимное расположение построек на участке.
808. Исследование линейного четырехполюсника 222.5 KB
  Измерение Z-параметров линейного пассивного четырехполюсника и экспериментальные исследования по косвенной проверке результатов измерений. Схема подключения приборов для измерения параметров Z21 и Z12.
809. Проектирование механического привода конвейера для транспортирования сухих сыпучих материалов 182 KB
  Определение мощности и выбор электродвигателя. Определение общего передаточного отношения привода и разбивка передаточного числа редуктора по ступеням. Определение вращающих моментов на валах редуктора. Проверочный расчет передач на контактную прочность. Уточненный расчет промежуточного вала.
810. ППП Евфрат 231.5 KB
  Удобный инструмент для адаптирования системы конкретно под нужды и структуры организации, позволяет создать полный маршрут движения определенного типа документа, что в процессе работы позволяет экономить время и ресуры, затрачиваемые на обработку документа.
811. Сравнительный анализ требований зарубежных (национальных) и отечественных нормативных и технических документов 300.5 KB
  Сравнительный анализ методов контроля обсадных труб по ГОСТ 632-80, документам API. Попробуем сравнить российские национальные стандарты со стандартами Американского института нефти (API) на примере стандартов API 5CT/ISO 11960:2001 и ГОСТ 632-80.