Часть 1. Основные тэги оформления текста документа и рисунков.

Лабораторная работа №4

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML

Цель работы: создание html странички

Теоретические сведения

Язык, который используется для создания таких документов получил название HTML (Hyper Text Markup Language) – язык разметки гипертекстов, а программы для интерпретации HTML-файлов, формирования их в виде Web-страниц и отображения на экране компьютера пользователя называли Браузер (Browser).

Бурное развитие сети Интернет привело к появлению огромного числа Web-серверов, предназначенных для размещения и обслуживания Wed-сайтов (логически связанных групп Web-страниц), принадлежащих как частным лицам, так и организациям. А разработчики Браузеров, стремясь сделать Web-сайты более привлекательными и динамичными, постоянно модернизируют HTML. Поэтому один и тот же HTML-документ в разных Браузерах может выглядеть по-разному.

Стандартизацией языка HTML занимается организация, называемая World Wide Web Consortium (сокращенно - W3C), а среди разработчиков Браузеров лидирующие места занимают компании Netscape и Microsoft. В настоящее время последней спецификацией W3C является версия HTML 4.0, базовые конструкции которой рассматриваются далее.

Виды тэгов в HTML

HTML-документ представляет собой текстовый ASCII-файл, содержащий собственно текст, который должен быть отображен в окне Браузера, и команды разметки – HTML-тэги, определяющие внешний вид документа при его интерпретации в окне Браузера.

HTML-тэг записывается в угловых скобках (<>) и состоит из имени, за которым может следовать список атрибутов (для большинства тэгов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Записывать тэги можно в любом регистре - прописными или строчными буквами.

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами, воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет тоже название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тэгами может располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг <IMG SRC="pict.gif">, вызывает вставку рисунка из файла pict.gif.

Тэги могут иметь уточняющие параметры – атрибуты. Атрибуты записываются внутри автономного тэга, а в контейнере только в открывающей части. В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна. Значения атрибутов указываются после знака равенства в кавычках. Кавычки нужно ставить обязательно, если значение атрибута содержит пробелы.

Примеры тэгов с атрибутами:

<BODY BGCOLOR="LIGHTBLUE"> - задает светло-синий фон для документа,

<FONT SIZE=+2 COLOR=RED> текст </FONT> - парный тэг, дает указание Браузеру вывести заключенный в «контейнер» текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED).

Тэги, определяющие структуру HTML-документа

HTML-документ заключается в тэги <HTML> и </HTML>. Между этими тэгами располагаются две секции: секция заголовка (между тэгами <HEAD> и </HEAD>) и секция тела документа (между тэгами <BODY> и </BODY>).

Секция заголовка содержит описание параметров, используемых при отображении документа, но не отображающихся непосредственно в окне обозревателя.

Секция тела документа содержит текст, предназначенный для отображения обозревателя и тэги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее. Например:

<HTML>

<HEAD>

<ТIТLE>Пример НТМL-документа</ТIТLE>

</HEAD>

<BODY>

Самый простой HTML-документ

</BODY>

</HTML>

Браузер отобразит это документ, выведя в своем окне строку текста: Самый простой HTML-документ, расположенную в секции тела документа. Благодаря наличию тэга <ТIТLE> в заголовке окна Браузера будет выведено не имя файла, а заголовок, обычно несущий смысловое содержание. В данном случае заголовок окна Браузера будет: Пример НТМL-документа.

Основные тэги HTML

Основные тэги языка HTML приведены в прил. 7.1.

Комментарии - текст комментария размещается в тэге  и не отображается в окне Браузера.

Символьные примитивы – конструкции, заменяющие служебные символы языка HTML (обычно начинаются с амперсанта – символа &):

пробел -   символ меньше (<) - < больше (>) - >
равно (=) - " амперсант (&) - &amp и другие.

Цвета текста и фон документа.

Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа <BODY > с помощью атрибутов.

