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

Шапка сайта

Создадим блок шапки сайта <div> с именем идентификатора "header":

<div id="header"> <!-- ...Шапка сайта... --></div>

Расположим его внутри блока парных тегов <div id="main">:

<div id="main">
<div id="header"> <!-- ...Шапка сайта... --></div>

Добро пожаловать на мой сайт!

</div>

Зададим длину(высоту) шапки сайта. Для этого используем уже знакомый атрибут описания стиля style и его свойство height:

height: ... px; <!-- Длина(высота), задается в пикселях или % -->

Длина(высота) шапки моего сайта составляет 160 px. Вы, конечно, можете задать свою величину:

<div id="header" style="height: 160px;">

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

Белая полоска страницы сайта стала длиннее.

Есть очень много разных вариантов оформления шапки сайта. Для своего сайта я решила сделать лаконичное оформление, и не делать ничего "лишнего". Возможно со временем что-то изменится, но пока что так.

Дальше работаем внутри блока парных тегов шапки сайта.

Название сайта

Напишем название сайта. Для этого создадим блок названия сайта <div> с именем идентификатора "name":

<div id="name">Название сайта</div>

Смотрим, что получилось:

Преобразуем этот текст.

Сначала сделаем название крупнее. Для этого возьмем атрибут стиля style и его свойство font-size, которое задает размер текста. Его можно задавать в нескольких единицах измерения, но, чтобы сейчас не отвлекаться от главной цели, зададим его в пикселях. До этого момента у меня, пока еще не было необходимости использовать что-то другое:

font-size: ...px; <!-- Размер текста, зададим в пикселях -->

Возьму величину в 35px.

<div id="name" style="font-size: 35px;">

Отодвиним немного нашу надпись от края. Зададим ей отступы от верхнего и левого края белого поля страницы. Для этого воспользуемся свойством стиля padding, которое задает внутренние отступы, а точнее, двумя его производными:

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

padding-left: ... px; <!-- Левый отступ, задается в пикселях, % -->

Эти свойства принято писать первыми, в самом начале списка, а за ними будут идти все остальные свойства.

Подставляю значения своих отступов:

<div id="name" style="padding-top: 35px; padding-left: 100px; font-size: 35px;">

Смотрим результат:

Поменяем шрифт надписи названия сайта. По умолчанию, всегда используется шрифт с названием "Times New Roman". Это шрифт с засечками, которым написано сейчас наше название.

Чтобы задать тексту другой шрифт, есть свойство стиля font-family:

font-family: ...; <!-- Шрифт текста -->

Для названия своего сайта, я использовала шрифт без насечек "Arial":

<div id="name" style="padding-top: 35px; padding-left: 100px; font-size: 35px; font-family: Arial;">

Так же можно попробовать шрифт без насечек "Verdana", надпись будет выглядеть немного крупнее:

<div id="name" style="padding-top: 35px; padding-left: 100px; font-size: 35px; font-family: Verdana;">

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

Примеры шрифтов для сайта можно посмотреть в статье- "Шрифты для сайта"

Вернусь к шрифту "Arial" и продолжу дальше с ним.

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

color: #код цвета/название; <!-- Цвет текста -->

Выбрать цвет можно здесь: "Названия и коды цветов HTML".

Чтобы проверить это, выберем какой-нибудь другой цвет, например, #801919:

color: #801919; <!-- Цвет текста -->

<div id="name" style="padding-top: 35px; padding-left: 100px; font-size: 35px; font-family: Arial; color: #801919;">

Смотрим, что получилось:

Заключительный штрих - сделаем название пожирнее с помощью элемента <b>, заключив в его пару тегов текст "Название сайта":

<b>Название сайта</b>

Вторая строка названия сайта

Добавим вторую строку названия сайта, как это сделано у некоторых, и у меня. Но можно обойтись и без нее, это как вы хотите.

Для второй строки тоже зададим блок <div> с идентификатором, например, "subtitle", и поставим его после блока с названием сайта:

<div id="subtitle">Вторая строка названия сайта</div>

Пропишем свойства стиля, как делали для названия сайта:

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

padding-left: 100px; <!-- Левый отступ, задается в пикселях, % -->

font-size: 23px; <!-- Размер текста, зададим в пикселях -->

font-family: Arial; <!-- Шрифт текста -->

color: #9a1010; <!-- Цвет текста -->

<div id="subtitle" style="padding-top: 10px; padding-left: 100px; font-size: 23px; font-family: Arial; color: #9a1010;">

Для того чтобы текст второй строки был наклонным, как сделано на моем сайте, задается свойство font-style, которое определяет начертание шрифта:

font-style: ...; <!-- Начертание шрифта -->

font-style: italic; <!-- Наклонный шрифт -->

Укажем это свойство перед цветом шрифта (хотя это не принципиально):

<div id="subtitle" style="padding-top: 10px; padding-left: 100px; font-size: 23px; font-family: Arial; font-style: italic; color: #9a1010;">

Убираем верхний отступ

Еще один момент. Между шапкой и верхней границей сайта сейчас есть небольшое расстояние и виден фон. Можно так и оставить, а можно его убрать.

Чтобы убрать это расстояние, необходимо в открывающем теге элемента <body> добавить свойство стиля margin:

style="margin: 0;" <!-- Убираем верхний отступ -->

<body background="images/fon.jpg" style="margin: 0;">


Файл index.html:

В шапке моего сайта есть еще картинка. Как ее добавить, расскажу немного позже.

Следующий шаг - Две колонки сайта