1 of 32

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

2 of 32

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

​

​

3 of 32

  • HTML не є мовою програмування, вона призначена лише для розмітки сторінки, надання певного вигляду її складовим

4 of 32

Тім Бернерс Лі

5 of 32

  • Гіпертекст — електронний документ, який містить зв’язки з іншими електронними документами. Такі зв’язки називаються гіперпосиланнями.
  • Контент (англ. content — вміст) — це інформаційне наповнення сайта.

​

6 of 32

7 of 32

  • Теги — команди мови HTML.
  • HTML-теги — це ключові слова або символи, які записуються в кутові дужки. Визначають, де починається та де закінчується HTML-елемент
  • Теги бувають двох видів: парні й непарні.
  • Парні теги складаються з відкриваючого і закриваючого тегів. Непарний тег – лише відкриваючий.
  • Теги нечутливі до регістра (тобто регістронезалежні), тому можуть бути написані як великими, так і малими літерами.

​

8 of 32

  • Більшість тегів мають додаткові властивості або характеристики - атрибути (латин. attribuo —надавати, наділяти), які складаються з пари «назва — значення», розділених між собою знаком рівності та записаних у відкриваючому тегу відразу після назви елемента. Значення атрибута має бути окреслене лапками (подвійними або одиничними). Атрибути записуються лише у відкриваючому тегу(!)

9 of 32

  • Текстові документи, що містять розмітку мовою HTML (такі документи зазвичай мають розширення .html або .htm), опрацьовуються спеціальними застосунками, які відображають документ у його відформатованому вигляді. Такі застосунки називаються браузерами. Пригадаємо, що браузером (веб-переглядачем) називають програмне забезпечення для комп’ютера або іншого електронного пристрою, під’єднаного до Інтернету, який дає змогу користувачеві взаємодіяти з текстом, малюнками або іншою інформацією на гіпертекстовій веб-сторінці.

​

10 of 32

11 of 32

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

​

12 of 32

Структура сайту

13 of 32

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

Розділ 2 § 7

Текст html-файла набирають у будь-якому редакторі, наприклад у Блокноті, та зберігають із розширенням:

або

10�(11)

14 of 32

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

Розділ 2 § 7

Можна зберегти у форматі html.

Документи Word

Презентації PowerPoint

Таблиці Excel

10�(11)

15 of 32

  • Сторінка завжди починається з відкриваючого тегу <html> та закінчується закриваючим тегом </html> і складається з двох обов’язкових блоків — голови (head) та тіла (body), які записуються послідовно.

16 of 32

  • У блоці <head>…</head> зберігається службова інформація, яка допомагає браузеру в роботі з даними. Тут розташовані мета-теги, які використовуються для зберігання інформації, призначеної для пошукових систем, а саме: опис сайта, ключові слова, тип кодування тощо. Інформація є зазвичай невидимою для пересічного користувача, крім парного тега <title>, у якому відображається назва сторінки сайта .

​

​

17 of 32

  • Кодування HTML-сторінки потрібно вказувати для того, щоб веб-браузер міг правильно відображати текст на сторінці, інакше замість тексту будуть відображатися ієрогліфи. Найбільш поширене кодування кирилицею -- utf-8

​

​

18 of 32

Приклад запису блоку <head>

Код HTML

Відображення браузером

19 of 32

  • Увесь контент, який відображається на сторінці, розміщується між відкриваючим і закриваючим тегами <body>.

Контент може містити:

  • Текст
  • Статичну графіку
  • Анімаційні елементи
  • Мультимедійні елементи (відео, аудіо)

Текст відображається у вигляді заголовків, абзаців та списків.

​

20 of 32

Теги для роботи з заголовками

  • В HTML існують шість рівнів заголовків, Найбільший – заголовок першого рівня, найменший – шостого. Позначаются вони відповідно <h1>… <h6>. Заголовки мають атрибут align, який визначає тип вирівнювання на сторінці і може приймати одне з чотирьох значень

Значення

Тип вирівнювання

left

За лівим краєм (за замовчуванням)

right

За правим краєм

center

По центру

justify

За шириною (за лівим і правим краєм)

21 of 32

Використання заголовків

22 of 32

  • Абзаци виділяються парним тегом <p> </p> (від слова «параграф»). Як і теги заголовків, тег абзацу має атрибут align.

​

23 of 32

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

Розділ 2 § 7

Тег, що починається із символу «/», називають закриваючим. Дія html-тегу залежить від значень його параметрів, так званих атрибутів.

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

10�(11)

24 of 32

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

Розділ 2 § 7

Тег body з атрибутами кольору фону (bgkolor) і кольору тексту (text):

У вікні текстового редактора

У вікні браузера

<body text="white" bgcolor="green">

Привіт!

</body>

</htm>

10�(11)

25 of 32

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

Розділ 2 § 7

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

10�(11)

26 of 32

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

Розділ 2 § 7

Розглянемо дію деяких тегів форматування тексту:

Дія

Тег

Запис

Переведення рядка

<br>

Непарний

Новий абзац із відступом

<p>

Непарний

Заголовок: <h6> - найменший, <h1> - найбільший

<h>

Парний

Напівжирний шрифт

<b>

Парний

Курсив

<i>

Парний

Підкреслений шрифт

<u>

Парний

Розмір (size 1..7) і колір (color) шрифту

<font>

Парний

10�(11)

27 of 32

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

Розділ 2 § 7

Розглянемо приклад застосування атрибутів.

У вікні текстового редактора

У вікні браузера

<body text="blue" bgcolor="yellow" >

<h1>Розділ 6</h1>

<p>§21 HTML

<br>

<font color="red" size="3"

<b><i><u> Застосування тсгів </u></i></b>

</font>

<br>

<b>Teг</b> - <font color="green"> це команда HTML</font>

</body>

10�(11)

28 of 32

Цікаво

При створенні макету сайту веб-розробник використовує спеціальний текст для наповнення сайту

Lorem ipsum — класичний варіант умовного беззмістовного тексту, що вставляється в макет сайту. � Lorem ipsum — це перекручений уривок з філософського  трактату  Цицерона «Про межі добра і зла», написаного в 45 році до нашої ери латиною.

​

29 of 32

  • Основна функція Lorem Ipsum - зосередити увагу на дизайні, а не на читанні вмісту. Ще одна причина, через яку використовують текст - заповнення сторінки для досягнення реального розподілу букв і пропусків в тексті, яке неможливо при простому дублюванні вислову «Тут написано ваш текст ... Тут написано ваш текст ...»

30 of 32

  • Lorem ipsum входить як текст за замовчуванням у більшість текстових та HTML-редакторів. Існують і сайти на яких можна згенерувати потрібну кількість абзаців. Одним з найвідоміших і найпопулярніших сайтів- генераторів є Lipsum generator (https://uk.lipsum.com/)

​

31 of 32

Цікаво

  • У 1994 році засновано Консорціум Всесвітньої павутини  — головну міжнародну організацію, що розробляє та впроваджує технологічні стандарти для  Всесвітньої павутини.

32 of 32

Аналізуємо. Обговорюємо

  1. Що таке контент; HTML; гіпертекст?
  2. Як називають команди мови розмітки?
  3. Створіть класифікацію тегів HTML.
  4. Які невід’ємні компоненти структури сторінки?
  5. Чому при розробці макету сайту рекомендується використовувати спеціальний текст?