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


 

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

35818. Экономическая теория (микроэкономика, макроэкономика) 1.42 MB
  Функция индивидуального спроса и предложения. Функция спроса и предложения определяет общее направление их изменения в зависимости от цены на товар но индивидуальные различия в характере и форме этого изменения могут быть весьма существенными. Чем более полого выглядит кривая спроса тем сильнее зависимость объема спроса от изменения цены. В случае если кривая спроса занимает горизонтальное положение d4 эта зависимость становится бесконечно большой.
35819. Макроэкономические показатели, их статистические и функциональные взаимосвязи 4.84 MB
  Так как ВВП измеряет объем национального годового производства он служит источником роста национального богатства страны которое представляет собой совокупную стоимость имущества активов принадлежащего частным физическим юридическим лицам а также государству. капитала D косвенные налоги Ткосв Метод добавленной стоимости ДС = В С В выручка С сырье и материалы Поскольку ВВП представляет собой денежную оценку произведенного годового объема производства получатся разные данные в...
35820. Строительные конструкции шпаргалка 4.1 MB
  Незавершенное производство заготовки полуфабрикаты детали изделия не прошедшие все стадии производства; расходы будущих периодов стоимость расходов производимых в данный период но подлежащих оплате в будущем. Вариант с длинномерными настилами позволяет при заданной высоте помещения уменьшить общую высоту и объем здания площадь ограждающих конструкций уменьшить расходы на отопление и вентиляцию здания. Расходы на организацию и управление включают накладные расходы. Строительным организациям в качестве типовой...
35823. Будівельні робітники, їх професії, спеціальність, кваліфікація 2.5 MB
  З метою раціонального використання праці будівельників потрібно щоб кожен із них виконував лише ті роботи які властиві його фаху спеціальності та кваліфікації.Калькуляція трудових витрат її призначення методи розрахунку де Нв п норма витрат праці; V обсяг виконаних робіт. Норми витрат праці встановлюють у вигляді норм часу і виробітку. Норма часу Нч це час який встановлено на виготовлення одиниці продукції робітником відповідного фаху і кваліфікації за умов правильної організації праці й виробництва.
35824. Дискретная математика. Тестовые вопросы к экзамену 2.41 MB
  Функции алгебры логики. Булевы функции одной и двух переменных. Функциями алгебры логики или булевыми функциями называются а где б в Множество всех булевых функций от n переменных обозначают а б в г Булева функция существенно зависит от переменной xi если существует такой набор значений...
35825. Економічний аналіз 709.5 KB
  Зміст експлуатаційної фази життєвого циклу проекту. Концепція беззбитковості інвестиційного проекту. Мета завдання та зміст технічного аналізу проекту. Методологія аналізу динамічності проекту.
35826. Среда функционирования предприятия. Факторы внешней и внутренней рыночной среды и их влияние на эффективность функционирования предприятия. Конкурентоспособность предприятия и продукции 801 KB
  От качества его разработки в значительной мере зависит успех реализации проекта. Календарный план подписывается главным инженером проекта и заказчиком как согласовывающей инстанцией. Расчет показателей экономической эффективности инвестиционного проекта NPV PI IRR MIRR PP Проект связанный с реализацией полного цикла вложения инвестиций от начала вложения капиталов до завершения работ называется инвестиционным. По масштабам чаще всего масштаб проекта определяется размером инвестиций: малые проекты действие которых...