Блочна структура HTML

Елементи HTML сторінки зазвичай діляться на блокові і рядкові.

Блокові елементи можна представляти як прямокутні області на сторінці. Вони мають такі особливості:

1. До і після блочного елемента існує перенесення рядка.

2. Блоковим елементам можна задавати ширину, висоту, внутрішні і зовнішні відступи.

3. Займають весь доступний простір по горизонталі.

До блокових елементів відносяться такі теги як: <p> <h1> <h2> <ul> і так далі.

Ще один важливий блоковий тег - це тег <div> який позначає просто «блок» або «прямокутний контейнер». Цей тег найчастіше використовується для створення сіток.

Також сюди відносяться блоки в які поміщається відповідний контент: <main> , <header> , <section> , <footer>, <article > та інші.

Рядкові елементи

<a href="">Текст</a>

<br />

<cite>Текст</cite>

<code>Текст</code>

<em>Текст</em>

<img />

<label>Текст</label>

<select>Текст</select>

<span>Текст</span>

<strong>Текст</strong>

<sub>Текст</sub>

<sup>Текст</sup>

<textarea>Текст</textarea>

Блокові елементи

<div>Текст</div>

<dl>Текст</dl>

<form>Текст</form>

<h1>Текст</h1>

...

<h6>Текст</h6>

<hr />

<ol>Текст</ol>

<p>Текст</p>

<pre>Текст</pre>

<table>Текст</table>

<ul>Текст</ul>

Потік документа

Порядок відображення елементів на сторінці називається потоком документа. Блокові елементи відображаються як прямокутні області, що йдуть один за одним зверху вниз, а рядкові елементи розташовуються зверху вниз і зліва направо і при необхідності переносяться на новий рядок (подібно до букв у тексті документа кожна нова буква йде за попередньою а ті які не поміщаються в рядку переносяться на новий).

Елементи можна вкладати один в одного. Чим раніше в коді розташований елемент, тим вище він розташований на сторінці.

Деякі типи елементів можуть поводитися в потоці більш складно. Наприклад, вони можуть розташовуватися в декілька колонок, як блочно-рядкові елементи.

Будь-який елемент, який знаходиться в потоці, займає на сторінці свою власну площу і, якщо треба, відштовхує від себе сусідів за допомогою «Маргінем».

Потоком можна керувати та змінювати звичну поведінку елементів у потоці. Наприклад, можна змусити блокові елементи рухатися не зверху вниз, а вибудовуватися в кілька колонок.

А навчившись керувати потоком, можна будувати сітки.

Наприклад, ось так:

Для керування потоком (структурою розміщення блоків на сторінці) і їх властивостей використовують каскадні таблиці стилів CSS.

Ця мова відповідає за зовнішній вигляд HTML-сторінки. Синтаксис мови досить простий: він складається з селектор і властивостей.

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

Крок 1.

Розмітка веб сторінки за допомогою тегів HTML

Перш за все необхідно розмітити нашу веб сторінку використовуючи HTML теги. Тільки після цього можна переходити до оформлення сайту за допомогою каскадних таблиць стилю CSS.

Як ми вже знаємо HTML - це мова розмітки гіпертексту. З його допомогою створюється структура веб сторінки. Для цих цілей використовуються теги HTML.

За допомогою тегів ви визначаєте, що буде розташовуватися на вашій веб сторінці.

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

Наприклад:

<!DOCTYPE html>

<html>

<head>

<title>Сторінка</title>

</head>

<body>

<header>

Заголовок сторніки

</header>

<nav>

Панель навігації

</nav>

<menu>

Панель меню

</menu>

<main>

...

Головіний вміст сторінки

...

</main>

<footer>

Підвал сторніки

</footer>

</body>

</html>

Слід памятати, якщо відкрити сторінку в браузері то ми побачимо структуру в звичайному вигляді, усі елементи йдуть підряд. Застосуються стандартні стилі браузера.

Для зміни порядку слідування елементів слід застосовувати стилі CSS.