Форматирование текста в HTML
«Форматирование текста в HTML» – четвертый урок учебника HTML. В этом уроке мы разберем основы форматирования текстов в HTML. Форматирование в HTML имеет ряд особенностей, которые мы с вами и рассмотрим.
Теги форматирования текста в HTML.
Для придания тексту смысловой нагрузки используются специальные теги форматирования. Одним из наиболее значимых тегов форматирования теста в html является тег параграфа (<p>). Для усиления смысловой нагрузки используются теги <strong> – сильное увеличение смысловой нагрузки (жирный текст) и <em> – среднее увеличение смысловой нагрузки (курсивный текст).
Написанное здесь очень важно так как именно увеличение смысловой нагрузки дают эти теги, а не просто жирное или курсивное выделение в отличии от тегов <b> (жирный текст) и <i> (курсивный текст). А вот как отобразить текст это уже дело браузера… ну здесь, как вы уже наверное понимаете, большинство браузеров предпочитает выделять текст жирным или курсивом. Визуально нет никаких отличий, но зато есть большая разница для поисковых машин.
<p>
<strong>важный</strong>
<b>жирный</b>
<em>значимый</em>
<i>курсивный</i>
</p>
Не менее важными тегами форматирования текста можно считать теги <br> и <nobr>.
Тег <br> позволяет разорвать строку с текстом, продолжив написание текста с новой строки. Атрибут clear в теге <br>используется для отмены обтекания текстом объекта, расположенного рядом с текстом. В этом случае текст продолжается с первой новой строки после объекта.
Тег <nobr> означает написание текста без разрыва строки, даже если он не умещается на ширину экрана (в этом случае внизу экрана появится полоса прокрутки).
Использование тега PRE.
К одной из особенностей форматирования html относится то, что если вы скопируете текст из другого текстового редактора (например MS Word), то форматирование текста не будет сохранено. Для копирования текста из текстового редактора с сохранением форматирования используется тег <PRE>:
<pre>
Это
предварительно форматированный текст.
Он сохраняет как пробелы в любом количестве,
так и переносы строк.
</pre>
Заголовки.
Еще одним очень важным элементом форматирования текста является использование заголовков. Заголовки бывают 6–ти основных уровней от H1 (самый большой) до H6 (самый маленький). Увидеть каждый из них вы сможете в таблице:
Уровень заголовка
|
Вид
|
h1
|
h1
|
h2
|
h2
|
h3
|
h3
|
h4
|
h4 |
h5
|
h5 |
h6
|
h6 |
Выравнивание элементов .
Для выравнивания элементов используется тег align, который может принимать следующие значения :
Значение
|
Вид
|
justify
|
Выравнивание текста по ширине
|
left
|
Выравнивание по левому краю
|
right
|
Выравнивание по правому краю
|
center
|
Выравнивание по центру
|
К примеру, для выравнивания текста по ширине страницы используется следующий код:
<p align=»justify»>Этот текст будет отформатирован по ширине страницы</p>
Форматирование шрифта.
Для форматирования шрифта используется тег Font, который имеет ряд атрибутов, которые позволяют придать тексту определенный шрифт, размер и цвет:
Значение
|
Вид
|
face
|
Позволяет изменить шрифт
|
color
|
Позволяет выбрать цвет
|
size
|
Задает размер букв
|
В приведенной ниже таблице вы можете увидеть шестнадцетиричные коды основных цветов, также называемых безопасной web палитрой. Проще говоря данные цвета будут отображаться одинаково, вне зависимости от версии браузера и модели монитора:
цвет
|
шестнадцатеричное представление
|
aqua
|
#00FFFF
|
black
|
#000000
|
blue
|
#0000FF
|
fuchsia
|
#FF00FF
|
gray
|
#808080
|
green
|
#008000
|
lime
|
#00FF00
|
maroon
|
#800000
|
navy
|
#000080
|
olive
|
#808000
|
purple
|
#800080
|
red
|
#FF0000
|
silver
|
#C0C0C0
|
teal
|
#008080
|
white
|
#FFFFFF
|
yellow
|
#FFFF00
|
Ну и небольшой пример:
<font face=»verdana» color=»red» size=»1″>
Я красный текст шрифта verdana размером 1
</font>
Теперь мы научились форматировать текст в HTML, используя основные теги форматирования.
Следующий урок будет очень важен, т. к. в нем речь пойдет о работе с гиперссылками. Гипертекстовые переходы — основа web документов, поэтому отнеситесь к предстоящему уроку максимально серьезно.