Значение цвета можно задавать в одной из двух форм. Первая форма использует задание цвета в RGB – палитре (Red-Green-Blue). Код цвета указывается шестнадцатеричными числами, задающими интенсивность соответствующей составляющей (по два разряда). Например, ярко-красный имеет код – FF0000, ярко зеленый – 00FF00, черный цвет 000000, белый – FFFFFF. При задании цвета перед шестнадцатеричным числом ставится символ #.

Возможно задание цвета с помощью имен. Таблица основных цветов приведена в прил. 7.2. Каждому названию цвета соответствует определенная RGB – триада. Например, цвету navy - #000080.

Тэги форматирования текста

Для форматирования текста HTML-документа предусмотрены две группы тэгов, называемые логическими и физическими тэгами форматирования.

Тэги логической группы обозначают своими именами структурные группы текстовых фрагментов. Например, тэг <CODE> указывает на программный код, тэг <STRONG> - сильное выделение. Фрагменты с логическим форматированием Браузер отображает определенным образом в соответствии с его возможностями.

Тэги физического форматирования указывают Браузеру как отобразить текстовый фрагмент согласно предпочтению автора. Например, тэг <B> используется для отображения текста полужирным начертанием (что обычно соответствует логическому тэгу <STRONG>).

Современные Браузеры поддерживают и те, и другие тэги форматирования. Однако с выходом спецификации HTML 4.0, предпочтение отдается логическому форматированию, поскольку был провозглашен принцип отделения структуры документа от его представления.

Текст выводится в окне Браузера непрерывно слово за словом, при этом весь пробельный материал отображается как один пробел. Поэтому для перевода строки и вставки дополнительного пробельного интервала необходимо использовать специальные средства.

Символьный приметив &nbsp – один пробел.
Тэг <BR> (от английского break) – вставка новой строки.
Тэг <P> (от английского paragraph) – начинает абзац с новой строки, отделяя от предыдущего двойным межстрочным интервалом.
Текст, заключенный между тэгами <PRE> </PRE> (от английского preformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами переносами строк.

Заголовки разных уровней.

Тэги вида <Hn> ….</Hn>оформляют заключенный в них текст в виде Заголовка n-уровня. Значения n могут изменяться от 1 (самый крупный) до 6 (самый мелкий). Так же, как и тэг абзаца <P>, тэг Заголовка прерывает текстовый поток и отделяет его пустой строкой.

Тэги <H1>, <H2>, <H6>могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), CENTER, RIGHT и JUSTIFY.

Списки

HTML позволяет создавать нумерованные и маркированные списки.

Фрагмент текста, представляющий список, заключается в тэги:

<OL> …. </OL>упорядоченный список (ordered list),

<UL> ….</UL> неупорядоченный список (unordered list),

<DL> ….</DL> список определений (definition list).

Каждый элемент списка заключается в тэги <LI> ….</LI>(от английского list item).

Тэг нумерованного списка может иметь параметр TYPE= , определяющий вид нумерации, и START= ,задающий начальное значение первого элемента списка (не зависимо от типа указывается цифрой).

TYPE=A – задает маркеры в виде прописных латинских букв;

TYPE=a – маркеры – строчные латинские буквы;

TYPE=I – маркеры в виде больших римских цифр;

TYPE=i – маркеры в виде маленьких римских цифр;

TYPE=1 – маркеры – арабские цифры (по умолчанию).

В тэгах маркированного списка параметр TYPE указывает тип маркера: закрашенные кружочки – disc, не закрашенные кружочки – circle, закрашенные квадратики – square.

Графические изображения.

Тэг <IMG> вставляет изображение в текстовый поток. Закрывающего компонента тэг не имеет.

Обязательным атрибутом его является SRC=url (адрес графического файла, может быть относительным или абсолютным). Для ускорения загрузки Web-страницы с рисунками рекомендуется в тэге рисунка указывать его размеры атрибутами HEIGHT и WIDTH. Это позволяет Браузеру еще до полной загрузки рисунка выполнить разметку экрана и загрузить текст.

Основные необязательные атрибуты приведены в табл. 7.1.

Таблица 7.1

