Пошаговая инструкция создания сайта на html коде / Страница сайта

Страница сайта

Работаем внутри пары тегов элемента <body>.

Создадим саму страницу сайта - общее белое поле, или белый лист. Это можно сделать с помощью элемента <div>, который предназначен для создания отдельных блоков, или частей страницы и состоит из пары тегов. Заключенная в них информация считается логической единицей, единым целым.

Таких блоков может быть сколько угодно, и они могут создаваться внутри друг друга. Поэтому, каждому блоку надо присваивать идентификатор id со своим неповторимым именем.

id="имя" <!-- Идентификатор -->

Общему блоку дадим имя "main", и теперь в нем будем размещать всю остальную информацию видимой части:

<div id="main"> Добро пожаловать на мой сайт! </div>

Прилагаю вид файла index.html. Расстояния между строками и сдвигов вправо можно не делать. Я это сделала для наглядности и лучшего восприятия информации.

Теперь надо задать параметры этой общей части (этого листа), то есть задать стили, которые пока что будем прописывать прямо в открывающем теге элемента <div>.

Поможет нам в этом атрибут описания стиля style и его свойства:

style="свойства стиля" <!-- Атрибут описания стиля -->

Ширина страницы

Сначала зададим ширину страницы - свойство стиля width:

width: ... px; <!-- Ширина, задается в пикселях или % -->

Исходя из того, что у большого количества интернет-пользователей стоят мониторы с разрешением 1024×768 пикселей, рекомендуется делать ширину 1000-980, а еще лучше 960 пикселей, для того чтобы страница сайта полностью поместилась на такой экран, с учетом полосы прокрутки, которая занимает 24 пикселя. Однако, ширина страницы моего сайта составляет 1170 пикселей, потому что у меня стоит широкоэкранный монитор и мне так больше нравится.

<div id="main" style="width: 960px;">

Цвет фона страницы

Зададим еще цвет фона страницы. И хотя мы будем задавать цвет (а не картинку), в данном случае для этого используется свойство стиля background.

Цвет фона моей страницы белый, код #FFFFFF:

<div id="main" style="width: 960px; background: #FFFFFF;">

Посмотрим, что получилось на экране (надеюсь вы уже запомнили, что для этого надо обновить страницу сайта):

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

margin: ...px ...px ...px ...px; <!-- Внешний отступ от краев, задается в пикселях или % -->

Чтобы блок разместить по центру, нужно задать следующие значения:

margin: 0 auto; <!-- Разместить по центру -->

<div id="main" style="width: 960px; background: #FFFFFF; margin: 0 auto;">

Смотрим, что теперь получилось на экране:

То, что надо, - блок располагается по середине. Пока это всего лишь тонкая полоска с одной надписью, но по мере дальнейшего заполнения, она будет удлиняться все больше и больше.



Вот так будет выглядеть файл index.html:

Следующий шаг - Шапка сайта