1 of 30

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

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

Урок 6

​

2 of 30

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

​

​

3 of 30

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

4 of 30

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

​

5 of 30

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

6 of 30

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

​

7 of 30

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

​

8 of 30

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

9 of 30

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

10 of 30

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

​

​

11 of 30

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

​

​

12 of 30

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

Код HTML

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

13 of 30

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

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

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

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

​

14 of 30

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

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

Значення

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

left

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

right

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

center

По центру

justify

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

15 of 30

Для роботи можна скористатися будь-яким онлайн редактором для написання html сторінок (наприклад https://www.w3schools.com/html або https://jsfiddle.net/ , https://liveweave.com/ ), встановленою програмою (блокнот, Notepad++ і т.д.) або записати в зошит.

Фото або файл виконаного завдання можна скидати на пошту вашого вчителя інформатики:

admin@ck19.ukr.education (Тетяна Володимирівна)

vika@ck19.ukr.education (Вікторія Олександрівна)

16 of 30

Приклад №1.Вирівнювання заголовків

17 of 30

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

​

18 of 30

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

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

19 of 30

Приклад №2 нумерованого списку (слово елемент замініть прізвищами ваших однокласників)

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

Код HTML

20 of 30

Приклад№3 маркованого списку (слово елемент замініть назвами ваших шкільних предметів)

КОД HTML

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

21 of 30

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

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

​

22 of 30

Приклад №4 (можна в посиланнях вказати назви ваших вже створених html сторінок, але вони мають бути збережені у тій же папці, що і даний документ)

23 of 30

Елементи HTML5

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

24 of 30

Поміркуйте

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

HTML4 та

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

25 of 30

Цікаво

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

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

​

26 of 30

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

27 of 30

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

​

28 of 30

Приклад №5

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

https://www.websiteplanet.com/uk/webtools/lorem-ipsum/

​

29 of 30

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

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

30 of 30