В этом руководстве я вам покажу как создать простую страничку, которая будет полностью совместимой с требованиями формата XHTML 1.0. Эта совместимость означает, что наш исходный код будет 100% работоспособным во всех популярных веб-браузерах.
Эта статья будет превой из серии нескольких публикаций, которые посвящены изучению основ html-верстки. Думаю, что опытные вебмастера в них не найдут для себя чего-то новго, но для новичков они будут очень полезными.
Первым делом нам необходимо указать в самом начале нашего html-кода так называемый DOCTYPE - он определяет наш тип документа. Это очень важно для соблюдения всех стандартов консорциума World Wide Web Consortium (W3C), который следит за соблюдением чистоты кода и упорядочивает выход новых стандартов кодирования.
Затем нам необходимо указать тег <html>. В более древних руководствах указывалось, что все теги должны быть в заглавных буквах. Но сейчас уже это требование ушло в прошлое и W3C уже требует форматирования тегов в нижнем регистре.
Теперь откройте любой тектовый редактор (например блокнот, я же использую Tea и UltraEdit-32) и скопируйте в него нижеприведенный код. Сам же файл необходимо сохранить как index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Как видите, наш параметр DOCTYPE задан как XHTML 1.0 Strict - как и требует стандарт ассоциации W3C. Также и тег <html> тоже содержит внутри себя ссылку на документ со стандартом.
Продолжим создание нашей домашней странички. Далее нам необходимо будет добавить в нее несколько других очень важных и базовых тегов. Без них не обходится ни одна html-страница. Это будут теги: <head>, <title>, <body>.
Также потребуется добавить мета-тег, который будет указывать на тип кодировки, в которой будет наш документ (точнее текстовая его часть).
Еще следует помнить, что все открытые теги должны быть закрыты, т.е. в документе должен присутствовать такой же тег, но со слешем. Например </html>.
Двигаемся дальше. Как видите, мы уже задали заголовок нашей страницы (он будет отображаться в самом верху браузера). За это отвечает тег <title> и он обязательно должен быть внутри тега <head>! В нашем случае это будет надпись Моя первая домашняя страница! Добавим в наш код еще несколько тегов:
<h1> представляет собой тег заголовка, вообще они бывают от <h1> до <h6>, чем больше буква, тем меньшего размера получается текст. Ради интереса можете попробовать каждый из них на практике.
Еще давайте создадим две гиперссылки - одна из них будет указывать на главную страницу, а другая - на еще пока несуществующую "Обо мне". За появление ссылок отвечает тег <a> - происходит от слова "anchor" и всегда указывает на ту ссылку (путь), что определена внутри его.
Теперь давайте разделим горизонтальной полосой нашу навигацию и остальную часть нашей страницы (контента)
<hr />
Обратите внимание, что в теге присутствует символ "/". Это скорее исключение из правил, поскольку этот тег не нужно закрывать парным тегом, как было раньше. Это же правило относится и к тегам <img> и <br> среди общего семейства html-тегов.
Добавим на нашу страницу еще немного текста:
<p>Привет всем! Это моя первая веб-страница. Надеюсь, она вам понравилась :)</p>
Как может вы уже успели заметить, тег <p> является разделителем и выполняет роль как бы параграфа ("paragraph").
Теперь нам осталось лишь закрыть все открытые выше теги. Как видите, некоторые теги сразу же после себя имеют такой же тег но со слешем. Значит нам осталось лишь закрыть всего парочку:
</body>
</html>
Вот и все! Вы создали свою первую html-страницу - как видите, это очень просто. Осталось лишь сохранить наш файл и открыть его в браузере для просмотра результатов. Итоговый код должен получиться у вас следующим:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Моя домашняя страница</title>
</head>
<body>
<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>
<hr />
<p>Привет всем! Это моя первая веб-страница. Надеюсь, она вам понравилась :)</p>
</body>
</html>
Мы рекомендуем вам ознакомиться со следующими материалами на тему:
Информация для интересующихся веб-дизайном и программированием:
