HTML і CSS

атрибути тегів
Шаблон HTML документа
стилі
CSS
Валідація верстки і CSS
Форматування коду HTML і CSS
Що далі

HTML - мова для браузера, який говорить що і як відображати.

Відразу перейдемо до прикладів. Створимо файл page.html наступного змісту:

<H1> Текст заголовка </ h1> <p> Це параграф тексту </ p> <article> <p> Перший параграф статті </ p> <p> Другий параграф статті </ p> </ article>

Якщо відкрити файл в браузері то побачимо приблизно наступне:

Все що було всередині кутових дужок <і> виявилося приховано. То були теги <h1> для заголовка, <p> для параграфа тексту і <article> для статті. Вони повідомили браузеру на які блоки розбитий текст і той побудував ієрархічну струтури даних - Document Object Model, скорочено, DOM - яка потім використовується для відтворення сторінки і для доступу до вмісту документа з JavaScript. Схематично, DOM для нашого прикладу виглядає так:

Все що виявилося всередині тега <article> .... </ article>, а це два параграфа з текстом <p> ... </ p>, стало дочірніми елементами тега article.

Браузер отрісовиваєт сторінку керуючись вмістом DOM. Схематично, виглядає це так:

Схематично, виглядає це так:

Браузер бере перший елемент DOM дерева - тег h1 -, визначає положення цього блоку на сторінці і розміщує всередині нього рядок "Текст заголовка". Потім він бере наступний елемент - тег <p> і повторює свої дії. Черга доходить до тега article, і з ним все трохи складніше через наявність дочірніх елементів. Визначивши горизонтальну границю блоку article браузер переходить до отрисовке дочірніх елементів - двох тегів p - зверху вниз, попутно обчислюючи висоту блоку article.

Гарну статтю з прикладами та ілюстраціями DOM можна знайти на Хабрахабр .

атрибути тегів

У кожного тега є набір атрибутів впливають на його поведінку. Їх можна відразу вказати в HTML розмітці сторінки, або пізніше призначити за допомогою JavaScript коду. Наприклад, у посилань є атрибут href, він містить URL адреса цієї посилання:

<A href = "https://devman.org/challenges/"> Завдання </ a>

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

Крім специфічних атрибутів, як-то href для посилання або value для поля введення, є набір універсальних атрибутів. Їх можна використовувати для будь-якого тега.

style налаштовує оформлення тега: відступи, колір, розмір шрифту та інше.

id призначає тегу унікальний ідентифікатор. наприклад:

Зазначений id не може повторно використовуватися в документі, перша глава "chapter1" може бути тільки одна. Атрибут id зручний для швидкої навігації по DOM дереву з JavaScript коду, див document.getElementById. Також корисний як якоря на сторінках .

class призначає тегу набір неунікальний ідентифікаторів. Використовується для прив'язки стилів в CSS, зручний для навігації по DOM дереву в JavaScript коді. Наприклад, ось так може виглядати велика синя кнопка на сторінці:

<Button class = "btn btn-lg btn-primary btn-disabled"> Зберегти </ button>

data- * привласнює тегу дані в форматі JSON для подальшої роботи з ними з JavaScript коду. Детально описано на сайті Mozilla Developer Network, MDN - тут .

Шаблон HTML документа

HTML розмітка повинна містити мінімальний набір службових тегів. Без них браузер може некоректно відобразити сторінку, верстка буде визнана зламаною. Ось що повинно бути в HTML документі:

