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

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

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

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

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

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

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

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

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

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

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

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

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

розділ head

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

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

Структура html-документа така, що заголовок

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

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

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

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

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

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

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

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

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

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

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

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

розділ body

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

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

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

Основні теги

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

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

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

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

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

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

таблиці

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

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

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

І такий:

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

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

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

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

Відео: GoToWeb - Відеокурс Html і Css, Урок 3, Елемент Doctype, теги html, head, body, каркас html-сторінки

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

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

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

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