Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 2. Язык гипертекстовой разметки HTML.

 
  Оглавление
§ 6. Структура html-документа. Теги и атрибуты.
§ 7. Создание моей первой странички.
§ 8. Форматирование текста.
§ 9. Списки.
§ 10. Простые таблицы.
§ 11. Сложные таблицы.
§ 12. Изображения и управления рисунками.
§ 13. Гиперссылки. Оформление гиперссылок.
§ 14. Формы.

Тест по теме «Язык гипертекстовой разметки HTML.

 

 

§ 8. Форматирование текста.

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

  • Шрифты: гарнитура, размер, цвет
  • Оформление текста
  • Заголовки
  • Теги переноса строки и форматирования абзаца
  • Выравнивание текста
  • Упражнение

Шрифты: гарнитура, размер, цвет

При помощи HTML-разметки можно написать текст разного начертания (гарнитуры), размера и цвета. Для этого используется тег <font>, имеющий несколько параметров:

  • face – для задания гарнитуры,
  • size – для задания размера,
  • color – для задания цвета.

Чтобы задать нужный шрифт, размер или цвет, необходимо соответствующему параметру присвоить нужное значение:

параметр="значение"
Гарнитура

Например, чтобы написать текст шрифтом Times New Roman, необходимо вставить перед нужным текстом тег <font> и присвоить его параметру face значение Times New Roman, а т.к. тег <font> – парный, то после необходимого текста обязательно нужно вставить закрывающий тег:

<font face="Times New Roman">Текст с начертанием Times New Roman</font>

В результате браузер отобразит эту строчку так:

Текст с начертанием Times New Roman

Параметру face можно присвоить несколько значений через запятую:

face="Times New Roman, Times, serif"

В таком случае, браузер сначала попытается отобразить текст шрифтом Times New Roman. Если такой шрифт отсутствует на компьютере пользователя, то браузер попытается отобразить текст шрифтом Times и т.д.

Размер

Чтобы написать текст размером 4, необходимо вставить перед нужным текстом тег и присвоить его параметру size значение 4:

<font size="4">Текст размера 4</font>

В результате браузер отобразит эту строчку так:

Текст размера 4

Что же означает эта загадочная цифра 4? Параметр size может принимать значения от 1 до 7. Это условные единицы. Средний размер, используемый по умолчанию, соответствует size="3".

Следовательно, размер текста 4 – это средний размер, увеличенный на 1 условную единицу, а размер 2 - это средний размер, уменьшенный на 1 условную единицу и т.д. Величина текста, заданная таким способом, называется абсолютной.

Но есть и другой способ уменьшить или увеличить размер текста относительно размера по умолчанию. Для этого нужно присвоить параметру size значение "-1" или "+1" соответственно. При таком способе задания размера величина текста называется относительной.

Итак, чтобы получить размер текста 5, можно воспользоваться двумя способами:

<font size="5">Текст размера 5</font> или <font size="+2">Текст размера 5</font>

Помимо перечисленных существует еще несколько способов задать размер текста.

Увеличить текст можно с помощью тега <big>:

<big>Увеличенный текст</big>

В результате браузер отобразит эту строчку так:

Увеличенный текст

Уменьшить текст можно с помощью тега <small>:

<small>Уменьшенный текст</small>

В результате браузер отобразит эту строчку так:

Уменьшенный текст

Теги <small> и <big> можно повторить несколько раз для усиления эффекта. Например, если в результате строки:

<big>Большой текст</big>

текст недостаточно велик:

Большой текст

можно написать так:

<big><big>Большой текст</big></big>

И в результате получится больший текст:

Большой текст
Цвет

Теперь о задании цвета текста. Чтобы написать текст красным цветом, необходимо вставить перед нужным текстом тег <font> и присвоить его параметру color значение red:

<font color="red">Красный текст</font>

В результате браузер отобразит эту строчку так:

Красный текст

Но цвет можно задать не только по названию, но и по цифровому значению в шестнадцатеричном формате, который выглядит как знак # и 6 символов (цифры 0-9 и буквы латинского алфавита A-F) после него. Например, красному цвету соответствует шестнадцатеричное значение #FF0000. Т.е. написать текст красным цветом можно двумя способами:

<font color="red">Красный текст</font> или <font color="#FF0000">Красный текст</font>

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

Оформление текста

Для оформления текста существуют следующие теги, именуемые тегами форматирования.

Теги <b> и <strong> позволяют написать жирный текст:

<strong>Жирный текст</strong> или <b>Жирный текст</b>

В результате оба этих варианта в браузере будут выглядеть так:

Жирный текст

Теги <i> и <em> позволяют написать текст курсивом:

<i>Текст курсивом</i> или <em>Текст курсивом</em>

В результате оба этих варианта в браузере будут выглядеть так:

Текст курсивом

Тег <u> позволяет написать подчеркнутый текст:

<u>Подчеркнутый текст</u>

В браузере увидим:

Подчеркнутый текст

Этот тег полезно использовать для выделения ссылок.

Тег <strike> позволяет написать зачеркнутый текст:

<strike>Зачеркнутый текст</strike>

В браузере увидим:

Зачеркнутый текст

Теги <sup> и <sub> позволяют написать верхний индекс или нижний индекс соответственно. Эти теги уменьшают размер текста и сдвигают его относительно базовой линии вверх или вниз.

Например, их можно использовать для написания формул:

E = mc<sup>2</sup> или C<sub>2</sub>H<sub>5</sub>OH

В браузере увидим:

E = mc2 или C2H5OH

Теги форматирования можно использовать совместно.

Например, чтобы сделать текст жирным и курсивным одновременно, достаточно написать:

<b><i>Жирный курсивный текст</i></b>

И в браузере мы увидим:

Жирный курсивный текст

Обратите внимание: если тег <b> стоит первым, то закрывающий тег </b> должен стоять в конце. Т.е. теги "вкладываюся" друг в друга как матрешки. Именно поэтому парные теги еще называют контейнерами.

Сводная таблица тегов форматирования:

Тег Действие Пример использования Результат
<b> Делает текст жирным <b>Текст</b> Текст
<strong> Делает текст жирным <strong>Текст</strong> Текст
<i> Делает текст курсивным <i>Текст</i> Текст
<em> Делает текст курсивным <em>Текст</em> Текст
<u> Делает текст подчеркнутым <u>Текст</u> Текст
<strike> Делает текст зачеркнутым <strike>Текст</strike> Текст
<sup> Верхний индекс E = mc<sup>2</sup> E = mc2
<sub> Нижний индекс C<sub>2</sub>H<sub>5</sub>OH C2H5OH

Заголовки

Чтобы как-то выделить заголовки в тексте, в html существуют специальные теги заголовка. Эти теги изменяют размер текста, сверх и снизу заголовка делаются отступы, пропорциональные его размеру, а также после заголовка делается перенос строки. Вот эти теги: <h1>, <h2> : <h6>. <h1> - самый большой заголовок, <h6> - самый маленький.

Т.е. если написать:

<h1>Текст в виде большого заголовка</h1> и <h6>Текст в виде маленького заголовка</h6>

Браузер отобразит это так:

Текст в виде большого заголовка

и
Текст в виде маленького заголовка

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

Вот еще несколько полезных теги для форматирования текста.

Полезно знать:

Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.

Например, в тесте html-документа написано:

Идет бычок, качается,
Вздыхает на ходу...

А браузер отобразит этот текст следующим образом:

Идет бычок, качается, Вздыхает на ходу...

Тут-то нас и спасет тег <br>. Это непарный тег, означающий переход на новую строку.

Т.е написав:

Идет бычок, качается,<br>
Вздыхает на ходу...

или

Идет бычок, качается,<br>Вздыхает на ходу...

В браузере мы увидим:

Идет бычок, качается,
Вздыхает на ходу...

С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег <br>, а два и т.д.

Полезно знать:

Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.

Например, в тесте html-документа написано:

Здравствуй,     дорогой друг!

А браузер отобразит этот текст следующим образом:

Здравствуй, дорогой друг!

Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.

Т.е. если написать:

<pre>Идет бычок,     качается,
Вздыхает на ходу...</pre>

То браузер отобразит этот текст следующим образом:

Идет бычок,     качается,
Вздыхает на ходу...

Но!

Не стоит злоупотреблять тегом <pre>. И по возможности обходиться без него.

Любой текст можно, а иногда и нужно, разбить на абзацы. В html такую функцию выполняет тег <p>. Если поместить текст между открывающим тегом <p> и закрывающим тегом </p>, то сверху и снизу от этого теста появится отступ, т.е. этот кусок текста отделится от общей массы текста и образуется параграф. По умолчанию параграф выровнен по левому краю.

Выравнивание текста

Всего в html можно задать 4 типа выравнивания: по левому краю, по правому краю, по центру, по ширине. Чтобы задать тип выравнивания нужно параметру align тега <p> присвоить одно из значений:

  • left (выравнивание по левому краю),
  • right (выравнивание по правому краю),
  • center (выравнивание по центру),
  • justify (выравнивание по ширине).

Вот примеры текста с различным типом выравнивания:

по левому краю по правому краю по центру по ширине

<p align="left">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>

<p align="right">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>

<p align="center">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>

<p align="justify">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>

Результат в браузере

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

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

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

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

Т.к. по умолчанию задано выравнивание по левому краю, то в первом примере параметр align="left" можно не писать.

Для задания выравнивания по ширине существует еще один тег <center>:

<center>Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</center>

И в браузере текст отобразится по центру. Правда в таком случае утратится свойство параграфа: отступ сверху и снизу. Но ведь оно и не всегда требуется.

Упражнение

Скачайте файл в формате RTF, создайте по его образу html-документ с соблюдение всех элементов оформления текста.

 

 

 


© Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год.  При использовании материалов обязательна ссылка на владельца