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

HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів використовується для створення веб-сторінок і веб-додатків.

Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги». В ньому були описані 20 елементів відносно простої схеми розмітки HTML.

HTML5 — найпоширеніша нині версія мови HTML, яка в 2004 році прийшла на заміну стандартній HTML. https://uk.wikipedia.org/wiki/HTML5

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

Тіло сторінки умовно поділяється на блоки з відповідними назвами (як на картинці).


  • Теги – службові символи (команди HTML), що вказують браузеру, як слід відображати Web-сторінку. Теги починаються і закінчуються кутовими дужками.

  • Елементи гіпертекстового документа мають таку структуру:

Основні теги. Теги можуть бути парними і непарними.

Теги для форматування тексту:

<p> текст </p> Початок нового абзацу. Абзаци відокремлюються порожніми рядками. Якщо закриваючого тега немає, вважається, що кінець абзацу збігається з початком наступного абзацу або іншого блочного елемента.

<br> Непарний тег. Перехід у новий рядок. Текст буде наведено у новому рядку без пропуску рядка, як у випадку використання <p>

<hr> Непарний тег. У рядку буде проведена горизонтальна лінія

Повний список тегів

  • Для створення HTML-розмітки документа використовують будь-який текстовий редактор.

  • Для перегляду HTML- документа використовується браузер.

Створення простої веб-сторінки

  1. Створіть папку Web_Design для збереження завдань курсу.

  2. У папці Web_Design створіть папку Урок_2.1, в якій буде зберігатися веб-сторінка

  3. Запустіть Notepade++ (це простий редактор коду).

  4. У вікні редактора наберіть стандартний код HTML-розмітки.

  • Закрийте Notepade++.

  • Відкрийте папку Урок_2.1. Піктограма файла, збереженого у цій папці, вказує, який браузер встановлений за замовчуванням. У нас - GoogleCrome.

  • Після збереження файла автоматично змінюється вигляд коду у вікні Notepade++. Теги, атрибути, текст виділяються різними кольорами, а парні теги підсвічуються при клацанні мишкою на будь-якому з них. Видно структуру.

    • В голові документа прописується теги, які не відображаються браузером, в тілі - ті, які браузер відображає.

  • Збережіть файл у папці Урок_2.1, обов'язково задавши розширення html. Наприклад, index.html. (Якщо не вказати розширення, то це буде звичайний текстовий файл, браузер не відображатиме його).

  • Оберіть кодування, яке прописане в charset (в даному випадку utf-8).

  • Двічі клацнувши мишкою файл index.html, ми відкриємо його в браузері як веб-сторінку

Розташуйте вікна блокнота Notepad++ і браузера поряд, щоб зручно було бачити, яким чином зміна коду впливає на вигляд веб-сторінки. Вносячи зміни у блокноті, оновлюємо веб-сторінку.

Завдання 2.1.

Змініть заголовок web-сторінки на "Філософія життя".

Скопіюйте текст з файлу Тема2-1-1.txt і вставте його в тіло документа index.html.

ВІдформатуйте текст згідно зразка, скористайтеся тегами <p>,<br>, <hr>.

На зразку немає закриваючого тега </p>. Як ви думаєте, чому?

Щоб продовжити редагувати файл, необхідно клацнути його правою кнопкою мишки та обрати команду Edite with Notepad++.