ЛабыWeb / ЛабРабота2
.docТема «Абзацы и отступы документа 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) Именной код Неразрывный пробел используется прямо в тексте абзаца для формирования определенного количества пробелов в строке.
Текстовые дескрипторы:
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<sup>2</sup> Получим X2
X<sub>2</sub> получим : X2
Х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>
Контрольные вопросы и задания
-
На какие виды делятся текстовые теги?
-
Как установить межстрочный интервал в абзаце веб-документа?
-
Для чего служат теги <Nobr>, <Pre>? Приведите примеры использования этих тегов в веб-документе.
-
Что такое атрибут тега? Каких правил необходимо придерживаться при использовании нескольких атрибутов в одном теге?
-
Создайте веб- страницу, на которой размещен текст- названия цветов радуги, причем первые 6 названий оформить как заголовки, начиная с Н1. Седьмое название цвета радуги –обычный текст.