2 Таблиці та основні елементи форм в html-документі
2.1 Мета роботи
Вивчення основ побудови таблиць в HTML-документі та їх використання при завданні структури web-сторінок.
2.2 Вказівки до організації самостійної роботи студентів
Під час виконання роботи необхідно ознайомиться з літературою [1 – 3], матеріалами конспекту лекцій і інформацією, наведеної в підрозділі 2.4.
2.3 Опис програмного продукту, використовуваного для виконання лабораторної роботи
Для виконання лабораторної роботи використовується ПЕОМ, операційна система Windows 2007, Web- браузер Internet Explorer / Opera / Google Chrome, текстовий редактор.
2.4 Порядок виконання роботи та вказівки до її виконання
2.4.1 Розглянемо деякі основні теоретичні положення, необхідні для виконання даної лабораторної роботи
Розберемо приклад синтаксису для того, щоб у документі зліва на сірому фоні під його назвою вивести посилання червоним кольором (рис. 2.1).
<HTML>
<Head> <H1 Align="Center"> <font color="blue"> Харьковский национальный университет радіоэлектроники </H1>
<Title> Название документа в окне браузера </Title>
<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Главная</A></H2>
<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Информация для абитуриентов</A></H2>
<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Перечень специальностей</A></H2>
<A HREF="Laba 3.html"><A HREF="Document 2.html"><H2 align="left"><font color="#FF0000">Контакты</A></H2>
</Body>
</HTML>
Рисунок 2.1 – Вікно браузера зі створеним web-документом
Створення таблиць у документі HTML.
Використовуючи таблиці, можна зробити акуратну компоновку інформації в межах Веб-сторінки, домогтися точного розташування того чи іншого фрагмента сторінки, будь то текст, графіка або посилання.
Для створення таблиці служить тег <TABLE>. Як відомо таблиця складається з рядків, а рядки, в свою чергу складаються з комірок. Для визначення рядків служить тег <TR>, для створення осередків – <TH>, <TD>.
Тег <TH> використовується для створення осередків з заголовками.
Тег <TD> – для звичайних осередків з даними.
Приклад створення таблиць (рис. 2.2).
Рисунок 2.2 – Вікно з прикладом коду (ліворуч) та створеної таблиці (праворуч)
Обрамлення таблиці в документі html.
Для того, щоб зробити видимими межі таблиці, служить атрибут BORDER тегу <TABLE>.
Визначаючи рамку таблиці, треба вказати товщину її зовнішніх ліній в пікселях. Щоб задати товщину розмежовують ліній усередині таблиці, необхідно скористатися атрибутом CELLSPACING.
За замовчуванням браузер відображає рамку таблиці темно-сірим кольором. Щоб змінити колір рамки треба застосувати атрибут BORDERCOLOR. Приклад представлений на рис. 2.3.
Рисунок 2.3 – Вікно з прикладом коду (ліворуч) та створеної таблиці з обрамленням (праворуч)
Заголовок таблиці документа html.
Для створення заголовка таблиці служить тег <CAPTION>.
За замовчуванням браузер розполога заголовок таблиці над нею по центру. За допомогою атрибута ALIGN із значенням bottom можна розмістити заголовок під таблицею.
Слід сказати, що стандарт HTML не дозволяє ставити одній таблиці кілька заголовків (рис. 2.4).
Рисунок 2.4 – Вікно з прикладом коду (ліворуч) та створеної таблиці із заголовком (праворуч)