Структура html-документа
Всі HTML-документи мають загальну структуру (рис. 1). Вони починаються й завершуються тэгом <HTML>. Усередині цього блоку є 2 блоки. Перший - блок службової інформації між тэгами <HEAD> (загалом кажучи, він не є обов'язковим, його відсутність не вплине на те, що ми побачимо у вікні оглядача), а другий - блок, що містить основну частину HTML-документа, - укладений між тэгами <BODY>.
Рис. 1. Структура HTML-документа
Теги службової інформації:
<HEAD> - починає блок службової інформації;
</HEAD> - завершує блок службової інформації;
<TITLE> - починає блок інформації, що буде відображатися в рядку заголовка оглядача;
</TITLЕ> - завершує блок інформації, що буде відображатися в рядку заголовка оглядача;
<META> - містить службову інформацію.
Атрибути тега <META>
Кожен тег < META > містить пару атрибутів NAME й CONTENT, що визначають відповідно тип даних і зміст.
Приклади:
□ < META NAME=keywords CONTENT="cлoвo l, слово2, ..." > визначає набір ключових слів для пошуку, що полегшує роботу пошуковим машинам, а творцеві сайту дає більше шансів, що його інформація буде знайдена;
□ < META NAME=description CONTENT = "зміст сторінки" > описує короткий зміст сторінки;
< META NAME=author CONTENT="Ім'я автора" > указує ім'я автора;
< META HTTP-EQUIV=refresh CONTENT=5
URL=http://www.upm.ipschool.spb.ru>
через 5 секунд автоматично завантажить сайт із зазначеною адресою, інтервал часу й адресу задаємо за своїм розсудом.
Для зручності можна вставити в HTML-код коментарі (для того хоча б, щоб легше потім було розбиратися в ньому й вносити зміни). Текст, коментарю вставляється в кутові дужки, після першої кутової дужки ставиться знак оклику й два тире. Перед закриваючою кутовою дужкою потрібно знову поставити два тире. От так:
<!--Текст коментарю-->
Всі теги можна умовно об'єднати в групи по їхньому призначенню: для форматування тексту; вибору фону; для вставки таких об'єктів, як малюнки відео, звук; для створення списків та таблиць; для організації посилань у межах одного документа (посилання на мітки) і на інші документи; для поділу сторінки на частині (фрейми); для створення елементів інтерактивності.
Форматування тексту та HTML-документу
Форматування тексту
Спробуємо створити просту Web-сторінку, що містить тільки картинки й пояснювальний текст до них. Це, на перший погляд, просто, але форматують текст в HTML-документі не так, як у звичайному текстовому документі.
Теги фізичного форматування тексту
Теги фізичного форматування визначають формат відображення вказаного в них фрагмента тексту у вікні браузера.
Щоб відформатувати текст, вибрати розмір шрифту (кегль), виділення (гарнітуру), його кольори й т.д., необхідно скористатися спеціальними тегами. Ці теги парні і їхня дія поширюється на фрагмент тексту, укладений між відкриваючими і закриваючими тегами.
От ці теги:
□ <В> - напівжирний шрифт;
</В> - скасування напівжирного шрифту;
□ <I> - курсив;
</I> - скасування курсиву;
□ <ТТ> - відображає текст моноширинним шрифтом
<ТТ> - скасування моноширинного шрифту
□ <U> - підкреслення;
</U> - скасування підкреслення;
□ <BIG> - збільшення шрифту щодо поточного;
</BIG> - скасування збільшення шрифту щодо поточного;
□ <SMALL> — зменшення шрифту щодо поточного;
</SMALL> — скасування зменшення шрифту щодо поточного;
□ <SUP> — текст зсовується нагору (верхній індекс);
</SUP> — скасування зсуву;
□ <SUB> — текст зсовується вниз (нижній індекс);
</SUB> — скасування зсуву.
□ <BLINK>- відображає миготливий текст
</BLINK>- скасовує миготливий текст.
Перераховані теги не мають атрибутів, а от наступний тег має кілька атрибутів.
□ <FONT> - зміна параметрів шрифту;
</FONT> - скасування параметрів шрифту.
Атрибути тега <FONT>:
COLOR = назва кольорів - зміна кольору тексту.
Наприклад:
<FONT COLOR= red> текст </FONT>
приведе до виводу тексту червоними кольорами.
Як показано в табл. 1, значенням атрибута може бути англійська назва кольорів. Але якщо ми хочемо використати не певні кольори, а відтінок, англійська назва якого ми не знаємо, можна записати замість назви кольорів його шістнадцятирічний код. У додатку A приводяться таблиці таких кодів і відповідні їм кольори.
Таблиця 1. Атрибути тега <FONT>
Значення атрибута |
Кольори |
Значення атрибута |
Кольори |
red |
Червоний |
green |
Зелений |
black |
Чорний |
maroon |
Темно-червоний |
olive |
Маслиновий |
navy |
Синій |
aqua |
Морської хвилі |
purple |
Фіолетовий |
teal |
Зеленувато-синій |
lime |
Вапняний |
fuchsia |
Яскраво-малиновий |
silver |
Сріблистий |
white |
Білий |
yellow |
Жовтий |
blue |
Синій |
grey |
Сірий |
FACE = назва шрифту - зміна типу шрифту. Наприклад:
<FONT FACE = Arial> текст </FONT>
приведе до виводу тексту шрифтом Arial.
SIZE = pозмір шрифту — зміна розміру шрифту фрагмента тексту, використовується в середині рядка, тому що після закінчення своєї дії не розбиває рядок. Наприклад:
<FONT SIZE = 4> текст</FONT>
Атрибути можуть перераховуватися через пробіл у довільному порядку. Наприклад:
<FONT SIZE=4 FACE=Times New Roman COLOR=Black > текст </FONT>
□ <BASEFONT> используется для указания размера, типа и цвета шрифта,
используемого в документе по умолчанию.
Теги логічного форматування тексту
Теги логічного форматування позначають (своїми іменами) структурні типи своїх текстових фрагментів, такі, наприклад, як програмний код (тег <CODE>), цитата (тег <CITE>), абревіатура (тег <ABBR>) і т.д.
□ <ABBR> - відмічає свій текст як абревіатуру
□ <ACRONYM>- також, як і тег <ABBR>, використовується для відмітки абревіатур.
□ <CITE> використовується для відмітки цитат або назв книг і статей
посилань на інші джерела і т.д. Браузерами такий текст зазвичай виводиться курсивом.
□ <CODE> відзначає свій текст як невеликий фрагмент програмного коду. Як правило, відображається моноширинним шрифтом.
□ <DEL> може застосовуватися для позначення тексту, який буде знищено (виглядає як закреслений текст).
□ <INS> може застосовуватися для надання смислового акценту матеріалу, який щойно з’явився на сторінці (текст з ознакою підкреслювання).
□ <DFN> відзначає свій текстовий фрагмент як визначення. Відображується за умовчанням курсивом.
□ <ЕМ> використовується для виділення важливих фрагментів тексту. Браузери зазвичай відображають такий текст курсивом.
□ <STRONG>, як правило, використовується для виділення важливих фрагментів тексту. Браузери зазвичай відображають такий текст напівжирним шрифтом.
□ <VAR> відзначає імена змінних програм. Зазвичай такий текст відображається курсивом.
□ Створення блоків цитат. Використовуються для створення блоків цитат на фоні іншого тексту дескриптори <BLOCKQUOTE> </BLOCKQUOTE> та в середині тексту <Q> </Q>. Дескриптор <Q> </Q> багатьма браузерами не підтримується.
□ Використання моноширинних шрифтів
Для відображення моноширинних шрифтів також використовуються дескриптори <TT>, <CODE>, <KBD>, <SAMP>.