Структура HTML-документаосновні теги, приклад

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

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

Створення html-документа

Створити просту сторінку сайту можна в будь-якому редакторі. Підійде навіть “Блокнот”. Для початківця розробника рекомендується використовувати інші редактори, у яких є функції автопідстановки та інші підказки. Завдяки цьому можна створювати готові таблиці, посилання, зображення та інші елементи. А в “Блокноті” кожну букву доводиться писати вручну.

Як правило, “Блокнот” використовують тільки в тих випадках, коли під рукою немає інших інструментів. Спочатку створюється текстовий документ, а потім зберігається у форматі html. Всі сторінки сайту повинні бути з розширенням html.

Мова html є ієрархічним. Тобто існує спеціальна структура html-документа. Що це таке? Розглянемо нижче для наочності.

Структура html-документа. Приклад

Структура завжди одна і та ж. Якщо ви захочете поміняти щось, браузер не зможе обробити. В результаті ви не отримаєте те, що задумали.

структура html документа

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

Структура html-документа – основні теги:

  • З цих трьох тегів складається каркас всього сайту. Зверніть увагу на малюнок. Всі ці теги мають закриваючий тег зі знаком “/”. Якщо ви пишете від руки, звикайте ставити відразу обидва тега – відкриваючий і закриваючий.

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

    Розділ head

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

    Заголовок повинен бути завжди. Без нього жоден пошуковик не зможе визначити назву контенту (тексту) на веб-сторінці. А це погано для просування сайту. Більш того, в браузері нагорі не буде вказаний заголовок сторінки. Це незручність для користувача.

    Структура html-документу така, що заголовок вказується тільки в розділі head. Якщо тег вказати в розділі body або після нього, то обробник на нього уваги не зверне.

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

    Підключення стилів

    Структура html-документа дозволяє підключати стилі різними способами. Більш того, їх можна писати індивідуально в кожному елементі. Але даний спосіб не рекомендується, оскільки код стає занадто великим і незручним.

    Пошукові системи рекомендують всі стилі виносити в окремий файл, а в елементах просто використовувати різні класи.

    Підключається файл наступним чином.

    В атрибуті href вказується шлях до файлу. Якщо шлях буде помилка, то стилі не завантажаться. Також обов\’язковий атрибут type, який вказує, що це файл css.

    Іншим варіантом є визначення стилів прямо в розділі head.

    стили в html

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

    Якщо створюваний клас буде використовуватися тільки на одній сторінці, тоді цей варіант вам підходить.

    Підключення скриптів

    Скрипти підключаються наступним чином.

    Тут обов\’язкові два атрибути: type і src. У першому вказуємо, що це файл javascript, а другий – де розташований файл. Якщо ви допустите помилку, то нічого працювати не буде.

    Розділ body

    Структура html-документу така, що розміщувати утримання, яке буде видно користувачеві, потрібно тільки в розділі body. Назва тега говорить сама за себе.

    Тут вказується весь основний код сторінки, яка може включати необмежену кількість елементів. Але чим довше код, тим довше він буде оброблятися.

    Розглянемо основні теги, які можна використовувати в області body. Основних не так багато. Всі інші ви будете дізнаватися по мірі зростання ваших знань і практики.

    Основні теги

    Структура html-документа вимагає обов\’язкового порядку написання елементів. Теги завжди повинні по краях обрамляться дужками . Без цього браузер не зрозуміє, що це тег. Після дужки що відкривається завжди слід ім\’я елемента (тега). Якщо ви допустите пробіл між < і іменем, то браузер вважатиме це за текстом.

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

    структура html документа что это такое

    Порядок атрибутів не має значення. Але їх написання (оформлення) дуже важливо. Завжди спочатку йде ім\’я атрибута, потім знак рівності, потім пишеться в лапках значення атрибута. Значення може бути різним – цифрове або текстове.

    Атрибут src у всіх тегах вказує шлях до файлу, який потрібно довантажувати. Атрибут alt у всіх елементах вказує короткий опис. В даному випадку завантажується фотографія bird.jpg з описом – фотографія птиці.

    Крім цього, в тегу img, можна було вказати розміри, тільки ширину або висоту, заголовок, вирівнювання, клас стилю або рамку.

    Розглянемо інші основні теги, які зазначаються в розділі body.

    Тег

    Призначення

    Посилання

    Структура HTML-документаосновні теги, приклад

    Зображення

    Абзац

    Перенесення тексту на новий рядок

    Жирний текст

    курсив

    Перекреслений текст

    Підкреслений текст

    ,

    Списки

    Таблиці

    Як все це можна уявити в голові

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

    создание html документа

    Має місце бути такий варіант:

     структура html документа основные теги

    І такий:

    структура html документа пример

    Використання стилів

    Як зазначалося на початку, стилі можна підключати як файлом, так і вказувати в розділі head. У будь-якому випадку опис класів відбувається абсолютно однаково.

    Наприклад, можна вказати стиль заголовка. Тоді вам потрібно написати h1 (оскільки стиль заголовка другого рівня), відкрити дужки і писати, які властивості будуть в цьому елементі. Якщо ви знаєте базову англійську, то проблем бути не повинно. Всі названі властивості людською мовою.

    использование стилей css

    Якщо хочете вказати цей стиль відразу для декількох елементів, то напишіть їх через кому.

    использование нескольких стилей css

    Результатом буде червоний заголовок.

    текстовый документ

    Вищевказані способи підходять для оформлення стандартних елементів. Але також можна створювати і свої класи. Їх назва має починатися з точки, потім пишеться будь-яке довільне ім\’я.

    классы css

    Використовувати їх потрібно ось так.

    использование классов css

    Зверніть увагу: якщо ви вказали налаштування стилів для стандартного елемента, не потрібно надалі писати слово class. Стиль буде використовуватися за замовчуванням. В атрибуті class можна вказати тільки ті стилі, які у вас починаються з крапки.