В первой части урока мы создали файл с базовой структурой сайта, обозначив разметку основных блоков. Как вы могли заметить, на нашей страничке можно увидеть лишь заданный текст и последовательность блоков. В данной части урока будет рассказано, как оформить html страницу с помощью html-тегов. Стоит добавить, что данный способ оформления html страничек используется редко и является устаревшим, тем не менее, о его существовании желательно знать и использовать по мере необходимости в разумных пределах.
Эта часть урока будет полезна для совсем начинающих, а тем, кто желает ознакомиться только с таблицами стилей — css советую сразу перейти к третьей части урока (будет выложена в ближайшее время).
Первым видимым блоком идет блок header, с него и начнем.
В html стили блоков div определяются следующим синтаксисом:
<div style='свойство: значение;'></div>
Зададим высоту блоку шапки, присвоив свойству height высоту в пикселях — height: 200px;
Высоту можно также задавать и в процентах, тогда она будет рассчитываться от высоты контейнера, в котором находится блок header. Не забываем ставить точку с запятой после каждого свойства стилей.
Установим в шапке кликабельный логотип с помощью тега <a> - тег, указывающий на то, что его содержимое является ссылкой, и тега <img>, который выводит изображения.
Тег <a> выглядит так:
<a href="https://ссылка на сайт.ru">Какой-либо текст</a>
Сначала указывается адрес ссылки, затем текст или картинка, которые будут отображаться на месте ссылки, и в конце стоит закрывающий тег </a>.
В теге <img> пишется источник картинки и альтернативный текст, который будет показан, если картинка по какой-то причине не загрузилась:
<img src="источник картинки" alt="Альтернативный текст">
В качестве логотипа используем картинку с изображением чайки - bird.png, положив ее в папку с файлом index.html. Синтаксис кликабельной шапки будет следующий:
<a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header">Шапка сайта. Добро пожаловать на мой сайт</a>
На этом закончим наше незамысловатое оформление шапки и посмотрим, что получилось:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> <body> <div id='header' style="height: 200px; "> <a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header">Шапка сайта. Добро пожаловать на мой сайт</a> </div> <div id='content'>Контент. Здесь может быть абсолютно любая информация.</div> <div id='footer'>Футер. Подвал. Нижняя часть сайта</div> </body> </html>
Перейдем к настройке блока контента. Блоку контент укажем высоту 300px - height: 300px; зададим ему рамку одинарной линией, толщиной 1px серого цвета - border: 1px solid #999; теперь благодаря рамке можно видеть положение и размер блока. Установим размер шрифта 12pt - font-size: 12pt; а цвет фона будет голубой - background-color: #B0E0E6;. Кроме того, заключим содержимое блока контент в тег <p>, который разграничивает абзацы.
В итоге имеем следующий код:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> <body> <div id='header' style="height: 200px; "> <a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header">Шапка сайта. Добро пожаловать на мой сайт</a> </div> <div id='content' style="height: 300px; font-size: 12pt; border: 1px solid #999; background-color: #B0E0E6;" > <p>Контент. Здесь может быть абсолютно любая информация.</p> </div> <div id='footer'>Футер. Подвал. Нижняя часть сайта</div> </body> </html>
Остается лишь оформить подвал — футер страницы. Установим его высоту в 200px, выравнивание текста по центру, размер шрифта 14pt. Закончив оформление футера получаем html страницу уже более похожую на страницу сайта:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> <body> <div id='header' style="height: 200px; "> <a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header">Шапка сайта. Добро пожаловать на мой сайт</a> </div> <div id='content' style="height: 300px; font-size: 12pt; border: 1px solid #999; background-color: #B0E0E6;" > <p>Контент. Здесь может быть абсолютно любая информация.</p> </div> <div id='footer' style="height: 200px; text-align: center; font-size: 14pt; " >Футер. Подвал. Нижняя часть сайта</div> </body> </html>
Изучая html теги, вы узнаете много их свойств и стилей, благодаря которым можно будет создавать страницы любой структуры и оформлять их по своему усмотрению. Но, чтобы код вашего сайта был аккуратным и хорошо воспринимался поисковыми системами, для оформления страниц лучше использовать каскадные таблицы стилей — css, с которыми вы сможете ознакомиться в следующем уроке.
Первая часть урока - Перейти
Третья часть урока - Перейти