ЮРІЙ ЧЕРНІЄВСЬКИЙ

ПЕРСОНАЛЬНИЙ САЙТ

Основні принципи побудови HTML-документів.

HTML
HTML

Що собою являє HTML документ

Для початку нам варто розібратися з тим, що собою являє HTML документ.
Якщо повідомити Вам, що HTML документ – це звичайний текстовий файл, створений за допомогою будь-якого текстового редактора, наприклад Блокнота. То мабуть логічним буде Ваше запитання:”Так у чому ж тоді різниця?”
Різниця в тому, що HTML документ оформлений у відповідності до правил мови HTML. Файл HTML фактично становиться веб сторінкою в тому разі, якщо ми його збережемо з розширенням HTML, або HTM.

У чому різниця між розширенням HTML та HTM?

HTM:

MS DOS протягом тривалого часу була найбільш поширеною операційною системою для ПК, і вона мала символьні обмеження для розширення файлів.Розширення файлів не могло складатися більше ніж з трьох символів. Тому сучасні розширення HTML записувалися трьома символами HTM. Насправді неважливо, яке з розширень використовувати.

То що таке HTML?:

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

HTML не є мовою програмування

HTML – мова розмітки гіпертекстового документа, але не слід її плутати з мовою програмування.
HTML не є мовою програмування, вона призначена лише для розмітки сторінки, надання певного вигляду її складовим.

Важливо:

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

Структура стандартної html-сторінки.

Існують загальні правила запису HTML документів та принципи, які використовуються при створенні сайтів.
Сторінка завжди починається з відкриваючого тегу <html> та закінчується закриваючим тегом </html> і складається з двох обов’язкових блоків — голови (head) та тіла (body), які записуються послідовно один за одним.

Анатомія HTML5-документа:

<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8">
<title>Моя перша веб-сторінка</title> 
</head>
<body> 
<h1>Мій перший заголовок</h1>
<p>Мій перший абзац.</p>
</body>
</html>

У вище наведеному прикладі ми маємо:

<!DOCTYPE html>

Тип документу. В сиву давнину, коли HTML був молодим (приблизно в 1991-92 роках), типи документів мали слугувати набором посилань на правила, яким HTML-сторінка мала слідувати, щоб вважатися правильним HTML (наприклад, автоматична перевірка помилок та інше). Однак, у наш час мало хто переймається типами документів, і вони є швидше історичним артефактом, який потрібно додавати, щоб все працювало правильно. Поки що це все, що вам потрібно знати про тип документу.

Елемент <html>

<html></html>. Цей елемент загортає весь контент на всій сторінці. Також його називають кореневим елементом (root element). Завжди додавайте атрибут lang до html тегу, щоб встановити мову за замовчуванням для вашої сторінки. <html lang=”uk”>

Елемент <head>

<head></head> — цей елемент слугує контейнером для всієї інформації, яку ви хочете додати до своєї сторінки, але яка не є власне контентом сторінки, який будуть переглядати користувачі. Це, зокрема, ключові слова, опис сторінки, який буде з’являтися в пошукових результатах, CSS для стилів контенту, набір символів (кодування) тощо.

Елемент <body>

<body></body> – цей елемент містить увесь контент, який ви хочете показати користувачам, коли вони відвідують вашу сторінку: текст, зображення, відео, ігри, аудіо тощо.

<meta charset=”utf-8″>

Цей елемент визначає набір символів, які використовує сторінка. Зазвичай це UTF-8, який містить найбільше символів з більшості людських писемних мов. По суті, ваша сторінка зможе відобразити практично будь-який текстовий контент. Немає жодних причин пропускати цей елемент, він може допомогти уникнути певних проблем пізніше.

Елемент <title>

<title></title> — цей елемент містить заголовок вашої сторінки, який буде відображатися у вкладці браузера при завантаженні сторінки. Також текст у цьому елементі буде відображатися в закладках, якщо додати сторінку до закладок.

Візуалізація структури сторінки HTML

Нижче Ви можете переглянути візуалізацію найпростішої структури HTML-сторінки:

Візуалізацію найпростішої структури HTML-сторінки
Візуалізацію найпростішої структури HTML-сторінки

Примітка:

Зворотня сумісність HTML – одна з найбільш вагомих причин для негайного переходу на HTML5. Вона полягає в тому, що розмітка працює в більшості існуючих браузерів. Ви можете почати використовувати HTML5 прямо зараз, навіть в Internet Explorer 6, і поступово переробляти свою розмітку. Вона нормально буде проходити валідацію W3C (умовно, звичайно, тому що стандарти продовжують розвиватися).

Список першоджерел:

HTML и CSS на 100% Игорь Квинт, 2008
HTML: ПОПУЛЯРНЫЙ САМОУЧИТЕЛЬ Чиртик Александр Анатольевич ISBN: 978-5-911-80937-9 Год издания: 2008
Електронні ресурси:
Основи HTML

Обговорення публікації на форумі.