Структура документа HTML

HTML — язык гипертекстовой разметки страниц, он позволяет оформлять веб-страницы в том виде, в каком мы их видим в интернете.

Команды в языке HTML оформляются при помощи тегов — специальных зарезервированных слов, заключенных в угловые скобки. Теги могут иметь такой вид:
<head> <body> 
и т. д.

Для чего нужны теги? С их помощью мы пишем код страницы, который передается с удаленного сервера на браузеры посетителей вашего сайта, а уж дело браузеров преобразовать этот код в вид страницы, на которой можно увидеть и текст, и графику, и анимацию.

Для того, чтобы лучше понять, как делаются страницы для веба, изучим это на примере. Создадим первую страницу для нашего будущего сайта. Потом, со временем и приходящим опытом, вы будете ее дополнять и улучшать, а пока ограничимся самым необходимым.

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

Открываем один из html-редакторов. Для изучения языка желательно применять редакторы типа CuteHTML, то есть не использующие технологию WISYWIG. Если у вас нет подходящего, можете подобрать любой по своему вкусу здесь: http://leaf.h1.ru/collie.shtml. Редакторы обычно сами предлагают приблизительный шаблон страницы. Можно оставить этот шаблон для примера, чтобы он был у вас перед глазами, и создать еще одну страницу, очистив ее полностью, для того, чтобы начать ее написание с нуля.

Если пока нет возможности получить редактор, можно воспользоваться еще более простым способом. Создайте текстовый документ в обычном блокноте. Наберите код страницы, сохраните файл как текстовый документ index.txt. Теперь измените расширение на .html и снова откройте документ. Он откроется в браузере.

Итак, начнем. Для того, чтобы браузер при приеме кода понял, что он имеет дело с HTML, мы должны об этом ему сообщить. Делается это при помощи тегов
<html> </html>

Первый тег здесь является открывающим, то есть он будет стоять в начале кода, второй тег — закрывающим (его признак — прямой слэш «/» после открывающей скобки). Он располагается в конце кода и закрывает страницу html.

Вообще, почти все теги требуют закрытия. Таким образом, образуются пары тегов: открывающий-закрывающий. Чуть ниже это будет объяснено подробнее.

Итак, мы дали понять браузеру, что передаем ему html-документ. Остальную часть кода мы будем помещать между этими двумя тегами.

Весь документ HTML состоит из двух частей: <head> — голова (заголовок) и <body> — тело. Заголовок предназначен для передачи различной информации о странице. Например, здесь указывается кодировка документа, название, имя автора, язык и т. д. Все, что находится в этой части, не отображается в браузере.

В части <body> содержится то, ради чего, собственно, и была сделана страница — текст, картинки, формы и т.д.

Итак, вставляем в код нашей страницы теги <head> и <body>. Получаем следующее:

<html> <head> </head> <body> </body> </html>

Такое построение обязательно для всех html-страниц.

Заголовок документа

Теперь надо заполнить заголовок страницы. Выберем для нее название. К примеру, «Первая страница». Итак, между тегами <head> и </head> нашего кода, то есть в заголовке, вписываем следующее:

<title>Первая страница</title>

После этого в заголовке окна браузера и на кнопке в панели задач мы сможем видеть название страницы.

Для того, чтобы задать атрибуты документа, воспользуемся тегом <meta>. С его помощью можно описать способ кодировки, имя создателя страницы, информацию для поисковых систем. Общий синтаксис тега <meta>:

<meta name="имя параметра" content="значение параметра">

Таким образом, запишем в заголовке (т. е. между тегами <head> и </head>) следующие строки:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="author" content="имя автора"> <meta name="keywords" content="ключевые слова">

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

Итак, вот код нашей первой страницы:

<html> <head> <title>Первая страница</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="author" content="else"> <meta name="keywords" content="html, код, создание сайта, обучение, уроки"> </head> <body> </body> </html>

Но если вы сейчас откроете страницу в браузере, вы увидите, что в ней ничего не записано. Ведь все, что мы до сих пор записали в код, находится внутри тегов <head>.

Кроме указанных тегов можно использовать в коде комментарии. Они могут применяться как в заголовке, так и в теле документа. Комментарии применяют для того, чтобы была понятнее структура кода. При этом они не отображаются браузером, а видны лишь в коде страницы. Их синтаксис:

Теперь можно приступать к созданию видимой части страницы.

Тело документа

