Теги (дескрипторы) форматирования символов
Работа 1
Основы языка HTML
Цель работы – изучить основные элементы языка создания Web-документов.
Задача работы – создать гипертекстовый документ.
Порядок выполнения работы
1. Изучить теоретический материал.
2. Выполнить упражнения 1.1 … 1.9.
3. Создать собственный Web-документ, включающий гипертекстовые ссылки, рисунок, список, таблицу.
Содержание отчета
1. Титульный лист, название, цель и задание на лабораторную работу.
2. Краткая теоретическая часть:
· структура языка HTML;
· элементы HTML (гипертекстовые ссылки, Web-графика, форматирование, списки, таблицы);
· таблицы стилей.
3. Текст созданного Web-документа на языке HTML и вид страницы.
Пояснения к выполнению работы
Web-сайт хранит информацию в виде страниц, которые просматривают его посетители. Каждая такая страница (Web-page) должна быть описана в виде текстового файла на языке HTML (Hypertext Markup Language – язык разметки гипертекста). Получая этот файл, браузер воспроизводит на его основе информацию в соответствии с указанной разметкой.
Для создания Web-документов можно использовать текстовый редактор (или процессор), который обеспечивает сохранение текста в формате "только текст", без специальных кодов форматирования. Например, при работе в редакторе WordPad или NotePad (Блокнот), следует в меню Файл выбрать команду Сохранить как..., а в появившемся окне — опцию Текстовый документ из списка Тип файла. Файлы должны иметь расширение html или htm. Стандартная процедура создания Web-страницы состоит из следующих этапов: набор текста HTML-файла в текстовом редакторе, сохранение его с расширением html (htm), проверка правильности отображения в интернет-браузере.
Теги HTML
Документ, написанный на языке HTML, состоит из основного текста и управляющих символов – тегов (дескрипторов). Все теги HTML заключаются в угловые скобки (< >). Многие теги являются парными, т.е. состоят из стартового и завершающего (т.н. контейнер).
Чтобы Web-браузер верно распознал страницу, ее код должен начинаться тегом <HTML> и заканчиваться тегом </HTML>. Как видно, завершающий тег отличается от стартового наличием слэша / (символа «косая черта»).
Для передачи Web-браузеру информации о примененном при создании документа стандарте HTML перед тегом <HTML> указывается тег <DOCTYPE. Например, при использовании HTML версии 3.2, вставляется тег
<DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 3.2//EN”>.
Как правило, HTML-текст Web-страницы состоит из нескольких блоков. Первый из них – заголовок – выделяется тегами <HEAD> и </HEAD>. В этом блоке содержится заглавие страницы, а также сведения о кодировке, описание содержания страницы, ключевые слова и сведения об авторе. Текст заглавия появляется в строке заголовка Web-браузера при выводе страницы на экран. Он используется также поисковыми системами Интернет, такими как Yahoo, AltaVista или Rambler. Заглавие устанавливается с помощью тегов <TITLE> и </TITLE>. Для указания кодовой страницы символов, которая использовалась при создании Web-страницы, применяется тег <META> и параметр http-equiv = "Content-Type". Например, для указания кириллической кодировки windows-1251 надо написать:
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">.
Для индексации и каталогизации Web-страницы поисковыми серверами (например, Yahoo!, Lycos, Infoseek и др.) можно использовать тег <META> и параметр name="description" с описанием содержимого страницы. Например: <META name="description" content= "Официальный сайт фирмы EuroRobot, занимающейся разработкой промышленных роботов">. Аналогично можно добавить ключевые слова и имя автора страницы:
<META NAME="keywords" content="Ключевые слова">;
<META NAME="author" content="Имя автора">.
Тело Web-страницы ограничивается тегами<BODY> и </BODY>. В теге <BODY> можно использовать ряд ключевых слов (атрибутов) для установки цвета текста, фона, гиперссылок и др. Например,
<body bgcolor="#FFFFCC" text="#660099" link="#FF3399" alink="#CC3333" vlink="#669966"> Тело страницы </body>,
где bgcolor="#FFFFCC" – цвет фона; text="#660099" – цвет текста; link="#FF3399" – цвет гиперссылок; alink="#CC3333" – цвет активных гиперссылок; vlink="#669966" – цвет посещенных ранее ссылок.
В примере значения цветов приведены в шестнадцатеричном виде в формате RGB-палитры - #RRGGBB: символ #, две первые цифры – интенсивность красной составляющей, следующие две – зеленой, последние две – синей. Основные цвета можно указывать названиями (BLACK, BLUE, GREEN и т.д.).
В другом примере в качестве фона используется рисунок с именем picture1.gif - <body background="picture1.gif">Тело страницы</body>.
Подытоживая данный параграф, приведем структуру Web-страницы:
<DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 3.2//EN”>
<HTML>
<HEAD>
<TITLE>Заглавие</TITLE >
<META http-equiv="Content-Type" content="text/html; charset= windows-1251">
<META name="description" content="Содержимое Web-страницы">
<META NAME="keywords" content="Ключевые слова">
<META NAME="author" content="Имя автора">
</HEAD>
<BODY bgcolor="цвет" text="цвет" link="цвет" alink="цвет" vlink="цвет">
Тело документа
</BODY>
</HTML>
Форматирование текста
Основные теги, используемые для форматирования символов Web-страницы, приведены в табл. 3. Каждый из указанных тегов является контейнером, т.е. соответствующее форматирование начинается стартовым тегом, а заканчивается – завершающим.
Таблица 3
Теги (дескрипторы) форматирования символов
| Тег | Описание тега |
| <B> | Стиль Bold – полужирное начертание |
| <BIG> | Увеличение размера текущего шрифта |
| <EM> | Выделение (обычно курсив) |
| <FONT> | Использование определенного шрифта, размера и цвета |
| <I> | Стиль Italic – курсив |
| <SMALL> | Уменьшение размера текущего шрифта |
| <STRIKE> | Перечеркнутый текст |
| <SUB> | Подстрочные символы (нижний индекс) |
| <SUP> | Надстрочные символы (верхний индекс) |
| <TT> | Моноширинный шрифт, телетайп |
| <U> | Подчеркнутый текст |
Отметим, что при отображении файла HTML браузером все лишние пробелы игнорируются. Так, если вставить три пустые строки между двумя строками текста, то все пустые строки заменятся одним пробелом, а текст «разорвется» по границе окна.
Заранее точно не известно, какой шрифт будет использоваться браузером при отображении текста. Можно, однако, с помощью тега <FONT> указать явно, какой шрифт использовать, а также задать размер и цвет шрифта. Размер основного шрифта задается элементом BASEFONT: <BASEFONT SIZE = значение>. Величина основного шрифта может принимать значение от 1 до 7, стандартный для браузера размер шрифта равен 3. Значению 1 соответствует размер 9 пунктов, а для наибольшего размера 7 устанавливается шрифт размером 36 пунктов. Атрибут COLOR изменяет цвет шрифта, атрибут SIZE устанавливает относительный размер шрифта (+1 – на один размер больше, -2 - на два размера меньше). Например:
<font face="Arial" size="+2" color="#FF3366"> Текст </font>,
где face=”Arial” – шрифт Arial, size=”+2” – размер на два больше, color=”FF3366” – цвет текста.
Кроме атрибутов шрифта важное значение при форматировании текста имеет форматирование абзацев. В табл. 4 приведено большинство используемых для этой цели тегов. Все они, кроме <BR>, являются контейнерами.
Таблица 4