Создаем простой сайт. Часть 2. Простое оформление

Категория: 

В первой части урока мы создали файл с базовой структурой сайта, обозначив разметку основных блоков. Как вы могли заметить, на нашей страничке можно увидеть лишь заданный текст и последовательность блоков. В данной части урока будет рассказано, как оформить 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, с которыми вы сможете ознакомиться в следующем уроке

Первая часть урока - Перейти

Третья часть урока - Перейти