Главная | Обратная связь | Поможем написать вашу работу!

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

ЛАБОРАТОРНАЯ РАБОТА №1

Цель работы: исследование форматирования текста в HTML

Теоретический материал

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

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

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

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

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

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

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

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

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

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

face="Times New Roman, Times, serif"

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

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

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

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

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

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

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

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

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

Текст размера 5 или Текст размера 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Жирный текст или Жирный текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

E = mc2 или C2H5OH

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

E = mc² или C₂H₅OH

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

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

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

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

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

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

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

Тег	Действие	Пример использования	Результат
<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 = mc²
<sub>	Нижний индекс	C<sub>2</sub>H<sub>5</sub>OH	C₂H₅OH

Заголовки

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

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

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

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

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

12 Следующая ⇒

Воспользуйтесь поиском по сайту: