HTML (HyperText Markup Language — «мова гіпертекстової розмітки») — це спеціальний код, який визначає зміст і структуру веб-сторінки.
Код HTML обробляється (інтерпретується) браузерами, і отримана в результаті інтерпретації сторінка відображається на екрані монітора комп'ютера, або мобільного пристрою.
Тобто можна сказати, що завдяки HTML ми бачимо у вікні браузера ту, чи іншу інформацію: гіперпосилання, блоки, таблиці, картинки, відео та інше.
Малюнок 1.1. Приклад HTML розмітки
HTML-документ — це звичайний текстовий документ. Він може бути створений в будь-якому текстовому редакторі, наприклад в Блокноті. Але як правило, досвідчені фахівці, при створенні сайтів використовують спеціалізовані редактори з підсвічуванням коду: Notepad ++, Visual Studio Code, Adobe Dreamweaver і т.п.
HTML-документ має розширення .html.
Малюнок 1.2. Файл з розширенням .html
Зміст веб-сторінки називають контентом. Це можуть бути статті, таблиці, картинки, відео та ін. Тобто, все що містить в собі інформацію на сайті — це контент сайту.
Малюнок 1.3. Контент на сайті www.dnikweb.blogspot.com
Слід пам'ятати!
HTML не є мовою програмування. Це мова розмітки. Завдяки цій розмітці браузер розуміє, як і де потрібно виводити задану вами інформацію.
Щоб зацікавити вас з перших хвилин вивчення цієї книги – давайте виконаємо невелике практичне завдання .
Практичне завдання №1
В архіві з прикладами в папці exemple001 знаходиться файл index.html.
Якщо ви зараз зробите подвійний клік лівою кнопкою миші по цьому файлу, то він буде відкритий браузером, який ви використовуєте за замовчуванням.
У вікні браузера ви побачите текст «Мой первый HTML документ», а відкрита вкладка матиме заголовок «Пример HTML разметки».
Малюнок 1.4. HTML-файл для виконання практичного завдання
Давайте зробимо так, щоб у вікні браузера замість тексту «Мой первый HTML документ» було вітання з вашим ім'ям. Наприклад, відобразимо вітання «Здравствуйте Иван. Вы уже начали осваивать HTML». І поміняємо заголовок HTML документа з тексту «Пример HTML разметки» на «Мой HTML документ».
Для цього нам потрібно відкрити файл index.html не в браузері, а текстовим редактором (Наприклад, Блокнотом).
Крок 1. Запускаємо додаток Блокнот
Малюнок 1.5. Запуск програми Блокнот
Крок 2. У меню Файл вибираємо пункт Відкрити (або використовуємо поєднання клавіш Ctrl+O)
Малюнок 1.6. Як відкрити HTML-документ програмою Блокнот
Крок 3. У вікні, що х'явилося, міняємо тип файлу на Всі файли (*.*). І тільки після цього знаходимо наш файл index.html і відкриваємо його.
Малюнок 1.7. Як відкрити HTML-документ програмою Блокнот
Крок 4. Якщо ви все зробили правильно, то в текстовому редакторі Блокнот ви побачите код HTML. Цей код і відповідає за виведення вмісту через браузер.
Малюнок 1.8. Вихідний код HTML-документа
Крок 5. Кожен елемент цього коду ми розглянемо трохи пізніше. А поки давайте просто змінимо текст між <title> і </title> на Мой HTML документ і між <body> та </body> на Здравствуйте Иван. Вы уже начали осваивать HTML.
В результаті у вас повинен вийти наступний код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Мой HTML документ</title>
</head>
<body>
Здравствуйте Иван. Вы уже начали осваивать HTML
</body>
</html>Крок 6. Збережіть цей документ натиснувши клавіші Ctrl+S, або вибравши в меню Файл пункт Зберегти
Малюнок 1.9. Як зберегти HTML-документ
Тепер, якщо ви відкриєте файл index.html в браузері (двічі клікнувши по ньому лівою кнопкою миші), то у відкритому вікні побачите напис «Здравствуйте Иван. Вы уже начали осваивать HTML», а заголовок HTML документа буде «Мой HTML документ».
Малюнок 1.10. Наш HTML-документ з внесеними змінами
Примітка.
HTML-документ можна відкрити для редагування і іншим способом.
Для цього потрібно:
- Натиснути правою кнопкою миші по файлу index.html;
- У контекстному меню вибрати пункт «Відкрити за допомогою»;
- І в списку, що з'явиться, обрати додаток Блокнот.
Якщо додатку Блокнот в списку немає, то натисніть «Вибрати інший додаток» як показано на малюнку.
Малюнок 1.11. Як відкрити HTML-документ для редагування коду
Як бачите нам знадобилося всього лише 10 рядків коду, щоб сформувати свій перший HTML-документ і вивести на екран певну інформацію. При чому використовували ми для цього звичайний текстовий редактор Блокнот.
Але якщо ви хочете серйозно зайнятися веб-розробкою, то без спеціалізованих програм вам не обійтися. Тому в наступній темі ми розглянемо найкращі, на мою думку, редактори вихідного коду. Вам потрібно буде вибрати один з них і встановити на свій комп'ютер.
Використання редактора з підсвічуванням синтаксису значно полегшує написання HTML коду і редагування вже існуючих HTML-документів.
Після цього ми вивчимо структуру HTML-документа і дізнаємося, що ж це за команди (інструкції) були написані у файлі index.html з нашого практичного завдання.
А поки, якщо вам все ще не зрозуміло, як виконувати практичне задні №1, ви можете перейти на мій YouTube канал і подивитися цей відеоурок там.
