Основные теги HTML. Отделяем заголовки от абзацев или структурирование текста на html странице

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. - «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

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

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

Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:

Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :

Заголовок окна

Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

Элемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент ). Его основная цель - отделить содержимое документа от метаданных:

Заголовок окна

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:

Заголовок окна Hello, world!

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

Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.

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

Так, для краткого описания содержимого веб-страницы используется значение description атрибута name , как показано в примере 5.2.

Пример 5.2. Использование description

HTML

Описание сайта, заданное с помощью тега и значения description , обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах, в нем перечисляются ключевые слова, встречаемые на веб-странице (пример 5.3).

Пример 5.3. Использование keywords

HTML

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

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Любой, абсолютно любой html документ имеет какие-то одинаковые фрагменты. Количество заголовоков, абзацев и списков на веб-страницах может быть разным, но есть определенные теги, которые обязательно присутствуют в исходном коде любого сайта.

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

Ранее значения этого параметра были очень длинными и непонятными. Сегодня все упростилось и для работы с современной версией языка нужно использовать такую строку:

Все, тип документа указан и можно двигаться дальше.

— главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

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

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

— с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.

Рис. 1. Это типичный пример обязательных тегов, которые формируют структуру документа.

— — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

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

— формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

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

Давайте сразу разберемся на примере.

Заголовок

Тут видно, что мы не просто написали . В любой тег можно вписать дополнительные атрибуты. Они пишутся в открывающейся части элемента.

Сначала пишется имя самого атрибута, а потом задается его значение. В этом примере строчка class = «title» привяжет к нашему заголовку стилевой класс title, так что через него можно будет обратиться к этому элементу в css.

Между парными тегами мы записали то, что непосредственно будет выведено на экран. После этого следует закрыть тег. Если забыть это сделать, то это может привести к интересным ошибкам. Например, весь текст на странице может превратиться в заголовок. В одинарных тегах нельзя писать произвольный текст, в них можно задать только определенные атрибуты.

Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.

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

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.

Поехали…

Каждый HTML документ начинается со строчки:

XHTML

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

Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

Предлагаю набрать что-нибудь своими руками.

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

XHTML

Заголовок окна браузера

Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.

Между тегами и располагается информация, не отображаемая на странице.

Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).

Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).

Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .

И стили, заключенные в теги …. .

На этом с тегом пожалуй мы закончим.

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

bgcolor — устанавливает цвет фона документа. ( )

background — указывает на url-адрес изображения — фона документа.

text — устанавливает цвет текста документа.

link — устанавливает цвет гиперссылок.

vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.

alink= — устанавливает цвет гиперссылок при нажатии.

bgproperties=fixed — фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.

Эти параметры можно объединять, например, на этой страничке используется:

XHTML

Давайте и наберем эту строку в нашем предыдущем примере.

XHTML