 |
Теги, задающие шрифт
|
|
|
|
<FONT SIZE=… COLOR=... FACE=...> текст </FONT>
SIZE — устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер, присваивая атрибуту целое число со знаком (например, это может быть SIZE="+1" или SIZE="-2").
COLOR — указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.
FACE — задает гарнитуру шрифта, например FACE=ARIAL.
<TT> текст </TT> — телетайпный текст (моноширинный).
<I> текст </I> — стиль с наклонным шрифтом (курсив).
<B> текст </B> — стиль с жирным шрифтом.
<U> текст </ U> — стиль с подчеркиванием текста.
<BIG> текст </ BIG>— печать текста шрифтом увеличенного размера (большего, чем окружающий текст).
<SMALL> текст </ SMALL> — печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).
<SUB> текст </ SUB> — печать текста со сдвигом вниз (нижний индекс или подстрочный).
<SUP> текст </ SUP>— печать текста со сдвигом вверх (верхний индекс или надстрочный).
<STRIKE> текст </ STRIKE>или <S> …</S> — стиль с перечеркиванием текста.
Специальные теги HTML
Тег <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail).
<ADDRESS> Адрес-автора </ADDRESS>
Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:
левая угловая скобка "<" - <
правая угловая скобка ">" - >
амперсанд "&" - &
|
|
|
двойные кавычки """ - "
Существует большое количество ESC-последовательностей для обозначения специальных символов, например "©" для обозначения знака Ó и "®" для значка Ò. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
ESC-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо <.
Наиболее часто используемые теги приведены в таблице (Таблица 3).
Таблица 3 - Основные теги для оформления HTML-документа
| № | Атрибут | Функция |
| version=строка | Указывается версия HTML, которая была использована для создания данного документа | |
| i | Заключенный в теги текст будет отображаться в курсивном начертании | |
| тег HEAD – начальный и конечный теги заголовочной части HTML-документа | ||
| тег TITLE – начальный и конечный теги заголовка HTML-документа | ||
| тег A – начальный и конечный теги, которые позволяют создать гиперссылку (атрибут href) или идентификатор фрагмента (атрибут name) заголовка HTML-документа | ||
| № | Атрибут | Функция |
| href=url | Указывается URL-адрес целевого документа гиперссылки (необходим, если это не якорь имени) | |
| methods=список | Задается список методов отображения, зависящих от браузера (через запятую) | |
| name=строка | Указывается имя идентификатора фрагмента (необходим, если это не якорь гипертекстовой ссылки) | |
| rel=связь | Определяется связь этого документа с целевым документом | |
| rev=связь | Определяется обратная связь целевого документа с данным | |
| target=имя | Задается имя кадра или окна отображения обозначенного ссылкой документа | |
| title=строка | Задается заголовок целевого документа | |
| urn=urn | Указывается не зависящее от места нахождения универсальное имя ресурса для данной гиперссылки | |
| тег ADDRESS – заключенный в данные теги текст представляет собой адрес | ||
| тег B – заключенный в данные теги текст будет отображаться жирным шрифтом | ||
| тег BASE – указывается базовый URL для всех относительных URL в данном документе | ||
| № | Атрибут | Функция |
| href=url | Указывается базовый URL-адрес | |
| target=имя | Задается использующееся по умолчанию целевое окно для всех ссылок <a> в документе. Предназначен в основном для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _parent, _self и _top | |
| тег BASEFONT – указывается размер шрифта для последующего текста | ||
| № | Атрибут | Функция |
| size=значение | Установка размера базового шрифта. Диапазон – от 1 до 7 | |
| тег BIG – заключенный в теги текст будет отображаться шрифтом большего размера | ||
| тег BODY – начальный и конечный теги тела документа | ||
| № | Атрибут | Функция |
| alink=цвет | Установка цвета активных гипертекстовых ссылок в документе | |
| background=url | Указывается URL фонового изображения | |
| bgcolor=цвет | Установка цвета фона документа | |
| bgproperties=значение | Если значение равно fixed, запрещается прокрутка фонового изображения вместе с содержимым документа (IE2 и выше) | |
| leftmargin=значение | Установка размера (в пикселах) левого поля документа (IE2 и выше) | |
| link=цвет | Установка цвета "непосещенных" гипертекстовых ссылок в документе | |
| text=цвет | Установка цвета обычного текста в документе | |
| topmargin=значение | Установка размера (в пикселах) верхнего поля документа (IE2 и выше) | |
| vlink= цвет | Установка цвета "посещенных" ссылок в документе | |
| тег BR – разрыв текущего текстового потока и возобновление его с начала следующей строки | ||
| № | Атрибут | Функция |
| clear=поле | Задается "обтекание" объекта, расположение которого указано значением данного атрибута (left, right или all). При переносе на новую строку текст будет размещаться так, чтобы объект оставался видимым | |
| тег CENTER – размещение заключенного в теги текста по центру | ||
| тег CITE – заключенный в теги текст представляет собой цитату | ||
| тег COMMENT – Комментарий в тексте документа. Комментарии будут видимы в любом браузере. Для всех браузеров комментарий представляется в виде <!—текст комментария --> | ||
| тег DD – задается описательная часть для элемента списка определений | ||
| тег DFN – текст, заключенный в теги форматируется как определение | ||
| тег DL – создание списка определений, содержащих теги <dt> и <dd> | ||
| тег DT – задается описательно-условная часть для элемента списка определений | ||
| тег EMBED – начальный и конечный теги, которые позволяют описать встраиваемый в документ объект. В зависимости от вида встраиваемого объекта могут, помимо указанных ниже, включаться дополнительные параметры | ||
| src=url | Указывается URL встраиваемого объекта. Этот атрибут является необходимым | |
| height=n | Указывается высота зоны, которую займет встроенный объект | |
| name=имя | Указывается имя встраиваемого объекта | |
| width=n | Указывается ширина зоны, которую займет встроенный объект | |
| тег FONT – установка размера, цвета или гарнитуры заключенног в теги текста | ||
| № | Атрибут | Функция |
| color=цвет | Установка цвета заключенного в теги текста | |
| face=список | Установка гарнитуры заключенного в теги текста (устанавливается первый из указанных в разделенном запятыми списке имен шрифтов) | |
| size=значение | Установка размера базового шрифта. Диапазон – от 1 до 7 | |
| тег Hn – заключенный в теги текст представляет собой заголовок уровня n. Возможные значения n – от 1 до 6 | ||
| № | Атрибут | Функция |
| align=тип | Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right) | |
| тег HR – разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка | ||
| № | Атрибут | Функция |
| align=тип | Указывается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или по правому краю (right) | |
| noshade | Запрещается использование объемного затенения при отображении линейки | |
| size=n | Установка толщины линейки равной целому числу пиксел | |
| width=значение | ||
| тег I – заключенный в теги текст будет отображаться в курсивном начертании | ||
| тег IMG – в текущий текстовой поток вставляется изображение | ||
| № | Атрибут | Функция |
| alt=текст | Задается альтернативный текст для браузеров, не поддерживающих работу с изображениями | |
| Border=n | Установка толщины (в пикселах) обрамления изображений, содержащихся в гиперссылках | |
| controls | Добавление функций управления воспроизведением встроенных виедоклипов (IE2 и выше) | |
| Dynsrc=url | Задается URL-адрес видеоклипа, подлежащего изображению (IE2 и выше) | |
| Height=n | Задается высота изображения в пикселах | |
| Hspace=n | Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксел | |
| Ismap | Указывается, что при использовании данного тега внутри тега <a> изображение выбирается с помощью мыши | |
| loop=значение | Установка числа повторов воспроизведения видео. Значение может быть целым или значением infinite (IE2 и выше) | |
| Lowsrc=url | Указывается изображением с низким разрешением, которое браузер должен загрузить первым. За ним следует изображением, заданное атрибутом <src> (IE2 и выше) | |
| src=url | Указывается исходный URL изображения, подлежащего воспроизведению. Этот атрибут является необходимым | |
| start=начало | Указывается, когда следует воспроизвести видеоклип (варианты: fileopen или mouseover) | |
| Usemap=url | Указывается чувствительная к перемещению мыши область изображения | |
| Vspace=n | Задается размщенеие над и под изображением областей свободного пространства по n пиксел | |
| width=n | Указывается ширина изображения в пикселах | |
| тег KBD – заключенный в теги текст вводится посимвольно (как при наборе с клавиатуры) | ||
| тег LINK – в заголовке (<head>) документа определяется ссылка из данного документа на другой документ | ||
| № | Атрибут | Функция |
| href=url | Указывается URL-адрес гипертекстововй ссылки целевого документа | |
| methods=список | Задается список методов отображения для данной ссылки, зависящих от браузера (через запятую) | |
| rel=связь | Определяется связь этого документа с целевым документом. Для Internet Explorer 3.0 rel=style означает существование внешней таблицы стилей | |
| rev=связь | Определяется обратная связь целевого документа с данным | |
| src=url | Указывается URL внешней таблицы стилей, которая будет использоваться для форматирования документа (IE2 и выше) | |
| title=строка | Задается заголовок целевого документа | |
| type=text/css | Задается тип внешней ссылки, которая будет использоваться как внешняя каскадная таблица стилей | |
| urn=urn | Для целевого документа указывается универсальное имя ресурса, не зависящее от его места нахождения | |
| тег MAP – определяется чувствительная к перемещению мыши область изображения | ||
| № | Атрибут | Функция |
| name=строка | Задается имя данной области. Этот атрибут является необходимым | |
| тег NOBR – в заключенном в теги тексте разрывы не допускаются | ||
| тег P – начальный и конечный теги абзаца | ||
| align=тип | Задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или по правому краю (right) | |
| тег PLAINTEXT – указывается, что остальную часть документа следует отображать без обработки, как предварительно отформатированный текст | ||
| тег PRE – заключенный в теги текст будет отображаться так. как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов | ||
| № | Атрибут | Функция |
| width=n | Браузер будет размещать текст так, чтобы в строке умещалось (если возможно) n символов | |
| тег S – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией | ||
| тег SAMP – заключенный в теги текст представляет собой шаблон | ||
| тег SMALL – заключенный в теги текст будет отображаться шрифтом меньшего размера | ||
| тег SPACER – вставить в документ разделитель (Только N3) | ||
| № | Атрибут | Функция |
| type=тип | Указывается тип разделителя: vertical – между двумя строками текста помещается область пустого пространства указанного размера; horizontal – область пустого пространства указанного размера помещается между словами или символами; block – вставка прямоугольной области | |
| size=n | Указывается (в пикселах) ширина разделителя типа horizontal или высота разделителя типа vertical | |
| width=n | Указывается ширина разделителя типа block | |
| height=n | Указывается высота разделителя типа block | |
| align=значение | Указывается способ выравнивания разделителя block относительно окружающего текста. | |
| тег SPAN – заключенный в теги текст будет форматироваться с использованием таблицы стилей (Только IE3 и выше) | ||
| № | Атрибут | Функция |
| style=элементы | Для текста в заданном интервале задаются элементы таблицы стилей | |
| тег STRIKE – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией | ||
| тег SUB – заключенный в теги текст будет отображаться как нижний индекс | ||
| тег SUP – заключенный в теги текст будет отображаться как верхний индекс | ||
| тег TT – заключенный в теги текст будет отображаться моноширинным шрифтом | ||
| тег VAR – заключенный в теги текст представляет собой имя переменной |
|
|
|
|
|
|
|
|
|
|
|
|
Практическая часть
Задание 1.
Вызовите текстовый редактор БЛОКНОТ. Наберите следующий ниже текст и сохраните под именем web1.html.
<HTML>
<HEAD>
<TITLE>Моя персональная страничка (заголовок для браузера)</TITLE>
</HEAD>
<BODY>
ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (……………………).
</BODY>
</HTML>
Задайте цвет фона и цвет текста для Web-страницы, отличные от установленных по умолчанию.
Загрузите файл web1.html в Internet Explorer. Оцените результат.
Расположите каждую фразу в теле документа на новой строке.
Загрузите файл web1.html в Internet Explorer. Оцените результат.
Расположите текст в теле документа по центру.
Загрузите файл web1.html в Internet Explorer. Оцените результат.
Выделите текст в теле документа стилем заголовок 1-го уровня (тег <H1>).
Загрузите файл web1.html в Internet Explorer. Оцените результат.
Задание 2.
Откройте файл web1.html в БЛОКНОТЕ и дополните тело документа нижеуказанным фрагментом. Пропуски в тексте заполните индивидуальной информацией. После редактирования файл web1.html сохраните под именем web2.html.
…
<HR>
<H2> Мой город </H2>
<p>Я живу в Минске
<H3 ALIGN =Left> Моя работа </H3>
<p ALIGN = Left> Я учусь в ……
<H4 ALIGN = Center> Мои увлечения </H4>
<p ALIGN = Center> Мои увлечения ‑ ……
<H5 ALIGN = Right> Мои коллеги </H5>
<p ALIGN = Right> Мои коллеги ….. </p>
<br>
<HR>
<H6 ALIGN = Center> Design by "…………" </H6>
Задайте цвет линий, их ширину и высоту, выравнивание по центру Web-страницы.
Загрузите файл web2.html в Internet Explorer. Оцените результат.
В разделе Мои увлечения добавьте нумерованный список из 5 пунктов. Нумерацию выполнить римскими цифрами.
Загрузите файл web2.html в Internet Explorer. Оцените результат.
В разделе Мои коллеги добавьте маркированный список из 5 пунктов. В качестве маркера использовать незакрашенный круг.
Загрузите файл web2.html в Internet Explorer. Оцените результат.
Дополните описания списков всплывающими подсказками.
Загрузите файл web2.html в Internet Explorer. Оцените результат.
Задание 3.
Откройте файл web2.html в БЛОКНОТЕ и отредактируйте тело документа. После редактирования файл web2.html сохраните под именем web3.html.l
Задайте для каждого заголовка: цвет шрифта, размер (1..7), гарнитуру по своему выбору.
Загрузите файл web3.html в Internet Explorer. Оцените результат.
В разделе Мои увлечения нумерованный список из 5 пунктов отформатируйте курсивом (<I>).
Загрузите файл web3.html в Internet Explorer. Оцените результат.
В разделе Мои коллеги маркированный список из 5 пунктов отформатируйте жирным начертанием (<В>).
Загрузите файл web3.html в Internet Explorer. Оцените результат.
Раздел Design by выделите подчеркиванием.
Загрузите файл web3.html в Internet Explorer. Оцените результат.
Задание 4.
Создайте HTML-документ следующего вида:
Имя файла – web4.html
Заголовок документа <TITLE> - Советы по изготовлению страничек
Тело документа:
Тиканье, мерцание, перемещение, прокрутка…
Эти новые спецэффекты повсюду на Web.
Полезные советы!
- По возможности избегайте пиктограммы "В процессе производства";
- Не перегружайте страницу большими изображениями;
- Проверяйте орфографические ошибки;
- Проверяйте как можно чаще ссылки на странице.
Загрузите файл web4.html в Internet Explorer. Оцените результат.
Тело документа оформите с помощью контейнера <PRE>.
Загрузите файл web4.html в Internet Explorer. Оцените результат.
Задание 5.
Создайте документ, в котором текст будет организован с помощью списков терминов и определений. В список внесите следующие термины и их определения:
Сеть Интернет
Гипертекст
Обозреватель
<dl>
<dt>Сеть интернет
<dd>…..
<dt>Гипертекст
<dd> …..
<dt>Обозреватель
<dd> …..
</dl>
Сохраните документ под именем web5.html.
Выделите каждый термин красным цветом, жирным начертанием.
Загрузите файл web5.html в Internet Explorer. Оцените результат.
Контрольное задание.
· Создать с помощью программы БЛОКНОТ гипертекстовый файл. Имя файла — фамилия на английском языке. Файл сохранить в личной папке.
· Задать заголовок, отображаемый в строке заголовка окна браузера. Текст заголовка — фамилия на русском языке.
· Установить выбранные цвета для фона и текста документа.
· Написать название лабораторной работы заголовком первого уровня. Выровнять по центру.
· Написать цель лабораторной работы самым крупным шрифтом. Выровнять по левому краю.
· Создать список терминов и определений для следующих понятий:
· WWW
· HTML
· Тег
· Каждый термин и его определение отформатировать различными цветами и гарнитурами (Arial, Times, моноширинный шрифт). Сам термин должен быть выведен полужирным курсивом с подчеркиванием.
· Создать нумерованный список тегов со вложенными маркированными списками тегов блочного уровня и тегов для форматирования текста.
· Предъявить работу преподавателю (в браузере и Блокноте).
1.5 Контрольные вопросы
- Что такое гипертекстовый документ?
- Какие элементы структуры HTML-документа вы знаете?
- Что такое тэг HTML?.
- Какой минимальный набор тэгов должен присутствовать в HTML?
- Что такое Web-browser?
|
|
|
