аватар |

Уроки / HTML /

Урок 3. Заголовки и форматирование текста

Заголовки в HTML


Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1, h2, h3, h4, h5, h6. Они идут в порядке от самого большого, до самого маленького: h1 - самый большой заголовок, h2 - чуть меньше, ну а h6, последний из них, соответственно самый маленький.

<html>
   <head>
   <title>html заголовки</title>
   </head>
<body>

   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
   <h3>Заголовок 3</h3>
   <h4>Заголовок 4</h4>

</body>
</html>

Демонстрация Скачать исходники

Вышеуказанный код отобразит следующее


Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту!

Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.


Форматирование текста в HTML


Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга. 

<html>
   <head>
   <title>html параграфы</title>
   </head>
<body>

<p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>

</body>
</html>

Демонстрация Скачать исходники


У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

left - выравнивание по левой стороне
right - выравнивание по правой стороне
center - по центру
jastify - по ширине

Атрибут align есть и у заголовков (тег h), и у параграфов (тег p).


Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

<html>
   <head>
   <title>html выравнивание параграфов</title>
   </head>
<body>

<p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</body>
</html>

Демонстрация Скачать исходники

В браузере отобразится следующее



Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру. 

<html>
   <head>
   <title>центрирование в html</title>
   </head>
<body>

<center>Текст по центру</center>

</body>
</html>


Как выделить текст полужирным в html?


strong - стандартное выделение текста жирным.
b - выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные - это не четверть текста. Старайтесь ограничить применение данного тега.

Рассмотрим пример кода выделения текста жирным

<html>
   <head>
   <title>html выделение жирным</title>
   </head>
<body>

<p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю, 
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p>

</body>
</html>

Демонстрация Скачать исходники

В браузере отобразится следующее



И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?


i - выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em - стандартное выделение курсивом. Нет ограничений в использовании.
cite - данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn - для выделения определений и терминов.

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


Рассмотрим пример кода c выделением текста курсивом

<html>
   <head>
   <title>Допустим страница о машинах</title>
   </head>
<body>

<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году. 
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.
<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>

</body>
</html>

Демонстрация Скачать исходники

В браузере отобразится так



Как выделить текст подчёркиванием в html?


u - стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins - так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?


Перечёркнутым выделяется текст в следующих тегах
del - внесённое исправление.
strike - стандартное перечёркивание.
s - сокращённая запись strike

<html>
   <head>
   <title>Перечёркнутый текст в html</title>
   </head>
<body>

Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>

</body>
</html>

Демонстрация Скачать исходники

Как выделить текст в верхнем и нижнем индексах в html?


sub - тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup - тег, отображающий текст выше уровня строки шрифтом меньшего размера.

<html>
   <head>
   <title>индексы в html</title>
   </head>
<body>

<p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>
<p>H<sub>2</sub>O - химическая формула воды.</p>

</body>
</html>

Демонстрация Скачать исходники

В браузере отобразится следующее



Тег font в html


Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

face - название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.

size - активные значения от 1 до 7. Шрифт по молчанию равен 3.

color - цвет текста. Если не задать параметр, то текст будет чёрным. 

<html>
   <head>
   <title>Тег font в html</title>
   </head>
<body>

<font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>

</body>
</html>

Демонстрация Скачать исходники

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

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE


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

Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup


<html>
   <head>
   <title>Тег pre в html</title>
   </head>
<body>

<pre>Как захотели ввести текст
              так он и                отобразился!     =)</pre>

</body>
</html>

Демонстрация Скачать исходники

В браузере будет так



Другие теги для форматирования текста


Тег abbr обозначает аббревиатуру. Аббревиатура - сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>
   <head>
   <title>Тег abbr в html</title>
   </head>
<body>

<abbr title="Hypertext Markup Language">HTML</abbr> 

</body>
</html>

Демонстрация Скачать исходники

В браузере будет выглядеть так



Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>
   <head>
   <title>Тег acronym в html</title>
   </head>
<body>

<acronym title="Hypertext Markup Language">HTML</acronym> 

</body>
</html>


Горизонтальная черта в html или тег hr


Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.

У данного тега есть следующие атрибуты:
align - выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width - фиксирует длину черты в пикселях или процентах
size - толщина линии
color - цвет линии
noshade - убирает рельефность линии

<html>
   <head>
   <title>Тег font в html</title>
   </head>
<body>

Обычная линия
<hr>

Линия по центру длиной 50% от ширины блока, толщина линии 2
<hr align="center" size=2 width=50%>

Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">

</body>
</html>

Демонстрация Скачать исходники

В браузере



Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!
 



Распечатать
Похожие статьи
21 января 2013 16:53 Что такое html, основные понятия
30 января 2013 16:35 Урок 9. Работа с формами в html
30 января 2013 16:33 Урок 8. Таблицы в html
25 января 2013 17:08 Урок 2. Структура html документа (страницы)
30 января 2013 16:21 Урок 6. Специальные символы в html


Комментарии к статье (vk.com)