<! DOCTYPE html> <html> <! - тег самого верхнього рівня, включається в себе весь HTML документ -> <head> <! - теги нижче не відображаються, але містять багато важливих налаштувань і мета-інформації -> <meta charset = "utf-8"> <! - кодування нижченаведеної розмітки -> <title> Назва сторінки, відображається на вкладці браузера і в закладках </ title> </ head> `<body> <! - Основне вміст сторінки -> <p> тут живуть всі видимі теги </ p> </ body> </ html>

Детально структура документа розібрана на Структура HTML документа .

стилі

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

Розглянемо приклад. Для кожного тега на сторінці вкажемо border. На вкладці «Result» віджета JSFiddle видно результат відтворення.

Інший приклад. Виділимо цитату на тлі решти тексту.

Стилі дозволяють сильно змінити зовнішній вигляд тегів. Також можна змінити алгоритм їх відтворення. Розміщення блоків на сторінці зверху вниз в тому порядку, в якому теги зустрічаються в HTML розмітці називається Normal layout flow . За допомогою властивостей position , float і display можна перемкнути движок браузера в інший режим. Для прикладу розмістимо блоки справа наліво.

Набір правил за якими браузер обчислює розмір блоків / тегів з урахуванням padding, margin, border і інших властивостей називається CSS Box Model . З ним корисно ознайомитися.

Писати стилі для HTML розмітки не завжди просто. Якщо завдання не має очевидного рішення, почати пошуки варто з Stack Overflow . На цьому сайті зібрано велику кількість рецептів по верстці.

Найкорисніший інструмент в арсеналі верстальника - це Chrome DevTools . Він дозволяє знайти тег на сторінці, щоб переглянути його стилі і дописати нові, дізнатися розмір блоку, відредагувати його вміст і все це в інтерактивному режимі. Знайомство варто почати з inspecting the DOM and styles .

Нарешті, важливо помітити, що атрибут style хороший для чорнового прототипирования і експериментів, зручний коли стилів мало і вони не використовуються повторно. В інших випадках рекомендується використовувати механізм CSS. Він краще масштабується, дозволяє створювати і повторно використовувати бібліотеки стилів, спрощує JavaScript код.

CSS

Cascading Style Sheets, вони ж каскадні таблиці стилів, дозволяють прив'язувати стилі до цілих груп тегів. Наприклад, можна разом змінити колір всіх посилань на чорний, використовувати bold шрифт. Як це зробити:

<Style> a {color: black; font-weight: bold; } </ Style> <a href = "https://stackoverflow.com/"> Stack Overflow </ a> .... <a href = "#top"> Повернутися назад </ a>

CSS правила поміщаються всередину тега <style>, стилі вказуються всередині фігурних дужок, символ; служить роздільником. Детальний синтаксис описаний тут .

Браузеру потрібно якось повідомити до якого набору тегів застосовувати стилі. Для цього використовують селектори - частина специфікації CSS, спеціальна мова описує правила вибірки тегів з DOM дерева. В наведеному вище прикладі селектором є назва тега a і стилі застосовуються до всіх тегам <a> на сторінці. У більш складних ситуаціях використовують класи:

<Style>. btn {padding: 6 px 12 px; font-size: 14 px; }. btn-blue {background-color: blue; } </ Style> <button class = "btn btn-blue"> Синя кнопка </ a> .... <button class = "btn"> Сіра кнопка </ a> <button> Стандартна кнопка </ a>

Як видно з прикладу вище тег "Синя кнопка" отримав стилі відразу двох селекторів .btn і .btn-blue. Класи і CSS правила можна змішувати в рамках одного тега, послідовність застосування правил і пріоритет описані на сторінці Cascade and inheritance . Правила ці досить заплутані, спрощено їх можна сформулювати так:

Стилі описані в атрибуті style вважаються пріоритетними. Їх вже не перевизначити.
Чим специфічність селектор - чим більше в ньому зазначено відомостей про тезі -, тим він приоритетнее.
У селекторі клас цінується вище назви тега. Селектор .btn специфичнее ніж button.
З двох однакових або однаково специфічних селектор перемагає той який знаходиться нижче в HTML документі.
Найнижчий пріоритет у стандартних стилів браузера.

Приклади селекторів з поясненнями є в тому ж туторіали MDN:

Сайти, як правило, складаються з великої кількості сторінок. Щоб не дублювати вміст тега <style> стилі виносять в окремий файл і потім підключають його всередині <head> документа:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "/style.css"> </ head> <body> ... </ body > </ html>

Браузер самостійно довантажити файл style.css з сервера.

Під зовнішні CSS файли намагаються винести весь код придатний для повторного використання. У тезі <style> залишають тільки стилі специфічні для даної сторінки.

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

Сайт спочатку верстають під екран смартфона, а вже потім адаптують під великі екрани: розтягують елементи, додають відступи по краях сторінки, розміщують банери. Цей підхід отримав назву «Mobile First».
У специфікації CSS3 з'явилися media-queries. Частина правил активується тільки при заданій ширині екрана браузера.

Наприклад, можна збільшити розмір шрифту на великих екранах і зробити його дрібніше для малих:

<Style>. article p {font-size: 12 px; } @ Media (min-width: 1200px) {. article p {font-size: 14 px; }} @ Media (max-width: 768px) {. article p {font-size: 10 px; }} </ Style>

Для ознайомлення корисно подивитися більше прикладів з media queries .

Ще одна давня проблема це анімація HTML розмітки: щоб повідомлення з'являлися красиво і плавно, щоб навігаційне меню виїжджало зліва. Раніше все це робилося засобами JS, що призводило до низької продуктивності. Браузеру складно перемальовувати сторінку десять разів на секунду. І ось, з'явилася CSS анімація. Вона оптимізована по продуктивності, майже не вимагає JS, працює "з коробки". Приклади можна подивитися там же, на сайті MDN .

Згодом Веб стає все яскравіше. Можливості браузерів і комп'ютерів ростуть, дизайнери поспішають привнести щось нове, свіже. Тепер навіть однієї сторінки Лендінгем вимагає багатьох тисяч рядків коду CSS. Ентузіастів готових писати таке раз по раз з нуля стає все менше. Щоб скоротити обсяг роботи придумали фреймворки. Це бібліотеки з великою кількістю стилізованих і добре підігнаних один до одного елементів. Один з найпопулярніших - це Bootstrap . Від фреймворка розробник отримує потужні механізми адаптивної верстки, багатий набір стандартних елементів, інструменти для створення своїх тем. Коли на одній чаші ваг 10К рядків глючной CSS, а на інший Bootstrap +400 тривіальних рядків коду, багато хто вибирає другий варіант.

Валідація верстки і CSS

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

Для вирішення цієї проблеми створили автоматичні валідатори верстки. Один з найпопулярніших це W3C HTML Validator . Все що потрібно - це вказати URL сторінки сайту або завантажити файл з HTML розміткою.

На перших порах валідатор може бути дуже корисний. Він відловити типові помилки. Перевіряй себе частіше, швидше навчишся.

Форматування коду HTML і CSS

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

Дотримуйся відступи в HTML і CSS

Ось так погано:

<Section class = "slide" id = "9"> <div> <h2> KPI бувають різними </ h2> <div> Залежить від завдань бізнесу </ div> <ul> <li class = "next"> Воронка продажів і конверсія </ li> <li class = "next"> Відвідуваність сайту </ li> <li class = "next"> Джерела переходів на сайт </ li> ...

Не видно де закриваються теги, складно зрозуміти що до чого відноситься. Ось так багато краще:

Як розміру відступу в HTML, CSS і JS прийнято використовувати 2 пробілу, проти 4х в Python.

CSS теж повинен бути придатний для швидкої навігації по ньому. Ось так погано:

. selector,. selector-secondary,. selector [type = text] {padding: 50 px; margin: 0 px 0 px 15 px; background-color: # f5f5f5; font-size: 10 px;}. btn {padding: 5 px;}

Так краще:

/ * По одному селектору на рядок * /. selector,. selector-secondary,. selector [type = text] {/ * по одному правилу на рядок * / padding: 50 px; margin: 0 px 0 px 15 px; background-color: # f5f5f5; font-size: 10 px; }. btn {padding: 5 px; }

У розмітці HTML і CSS також не варто використовувати табуляцію. Вона по-різному відображається в текстових редакторах і на GitHub. Краще позначати відступ двома пробілами.

Правила оформлення коду на проекті можуть відрізнятися від рекомендованих, з історичних причин. Важливо дотримуватися стилю прийнятого в команді. Для цього використовують EditorConfig . Установи розширення для своєї IDE / текстового редактора, воно автоматично підхопить настройки з файлу .editorconfig в репозиторії проекту. Для нового проекту можна скористатися настройками рекомендованими Devman .

Більш повне керівництво є на сайті академії HTML .

Що далі

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

Тегів існує величезна кількість, і ще більше різних стилів до них. Всі їх знати не обов'язково. Часто зустрічаються 30-40 тегів, і вони покривають 99% потреб.

Ось корисні ресурси:

Fast : Интернет-провайдеры и сети