Від автора: вітаємо вас на webformyself, у нас ви можете дізнатися все про сайтобудуванні. А сьогодні я вам розповім, які потрібні теги для створення каркаса сайту.
Що таке каркас
Під каркасом (кістяком) розуміються основні блоки, які поділяють вміст один від одного. Найпростіший приклад: шапка – блок ліворуч – блок праворуч і підвал (футер). У цих блоках у свою чергу може бути дуже багато інших, вкладених елементів, але вони вже є додатковою розміткою, яка додається на другому етапі.
Як його створити
Отже, ми розглянемо всі теги, які вам можуть для цього знадобитися. Почнемо з базових.
— найголовніший контейнер, в який поміщається вся сторінка. Власне, сьогодні його можна навіть не писати, і без нього все буде чудово працювати, але заради дотримання правил можна і написати.
— важливий контейнер для зберігання інформації, яка не буде виведена на сторінку, але відіграє велику роль у її формуванні.
— сюди поміщають все тіло сторінки, тобто її вміст, тому його наявність у коді обов’язково.
Важливі настройки, які обов’язково повинні бути визначені
Отже, під основою сайту особисто я розумію не тільки те, що ви бачите безпосередньо своїми очима, але й ті шматки коду, які допомагають вмісту виводитися правильно. Однією з таких рядків є — вона визначає тип сторінки і її потрібно помістити навіть не в head, а в самий початок, перед глобальним контейнером. Таким чином ми вкажемо, щоб наша розмітка інтерпретувалася по стандарту html5.
Всі інші параметри вказуються в блоці head. Це кодування, підключення таблиць стилів, скриптів (хоча їх можна підключати і в кінці body), завдання тайтла (Title), інших мета-тегів і багато іншого.
Створення каркаса старим способом на HTML4
Зовсім донедавна це був найпопулярніший спосіб, навіть сьогодні, я думаю, деякі продовжують його використовувати. Він полягає в тому, що всі елементи створюються однаково – з допомогою тега div, який позначає порожній блоковий контейнер. В залежності від розташування і ролі, кожен такий блок отримував свій ідентифікатор, щоб до нього можна було звернутися пізніше через стилі.
Таким чином, розмітка виглядала приблизно так:
Розробники орієнтувалися по назвам ідентифікатором, саме вони дозволяли визначити, що являє собою елемент. Таким чином, використовувався лише один тег для створення структури сайту – div, тільки з різними id (або стильовими класами).
Як створити макет сторінки за новим на HTML5
Нова версія мови розмітки сильно змінила цей процес. Починалося все з того, що веб-розробники почали усвідомлювати необхідність створення нових тегів. Шапку так часто називали div id = «header», що розумно було створити спеціальний елемент header, який був би призначений саме для цього елемента на сайті.
Власне, саме це і сталося, тільки крім header з’явилася ще маса інших. Давайте я покажу приклад каркаса на HTML5, а потім вже його поясню:
Як бачите, ідентифікатори раніше прописуються елементів, але тепер у нас у самих назвах тегів закладена роль елементів. Так, nav створений для вкладання в нього важливих посилань, а по суті, створення головного меню сайту. Section – це окрема секція на сайті, зі своїм заголовком і головною думкою.
Aside – щось на зразок другорядної інформації, тому деякі в цей елемент вкладають бічну колонку. Хоча для цієї мети і годиться section, адже сайдбар – по суті, окрема секція на веб-сторінці.
Ну і, нарешті, новий тег footer створений для виведення підвалу. Ідентифікатори в цьому випадку перестали виконувати роль єдиних інформаторів на сторінці, хоча їх імена підібрані так, щоб вказувати на роль блоків. Зауважте, що шапка отримала назву main-header і це неспроста. Справа в тому, що на веб-сторінці може бути кілька «шапок». Це може бути шапка статті або бічній колонки.
Меню теж отримало відповідний ідентифікатор, тому що крім нього на сайті може бути і інша навігація, але менша за своєю важливістю.
Отже, ми з вами розібрали найпростіший приклад створення скелета, якщо ви хочете отримати більше інформації по використанню html5, запрошую вас подивитися наші уроки за цією технологією.
