Заголовки, абзацы, списки в html

html

Содержание:



С заголовком страницы H1 и абзацем P мы частично познакомились в первом уроке о структуре документа html. Теперь рассмотрим теги логической разметки: заголовки, абзацы, списки, видимых элементов элемента Body, и теги физического форматирования подробнее. Для этого слегка изменим нашу страницу-пример или наберем ее заново:

форматирование текста html-страницы

В нашей учебной html-странице добавились (отмечены стрелками, однократно): заголовок 2-го уровня - тег H2, два заголовка 3-его уровня - тег H3, еще один абзац - тег P, маркированный список - Ul и несколько тегов физического форматирования. Откроем страницу в браузере:

отображение в браузере

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

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

Теги физического форматирования

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

Теперь обратим внимание на слово «body» во втором абзаце, заключенное в парный тег B, который задает слову полужирное начертание. А фраза «оформлять текст» отображается курсивом - это достигается с помощью тега I. Тег U задает подчеркивание (его нет в нашем примере).

оформление: теги b, i

Кроме этих тегов, выделяющих фрагменты текста, в HTML существуют еще тег Strong - выделяет важный по значению фрагмент (жирное начертание). И тег Em - чуть менее важный (курсив). Поисковые боты обращают более пристальное внимание на эти два тега, указывающие на важные по логическому смыслу фразы. Целесообразно заключать в них ключевые слова, но перебарщивать с этим не стоит. Это же касается и заголовков.

Вот еще несколько тегов физического форматирования текста: Q - выделяет цитату в строке. Блочный элемент Blockquote - в этот тег можно помещать несколько абзацев.

Тег Code служит для разметки фрагментов кода, его необходимо использовать с переносами строк Br и неразрывными пробелами: для их обозначения используется спец. символ   (первый знак - амперсанд: клавиша 7 с зажатой Shift в английской раскладке). А вот тег Pre отображает программный код, как есть, с пробелами и столько строк, сколько их в коде.

Это наиболее употребимые элементы оформления текста, об остальных тегах форматирования и специальных символах смотрите в Справочнике HTML, расположенного на этом же сайте - в нем удобная навигация по алфавиту.

Создание списков html

Осталось рассмотреть создание списков, у нас он маркированный, и задан парным тегом Ul, а его элементы, или пункты тегом Li (1-ый скриншот). При помощи атрибута type, как для тега Ul, так и для тега Li, мы можем поменять тип маркера. По умолчанию, т.е. если атрибут не указан, его значение равно «disk» - кружок. Можно задать атрибут type со значением «circle» - окружность. Или так: <ul type="square"> - мы получим список с маркерами-квадратиками.

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

Кроме маркированных, существуют нумерованные списки, которые задаются тегом Ol, а элементы списка, как и у маркированных - тегом Li. Кроме того, для обоих видов списков можно создавать вложенные списки. Усложним задание и изменим наш список в странице-примере на следующий:

создание списка

Откроем страницу в браузере, наглядно видим: нумерованный список с вложенным в него маркированным списком, для которого значение «square» атрибута type задает маркеры-квадратики:

пример вложенного нумерованного списка с атрибутом

Посмотрите в справочнике элементы Menu и Dl - они тоже используются для формирования списков. В следующем уроке мы рассмотрим теги html для вставки изображений и ссылок. Научимся связывать html-страницы в единый сайт, познакомимся с его структурой. Далее, по плану - создание таблиц.



Содержание: