Web-сторінка

Web-документ, який відображається браузером, — це результат виконання програм, створених на різних мовах. Для опису структури використовується мова розмітки (HTML), для опису зовнішнього вигляду — мова стилів (CSS). Для опису поведінки документа, його реакції на дії користувача використовується мова сценаріїв (JavaScript).

Web-сторінка — це текстовий файл з розширенням .htm або .html. Він може бути створений у будь-якому текстовому редакторі (наприклад, Блокнот). Потім цей файл відкривається браузером.

Відображення нерозміченого файлу

Розглянемо файл, який містить звичайний текст без жодної розмітки.

Вміст файлу 1.html у блокноті

<!DOCTYPE html>
<html>
<head>
    <title>Приклад без розмітки</title>
</head>
<body>
    Перший рядок.
    Другий рядок.
    Третій рядок.
</body>
</html>

Як цей файл виглядає у браузері

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

Відображення розміченого файлу

Щоб документ виглядав структуровано, використовуються спеціальні команди — теги. Теги вказують браузеру, як саме слід відображати кожну частину тексту.

Вміст файлу 1.html у блокноті (з розміткою)

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Приклад з розміткою</title>
</head>
<body>
    <h1>Заголовок першого рівня</h1>
    <p>Перший абзац тексту.</p>
    <p>Другий абзац тексту.</p>
    <ul>
        <li>Перший пункт списку</li>
        <li>Другий пункт списку</li>
    </ul>
</body>
</html>

Як цей файл виглядає у браузері

Тепер документ має чітку структуру: заголовок, абзаци, маркований список. Браузер розуміє теги і відображає вміст відповідним чином.

Нове в HTML5

Сучасна версія HTML — HTML5 — принесла багато покращень:

• Спрощений DOCTYPE: <!DOCTYPE html> — короткий і зрозумілий.
• Мета-тег charset: <meta charset="UTF-8"> — задає кодування документа, забезпечуючи коректне відображення символів різних мов.
• Атрибут lang: Вказує мову вмісту сторінки (наприклад, <html lang="uk">).
• Семантичні теги: <header>, <nav>, <main>, <footer> та інші для кращої структури.
• Мультимедіа без плагінів: <video> та <audio>.
• Графіка: <canvas> та <svg>.

Усі сучасні браузери підтримують HTML5, і саме цю версію ми будемо використовувати в подальших уроках.