2. Структура веб-сторінки та її об’єкти
Web-сторінки мають вигляд звичайних текстових документів, в які введено теги (дескриптори) для форматування контенту. При відображені таких документів браузером самі теги не відображаються, проте впливають на спосіб відображення контенту. За допомогою тегів текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо.
Наприклад, порівняємо вигляд головної сторінки сайта ukr.net та її код мовою HTML.
3. Основні теги мови html
Тег – це інструкція браузеру, яка вказує спосіб відображення тексту. Тег завжди починається знаком <, а закінчується знаком >. Ці символи ще називають відкриваючими та закриваючими тегами. Існує два типи тегів: парні та непарні.
Для опису структури HTML-файлу використовують 4 парних теги:
<HTML>
<HEAD>
<TITLE>
Найпростіший, вірно складений документ
</TITLE>
</HEAD>
<BODY>
Цей текст буде відображуватись на екрані
</BODY>
</HTML>
<HTML></HTML> - вказує браузеру, що далі слідує HTML-файл. Цей тег ніби „обрамлює” документ – увесь текст повинен знаходитись всередині цього тегу.
Далі потрібно розбити документ на дві частини – заголовок і власне текст.
<HEAD></HEAD> - всередині цього тега повинен знаходитись заголовок документа, який складається з декількох частин, основною з яких є заголовок вікна.
<TITLE></TITLE> - тег заголовку вікна. Він пишеться всередині тега HEAD.
<BODY></BODY> - всередині цього тега пишеться те, що буде доступним в області перегляду браузера. Цей тег може мати декілька параметрів, які описують колір фону вікна перегляду, малюнок у ньому, колір тексту і т.д.
Наприклад, запишемо даний текст в програмі Блокнот, збережемо файл під іменем сторінка.html, закриємо файл, відкриємо файл одним із браузерів.
4. Оформлення тексту, створення списків та заголовків
Тег <BODY> має велику кількість атрибутів, важливих для визначення загального виду документа. Основні з цих атрибутів подано в таблиці.
Атрибут |
Призначення |
ALINK |
Визначає колір, яким виділяється активне гіперпосилання |
BACKGROUND |
Вказує URL зображення, яке слід використовувати як фон документа |
BGCOLOR |
Визначає колір фону документа |
LINK |
Визначає колір гіперпосилання, яке не було «використане» |
TEXT |
Визначає колір тексту документа |
VLINK |
Визначає колір гіперпосилання, яке було «використане» |
Приклади:
Чорний текст на синьому фоні
|
Білий текст на синьому фоні
|
<HTML> <HEAD> <TITLE> Сторінка з фоном </TITLE> </HEAD> <BODY BGCOLOR=”blue”> Чорний текст на синьому фоні </BODY> </HTML>
|
<HTML> <HEAD> <TITLE> Сторінка з фоном </TITLE> </HEAD> <BODY BGCOLOR=”blue” TEXT="white"> Білий текст на синьому фоні </BODY> </HTML> |
Запишемо даний текст в програмі Блокнот, збережемо файли з розширенням .htm, закриємо файли, відкриємо файли одним із браузерів.
Основним елементом HTML-файлу є абзац. Для формування абзаців використовують непарні теги:
Тег |
Призначення тегу |
<P> |
Цей тег ставиться в кінці абзацу |
<BR> |
Текст, що йде після цього тегу, починається з нового рядка |