1 of 22

http://vsimppt.com.ua/

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

2 of 22

Пригадаємо

  1. Які засоби можна використовувати для розробки веб-сторінок? Поясніть їх переваги та недоліки.
  2. Що таке система управління веб-контентом? Назвіть відомі вам системи управління вмістом веб-сайта.

3 of 22

Мова HTML

HTML

Hyper Text Markup Language

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

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

4 of 22

Програмна частина будується на основі тегів

Теги це мітки, які ви використовуєте для вказівки браузеру, як він повинен показувати ваш web-сайт

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

5 of 22

Різновиди тегів

<

тег

>

…

<

/

тег

>

Парні теги

Одинарний

<

тег

>

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

6 of 22

Всі сайти мають основу HTML

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

7 of 22

Про HTML5

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

HTML5 — наступна версія мови HTML. До складу робочої групи з HTML5 увійшли AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera та кілька сотень інших виробників.

Прибрано устарілі теги.

Додано аудіо та відео теги

Додано векторні теги

8 of 22

Приклад розмітки веб-сторінки за допомогою HTML5

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

9 of 22

HTML5

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

10 of 22

Теги технічної інформації

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

11 of 22

Теги технічної інформації

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

12 of 22

Теги технічної інформації

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

13 of 22

Теги технічної інформації

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

14 of 22

Теги технічної інформації

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

15 of 22

Теги технічної інформації

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

16 of 22

Індексація веб-сторіки.

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

Content

  • Index (індексація дозволена)
  • noindex (індексація не дозволена)
  • follow (перехід дозволений по посиланнях котрі є розміщені на даній сторінці)
  • nofollow (перехід не дозволений по посиланнях котрі є розміщені на даній сторінці)
  • all (комбінація index + follow)
  • none (комбінація noindex + nofollow)

17 of 22

Теги технічної інформації

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

18 of 22

Кодування розміщеного тексту

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

19 of 22

Автоматичне оновлення сторінки

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

20 of 22

Переадресація

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

21 of 22

Працюємо за комп’ютером

На основі продемонстрованого зразка створіть веб-сторінку інтернет магазину по продажі канцтоварів з перенаправленням на офіційний сайт через 30 секунд - https://27.ua/ua/shop/kantstovary/

22 of 22

Повторюємо

  1. Опишіть будову веб-сторінки на основі HTML5.
  2. На які частини ділиться «скелет» HTML5?
  3. Яким чином заборонити індексування сторінки, але дозволити роботу переходити за іншими посиланнями?