Атрибут	Назначение атрибута
ALT=текст	Альтернативный текст, выводимый в режиме Браузера без загрузки изображений
BORDER= значение	Толщина обрамляющей рамки в пикселях
HEIGHT= значение	Высота изображения в пикселях или в процентах от высоты окна Браузера
WIDTH= значение	Ширина изображения в пикселях или в процентах от ширины окна Браузера
HSPACE= значение	Свободное пространство слева и справа от изображения в пикселях
VSPASE= значение	Свободное пространство сверху и снизу от изображения в пикселях
ALIGN=значение	Выравнивание изображения по горизонтали и по вертикали. Значения задаются атрибутами TOP, MIDDLE, BOTTOM. При применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение будет соответствующим образом выровнено по горизонтали, а текст будет обтекать его.

Гиперссылки

Связь между HTML-документами и фрагментами документов организуется с помощью тэгов <A> …</A> (от английского anchor- якорь).

Тэг <A> употребляется в двух формах – для перехода на другой документ в его начала, или для перехода к поименованному фрагменту (якорю) того же или другого документа.

В первом случае обязательным атрибутом является
HREF=url – адрес целевого документа.

Текст и изображения, размещенные между тэгами <A> …</A>, становятся активной зоной, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тэга BODY, либо цветом по умолчанию.

Во втором случае – при создании якоря (метки или закладки) фрагмента – обязателен атрибут NAME=#имя, где имя – идентификатор фрагмента (якоря).

Пример. Пусть в документе report.htm была определена закладка:
<A NAME=”CHEPTER2”> </A>.

Тогда гиперссылка на эту закладку из другого документа, находящегося в этом же каталоге, будет выглядеть следующим образом:
<A HREF="report.htm#CHEPTER2"> переход к Главе 2 </A>.

Таблицы.

Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга, создания многоколонного текста, обтекания рисунков и т.п.

Основные тэги таблиц:
<TABLE> …< /TABLE > - начало и окончание таблицы;

<TR> …</TR> - начало и окончание строки;

<TD> …</TD> - начало и окончание ячейки.

Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел - &nbsp.

Для оформления таблиц могут быть использованы атрибуты, задаваемые в тэгах <TABLE>, <TR> и <TD>. Основные из них перечислены в прил. 1.

Приложение 1

Основные тэги языка HTML

