Урок №26. HTML. Макети веб-сторінок

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Приклад HTML макету

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Спробуйте самі! »

Елементи HTML макету

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

Семантичні елементи в HTML5
  • <header> - Визначає заголовок для документа або розділу
  • <nav> - Визначає контейнер для навігаційних посилань
  • <section> - Визначає розділ (секцію) у документі
  • <article> - Визначає незалежну автономну статтю
  • <aside> - Визначає вміст, окрім вмісту (наприклад, бічну вставку)
  • <footer> - Визначає нижній колонтитул (футер) для документа або розділу
  • <details> - Визначає додаткові деталі
  • <summary> - Визначає заголовок для елемента <details>

Методика HTML розмітки

Існує п'ять різних способів створення багатоколонових макетів. Кожен спосіб має свої плюси і мінуси:


Який спосіб верстки вибрати?

HTML таблиці

Елемент <table> не був розроблений як інструмент компонування веб-сторінок! Метою елемента <table> є відображення табличних даних. Отже, не використовуйте таблиці для макета сторінки! Вони принесуть безлад у ваш код. І уявіть, як важко буде зробити редизайн вашого сайту (змінити дизайн) через пару місяців, бо доведеться практично повністю переписувати HTML код.

Порада: НЕ використовуйте таблиці для створення макету веб-сторінки!


CSS фреймворки (frameworks)

Якщо ви хочете швидко створити макет, ви можете використовувати фреймворк, наприклад W3.CSS або Bootstrap.


CSS Float (обтікання)

Це звичайне використання цілих веб-макетів за допомогою властивості CSS float. Float легко вивчити - потрібно просто запам'ятати, як працюють float і чисті властивості. Недоліки: плаваючі елементи прив'язані до потоку документів, що може шкодити гнучкості. Докладніше про float можна дізнатися з розділу CSS Float і Clear.

Приклад float макету

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

Змініть розмір вікна веб-браузера, щоб побачити ефект реагування (про це ви дізнаєтеся в наступному розділі - HTML Адаптивність.)

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Спробуйте самі! »

CSS Flexbox (гнучна коробка)

Flexbox - це новий режим компонування в CSS3. Використання flexbox гарантує, що елементи будуть вести себе передбачувано, коли макет сторінки має відповідати різним розмірам екрану та різним пристроям відображення. Недоліки: не працює в браузері Internet Explorer 10 і раніших версіях.

Дізнатися більше про flexbox можна в розділі CSS Flexbox.

Приклад flexbox макету

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

Змініть розмір вікна браузера, щоб побачити ефект адаптивності.

Примітка: Flexbox не підтримується в Internet Explorer 10 і більш ранніх версіях.

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Спробуйте самі! »

CSS Grid (сітка)

Модуль CSS Grid Layout пропонує систему компонування на основі сітки, з рядками і стовпцями, що полегшує розробку веб-сторінок без використання float і позиціонування.

Недоліки: не працює ні в Internet Explorer, ні в Edge 15, ні раніших версіях.

Докладніше про CSS grid дивіться в розділі CSS Grid.


Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте Довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.