Начнем с выбора вида страницы. Внутри тега <body> можно задать цвет фона или фоновый рисунок, цвет и размер шрифта и гиперссылок и т. п. Цвета задаются в шестнадцатеричном исчислении, то есть в виде #000000.

Например, выберем цвет шрифта темно-синий, фон — белый, ссылки будут синего цвета, активные ссылки — голубые, посещенные ссылки — серые. Можно также задать фоновый рисунок.

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

Для подбора цветов существует множество программ (например, ColorSet), многие html-редакторы также имеют эту функцию. При их помощи подбираем цвета для нашей страницы:
Фон (bgcolor) — #FFFFFF
Цвет шрифта (text) — #000099
Цвет ссылок (link) — #0000FF
Активные ссылки (alink) — #FF0000
Посещенные ссылки (vlink) — #696969
Фоновый рисунок (background) — bkg.jpg

Итак, запишем теперь все выбранные параметры в тег <body>:

<body bgcolor=#FFFFFF text=#000099 link=#0000FF alink=#FF0000 vlink=#696969 background="bkg.jpg">

Здесь надо заметить, что регистр в написании тегов не имеет значения, то есть <body> полностью соответствует <BODY>, в то же время при написании имен файлов регистр имеет значение. Если ваш файл называется «bkg.jpg», а в коде вы его запишете как «Bkg.jpg», или «BKG.JPG», или «bkg.JPG», он просто не будет найден при открытии страницы и соответственно не отобразится в браузере.

Параметры цвета, так же как и другие значения тегов, правильнее заключать в кавычки: text="#000099", но это не обязательно.

Цвета можно задавать не только цифровым значением, для их обозначения существуют еще и специально зарезервированные слова, например text="blue" link="red". Однако число этих обозначений достаточно ограничено, и отображаются они не во всех браузерах корректно, поэтому я бы не рекомендовала их использовать.

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

Для оформления странички можно применять теги форматирования, определяющие расположение текста и рисунков, вид текста, размер шрифта и т. д.

Текст любого документа обычно структурно делится на части при помощи заголовков, причем заголовки могут быть разных уровней. Почти все браузеры поддерживают шесть уровней заголовков. Общий синтаксис тега <Hx>, где х — уровень заголовка. Например:

<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3>

При использовании только HTML применение этого тега не дает очень уж больших преимуществ. Но стоит только подключить CSS — и все сразу становится на свои места. С его помощью можно задать все параметры всех заголовков до мелочей. Поэтому будем пока иметь в виду существование такого тега, а при изучении CSS начнем использовать его в полную силу.

Для определения вида шрифта в HTML используется тег . Внутри этого тега мы можем указать размер шрифта, название, цвет. К примеру, запишем в нашу страничку первую фразу: «Это моя первая веб-страничка» шрифтом «Arial» или «Verdana» красного цвета, размер шрифта выберем 12 pt. Это будет выглядеть так:

Это моя первая веб-страничка

Обратите внимание на закрывающий тег. Если его не поставить в конце фразы, то весь последующий текст (до первого встреченного закрывающего тега ) будет отображен красным шрифтом 12pt. После этого шрифт будет отображаться так, как это определено в теге <body>.

Указанные через запятую шрифты будут использоваться браузером в таком порядке: сначала он попытается отобразить текст первым указанным шрифтом, если его не окажется на компьютере пользователя, будет использован второй шрифт, и так далее. При выборе шрифтов для сайта надо предусмотреть такую возможность, что у пользователя может не оказаться того шрифта, который указан в вашем коде. Желательно выбирать распространенные шрифты, такие как Arial, Courier New, Verdana. Сейчас также популярен шрифт Comic Sans MS. Можно указать в коде два-три шрифта, подходящих к дизайну вашего сайта, однако не стоит увлекаться. Все хорошо в меру. Если же ни один из шрифтов, указанных вами, не будет найден на компьютере посетителя вашего сайта, текст будет отображен шрифтом, указанным в настройках браузера пользователя. Скорее всего, это будет Times New Roman.

Размер шрифта может быть задан разными способами. Один из них — задание в точках (pt). Можно также измерять размер шрифта пикселами (px), единицами. Таким образом, вот несколько вариантов написания параметров шрифта:

Текст Текст Текст — обычно устанавливается по умолчанию
Текст Текст

