Уроки по HTML верстке

Пример XHTML верстки

Пример XHTML верстки сайта

Рассмотрим простейший способ верстки web-страниц

Подведем итоги.

Внизу представлен один из возможных результатов первых одиннадцати уроков нашего HTML курса. Вы, уважаемый читатель, спросите: Почему в заголовке написано Пример XHTML верстки?
Ответ такой: Потому что XHTML является расширенной и более модной версией HTML (смотрите также 5 версию), и некоторые его элементы уже были нами использованы в предыдущих уроках, а теперь пришло время познакомиться с ним поближе на конкретном примере.

Итак, пример XHTML верстки сайта:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML верстка</title>
</head>
<body style="background-color:#ffffcc; color:#008800">
<br />
<h2 align="center">Пробная XHTML страничка</h2>
<br />
<div align="center">
<img src="../images/bee3.jpg" width="400" height="250" alt="Пчела на цветке" vspace="20" />
</div>
<p align="center" style="font-size:17px">Среди полей и диких трав,<br />
Жужжа на встречу ветру,<br />
Она летит, свой дикий нрав<br />
Вплетая в песню лета.</p>
<p align="center"><em>Эргэл</em></p>
<br />
<hr />
</body>
</html>

Результат: XHTML верстка

Обратите внимание на структуру XHTML документа, то есть на содержимое тегов <!DOCTYPE>, <html> и на то, как было отцентрированo изображение – с помощью <div> </div>, так как атрибут align="" тега <img /> не имеет значения center. Остальное думаю понятно – не зря же мы предыдущие 11 уроков прошли!

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение и текст   XHTML верстка сайта   HTML ссылки