Що таке вебсторінки та HTML?

Автори: Вільям Туркел та Адам Краймбл Переклали на українську: Мар’яна Юрків, Анастасія Юрків Оригінал уроку: https://programminghistorian.org/en/lessons/viewing-html-files

Цей урок познайомить вас з мовою HTML та вебсторінками, які вона структурує.

Перегляд файлів HTML

Коли ви працюєте з онлайн-джерелами, більшу частину часу ви будете використовувати файли, які були розмічені за допомогою HTML (англ. HyperText Markup Language — мова розмітки гіпертексту). Ваш браузер вже знає, як інтерпретувати HTML, що, безумовно, зручно для читачів. Також, більшість браузерів дозволяють переглядати вихідний код HTML для будь-якої сторінки, яку ви відвідуєте. Два зображення нижче показують типову вебсторінку (lia.lvivcenter.org) і джерело HTML, використане для створення цієї сторінки. Щоб переглянути джерело HTML, використайте комбінацію клавіш Ctrl + U (Command + Option + U на MacOS) або натисніть правою кнопкою мишки по сторінці і оберіть "Переглянути джерело сторінки".

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

(Для кращого ознайомлення з HTML, вам може бути корисно попрацювати з навчальним посібником W3 Schools HTML Підручник. Детальне знання HTML не обов’язкове для продовження цього уроку, але будь-який час, що ви витратите на вивчення HTML, буде добре винагороджений у вашій подальшій роботі в галузі цифрової історії чи цифрової гуманітаристики).

"Hello World" у HTML

Як відомо, HTML це мова розмітки. Іншими словами, HTML — це текст, "розмічений" тегами, які надають інформацію для інтерпретатора (яким часто є веббраузер). Припустимо, ви форматуєте бібліографічний запис і хочете вказати назву твору курсивом. У HTML ви використаєте теги em ("em" скорочення від emphasis, означає виділення). Отже, частина вашого HTML-файлу може виглядати так:

… в роботі Михайла Грушевського <em>Історія України-Руси</em>, наприклад …

Найпростіший файл HTML складається з тегів, які вказують на початок і кінець усього документа ( та ), а також тегів, які ідентифікують head (заголовок) і body (тіло) в цьому документі. Інформація про файл зазвичай потрапляє в заголовок, тоді як інформація, яка буде відображатися на екрані, зазвичай потрапляє в тіло.

<html>
<head></head>
<body>Hello World!</body>
</html>

Ви можете спробувати самі створити HTML-код. У текстовому редакторі (наприклад Notepad++) створіть новий файл. Скопіюйте наведений нижче код у редактор. Перший рядок повідомляє браузеру, який це файл. Тег html містить dir (напрямок тексту), встановлений на ltr (зліва направо), а lang (мову) — на американську англійську. Тег title у заголовку документа HTML містить матеріал, який зазвичай відображається у верхній панелі вікна під час перегляду сторінки та на вкладках браузерів.

<!doctype html>
<html dir="ltr" lang="en-US">

<head>
    <title><!-- Insert your title here--></title>
</head>

<body>
    <!-- Insert your title here -->
</body>
</html>

Змініть обидва

на

Hello World!

Далі збережіть ваш файл у будь-яку папку на вашому комп'ютері, назвавши його, наприклад, hello_world.html, але обов'язково з розширенням .html. Щоб відкрити цей файл у браузері, натисніть правою кнопкою миші по файлу і виберіть пункт "Відкрити за допомогою". У підменю оберіть бажаний браузер. Варто зазначити, що описаний підхід передбачений для ОС Windows.

Після того, як ви відкриєте файл, ваше повідомлення Hello World! має з’явитися в обраному браузері. Зверніть увагу на різницю між відкриттям файлу HTML за допомогою браузера на зразок Microsoft Edge чи Google Chrome (які інтерпретують його), та відкриттям того ж файлу за допомогою текстового редактора (який цього не робить). Нижче наведені зображення, які демонструють цей факт.

Що таке вебсторінки та HTML?

Перегляд файлів HTML

"Hello World" у HTML

Рекомендована література для вивчення HTML

Про авторів