1 of 33

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

Модуль «Веб-технології»

Урок 6

​

2 of 33

Дудл Google, присвячений 30-річчю�Всесвітньої павутини

3 of 33

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

​

​

4 of 33

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

5 of 33

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

​

6 of 33

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

7 of 33

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

​

8 of 33

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

​

9 of 33

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

10 of 33

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

11 of 33

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

​

​

12 of 33

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

​

​

13 of 33

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

Код HTML

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

14 of 33

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

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

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

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

​

15 of 33

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

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

Значення

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

left

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

right

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

center

По центру

justify

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

16 of 33

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

17 of 33

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

​

18 of 33

Теги для роботи зі списками

  • Списки можуть бути впорядковані, тобто нумеровані, невпорядковані – марковані та багаторівневі.
  • Кожен елемент списку виокремлюється парним тегом <li> . Нумерований список позначаєтся парним тегом <ol> (скор. ordered list – впорядкований список), маркований список - парним тегом <ul> ( скор. unordered list – невпорядкований список).
  • Багаторівневі списки - комбінації маркованих і нумерованих списків. Багаторівневі списки створюються шляхом вкладення одного списку в інший.

19 of 33

Приклад нумерованого списку

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

Код HTML

20 of 33

Приклад маркованого списку

КОД HTML

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

21 of 33

Теги для навігаційних посилань

  • В HTML існує спеціальний тег-контейнер для реалізації навігації по сайту - <nav>. Це парний тег, який містить навігаційні посилання.
  • Для посилання на іншу сторінку використовують парний тег <a> (скор. від «анкор», англ. Anchor — якір). Тег має обов’язковий атрибут href – значенням якого є назва сторінки з розширенням .html. Між відкриваючим і закриваючим тегами розміщується посилання на ресурс, натиснувши на який, ми переходимо до потрібної сторінки.

​

22 of 33

Приклад

23 of 33

Елементи HTML5

  • Ранні версії HTML поєднували функції розмітки та форматування контенту, тобто зміст (семантичний) та зовнішній вигляд цього змісту (презентаційний).
  • остання версія - HTML5 остаточно відмовляється від використання презентаційних тегів, натомість з’являються нові елементи, які відображають типову архітектуру сучасних веб-сторінок.

24 of 33

Поміркуйте

На малюнку представлені типові структури сайту за версіями

HTML4 та

нового стандарту HTML5. Порівняйте структури та вкажіть різницю.

25 of 33

Цікаво

  • HTML створювалася як мова для обміну науковою й технічною документацією, як один із компонентів технології розробки розподіленої гіпертекстової системи World Wide Web (яку ми звикли називати Всесвітньою павутиною). Ідея така: користувач має можливість переглядати документи (сторінки тексту) у найзручнішому для себе порядку, а не послідовно, як це узвичаєно під час читання книжок. Це досягається створенням спеціального механізму зв’язування різних сторінок тексту за допомогою гіпертекстових посилань.

26 of 33

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

27 of 33

Цікаво

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

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

​

28 of 33

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

29 of 33

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

​

30 of 33

Цікаво

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

31 of 33

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

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

32 of 33

Домашнє завдання

  • Створіть файл index.html.
  • Наберіть послідовність команд наведену на малюнку.
  • Додайте текст, згенерований генератором Lorem ipsum.
  • Результат надішліть на поштову скриньку вчителя

33 of 33