Урок 2.

Тег <DIV>в HTML є головним елементом блокової верстки.
Блок - це звичайна прямокутна область.
Вмістом блоку може бути що завгодно - частина тексту, картинка, список, форма для заповнення, меню навігації і т.д.
Блок використовується як контейнер в який поміщаються інші теги-блоки.

За допомогою блоків створюється каркас і внутрішня структура сторінки.
В блоці 1, як в контейнері розміщено 2,3 і 4 блок з контентом. А в блоці 17 містяться боки: 7,8,9,10,11,12,13,14.
Верстка сторінки зводиться до правильного розміщення блоків один коло одного, чи один в одному та вмілим заданням відступів між ними.
Крім цього вебдизайнер повинен, описати властивості елементів блоку: шрифти, малюнки, списки та інший контент - задати їх стиль

Отже, тег <div> може містити вкладені <div> елементи, чи інші елементи в необмеженій кількості.
Крім тегу <div> - блокового елементу. Для визначення стилів малих об'єктів може використовують тег <span> і інші теги вивчені в попередніх уроках.
Для наладки їх вигляду і розміщення блоку використовують каскадні таблиці стилів - CSS.
Серед основних властивостей стилів CSS виділимо: display(тип блоку), border (рамка), font (шрифти), margin (відступи) та інші.

Властивості блоку

1.Відступи (margin) - відступ ззовні блоку. Для цього використовуються властивості:
margin-top, margin-right, margin-bottom, margin-left
2.Поля (padding) - відступ в середині блоку
Для цього використовуються властивості:
padding-top, padding-right, padding-bottom, padding-left
3.Ширина (width) - Ширина блоку
4.Висота (height) - Висота блоку
Відстані задаються: px - пікселях, в % відсотках, em - коефіцієнтах від вказаної величини по замовчуванню 1ем=13px
Для margin і padding відступи задаються так:
Застосовується для всіх 4 сторін - padding: 1em;
По вертикалі | По горизонталі - padding: 5% 10%;
Зверху | По горизонталі | Знизу - padding: 1em 2em 2em;
Зверху | справа | знизу | Ліворуч - padding: 2px 1em 0 1em;

Одиниці вимірювання CSS

1 px - точка на екрані пристрою

!!!В текстових редакторах 1px (піксель) = 1/96 дюйма.

1 відсоток (1%) - коефіцієнт від значення по замовчуванню.

1vw - 1% від ширини вікна.
vh - 1% від висоти вікна.

1vmin 1vw або 1vh. Вибирає з них менше.
1vmax = 1vw або 1vh. Вибирає з них більше.

1 em і 1 rem схожі у застосуванні - коефіцієнт від значення по замовчуванню.
Значення по замовчуванню задається в властивості font-size тегу <html>.
Використання цієї одниці дає можливість виводити сторінку з різним масштабом шрифтів в залежності від пристрою на який завантажують сторінку.
Масштабувати сторінку використовуючи JS скрипти

Зверніть увагу. змінюється тільки шрифт!
Зображення і інший контент сторінки, не змінюється.

5.Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).
Стиль рамок задається властивістю border-style
- none - рамка відсутня.
- dotted - рамка складається з точок.
- dashed - рамка у вигляді пунктирною лінії.
- solid - рамка відображається суцільною лінією.
- double - рамка відображається подвійною суцільною лінією.
- groove - рамка відображається втиснутою об'ємною лінією.
- ridge - рамка відображається опуклою об'ємною лінією.
- inset - рамка відображається так, що весь блок виглядає втисненим.
- outset - рамка відображається так, що весь блок виглядає опуклим.

Властивості задаються атритутом STYLE.
Наприклад.<p style="color:red;"> чи <div style="width:50px;height:100px"">

6.Властивості кольорів

Властивості	опис	Можливі значення
color	колір тексту	Будь яке значення, що відповідає стандарту
background-color	колір фону	Будь яке значення, що відповідає стандарту кольору.
background-image	малюнок в якості фону	вказується ім’я файлу background-image: url(і’мя файлу)
background-repeat	повторюваність для фону заданого зображенням	по горизонталі: repeat-x ; по вертикалі: repeat-y не повторюється: no-repeat по замовчуванню повторення і по горизонталі і по вертикалі
background-attachment	нерухомість фону при прокрутці	fixed
background-position	положеня зображення відносно верхнього лівого кута елемента	задається в відсотках від разміру елемента (перше число – зміщення по горизонталі, друге по вертикалі)

Завдання 1.Створіть файл vidstup.html.
- Скопіюйте в нього приклад нижче. Та випробуйте всі розглянуі властивості стилів рамки.


<Html>
<Body>
<div style="background-color:yellow;color:red;width:200px;height:300px">
Проба
</div>
</Body>
</Html>

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

<Html>
<Body>
<div style="background-color:yellow;width:200px;height:300px"">
<div style="background-color:white;width:50px;height:50px"">
вікно
</div>
<div style="background-color:blue;width:50px;height:100px"">
двері
</div>
</div>
</Body>
</Html>

- відредагуйте так, щоб отримати такий малюнок.