Назначение	Вид тэгов	Примечание
Общая структура документа HTML
Тип документа	<HTML></HTML>	Начало и конец.
Имя документа	<HEAD></HEAD>	Не отображается Браузером.
Заголовок	<TITLE></TITLE>	Отображается в строке заголовка окна Браузера.
Тело	<BODY></BODY>
Комментарий	<! --***-->	Обозревателем игнорируется.
Структура содержания документа
Внутренние заголовки различного уровня	<HN></HN>	Где N – номер уровня заголовка (от 1 до 6–ти).
Заголовок с выравниванием	<H? ALIGN=”left”></H?>	Типы выравнивания: · left - по левому краю, · center - по центру, · right - по правому краю, · justify – по ширине.
Форматирование абзацев
Создание абзаца (параграфа)	<P></P>
Перевод строки внутри абзаца	<BR>	Одиночный тэг
Перенос	<WBR>
Выравнивание абзаца	<P ALIGN=”left”></P>	Типы выравнивания: left, right, center и - justify
Горизонтальная линия между абзацами	<HR>	Одиночный тэг
Атрибуты: толщина, длина линии, выравнивание	<HR SIZE=? WIDTH=? ALIGN=”left”>	Толщина указывается в пикселях, длина – в пикселях или %, выравнивание по умолчанию center
Форматирование шрифта
Логическое форматирование
Выделение текста курсивом - Полужирным - Как с клавиатуры -	<EM></EM> <STRONG> </STRONG> <KBD> </KBD>	Фрагмент документа: Обычный текст <EM>Курсив </EM> <KBD>Моношириный</KBD>
Физическое форматирование	<B> жирный</B> <S> подчеркнутый</S> X<SUP>2</SUP> - отобразится как X² <I> курсив </I>
Курсив	<I> </I>
Подчеркнутый	<U> </U>
Перечеркнутый.	<S> </S>
Моноширинный	<TT> </TT>
Верхний индекс	<SUP></SUP>
Нижний индекс	<SUB></SUB>
Размер шрифта	<FONT SIZE=?></FONT>	От 1 до 7
Базовый размер шрифта (задается для всего документа в целом)	<BASEFONT SIZE=?>	От 1 до 7, по умолчанию равен 3
Список предпочтительных гарнитур шрифтов, через запятую	<FONT FACE=”шр-т1,шр-т2”>	<FONT FACE="Verdana,Arial">
Цвет шрифта (задается либо ключевым словом, либо шестнадцатеричным кодом)	<FONT COLOR=”$$$$$$”> </FONT>	Red –красный Blue – голубой #ff0000 – 16-тиричный код красного цвета в формате RGB
Создание списков
Упорядоченный	<OL></OL>	Фрагмент документа: <OL> <LI>Элемент списка 1</LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL>
Неупорядоченный	<UL></UL>
Элемент списка	<LI></LI>
Списки определений	<DL></DL>
Определяемые термины	<DT></DT>
Определения	<DD></DD>
Таблица
Определить таблицу	<TABLE></TABLE>	<TABLE border=”1”> <TR> <TH>Товар</TH> <TH>Цена</TH> </TR> <TR> <TD>Радиотелефон </TD> <TD align=”center”> 2000 </TD> </TR> </TABLE>
Окантовка таблицы	<TABLE BORDER=?></TABLE>
Строка таблицы	<TR></TR>
Выравнивание	<TR ALIGN=LEFT \| RIGHT \| CENTER \| JUSTIFY >
Ячейка таблицы	<TD></TD>
Выравнивание по горизонтали	<TD ALIGN=LEFT \| RIGHT \| CENTER \| JUSTIFY>
Ширина (в пикселях или в % к ширине окна)	<TD WIDTH=?>
Заголовок столбцов или строк (полужирный)	<TH></TH>
Вставка изображений
Вставка графического файла	<IMG SRC=”URL” WIDHT=”?” HEIGHT=”?”>	Фрагмент документа: <IMG SRC=”grafica.gif” WIDHT=”550” HEIGHT=”240” ALT=”Графический файл”>
Выравнивание текста	<IMG SRC=”URL” ALIGN=”TOP”>
Вывод альтернативного текста	<IMG SRC=”URL” ALT=”текст*”>
Вставка ссылок
Ссылки на другую страницу	<A HREF=”URL”> текст </A>	Фрагмент документа: <A HREF=”str2.htm”> Ссылка1</A> <A HREF=”URL”>текст</A> <A NAME=”metka1”></A> <A HREF=”index.htm#metka1”> На главную страницу</A>”
Ссылка на закладку в другом документе	<A HREF=”URL#*”> текст</A>
На закладку в том же документе	<A HREF=”#*”> текст</A>
Определить закладку	<A NAME=”*”></A>
Цвет фона, текста и ссылок
Фоновая картинка	<BODY BACKGROUND=”URL”>	Фрагмент текста: <BODY BACKGROUND=”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF”> (белый) ------------------------- </BODY>
Цвет фона	<BODY BGCOLOR=”#$$$$$$”>
Цвет текста	<BODY TEXT=”#$$$$$$”>
Цвет ссылки	<BODY LINK=”#$$$$$$”>
Цвет пройденной ссылки	<BODY VLINK=”#$$$$$$”>
Цвет активной ссылки	<BODY ALINK=”#$$$$$$”>

Приложение 2

Основные цвета

Color's name	Название	Red	Green	Blue
black	черный
navy	темно-синий
blue	синий			FF
green	зеленый
teal	сине-зеленый
lime	ярко-зеленый		FF
aqua	голубой		FF	FF
maroon	вишневый
purple	фиолетовый
olive	оливковый
gray	темно-серый
silver	светло-серый	C0	C0	C0
red	красный	FF
fuchsia	лиловый	FF		FF
yellow	желтый	FF	FF
white	белый	FF	FF	FF

