четвер, 9 квітня 2020 р.


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

Гіпертекст — це текст для перегляду на комп'ютері, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»). Читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активувавши посилання.

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

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

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

Документ HTML можна розглядати як сукупність вказівок і даних — як безпосередньо розміщених у документі, так і пов’язаних з ним посиланнями, які при інтерпретації програмою-броузером відтворюють вигляд сторінок документа. Згідно з прийнятими в інформатиці визначеннями, документ HTML вважають програмою, описаною мовою високого рівня. Вказівки HTML називають тегами.

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

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

Контейнери — це парні теги.

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

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

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

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

Структура HTML-документа (згідно зі стандартом HTML 4.01)
  1. Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
  2. Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
  3. Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.
Приклад 1.
<!doctype html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
<body>
  Змістовна частина документа
</body>
</html>
Приклад 2. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути початок коду даної сторінки. У ньому описано таке:
  1. Оголошення типу документа — <!doctype html>.
  2. Заголовок документа — <head><title>Приклад 2</title></head>.
  3. Тіло документа — <body>…</body>.
Перший рядок HTML-документа зазвичай містить інформацію про версію мови HTML. Для того, щоб вказати версію HTML 4.01 без небажаних для цієї версії елементів й атрибутів, а також фреймів, можна використати таке визначення типу документа:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">

Використання версії HTML 4.01 навіть з небажаними для цієї версії елементами й атрибутами, а також фреймами задають таким чином:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN">

Найсучасніше визначення, що вказує на використання стандарту HTML5, таке:

<!doctype html>

Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом. У першому деcкрипторі:
  • атрибутом version можна задати версію HTML:
    <html version="4.01"> ;
  • атрибутом lang можна задати основну мову документа, скажімо українську:
    <html lang="uk-ua"> .
Назва документа — текст між тегами <title> і </title>.

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

У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:
  • name — назва змінної;
  • content — значення змінної;
  • charset — кодування документа, наприклад utf-8;
  • lang — код мови, що визначає мову значень змінної;
  • http-equiv — вказує назву додаткового параметра.
Атрибут lang потрібно використовувати для створення списку ключових слів певною мовою, на які відгукнеться пошукова система при запиті. Наприклад, англійською:

<meta name="keywords" lang="en" content="html,web-design,hypertext,site,…">

