Часть 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 (обычно начинаются с амперсанта – символа &):
пробел - символ меньше (<) - < больше (>) - >
равно (=) - " амперсант (&) - & и другие.
Цвета текста и фон документа.
Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа <BODY > с помощью атрибутов.
Значение цвета можно задавать в одной из двух форм. Первая форма использует задание цвета в RGB – палитре (Red-Green-Blue). Код цвета указывается шестнадцатеричными числами, задающими интенсивность соответствующей составляющей (по два разряда). Например, ярко-красный имеет код – FF0000, ярко зеленый – 00FF00, черный цвет 000000, белый – FFFFFF. При задании цвета перед шестнадцатеричным числом ставится символ #.
Возможно задание цвета с помощью имен. Таблица основных цветов приведена в прил. 7.2. Каждому названию цвета соответствует определенная RGB – триада. Например, цвету navy - #000080.
Тэги форматирования текста
Для форматирования текста HTML-документа предусмотрены две группы тэгов, называемые логическими и физическими тэгами форматирования.
Тэги логической группы обозначают своими именами структурные группы текстовых фрагментов. Например, тэг <CODE> указывает на программный код, тэг <STRONG> - сильное выделение. Фрагменты с логическим форматированием Браузер отображает определенным образом в соответствии с его возможностями.
Тэги физического форматирования указывают Браузеру как отобразить текстовый фрагмент согласно предпочтению автора. Например, тэг <B> используется для отображения текста полужирным начертанием (что обычно соответствует логическому тэгу <STRONG>).
Современные Браузеры поддерживают и те, и другие тэги форматирования. Однако с выходом спецификации HTML 4.0, предпочтение отдается логическому форматированию, поскольку был провозглашен принцип отделения структуры документа от его представления.
Текст выводится в окне Браузера непрерывно слово за словом, при этом весь пробельный материал отображается как один пробел. Поэтому для перевода строки и вставки дополнительного пробельного интервала необходимо использовать специальные средства.
- Символьный приметив   – один пробел.
- Тэг <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-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел -  .
Для оформления таблиц могут быть использованы атрибуты, задаваемые в тэгах <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> - отобразится как X2 <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...
Быть иль не быть - вот в чем вопрос.
Что благороднее: сносить удары