Однако обратите внимание на то, что жесткое определение размера шрифта не всегда полезно. Далеко не у всех ваших посетителей будут те же настройки браузера, что и у вас. Большинство использует, согласно статистике, размер развертки экрана 800х600 точек, но много ведь и таких, кто выбирает другие настройки. Если вы, к примеру, определите шрифт основного текста равным 2 единицам, в вашем браузере, наверное, он будет выглядеть отлично. Но вполне возможно, что кто-то, зайдя на ваш сайт, захочет сделать шрифт покрупнее, но не сможет. Если же вы не зададите этот параметр, шрифт будет отображаться так, как это установлено по умолчанию, то есть размером в 3 единицы, и в то же время позволит пользователю менять настройки по своему усмотрению.

Также надо подчеркнуть, что очень большое значение имеет правильная расстановка угловых скобок, в которые заключены теги. Стоит только забыть поставить закрывающую скобку — и части страницы как не бывало! Все, что окажется в части после открывающей скобки, станет невидимым для браузера, ведь оно окажется как бы внутри тега!

Можно устанавливать также вид начертания шрифта. Для этого служат такие теги:

 — курсив
 — жирный
 — подчеркнутый

Они требуют обязательного закрытия.

Возможно совместное их использование. Например,

Это моя первая веб-страничка

Желательно располагать закрывающие теги в порядке, обратном появлению открывающих тегов. Это исключит возможные глюки при отображении страницы.

Для того, чтобы форматировать абзацы, используют тег . Он не требует обязательного закрытия, то есть при введении следующего тега  начинается новый абзац. Внутри этого тега можно задавать вид выравнивания текста. Это делается при помощи специального параметра align.

 — абзац с выравниванием по левому краю  — абзац с выравниванием по правому краю  — абзац с выравниванием по центру  — абзац с выравниванием по ширине

Перенос текста на новую строку можно производить при помощи тега  . Он не требует закрытия. Например:

Первая строка Вторая строка.

Очень часто возникает необходимость создания на странице различных списков. Для этого удобно пользоваться тегами списков. В HTML есть возможность делать пронумерованные списки и непронумерованные.

В пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Если вам понадобится удалить один из элементов, номера автоматически будут пересчитаны. Пронумерованный список начинается тегом <ol> и заканчивается закрывающим тегом </ol>. Каждый элемент списка начинается с тега <li>, не требующего закрытия. Пример:

<ol> <li>Первая строка <li>Вторая строка <li>Третья строка </ol>

Можно заранее определить, с какого значения будет начинаться отсчет. Делается это с помощью параметра start: <ol start=n>, где n — число, с которого начинается отсчет.

Тег <ol> может иметь несколько параметров, которые определяют вид счетчика:

<ol type=A start=n> — большие латинские буквы (A, B, C ...)
<ol type=a start=n> — маленькие латинские буквы (a, b, c ...)
<ol type=I start=n> — большие римские цифры (I, II, III ...)
<ol type=i start=n> — маленькие римские цифры (i, ii, iii ...)
<ol type=1 start=n> — обычные цифры (1, 2, 3 ...)

Непронумерованные списки обозначаются в коде с помощью стартового тега <ul> и закрывающего </ul>. Для обозначения элементов списка используются так же, как и в предыдущем случае, теги <li>.

Тег <ul> может иметь три различных параметра, с помощью которых можно задать вид маркеров.

<ul type=disc> — обычно устанавливается по умолчанию
<ul type=circle> — круглый
<ul type=square> — квадратный

Например, создадим список с квадратными маркерами:

<ul type=square> <li>Первая строка <li>Вторая строка <li>Третья строка </ul>

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

<ol> <li>Первый раздел <ul> <li>Первая строка <li>Вторая строка <li>Третья строка </ul> <li>Второй раздел <ul> <li>Первая строка <li>Вторая строка </ul> </ol>

Есть еще один тег, используемый для форматирования текста на странице. Вернее, этот тег позволяет выводить текст в окне браузера в том виде, в каком он был введен в редакторе. Это тег <pre>. Пример:

<pre>Это моя первая веб-страничка. Я изучаю язык HTML, чтобы сделать свой первый сайт</pre>

Для того, чтобы сделать пробную страничку, этих тегов вполне достаточно. Я предлагаю вам попробовать на основе изложенного материала сделать страницу с использованием всех описанных тегов. Правда, пока наша страничка не имеет гиперссылок — очень важного элемента любой веб-страницы, но все это у нас еще впереди.

Автор: Else