Структура HTML-документа з чого починається валідний html-код
Найбільш основи HTML і створення з їх допомогою простого сайту ми вивчаємо в цьому розділі. А тут дивимося докладніше на різні важливі штуки.
У прощено схема HTML-документа виглядає так:
Почнемо по порядку з самої верхньої секції.
Як не сумно звучить, але багато вебмайстрів або нехтують цим тегом, або абсолютно не наздоганяють його призначення.
Т ег DOCTYPE є обов'язковим і повинен йти першим рядком. Він є ключовим елементом, який задає формат синтаксису документа. Без нього просто не можна створити валідний документ.
Чим же такий поганий цей режим? По-перше, кожен тег буде оброблений за специфікацією, обраною браузером з його особистий розсуд. Що швидше за все позначиться на результуючому зовнішньому вигляді. І, наприклад, під час виконання клієнтських java-скриптів виникнуть збої.
Кожен браузер оброблятиме документ по-своєму — можна забути про однаковий зовнішній вигляд сторінки в різних програмах. Або доведеться навішати купу хардкорних CSS-фіксаторів.
Браузер почне рендерувати сторінку за правилами HTML 4 у режимі зворотної сумісності з IE 6.
Підсумок на екрані: крива сторінка, половина скриптів не виконується.
Загалом це не просто хороший тон і показник вашої грамотності. Doctype Definition визначає ритм написання самого документа.
Розглянемо найактуальніші варіанти на сьогоднішній день.
- 1. strict .dtd">
- 2. Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">
- 1. HTML 4Strict - суворий
- 2. HTML 4Transitonal - перехідний
§1.2 Стандарт XHTML 1.0
- 1. Strict // EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 2. Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 1. xHTML 1.0Strict - суворий
- 2. xHTML 1.0Transitonal - перехідний
§1.3 Стандарт HTML 5
- html - для всіх документів
Можна розглядати Doctype Definition як ГОСТ'а. Любите якісну тушонку вироблену з дотриманням ГОСТу? Також і браузери з пошуковими системами люблять сторінки, написані відповідно до специфікації. Ви ж не збираєтесь пригощати гостей безпонтовщиною?
При належному намаганні навчитися верстати валідно можна за кілька тижнів. Прийде попітніти, але якщо ви не страждаєте на маразм, то запам'ятається назавжди як треба, а як ні.
Далі розберемося з головою документа.
Тепер докладніше розглянемо секцію. Її ще прийнято називати головою (заголовком) документа.
У згадуємо нашу схемку:
§2.1 Head: загальна інформація
Голова документа повинна починатися відразу після тега і закінчуватися перед тегом (початком тіла документа). Позиція обрана невипадково і несе деяке смислове навантаження. Зазвичай секція містить таку інформацію:
Заголовок документа або ;
Інформацію про мову документа та кодування: про це трохи пізніше;
Інформацію про таблиці стилів і скрипти, що підключаються;
Опис параметрів документа для пошукових роботів;
Адреси rss\rdf\atom потоків характерних сторінці;
З писок далеко неповний, але для того, щоб почати розуміти, цього цілком достатньо.
Тут варто звернути увагу на кілька моментів:
Порядок та угруповання тегів;
Варіанти підключення зовнішніх Java Scripts та CSS.
§2.2 Позиціонування title щодо кодування
Розбираємось з порядком. Найчастіше зустрічається помилка з позиціонуванням заголовка документа.
Це пов'язано не лише з безпекою. Якщо заголовок йтиме першим, завжди є шанс, що браузер спробує самостійно визначити кодування документа.
Добре, тепер браузер зможе прочитати заголовок документа і правильно вивести його у своєму інтерфейсі, а зловмисники отримають додаткову порцію геморою при спробі XSS-інклюдингу (вид атаки за допомогою включення Java Scripts в код сторінки; ділиться на активний і пасивний).
§2.2.1 Актуальні мовні кодування
Тепер про кодування. Ми не розглядатимемо екзотичні варіанти, у нашому випадку цілком достатньо двох:
UTF-8 — найпоширеніше кодування в Інтернеті. Реалізує уявлення Юнікоду (Unicode). Сумісна з 8-бітовим кодуванням тексту.
Windows-1251 – підтримує практично всі українські типографічні символи. Була створена з урахуванням кодувань, використовуваних у ранніх «самопальних» русифікаторах Windows 1990—1991 гг.
Тут варто зауважити, що найкращим варіантом є utf-8, саме її рекомендує консорціум W3C. Однак, не варто орієнтуватися лише на рекомендації консорціуму - первісну увагу варто приділити рекомендації CMS. Наприклад Data Life Engine (DLE) ось уже скільки часу вперто використовує лише windows-кодування. Ви навіть можете спробувати змінити її на іншу, але результат вас засмутить: на екрані ви побачите нечитабельну кашу зі знаків питання або характерні для помилок читання ромби зі знаком питання всередині.
Чому так виходить? Все цікавіше, ніж здається на перший погляд. Насправді, перед тим як браузеротримає сторінку і прочитає в її «голові» заявлене кодування, інформація передається з бази даних у певному кодуванні, обробляється сервером у певному кодуванні і навіть віддається браузеру у певному кодуванні! В ідеалі всі ці щаблі повинні бути синхронні.
Також варто відзначити, що розміри файлів у кодуванні windows і unicode будуть відрізнятися. Як правило, різниця практично не відчутна для документів англійською мовою. Для української мови в UTF-8 розмір файлу буде більшим, ніж для windows-1251.
§2.3 Порядок підключення каскадних таблиць стилів CSS та Java Script'ів
Порядок підключення CSS (каскадних таблиць стилів, в сучасному веб-дизайні в css-файлі зберігається все візуальне оформлення сайту) критично позначається на порядку накладення правил оформлення HTML-елементів. Це означає, що останній підключений файл CSS матиме пріоритет над попередніми.
Т. о. стає реальним для різних сторінок застосувати свої правила оформлення - просто підключіть до потрібної сторінки коригуючий файл останнім.
Приклад підключення бібліотеки Jquery та плагіна до неї:
Далі ми познайомимося з видами верстки.
§3. Види верстки - таблична та блочна
Тепер поговоримо про актуальні на сьогоднішній день способи верстки. Тут можна виділити 2-3 напрямки:
Таблична - структуру сайту визначають таблиці, рядки та стовпці: , , , .
Блокова — опора контенту чи каркас базується на елементах.
Комбінована - якийсь симбіоз таблиць та блоків.
§3.1 Таблична верстка
Як правило, верстальники-початківці першою освоюють табличну верстку. Почасти це відбувається тому, що роблять сайти на безкоштовних хостингах з конструкторами, частково через те, що вонабільш логічним і вимагає менших знань CSS. Я не виявлюся винятком — починав із таблиць.
Що характерно для табличної верстки, так це засмічений код і практична відсутність винесеної у зовнішній файл стилізації. Тегів буде більше, а якщо врахувати, що для візуального оформлення таблиці до кожного тегу додається близько семи параметрів (width, height, border, cellpadding, cellspacing, align, valign та ін), неважко уявити, скільки часу займе верстка і якого величезного розміру буде лише каркас.
Таблиці досить примхливі. Пропустивши один тег або не закривши всього один стовпець, ви ризикуєте витратити купу часу на пошуки причини дизайну, що поплив. Додаткові незручності будуть при спробі щось виправити або переверстати.
Проте, подекуди без таблиць просто не обійтися. Знайдіть у Мережі хоч один форум, відверстаний на блоках. Хоч це і реально, але застосування таблиць для верстки форумів – найраціональніший варіант.
§3.2 Блокова верстка
На сьогоднішній день верстати блоками актуально не просто для моди, це показник професіоналізму. З плюсів можна відзначити компактний код, порівняльну простоту вкладеності, швидкість розробки та правок. Мінус - потрібне знання CSS.
У ерста блоками, можна грати з позиціонуванням як завгодно хитро. Це дозволяє винести важливу для пошукових систем текстову інформацію ближче до початку сторінки.
§3.3 Комбінована верстка
Така верстка має на увазі наявність як таблиць, так і блоків. Правило тут просте: «Таблиці в дивах, таблиць якнайменше».
§3.4 Суть верстки
Не варто забувати, що основною суттю верстки є, було і буде максимальне відображення макета сайту так, як задумав дизайнер або вебмайстер. Іноді можнадозволити собі деяку недбалість на користь красі чи функціоналу. Валідність – не панацея – це аксіома якості, якої варто дотримуватися. Писана вона не вилами по воді і не «васька» на паркані.
Консорціум W3C задає стандарти і ритм, наша з вами справа - дотримуватися специфікації. Гірше нікому не буде.
Поділитися посиланням на цю сторінку у: