Групи тегів у html
Всі теги НТМL за їх призначенням і областю дії можна розділити на наступні основні групи:
– визначають структуру документа;
– оформлення блоків гіпертексту (параграфи, списки, таблиці, картинки);
– гіпертекстові посилання і закладки;
– форми для організації діалогу;
– виклик програм.
Структура гіпертекстової мережі задається гіпертекстовими посиланнями. Гіпертекстова посилання – це адреса іншого HTML-документа або інформаційного ресурсу Internet, який тематично, логічно або будь-яким іншим способом пов'язаний з документом, в якому посилання визначене.
За таких умов дуже важлива схема адресації всіх наявних інформаційних ресурсів.
Реальний механізм інтерпретації ідентифікатора ресурсу, що спирається на URI (Uniform Resource Identifier, універсальний ідентифікатор ресурсу), називається URL, і користувачі WWW мають справу саме з ним.
Типовим прикладом використання такого запису можна вважати наступний приклад:
Цей текст містить:
<A HREF="http://www.udhtu.dp.ua/help/index.html">
гіпертекстове посилання </ A>
У наведеному вище прикладі тег "A", який в HTML називають якорем (anchor), використовує атрибут HREF, що позначає гіпертекстове посилання (Hypertext Reference), для запису цього посилання у формі URL. Це посилання вказує на документ з ім'ям "index.html" в каталозі "help" на сервері "www.udhtu.com.ua", доступ до якого здійснюється за протоколом HTTP.
Гіпертекстові посилання у HTML діляться на два класи: контекстні гіпертекстові посилання та загальні. Контекстні посилання вмонтовані в тіло документа, як це було продемонстровано у попередньому прикладі, в той час як загальні посилання пов'язані з усім документом у цілому і можуть використовуватися при перегляді будь-якого фрагмента документа.
Структура HTML-документа дозволяє задіяти вкладені один в один контейнери. Власне, сам документ – це один великий контейнер, який починається з тега <HTML> і закінчується тегом </ HTML>.
Лабораторні роботи Лабораторна робота № 1 Проста html-сторінка
Мета роботи: – навчитися верстати найпростіші HTML-сторінки, ознайомитися на практиці з поняттями контейнера, заголовка, тіла сторінки, гіперпосилання, форматуванням тексту, використання CER.
Засади проектування 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="http://www.google.com"> посилання на сайт </ A>
при прописування адрес на локальні джерела (картинки, посилання на сусідні сторінки) можна використовувати як зворотну скісну риску "\", так і просте косу риску "/", але краще використовувати просто "/".
Наприклад, посилання на сторінку, що знаходиться в тій же папці, що і викликається, буде виглядати наступним чином:
<A HREF="/page.html"> текст </ A>
За клацання на текст буде викликатися сторінка page.html
Крім тегів, елементами HTML є CER (Character Entity Reference), вони призначені для представлення спеціальних символів в документі HTML, які можуть бути неправильно оброблені браузером.
CER починаються зі знака "&", найменування CER чутливі до регістру символів. Також найменування CER можуть задаватися не у вигляді імені, а за допомогою тризначних кодів символів у вигляді & # nnn;. Далі в таблиці наведені найбільш часто використовувані CER і відповідні їм числові коди.
|
Числовий код |
Іменна заміна |
Символ |
Опис |
|
" |
" |
" |
Лапка |
|
& |
& |
& |
Амперсанд |
|
< |
< |
< |
Менше |
|
> |
> |
> |
Більше |
|
|
|
|
Нерозривний пробіл |
|
¡ |
¡ |
¡ |
Перевернутий окличний знак |
|
¢ |
¢ |
¢ |
Цент |
|
£ |
£ |
£ |
Фунт |
|
¤ |
¤ |
¤ |
Валюта |
|
¥ |
¥ |
¥ |
Ієна |
|
¨ |
¨ |
¨ |
Умляут |
|
© |
© |
© |
Копірайт |
|
« |
« |
« |
Ліва кутова лапка |
|
® |
® |
® |
Зареєстрована торгова марка |
|
± |
± |
± |
Плюс чи мінус |
|
» |
» |
» |
Права кутова лапка |
Завдання: створити міні-сайт на довільну тематику з інформацією про себе. Сайт має містити 3 сторінки з використанням перехресних посилань, форматованого тексту (курсив, підкреслений та посилений тексти, заголовки трьох рівнів). У разі необхідності використовувати CER.