Засади проектування HTML-сторінок

У загальному випадку HTML документ розбитий на заголовок < HEAD> і тіло < BODY>

Заголовок призначений для розміщення службової інформації про сторінку, вміст цього тегу не видно на екрані.

Тіло документа призначено для розміщення в ньому форматованого тексту, медіа-контенту та ін.

Вся видима інформації міститься всередині блоку < BODY>

Атрибути блоку:

BGCOLOR Визначає колір фону сторінки;

TITLE Цей атрибут дозволяє виводити спливаючу підказку;

TEXT Визначає базовий колір тексту в документі;

LINK Визначає колір гіперпосилання в документі;

ALINK Визначає колір підсвічування гіперпосилання в момент натискання;

VLINK Визначає колір відвіданого посилання;

BGPROPERTIES Цей атрибут задає властивості фонового зображення;

BACKGROUND Визначає зображення і заливає цим зображенням фон сторінки.

Заголовки визначають початок розділу документа, є 6 рівнів від < H1> до < H6>

Для виділення параграфів використовується тег < P>, його атрибут ALIGHT призначений для вирівнювання тексту по центру (center), по правому (right) чи лівому (left) краю, по ширині (justify)

Теги, що управляють формою відображення:

Тег Значення;

< I>...< / I> Курсив (Italic);

< B>...< / B> Посилення (Вold);

< TT>...< / TT> Телетайп;

< U>...< / U> Підкреслення;

< S>...< / S> Перекреслений текст;

< BIG>...< / BIG> Збільшений розмір шрифту;

< SMALL>...< / SMALL> Зменшений розмір шрифту;

< SUB>...< / SUB> Підрядкові символи;

< SUP>...< / SUР> Надрядкові символи.

Ці теги допускають вкладеність, тому всі вони мають тег початку і кінця. При використанні таких тегів слід пам'ятати, що їх відображення залежить від настройок програми-інтерфейсу користувача, які можуть і не співпадати з налаштуваннями програми-розробника гіпертексту.

Теги, що характеризують тип інформації

< EM>...< / EM> друкарське посилення;

< CITE>...< / CITE> Цитування;

< STRONG>...< / STRONG> Посилення;

< CODE>...< / CODE> Відображає приклади коду;

< SАМР>...< / SАМР> Послідовність літералів;

< КВD >...< / КВD> Приклад введення символів із клавіатури;

< VAR>...< / VAR> Мінлива;

< DFN>...< / DFN> Визначення;

< Q>...< / Q> Текст, укладений у подвійні лапки.

Прикладом найпростішої HTML-сторінки є код наступного виду

< HTML>

< HEAD>

< TITLE> Найпростіший документ < / TITLE>

< / HEAD>

< BODY TEXT=#0000ff BGCOLOR=#f0f0f0>

< H1> Приклад простого документа < / H1>

< HR>

Форми HTML-документів

< UL>

< LI> Класична

< LI> Фреймова

< / UL>

< HR>

< / BODY>

< / HTML>

Така сторінка має наступній вигляд

Посилання задаються за допомогою якорів типу

< A HREF=" https://www.google.com" > посилання на сайт < / A>

при прописування адрес на локальні джерела (картинки, посилання на сусідні сторінки) можна використовувати як зворотну скісну риску " \", так і просте косу риску " /", але краще використовувати просто " /".

Наприклад, посилання на сторінку, що знаходиться в тій же папці, що і викликається, буде виглядати наступним чином:

< A HREF=" /page.html" > текст < / A>

За клацання на текст буде викликатися сторінка page.html

Крім тегів, елементами HTML є CER (Character Entity Reference), вони призначені для представлення спеціальних символів в документі HTML, які можуть бути неправильно оброблені браузером.

CER починаються зі знака " & ", найменування CER чутливі до регістру символів. Також найменування CER можуть задаватися не у вигляді імені, а за допомогою тризначних кодів символів у вигляді & # nnn;. Далі в таблиці наведені найбільш часто використовувані CER і відповідні їм числові коди.

Завдання: створити міні-сайт на довільну тематику з інформацією про себе. Сайт має містити 3 сторінки з використанням перехресних посилань, форматованого тексту (курсив, підкреслений та посилений тексти, заголовки трьох рівнів). У разі необхідності використовувати CER.