Блочная вёрстка. Знакомство с CSS.

Сначала вспомним структуру и синтаксис html-документов:

<!DOCTYPE html>

<!-- Так мы говорим браузеру, что этот документ - веб-страница -->

<html>

<!-- Тег html отмечает начало и конец страницы -->

<head>

<!-- Внутри тега head содержится служебная информация -->

<meta charset="utf-8">

<!-- Например, указание кодировки, чтобы буквы на странице отображались правильно. -->

</head>

<body>

<!-- Внутри тега body находится основное содержимое страницы -->

</body>

<!-- Большинство тегов - парные, и их нужно закрывать. -->

</html>

Синтаксис в HTML выглядит так:

< тег атрибут="значение атрибута"> < /тег>

Например:

< p align="center">

Структура сайта:

Чтобы сделать сайт недостаточно просто вписать нужную информацию между тегами body. Эта информация должна быть структурирована определённым образом, чтобы её было легко воспринимать. Сайт должен быть красивым и удобным для пользователя.

Одна из простейших возможных структур веб-сайта выглядит так:

Шапка - это место в верхней части, где находится название сайта и (зачастую) какая-нибудь картинка. Сайдбар - это область сбоку, где обычно размещают меню и разного рода виджеты - календарь, кнопки социальных сетей и т.д. Подвал - это область внизу, где обычно пишут контактные данные (телефон, e-mail) и ставят значок копирайта (c). Остальную часть сайта занимает, собственно, контент.

Все эти области, по сути своей, являются просто прямоугольниками, внутри которых мы размещаем содержимое (текст, картинки и т.д.).

В HTML сделать такой прямоугольник можно при помощи тега:

<div>
</div>

Правильно разместить прямоугольные блоки на странице нам поможет технология CSS (каскадные таблицы стилей).

Синтаксис в CSS выглядит так:

Селектор {
правило: значение;
}

Например:

#name {
background: red;
}

Это значит, что элемент с идентификатором name будет размещён на красном фоне.

Напишем такой код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример 1</title>

<!-- Добавить CSS к веб-странице можно разными способами. Один из них - разместить CSS-код в заголовке страницы между тегами style -->

<style>

#container {
width: 100vw; /*ширина в процентах от размера окна браузера*/
height: 100vh; /*высота в процентах от размера окна браузера*/
}

#row {
width: 100%; /*ширина в процентах от размера общего контейнера*/
height: 60vh; /*высота в процентах от размера окна браузера*/
}

#sidebar {
background: yellow;
width: 30%; /*ширина в процентах от размера контейнера #row*/
height: 100%; /*высота в процентах от размера контейнера #row*/
float: left; /*сдвиг влево*/
}

#content {
background: green;
width: 70%;
height: 100%;
float: right; /*сдвиг вправо*/
}

#footer, #header {
background: red;
height: 20vh;
}

</style>

</head>

<body>

<!-- Создаём прямоугольные блоки и даём каждому из них идентификатор (имя). Все четыре наши блока находятся внутри одного общего контейнера. Два из них - в одной строке.-->

<div id="container">

<div id="header">Шапка</div>

<div id="row">

<div id="sidebar">Сайдбар</div>
<div id="content">Контент</div>

</div>

<div id="footer">Подвал</div>

</div>

</body>
</html>

В результате у нас получается вот такая разметка страницы.

Задание 1 (на занятии)

Воспроизвести приведённую выше структуру страницы. В блок "Контент" добавить содержимое - текст и медиафайл (картинку).

Задание 2 (дома)

Сделать страницу, разбитую на пять областей: шапка, подвал, контент, два сайдбара - слева и справа. Добавить содержимое по собственному усмотрению.