Щоб створити сторінку html, наберіть в Блокноті наступні кілька рядків:
З труктура документа html, xhtml
Скріншот наочно показує структуру документа html, яка повинна відповідати наступним вимогам: у першому рядку - зазначено тип документа. Далі слід тег Html, в який вкладені теги Head і Body. У тезі Head розташовуються службові теги: link, meta, base, script - вони не відображаються на сторінці і тег title - назва веб-сторінки, яке видно в заголовку вкладки браузера. У тезі Body розташовані видимі елементи розмітки (у нас - заголовок і абзац).
Всі вкладені елементи слід закривати в порядку, зворотному їх відкриття. Деякі теги не мають закриває тега, деякі містять атрибути з певними значеннями. приклад для обох випадків: тег Meta в рядку 4, у нього атрибут Charset, а його значення utf-8 і немає закриває тега.
Для того щоб створити html-сторінку, просто збережемо наш документ в форматі .html, задавши йому ім'я, у мене - struktura. Зверніть увагу, що потрібно змінити «Тип файлу» і вибрати кодування, у мене вибрана - універсальна UTF-8:
Зверніть увагу, що в коді сторінки змінилася перший рядок, що містить тег DOCTYPE, що оголошує тип документа. Дивіться про правильне написання тега! DOCTYPE для всіх версій в довіднику. До тегу Html в рядку 2 доданий обов'язковий для xhtml-документів атрибут xmlns. Зміна в рядку 4: це тег Mета. задає кодування документа.
Р азніца версій html, xhtml і html5
Перш за все: тег! DOCTYPE допомагає браузеру розпізнавати і правильно інтерпретувати веб-сторінки. XHTML - це розширений HTML і відрізняється більш жорсткими вимогами до синтаксису. Найбільш поширеними версіями є HTML 4.01 і XHTML 1.0, і їх різновиди Transitional, Frameset і Strict.
Strict - це строгий синтаксис розмітки, забороняє використання елементів зі статусом «небажані». Документи цього типу найкраще взаємодіють з алгоритмами перетворення, такими як, наприклад, функція пошуку на сайті. Frameset - служить для сторінок, що містять фрейми. Transitional має перехідний синтаксис, в більшості випадків використовують саме його. Версія XHTML 1.1 не має різновидів, вона підпорядкована суворим правилам, як Strict.
Правила оформлення документів
Порожні елементи, пропуски не впливають на відображення html-документа в браузері, а в xhtml-документі потрібна точність розмітки. В html-документах є елементи з необов'язковим закриває тегом. Наприклад, для створення абзацу використовується тег P, а в кінці абзацу необов'язково ставити
. У XHTML необов'язкових закривають тегів немає, вони обов'язкові. А елементи, для яких закриває тег заборонений, пишуться з обов'язковим додаванням пробілу і слеша перед закриваючою дужкою:- це перенесення рядка, на відміну від HTML:
. Погляньте на тег Meta в останньому скріншоті.
В HTML, крім атрибутів id і class, не важливий використовуваний регістр символів, в XHTML - тільки малі літери, а всі значення атрибутів обов'язково полягають в лапки. У наступному уроці розглянемо елементи тега Body, структурують текст: заголовки, абзац, списки. А далі, за планом: вставимо на сторінку зображення, зв'яжемо html-сторінки в єдиний сайт за допомогою посилань.
