Тема «Абзацы и отступы документа HTML»

Тема «Абзацы и отступы документа HTML»

Цель работы: Изучить теги абзаца и его форматирования в web-странице.

Теория. Основная задача web-дизайнера- ввести, отредактировать и отформатировать текст web-страницы. Обозреватель не обращает внимание на абзацы и отступы, созданные в текстовом редакторе, поэтому необходимо использовать дескрипторы разметки документа. В основном разделе web-страницы хранятся текст, рисунки и объекты мультимедиа. Дескрипторы этого раздела подразделяются на блочные и текстовые. Блочные применяются для форматирования абзацев, а текстовые – для форматирования отдельных слов и символов.

Дескрипторы абзаца:

I) Дескриптор <Р> Создает абзац. Имеет следующий атрибут:

ALIGN Выравнивание текста в абзаце

Пример использования дескриптора:

<P ALIGN=' center' >Вы знаете, что те, кто, кажутся, очень сильными в сердце, являются реально слабыми и самыми восприимчивыми?</P>

II) Дескрипторы <Н1> - <Н6> заголовки текста. Имеет следующий атрибут: ALIGN-выравнивание заголовка по горизонтали

Примеры использования дескрипторов:

<h1>Вы знаете</h1> или <h1 ALIGN=' center' >Вы знаете</h1> - самый крупный заголовок web-страницы

<h4 > очень сильными в сердце </h4>

<h6 > очень сильными в сердце </h6>- самый мелкий заголовок

Примечание. В качестве значения атрибута ALIGN могут быть: CENTER, RIGHT или LEFT.

III) Дескриптор<BR> Разрыв строки тексте web-страницы/ одиночный тег/

IV) Дескриптор<NOBR> Запрещает разрыв строки /блочный тег/

V) Именной код &nbsp; Неразрывный пробел используется прямо в тексте абзаца для формирования определенного количества пробелов в строке.

Текстовые дескрипторы:

VI) Дескриптор <FONT> Изменение параметров текста. Имеет следующие атрибуты: 1)COLOR - цвет текста, 2)FACE –названиешрифта, 3)SIZE –размер символа в веб-документе; может имеет значение от 1 до 7.

<font size=3>Size 3</font> <font size=+2>Size +2</font><font size=-1>Size -1</font>

Размер шрифта можно задавать относительным размером шрифта, т.е. если размер вашего шрифта был 3, то при записи +2 размер шрифта станет 5, а при записи -1, размер станет 2. Но если у вас был шрифт 3, и вы указали +5 или -4, то размер у вас не будет 8 или -1, а максимальный и минимальный, т.е. 7 и 1. Но старайтесь не делать таких ошибок.

Соответствие размера символа в веб-документе и в документе MSWord:

HTML-документ	Word-документ
<font size=’1’ face =’ Arial’> текст</font>	8пт
size=’2’	10 пт
size=’3’	11 пт
size=’4’	13 пт
size=’5’	16 пт
size=’6’	20пт
size=’7’	36пт

VII) Дескриптор <SMALL> Уменьшает размер шрифта на один номер

VIII) Дескриптор <STRIKE> Перечеркивает текст

IХ) Дескриптор <STRONG> Выделяет текст полужирным шрифтом

Х) Дескриптор <SUB> Подстрочный текст

ХI) Дескриптор <SUP> Надстрочный текст

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

X² Получим X²

X₂ получим: X₂

ХII) Дескриптор <ins> Выделение текста подчеркиванием

ХIII) Дескриптор <I> Выделение текста Курсивом

Пример использования дескриптора:

<I>Пример использования курсивного шрифта</ I>

XVI) Дескриптор <B> Полужирный текст

XV) Дескриптор <U> Подчеркивание текста

XVI) Дескриптор <SPAN> Фрагмент текста

XVII) Дескриптор <PRE> Сохраняет отступы в исходном тексте

Задание. Набрать html –документ и посмотреть его в обозревателе. Комментарии не набирать. Комментарий это строка, заключенная в тегах <!- -текст комментария--> и служит для пояснения кода.

Цвет символа или заливку фона можно задать с помощью шестнадцатеричных кодов или значений rgb(255,0,0):

Цвет	Значение RGB	Символьная метка	Цифровой код
Белый Черный Зеленый Светло-зеленый Серый Светло-серый Желтый Темно-бордовый Синий Темно-синий Голубой Изумрудный Красный Пурпурный Розовый Оливковый	255 255 255 0 0 0 0 128 0 0 255 0 128 128 128 192 192 192 255 255 0 128 0 0 0 0 255 0 0 128 0 255 255 0 128 128 255 0 0 128 0 128 255 0 255 128 128 0	White Black Green Lime Gray Silver Yellow Maroon Blue Navy Aqua Teal Red Purple Fuchsia Olive	#FFFFFF #000000 #008000 #00FF00 #808080 #C0C0C0 #FFFF00 #800000 #0000FF #000080 #00FFFF #008080 #FF0000 #800080 #FF00FF #808000

Пример.

<font color=#00FF00> Текст светло-зеленого цвета с применением 16-го кода </font>

<font color=rgb(0,255,0)> Текст светло-зеленого цвета с применением rgb </font>

Контрольные вопросы и задания

1. На какие виды делятся текстовые теги?

2. Как установить межстрочный интервал в абзаце веб-документа?

3. Для чего служат теги <Nobr>, <Pre>? Приведите примеры использования этих тегов в веб-документе.

4. Что такое атрибут тега? Каких правил необходимо придерживаться при использовании нескольких атрибутов в одном теге?

5. Создайте веб- страницу, на которой размещен текст- названия цветов радуги, причем первые 6 названий оформить как заголовки, начиная с Н1. Седьмое название цвета радуги –обычный текст.

Дата добавления: 2015-08-28