Мова описання гіпертекстових документів. Теги й атрибути. 8 клас

19.1. Мова гіпертекстової розмітки

В 1989 році Тім Бернерс-Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML.

Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту). Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду.

Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.

19.2. Гіпертекстовий документ та його елементи

Гіпертекст - це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.

Ці коди визначені у мові програмування HTML - мова гіпертекстової розмітки.

Веб-сторінка - це документ у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою.

HTML-файл — це програма подання тексту, написана мовою HTML, яку опрацьовує браузер і подає результат у своєму програмному вікні.

Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером.

Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».

Контейнери — це парні теги. Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки.

Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка. Нечислові значення параметрів прийнято записувати у лапках.

Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text.

19.3. Текстові елементи веб-сторінки, теги та їх атрибути

Структура HTML-документа (згідно зі стандартом HTML 4.01).

Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.

Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.

Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.

Структура HTML-документа

<!doctype html>

<html>

<head>

<title>Заголовок документа</title>

</head>

<body> Змістовна частина документа </body>

</html>

Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом.

Атрибутом version можна задати версію HTML: <html version="4.01"> ;

Атрибутом lang можна задати основну мову документа, скажімо українську: <html lang="uk-ua"> .

Назва документа — текст між тегами <title> і </title>.

До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.

У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:

name — назва змінної;

content — значення змінної;

charset — кодування документа, наприклад utf-8;

lang — код мови, що визначає мову значень змінної;

http-equiv — вказує назву додаткового параметра.

Атрибут lang потрібно використовувати для створення списку ключових слів певною мовою, на які відгукнеться пошукова система при запиті. Наприклад, англійською:

Значення атрибута http-equiv та опис дії атрибута content (після тире):

Expires — задає дату і час оновлення документа;

Content-Language — аналог атрибуту lang тега html;

Content-Type — вказує тип документа та кодування символів;

Refresh — задає інтервал у секундах між оновленнями вмісту документа.

Приклади опису властивостей тега body:

bgcolor="white" — задати білий колір тла;

text="black" — задати чорний колір тексту;

background="picture.jpg" — задати зображення для тла;

bgproperties="fixed" — зображення тла не прокручувати;

style="text-align:justify;" — вирівнювати текст за шириною.

Крім цих атрибутів тега body використовують і такі:

link — колір невідвіданих гіперпосилань;

vlink — колір відвіданих гіперпосилань;

alink — колір гіперпосилань, обраних користувачем;

contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері.

Для введення в HTML-документ зарезервованих символів мови HTML (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи.

Для найпоширеніших символів у мові HTML передбачено назви. У цій таблиці вказано деякі посилання і вигляд відповідного символу.

Теги форматування символів (дескриптори стилів) завжди є парними:

<b>…</b> — жирне написання;

<i>…</i> — курсив;

<u>…</u> — підкреслення;

<strike>…</strike> — перекреслення;

<tt>…</tt> — стала ширина літер;

<sub>…</sub> — нижній індекс;

<sup>…</sup> — верхній індекс;

<big>…</big> — збільшити шрифт;

<small>…</small> — зменшити шрифт;

<em>…</em> — логічний наголос

<cite>…</cite> — цитування

<code>…</code> — текст коду

<samp>…</samp> — результат виконання програми

<strong>…</strong> — виділення

<dfn>…</dfn> — текст означення (залежно від браузера);

<var>…</var> — назва змінної або параметра

<kbd>…</kbd> — назва клавіші

<xmp>…</xmp> —текст-зразок

У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Форматування тексту мовою HTML виконують з використанням спеціальних тегів:

<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> — відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту.

<p>…</p> — створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;

<pre>…</pre> — відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка);

<nobr>…</nobr> — заборона перенесення слів, яку можна подавити тегом <wbr>;

<center>…</center> — центрування;

<br> — обривання рядка без пропуску рядка;

<hr> — проведення горизонтальної лінії.

Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:

center — центрування;

justify — вирівнювання за шириною;

left — вирівнювання за лівим краєм;

right — вирівнювання за правим краєм

і атрибут title — текст підказки.

Крім цього тег <p>…</p> має атрибут tabindex, який задає порядковий номер абзацу при переміщенні HTML-документом у вікні браузера за допомогою клавіші Tab.

Колір тексту можна задати його назвою англійською мовою:

aqua — бірюзовий;

black — чорний;

blue — світло-синій;

fuchsia — бузковий;

gray — сірий;

green — зелений;

lime — салатовий;

maroon — бордовий;

navy — синій;

olive — оливковий;

purple — фіолетовий;

red — червоний;

silver — сріблястий;

teal — сіро-зелений;

white — білий;

yellow — жовтий.

Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.

Контактну інформацію записують у контейнері <address>…</address>.

Коментар записують у контейнері <comment>…</comment> або використовують тег . Текст всередині цих тегів на екран браузера не буде показано.

19.4. Гіперпосилання

Гіперпосилання - це один з найголовніших компонентів html-документів. Саме завдяки цим звичайним посиланням, Інтернет такий простий у використанні. Розглянемо найпростіші варіанти вставки гіперпосилань: посилання можуть бути як на сайті, так і на сторінці, як на свій сайт, так і на зовнішній, тому коди потрібно розрізняти між собою.

Такий код буде працювати тільки на Вашому сайті, для зовнішніх посилань, він не підійде.

1. Для створення посилання на сайт, нам потрібно використовувати код:

Де, замість *** – посилання на сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання.

Приклад: <a href = “https://jak-zrobiti-samomu.com.ua/”>Журнал Як зробити все </a>

2. Щоб створити гіперпосилання на сторінку, використовуємо такий же код, тільки тепер вказуємо повністю шлях до сторінки, на прикладі це виглядатиме так:

<a href =”https://jak-zrobiti-samomu.com.ua/yak-zrobiti-perekaz-webmoney/”>Як зробити переказ Вебмані? </a>

3. Як створити гіперпосилання в html на зовнішній сайт?

Для зовнішніх посилань, код слід трохи змінити. Щоб зробити посилання на інший сайт, використовуємо код: <a href = “***”> ***** </ a>

Де, замість *** – посилання на зовнішній сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання. Приклад: <a href = ” https://vk.com/kaksdelatvse”> Головна сторінка групи </a>

Практичне завдання (перші 3 завдання).Створювати у Блокноті і зберігати з розширенням html.

Приклад виконання завдання за малюнком 3.

Шукати в цьому блозі

Дистанційне навчання