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


 

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

41012. Медичні та соціальні проблеми вживання психоактивних речовин 74.5 KB
  Крім цього у хворих які зловживають психоактивніми речовинами набагато частіше розвиваються ураження шлунковокишкового тракту панкреатити гастрити пептичні виразки шлунка й ін. Одним з визначальних завдань наркології є лікування хворих на алкоголізм наркоманію та токсикоманію. Оскільки зловживання алкоголем у хворих на алкоголізм є безпосереднім проявом патологічного потягу до алкоголю його клінічні форми теж належать до істотних характеристик захворювання. Висока смертність хворих на наркоманії токсикоманію обумовлена...
41013. Психологічні особливості проходження інтервю та самопрезентаціявості проходження інтервю та самопрезентація 81.5 KB
  Інтервю з роботодавцями – це важливий етап при влаштуванні на роботу. Інтервю є найбільш широко використовуваним методом відбору. До інтервю зазвичай допускається 20-30% від загального числа кандидатів, що залишилися після попередніх етапів відбору.
41014. РАННЄ ХРИСТИЯНСТВО 43.5 KB
  Ісус Христос засновник християнства. Ісус Христос: свідоцтва про життя. Засновником нової релігії виступив Ісус Христос. Христос згадується у Таціта Светонія Плінія Молодшого а також у іудейського історика Иосифа Флавія.
41015. СЕМАНТИКА ПРЕДЛОЖЕНИЯ 80 KB
  Пропозиция это модель называемого предложением объективного содержания воплощение некоего положения дел в действительности в отвлечении от всех субъективных смыслов и от той проекции которую придаёт ему та или иная формальная организация. Пропозиция отражает структуру события ситуации. Таким образом каждая пропозиция являясь моделью ситуации имеет свою структуру вершиной которой выступает предикат. Пропозиция имеет в языке разные формы воплощения.
41016. Специфіка історичного розвитку української культури 34 KB
  Автохтонні джерела української культури 2. Самодостатні історичні типи української культури. Автохтонні джерела української культури Коріння української культури стародавнє але надзвичайно міцне.
41017. Аналіз фінансового стану підприємства 160.5 KB
  Значення завдання та джерела інформації для аналізу фінансового стану підприємства. Коефіцієнти фінансової стійкості підприємства їх економічний зміст методи розрахунку та аналізу. Значення завдання та джерела інформації для аналізу фінансового стану підприємства Фінансовий стан підприємства це його здатність фінансувати свою діяльність.
41018. Витоки української культури 65.5 KB
  Антропологічні типи українців Структурні типи української нації.Які є атропологічні типи українців Які є соціопсихічні типи українців
41019. САМОВИХОВАННЯ, САМОПІЗНАННЯ І САМОДІАГНОСТИКА - ОСНОВА ФОРМУВАННЯ ПРОФЕСІОНАЛІЗМУ ВЧИТЕЛЯ 74 KB
  Він має постійно вчитися вдосконалюючи свої знання і вміння розвиваючи здібності формуючи позитивні людські якості. В процесі самодіагностики вивчаються : Виховна діяльність педагога; Індивідуальний стиль педагогічного спілкування і керівництва; Поведінка в складних або конфліктних ситуаціях; Культура розумової праці і самовдосконалення; Авторитет у колег учнів батьків; Рівень володіння педагогічними вміннями; Знання педагогічної техніки технології та методики індивідуальної педагогічної взаємодії; Характер і причини...
41020. ШЛЯХИ ФОРМУВАННЯ ПРОФЕСІНАЛІЗМУ ВЧИТЕЛЯ (ЯК СТАТИ ВЧИТЕЛЕМ) 127 KB
  Прийоми запамятовування. Але менше часу витрачається на пусті спроби щось запамятати осмислити. Історія не знає людей які рівною мірою можуть запамятовувати абсолютно все. Хтось відзначається памяттю на обличчя але важко запамятовує хронологічні дати хтось краще запамятовує числа або слова.