Лабораторна робота №1 “ Вивчення структури побудови HTML сторінок, базові теги. ”
Ціль. Створення простої Web сторінки з використанням списків, таблиць, гіперпосилань.
1. Обов'язкова структура документа.
При побудові будь-якої HTML сторінки важливо знати її структуру, що в основному складається з елемента верхнього рівня HTML, розділу HEAD, зовнішнього заголовка TITLE і власне кажучи тіла документа BODY.
1.1.Html - елемент верхнього рівня
Ціль
По суті, файл HTML у цілому є елементом HTML. Звичайно, початковий і кінцевий теги не обов'язкові
Основний синтаксис
<HTML> заголовок і тіло документа </HTML>
1.2. HEAD
Почнемо з найпростішого HTML документа, що містить тільки простий текст Добрий вечір. У HTML файлі змісту обов'язково повинний передувати розділ HEAD, який мінімально може складатися з двох конструкцій. Тоді код HTML можна представити так:
<HTML> <HEAD> <TITLE> Добрий вечір </TITLE> </HEAD>
<BODY> Добрий вечір </BODY> </HTML>
В результаті на екрані броузера з'явиться фраза Добрий вечір
1.3. Title - "зовнішній" заголовок (титул)
Ціль
Для завдання обов'язкового "зовнішнього" заголовка документа.
Основний синтаксис
<TITLE>послідовність символів</TITLE>
Приклади
<TITLE>Документ</TITLE>
1.4. Body (тіло) - тіло документа
Ціль
Основна структура документа HTML завжди складається з заголовка і тіла. Немає необхідності явно поміщати тіло в BODY елемент, однак роблячи так, можна специфікувати атрибути, що впливають на представлення документа в цілому (наприклад, установити фонове зображення чи колір).
Основний синтаксис
<BODY>тіло документа</BODY>
Можливі атрибути (Немає в HTML 2.0!)
ім'я атрибута |
можливі значення |
зміст |
BGCOLOR |
Кольорова специфікація |
фоновий колір документа |
специфікація |
Кольорова специфікація |
колір тексту документа |
LINK |
Кольорова специфікація |
колір невідвіданого гіпертекстового зв’язку |
специфікація |
Кольорова специфікація |
колір для відвіданого гіпертекстового зв’язку |
ALINK |
Кольорова спеціфікація |
колір для активного гіпертекстового зв’язку; використовується для виділення тексту зв'язку на момент, коли користувач натиснув на зв'язок |
BACKGROUND |
URL |
URL фонового образу |
Приведений нижче приклад показує використання приведених вище основних тегів, і атрибутів тега BODY.
<HTML> <HEAD> <TITLE> Приклад </TITLE> </HEAD>
<BODY
BGCOLOR=AQUA
TEXT="#848484"
LINK=RED
VLINK=PURPLE
ALINK=GREEN
>
<H1>Документ приклада</H1>
<P> Цей документ написань
<A HREF="http://www.demon.com”>demon.com </A>.
</P>
</BODY>
</HTML>
Р
ис.
1.1. Приклад у броузері.
2. Організація змісту - заголовки (headings), абзаци (paragraphs), списки (lists)
Як правило, Ваш документ складається з частин, що, у свою чергу, теж поділяються на частині і т.д. У HTML такий поділ робиться з використанням заголовків різного рівня. Частини самого нижнього рівня в цій ієрархії складаються з одного чи декількох абзаців. На додаток до простих абзаців і деяких спеціальних видів абзаців HTML 3.2 підтримує списки і таблиці, які можна представити, як подібні до абзаців. Внутрішня структура абзаців і подібних їм елементів складається з тегів текстового рівня. /1/