ОСНОВНЫЕ ТЕРМИНЫ

ASCII (American Standard Code for information Interchange – Американский стандартный код для обмена информацией) – семиразрядный код для представления текстовой информации.

Browser (Браузер) – программа для просмотра (интерпретации) гипертекстовых документов.

GIF (Graphics Interchange Format – формат обмена графикой) – используется для не многоцветных четких изображений, поддерживает прозрачные области и анимацию.

HTML (Hyper Text Markup Language) – язык разметки гипертекстов.

JPEG (Joint Photography Experts Group – объединенная группа экспертов по машиной обработке фотоизображений) – распространенный формат растровой графики, который идеально подходит для сканируемых фотографий.

Web-page (Web-страница) – электронный документ, предназначенный для размещения (размещенный) в Интернет.

Web-site (Web-сайт) – совокупность Web-страниц, связанных между собой темой, гиперссылками и близким расположением в Интернет.

Web server (Web-сервер) – сервер, предназначенный для размещения Web-сайтов в Интернет, и предоставляющий услуги по запросам клиентов.

ЗАДАНИЕ Тема: Подготовка простейшего гипертекстового документа средствами программы Блокнот

Часть 1. Основные тэги оформления текста документа и рисунков.

1. На рабочем диске создать свою папку, а в ней текстовый файл с наименованием first.htm

1.1. Запустить редактор Блокнот, ввести в него текст:
Приветствую Вас на моей первой web-страничке.

1.2. Сохранить файл в созданной папке. При сохранении, в окне диалога "сохранить как…" в строке "Тип файла:" выбрать вариант "Все файлы (*.*)" , а в строке "Имя файла" задать имя с расширением html или htm, например first.htm (где name - ваше имя).

1.3. Закрыть документ, найти его пиктограмму в окне Проводника.

1.4. Открыть файл непосредственно из окна Проводника. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

1.5. Сделать выводы о том, что HTML-документ это всего лишь текст.

2. Ввести теги, определяющие структуру HTML-документа.

2.1. С помощью меню Браузера "Вид" - "В виде HTML" вызвать документ для его редактирования. Ввести приведенные ниже теги, в разделе Заголовка (TITLE) указать свою фамилию.

<HTML>

<HEAD> <TITLE> Фамилия - первый</TITLE>

</HEAD>

<BODY>

Приветствую Вас на моей первой Web-страничке.

</BODY>

</HTML>

2.2. Сохранить документ под тем же именем, "Обновить" его отображение в Браузере. Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ.

3.1. Вызвать меню Браузера "Вид" - "Источник HTML"и добавить текст подписи, например,
Студент группы ХХ факультета YYY Имя Фамилия
Сохранить документ (не закрывать) и обновить его просмотр в Браузере.

3.2. Отредактировать документ так, чтобы подпись начиналась с новой строки - использовать тэг <BR>. Просмотреть в Браузере новый вариант.

3.3. Добавить перед подписью горизонтальную линию.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в Браузере начинать с обновления загрузки документа с помощью кнопки "Обновить" на панели инструментов или нажатием клавиши F5.

4. Выполнить оформление текста стилем Заголовок.

4.1. Оформить первую строку документа стилем Заголовок-1 с помощью парного тэга <H1> …</H1>.

4.2. Оформить строку с подписью стилем Заголовок-3 и выровнять по правому краю.

4.3. Изменить стиль оформления первой строки на Заголовок-2 с выравниванием по центру, а подпись на Заголовок-4.

4.4. Просмотреть полученный документ в Браузере при различных размерах шрифта (меню «Вид»).

5. Выполнить оформление абзацев.

5.1. После заголовка ввести текст монолога Гамлета (английский и русский варианты).

To be, or not to be, that is the question:

Whether 'tis nobler in the mind to suffer

The slings and arrows of outrageous fortune,

Or to take arms against a sea of troubles,

And by opposing, end them...