Значення атрибута 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 (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи.

Посилання на символи:
  • &#D; — задає символ, код якого має значення D у десятковій системі числення;
  • &#xH; — задає символ, код якого має значення H у шістнадцятковій системі числення;
  • &назва_символа; — дозволяє використовувати іменоване посилання на символ.
Для найпоширеніших символів у мові HTML передбачено назви. У наступній таблиці вказано деякі посилання і вигляд відповідного символа.
HTML-кодДесятковий
код		Опис
&nbsp;&#160; нерозривний пробіл
&pound;&#163;£фунт стерлінгів
&euro;&#8364;€знак євро
&para;&#182;символ параграфа
&sect;&#167;§параграф
&copy;&#169;©знак copyright
&reg;&#174;®знак зареєстрованої торгової марки
&trade;&#8482;™знак торгової марки
&deg;&#176;°градус
&plusmn;&#177;±плюс-мінус
&frac14;&#188;¼дріб одна четверта
&frac12;&#189;½дріб одна друга
&frac34;&#190;¾дріб три четвертих
&frac13;&#8531;⅓дріб одна третя
&frac23;&#8532;⅔дріб дві третіх
&frac15;&#8533;⅕дріб одна п'ята
&frac25;&#8534;⅖дріб дві п'ятих
&frac35;&#8535;⅗дріб три п'ятих
&frac45;&#8536;⅘дріб чотири п'ятих
&frac16;&#8537;⅙дріб одна шоста
&frac56;&#8538;⅚дріб п'ять шостих
&frac18;&#8539;⅛дріб одна восьма
&frac38;&#8540;⅜дріб три восьма
&frac58;&#8541;⅝дріб п'ять восьма
&frac78;&#8542;⅞дріб сім восьма
&times;&#215;×знак множення
&divide;&#247;÷знак ділення
&fnof;&#402;ƒзнак функції
&#8942;⋮три крапки по вертикалі
&#8943;⋯три крапки по горизонталі
&#8944;⋰три крапки по діагоналі
&#8945;⋱три крапки по діагоналі
грецькі літери
&Alpha;&#913;Αгрецька велика літера альфа
&Beta;&#914;Βгрецька велика літера бета
&Gamma;&#915;Γгрецька велика літера гамма
&Delta;&#916;Δгрецька велика літера дельта
&Epsilon;&#917;Εгрецька велика літера епсилон
&Zeta;&#918;Ζгрецька велика літера дзета
&Eta;&#919;Ηгрецька велика літера ця
&Theta;&#920;Θгрецька велика літера тета
&Iota;&#921;Ιгрецька велика літера йота
&Kappa;&#922;Κгрецька велика літера каппа
&Lambda;&#923;Λгрецька велика літера лямбда
&Mu;&#924;Μгрецька велика літера мю
&Nu;&#925;Νгрецька велика літера ню
&Xi;&#926;Ξгрецька велика літера ксі
&Omicron;&#927;Οгрецька велика літера омикрон
&Pi;&#928;Πгрецька велика літера пі
&Rho;&#929;Ρгрецька велика літера ро
&Sigma;&#931;Σгрецька велика літера сигма
&Tau;&#932;?грецька велика літера тау
&Upsilon;&#933;Υгрецька велика літера іпсилон
&Phi;&#934;Φгрецька велика літера фі
&Chi;&#935;Χгрецька велика літера хі
&Psi;&#936;Ψгрецька велика літера псі
&Omega;&#937;Ωгрецька велика літера омега
&alpha;&#945;αгрецька мала літера альфа
&beta;&#946;βгрецька мала літера бета
&gamma;&#947;γгрецька мала літера гамма
&delta;&#948;δгрецька мала літера дельта
&epsilon;&#949;εгрецька мала літера епсилон
&varepsilon;ϵгрецька мала літера епсилон
&zeta;&#950;ζгрецька мала літера дзета
&eta;&#951;ηгрецька мала літера ета
&theta;&#952;θгрецька мала літера тета
&iota;&#953;ιгрецька мала літера йота
&kappa;&#954;κгрецька мала літера каппа
&lambda;&#955;λгрецька мала літера лямбда
&mu;&#956;μгрецька мала літера мю
&nu;&#957;νгрецька мала літера ню
&xi;&#958;ξгрецька мала літера ксі
&omicron;&#959;οгрецька мала літера омикрон
&pi;&#960;πгрецька мала літера пі
&rho;&#961;ρгрецька мала літера ро
&sigma;&#962;σгрецька мала літера сигма
&tau;&#964;τгрецька мала літера тау
&upsilon;&#965;υгрецька мала літера іпсилон
&phi;&#966;φгрецька мала літера фі
&varphi;ϕгрецька мала літера фі
&chi;&#967;χгрецька мала літера хі
&psi;&#968;ψгрецька мала літера псі
&omega;&#969;ωгрецька мала літера омега
Стрілки
&larr;&#8592;←стрілка вліво
&uarr;&#8593;↑стрілка вгору
&rarr;&#8594;→стрілка вправо
&darr;&#8595;↓стрілка вниз
&harr;&#8596;↔стрілка вліво-вправо
&varr;&#8597;↕стрілка вгору-вниз
&varr;&#8598;↖стрілка ліворуч-вгору
&varr;&#8599;↗стрілка праворуч-вгору
&varr;&#8600;↘стрілка праворуч-вниз
&varr;&#8601;↙стрілка ліворуч-вниз
Інші символи
&spades;&#9824;♠знак масті «піки»
&clubs;&#9827;♣знак масті «трефи»
&hearts;&#9829;♥знак масті «черви»
&diams;&#9830;♦знак масті «бубни»
&quot;&#34;"подвійні лапки
&amp;&#38;&амперсанд
&lt;&#60;<знак «менше»
&gt;&#62;>знак «більше»
&le;&#8804;≤знак «не перевищує»
&ge;&#8805;≥знак «не менше»
знаки пунктуації
&hellip;&#8230;…багатокрапка
&prime;&#8242;′одиночний штрих
&Prime;&#8243;″подвійний штрих
&ndash;&#8211;–коротке тире
&mdash;&#8212;—довге тире
&lsquo;&#8216;‘ліві лапки
&rsquo;&#8217;’праві лапки
&sbquo;&#8218;‚нижні лапки
&ldquo;&#8220;“ліві подвійні лапки
&rdquo;&#8221;”праві подвійні лапки
&bdquo;&#8222;„нижні подвійні лапки
&laquo;&#171;«ліва подвійна кутова дужка
&raquo;&#187;»права подвійна кутова дужка
Теги форматування символів (дескриптори стилів) завжди є парними:
  • <b>…</b> — жирне написання;
  • <i>…</i> — курсив;
  • <u>…</u> — підкреслення;
  • <strike>…</strike> — перекреслення;
  • <tt>…</tt> — стала ширина літер;
  • <sub>…</sub> — нижній індекс;
  • <sup>…</sup> — верхній індекс;

  • <big>…</big> — збільшити шрифт;
  • <small>…</small> — зменшити шрифт;
  • <em>…</em> — логічний наголос — діє майже завжди як <i>;
  • <cite>…</cite> — цитування — діє майже завжди як <i>;
  • <code>…</code> — текст коду — діє майже завжди як <tt>;
  • <samp>…</samp> — результат виконання програми — діє майже завжди як <tt>;
  • <strong>…</strong> — виділення — діє майже завжди як <b>;
  • <dfn>…</dfn> — текст означення (залежно від браузера);
  • <var>…</var> — назва змінної або параметра — діє майже завжди як <i>;
  • <kbd>…</kbd> — назва клавіші — діє майже завжди як <tt>;
  • <xmp>…</xmp> —текст-зразок— діє майже завжди як <tt>.
У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Примітка. Застосовують вкладення тегів аналогічно до використання дужок різного вигляду. Наприклад, жирний курсив задають таким чином:

<b><i>текст</i></b>.

Форматування тексту мовою 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.

Приклад 3. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код сторінки і проаналізувати його дію.

Властивості шрифту: гарнітуру, розмір і колір задають відповідно як значення атрибутів face, size та color контейнера font.

Якщо першим тегом у тілі сторінки є такий:

<font face="ubuntu, calibri" size="+2">

і якщо на комп'ютері встановлено шрифт ubuntu, то буде застосовано саме його для відображення тексту. Інакше браузер застосує шрифт calibri, а при відсутності останнього — деякий стандартний шрифт. Зазвичай із зарубками. Наприклад, Times New Roman для ОС Windows.

Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення "+2" атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п'ятий.

Колір тексту можна задати його назвою англійською мовою:
  • aqua — бірюзовий;
  • black — чорний;
  • blue — світло-синій;
  • fuchsia — бузковий;
  • gray — сірий;
  • green — зелений;
  • lime — салатовий;
  • maroon — бордовий;
  • navy — синій;
  • olive — оливковий;
  • purple — фіолетовий;
  • red — червоний;
  • silver — сріблястий;
  • teal — сіро-зелений;
  • white — білий;
  • yellow — жовтий.
Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.

Приклад 4. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код у даному місці, де подано приклади використання різних кольорів.

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

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

Перелік тегів HTML5 можна знайти на порталі mozilla.org.

Опубліковано о

Немає коментарів:

Дописати коментар

Підписатися на: Дописати коментарі (Atom)