Учебник HTML 

Урок 10. Изменение отображения общего вида сайта

Еще несколько лет назад страницы сайта форматировались, главным образом, с помощью обычных таблиц. Но в последнее время на смену простым и не очень гибким механизмам HTML, приходят возможности форматирования сайта посредством CSS. Делается это с помощью элементов margin и padding.

Для начала рассмотрим возможность форматирования тега , определяющего внешний вид сайта.

Любой сайт по своей сути представляет прямоугольник. А каждый прямоугольник имеет четыре стороны: верх, низ, левый край и правый. Соответственно, у тега так же есть четыре стороны, указываемые, как и все в HTML и CSS на английском языке:  right, left, top и bottom. С помощью этих свойств мы и будем форматировать поле сайта.

Форматирование сайта в таблице стилей будет выглядеть примерно так:

body {
margin-top: 10px;
margin-right: 350px;
margin-bottom: 350px;
margin-left: 50px;
}

Этот пример сделан исключительно для того, чтобы показать последовательно перечисления сторон в коде. В действительности же, для удобства и минимизации кода, запись будет выглядеть следующим образом:

body {
margin: 10px 350px 350px 50px;
}

Соответственно сайт будет находиться в этих рамках. Они могут быть изменены на любые другие по вашему желанию и вкусу.

Кроме форматирования полей сайта, можно задавать отступы для заголовков, текста, изображений, располагая их на странице в соответствии с вашей задумкой. Для примера, давайте добавим к уже имеющимся полям страницы сайта некий блок, включающий в себя заголовок и небольшую статью. Код страницы будет выглядеть следующим образом:

<---!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<---head>
<---meta name="description" content="Учебная страница. Пример форматирования сайта с помощью CSS">
<---meta name="keywords" content="css">
<---meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<---title>Пример форматирования сайта
<---link rel="stylesheet" href="style.css" type="text/css" />
<---/head>
<---body>
<---div class="teaching">
<---h1>Учимся форматировать сайт с помощью CSS
<---p> Кроме форматирования полей сайта, можно задавать отступы для заголовков, текста, изображений, располагая их на странице в соответствии с вашей задумкой. Для примера, давайте добавим к уже имеющимся полям страницы сайта некий блок, включающий в себя заголовок и небольшую статью. <---/p>
<---h1 align="right">Другой заголовок
<---p>Любой сайт по своей сути представляет прямоугольник. А каждый прямоугольник имеет четыре стороны: верх, низ, левый край и правый. Соответственно, у тега так эе есть четыре стороны, указываемые, как и все в HTML и CSS на английском языке:  right, left, top и bottom. С помощью этих свойств мы и будем форматировать поле сайта.<---/p>
<---/div>
<---/body>
<---/html>

Содержимое файла таблицы стилей:

body {margin: 30px 350px 350px 50px;}
h1 {
margin: 5px 120px 5px 50px;
color: #FF3333;
background-color: #FFFFCC;
}
p {margin: 5px 100px 10px 95px; }
.teaching {
margin: 10px 30px 5px 30px;
padding:10px;
}

Сохраняем HTML-код, как файл index.html, а CSS-код, как styl.css. Помещаем оба файла в одну папку. Дважды жмем мышкой на index.html и смотрим результат. Для наглядности я снял часть экрана с сайта, который получился у меня:

Для того, чтобы как следует разобраться во всем этом, меняйте параметры в файле style.css, экспериментируйте и смотрите на получающиеся результаты. Очень скоро настройка внешнего вида сайта станет для вас простым делом.

См. также

• Следующий урок: Применяем рамки
• Предыдущий урок: Элементы "span" и "div". Учимся группировать элементы сайта