Язык гипертекстовой разметки - HTML
ТЕМА 7. ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML
Общие сведения
В 1990 г. Тим Бернерс-Ли, программист Европейской лаборатории физики элементарных частиц, написал программу под названием редактор гипертекста (hypertext), которая позволяла выделять одним щелчком мыши информацию в тексте документа для ссылки на другие документы, находящиеся в сети. Так зародилось виртуальное пространство, получившее название World Wide Web (Всемирная паутина).
Язык, который используется для создания таких документов получил название 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, расположенного в той же папке, что и сам HTML-документ.
Тэги могут иметь уточняющие параметры – атрибуты. Атрибуты записываются внутри автономного тэга, а в контейнере только в открывающей части. В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна. Значения атрибутов указываются после знака равенства в кавычках.
Примеры тэгов с атрибутами:
<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 (обычно начинаются с амперсанта – символа &), например:
пробел – символ меньше (<) – < больше (>) – >
равно (=) – " амперсант (&) – & и другие.
Цвета текста и фон документа
Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа <BODY > с помощью атрибутов.
Значение цвета можно задавать в одной из двух форм. Первая форма использует задание цвета в RGB-палитре (Red-Green-Blue). Код цвета указывается 16-ричными числами, задающими интенсивность соответствующей составляющей (по два разряда). Например, ярко-красный имеет код – FF0000, ярко-зеленый – 00FF00, черный цвет 000000, белый – FFFFFF. При задании цвета перед 16-ричным числом ставится символ #.
Возможно задание цвета с помощью имен. Таблица основных цветов приведена в прил. 7.2. Каждому названию цвета соответствует определенная RGB-триада. Например, цвету navy – #000080.
Тэги форматирования текста
Для форматирования текста HTML-документа предусмотрены две группы тэгов, называемые логическими и физическими тэгами форматирования.
Тэги логической группы обозначают своими именами структурные группы текстовых фрагментов. Например, тэг <CODE> указывает на программный код, тэг <STRONG> – указывает на сильное выделение. Фрагменты с логическим форматированием Браузер отображает определенным образом в соответствии с его возможностями.
Тэги физического форматирования указывают Браузеру, как отобразить текстовый фрагмент согласно предпочтению автора. Например, тэг <B> используется для отображения текста полужирным начертанием (что обычно соответствует логическому тэгу <STRONG>).
Современные Браузеры поддерживают и те, и другие тэги форматирования. Однако с выходом спецификации HTML 4.0, предпочтение отдается логическому форматированию, поскольку был провозглашен принцип отделения структуры документа от его представления.
Другие параметры шрифта приводятся в прил. 7.1.
Текст выводится в окне Браузера непрерывно слово за словом, при этом весь пробельный материал отображается как один пробел. В соответствии с этим для перевода строки и вставки дополнительного пробельного интервала необходимо использовать специальные средства:
· Символьный примитив   – один пробел.
· Тэг <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). При вывод на экран элементы списка имеют отступ и начинаются с новой строки.
Тэг нумерованного списка <OL> может иметь параметры TYPE= , определяющий вид нумерации, и START= , задающий начальное значение первого элемента списка (независимо от типа указывается цифрой). Ниже приведены значения параметра TYPE, задающие тип маркера:
TYPE="A" – маркеры в виде прописных латинских букв;
TYPE="a" – маркеры в виде строчных латинских букв;
TYPE="I" – маркеры в виде больших римских цифр;
TYPE="i" – маркеры в виде маленьких римских цифр;
TYPE="1" – маркеры в виде арабских цифр (по умолчанию).
Например, тэг <OL TYPE="I" START="5" > позволит создать список, начинающийся с римской цифры V.
В тэгах маркированного списка <UL> параметр TYPE указывает тип маркера: закрашенные кружочки – disc, не закрашенные кружочки – circle, закрашенные квадратики – square.
Гиперссылки
Связь между 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-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел –  .
Для упрощения форматирования ячеек, являющимися заголовками строк или столбцов, вместо тэга <TD> можно использовать тэг <TH>. В этом случае текст в ячейке будет оформлен как полужирный.
Для оформления таблиц могут быть использованы атрибуты, задаваемые в тэгах <TABLE>, <TR> и <TD>. Основные из них перечислены в прил. 7.1.
Графические изображения
Тэг <IMG> вставляет изображение в текстовый поток. Закрывающего компонента тэг не имеет. Обязательным атрибутом его является SRC=URL (адрес графического файла, может быть относительным или абсолютным). Для ускорения загрузки Web-страницы с рисунками рекомендуется в тэге рисунка указывать его размеры атрибутами HEIGHT и WIDTH. Это позволяет Браузеру еще до полной загрузки рисунка выполнить разметку экрана и загрузить текст.
Основные необязательные атрибуты приведены в табл. 7.1.
Таблица 7.1
Атрибуты тэга графических изображений
| Атрибут | Назначение атрибута |
| ALT=текст | Альтернативный текст, выводимый Браузером в режиме без загрузки изображений или при наведении на рисунок курсора мыши |
| BORDER= значение | Толщина обрамляющей рамки в пикселях |
| HEIGHT= значение | Высота изображения в пикселях или в процентах от высоты окна Браузера |
| WIDTH= значение | Ширина изображения в пикселях или в процентах |
| HSPACE= значение | Свободное пространство слева и справа от изображения в пикселях |
| VSPASE= значение | Свободное пространство сверху и снизу от изображения в пикселях |
| ALIGN=значение | Значения LEFT либо RIGHT, соответствующим образом размещают изображение по горизонтали, при этом текст будет обтекать его Выравнивание текста относительно рисунка по вертикали задается атрибутами TOP, MIDDLE, BOTTOM. При применении этих значений вставленное изображение разрывает текстовый поток. |
Карты изображений
Большую популярность в последнее время приобрели карты изображений – обычные графические изображения, в которых отдельные области являются активными зонами для перехода по гиперссылкам. С их помощью организуются графические меню, которые могут оказаться более наглядным, чем применение обычных текстовых связей.
Существуют два варианта кары изображения – серверный, когда информация об отдельных зонах хранится на сервере, и клиентский - когда вся информация о работе карты изображения содержится в самом HTML-документе. Далее рассматривается клиентский вариант карты изображения.
Для того чтобы изображение стало картой в тэг IMG нужно добавить параметр USEMAP="#имя_карты". В дальнейшем имя_карты будет использоваться в тегах, определяющих активные зоны.
Запись тэга карты будет выглядеть следующим образом:
<IMG SRC="URL_рисунка" USEMAP="#name_map">
Необязательные параметры тэга IMG (ALT="альтернативный текст", WIDTH="..." и HEIGHT="...") имеют стандартное назначение.
Описание активных зон (AREA) выполняются внутри блочного тэга MAP:
<MAP NAME="name_map">
<!--- 1-ая зона--><AREA SHAPE="тип_зоны" COORDS="Xi,Yi,..." HREF="#name_area1" ALT="всплывающий текст">
<!--- 2-я зона и т.д..--><AREA SHAPE= ...>
</MAP>
Тип зоны определяет параметр SHAPE. Он может принимать значения: RECT (прямоугольник), CIRCLE (круг) или POLY (многоугольник).
Для прямоугольника задаются координаты верхнего левого (x1,y1) и нижнего правого углов (x2,y2) прямоугольника:
SHAPE="RECT" COORDS="X1,Y1,X2,Y2" или (X1,Y1) (X2,Y2)
Для круга задаются три числа – координаты центра круга и радиус.
Для многоугольника – координаты его вершин (Xi,Yi).
Ширина и высота рисунка, а также координаты точек указываются в пикселях.
В приведенном фрагменте гиперссылка HREF="#name_area1" указывает на закладку (якорь), находящуюся в текущем документе. Для выполнения перехода на другой документ необходимо указать имя (относительный или полный адрес - URL) этого документа.
Приложение 7.1
Основные тэги языка HTML
| Назначение | Вид тэгов | Примечание |
| Общая структура документа HTML | ||
| Тип документа | <HTML></HTML> | Начало и конец |
| Имя документа | <HEAD></HEAD> | Не отображается Браузером |
| Заголовок | <TITLE></TITLE> | Отображается в строке заголовка окна Браузера |
| Тело | <BODY></BODY> | |
| Комментарий | <! --***--> | Обозревателем игнорируется |
| Структура содержания документа | ||
| Внутренние заголовки различного уровня | <HN></HN> | Здесь N – номер уровня заголовка (от 1 до 6) |
| Заголовок N-го (?) уровня с выравниванием | <H? ALIGN=”left”></H?> | Типы выравнивания: · left – по левому краю, · center – по центру, · right – по правому краю, · justify – по ширине |
| Форматирование абзацев | ||
| Назначение | Вид тэгов | Примечание |
| Создание абзаца (параграфа) | <P> текст абзаца</P> | |
| Выравнивание абзаца | <P ALIGN=”left”> текст </P> | Типы выравнивания: left, right, center и justify |
| Перевод строки внутри абзаца | <BR> | Одиночный тэг |
| Перенос | <WBR> | |
| Горизонтальная линия между абзацами | <HR> | Одиночный тэг |
| Атрибуты: | <HR SIZE=”?” WIDTH=”?” ALIGN=”left” COLOR=“?“> | Толщина указывается в пикселях, длина – в пикселях или %, выравнивание по умолчанию center |
| Форматирование текста | ||
| Логическое форматирование | ||
| Выделение текста: курсивом полужирным как с клавиатуры | <EM></EM> <STRONG> </STRONG> <KBD> </KBD> | Фрагмент документа: Обычный текст <EM>Курсив </EM> <KBD>Моношириный</KBD> |
| Физическое форматирование начертания текста | ||
| Курсив | <I> </I> | <B> жирный</B> <S> подчеркнутый</S> X<SUP>2</SUP> – <I> курсив </I> |
| Подчеркнутый | <U> </U> | |
| Перечеркнутый | <S> </S> | |
| Моноширинный | <TT> </TT> | |
| Верхний индекс | <SUP></SUP> | |
| Нижний индекс | <SUB></SUB> | |
| Базовый размер шрифта (задается для всего документа в целом) | <BASEFONT SIZE=?> | От 1 до 7, по умолчанию равен 3 |
| Управление параметрами шрифта – параметры тэга<FONT> <FONT SIZE= FACE= COLOR= > текст </FONT> | ||
| Размер шрифта | SIZE=” ?” | ?- от 1 до 7 или изменение относительно базового размера +3 (-2) и т.п. |
| Список предпочтительных гарнитур шрифтов, через запятую | FACE=”шрифт1,шрифт2” | FACE=”Verdana,Arial” |
| Цвет шрифта (задается либо ключевым словом, либо 16-ричным кодом) | COLOR=” цвет “ | 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.html#metka1”> На главную страницу</A>” |
| Ссылка на закладку в другом документе | <A HREF=”URL#*”> текст</A> | |
| На закладку в том же документе | <A HREF=”#*”> текст</A> | |
| Определить закладку | <A NAME=”*”></A> | |
| Цвет фона, текста и ссылок – атрибуты тэга <BODY> | ||
| Атрибуты: | Значения атрибутов | Примеры |
| Фоновая картинка | BACKGROUND=”URL” | Фрагмент текста: <BODY BGCOLOR=”#C0C0C0” BACKGROUND=”grafica.gif” TEXT=”black” LINK=”#FF0000” VLINK=” yellow ” ALINK=”#FFFFFF”> Содержимое документа </BODY> |
| Цвет фона | BGCOLOR=”#$$$$$$” | |
| Цвет текста | TEXT=”#$$$$$$” | |
| Цвет ссылки | LINK=”#$$$$$$” | |
| Цвет пройденной ссылки | VLINK=”#$$$$$$” | |
| Цвет активной ссылки | ALINK=”#$$$$$$” |
| Бегущая строка - тэг <MARQUEE> | ||
| Атрибуты: | Значения атрибутов | Примеры |
| Расположение Тип отображения Направление движения Количество повторений | ALIGN=Top|Middle|Bottom BEHAVIOR=Scroll | Slide | Alternate DIRECTION=Left | Right LOOP="k" | <MARQUEE ALIGN="TOP" BEHAVIOR="SLIDE" DIRECTION="RIGHT" LOOP="2"> Мы из Бонча! </MARQUEE> |
Приложение 7.2
Основные цвета
| Color's name | Название | Red | Green | Blue |
| black | черный | 00 | 00 | 00 |
| navy | темно-синий | 00 | 00 | 80 |
| blue | синий | 00 | 00 | FF |
| green | зеленый | 00 | 80 | 00 |
| teal | сине-зеленый | 00 | 80 | 80 |
| lime | ярко-зеленый | 00 | FF | 00 |
| aqua | голубой | 00 | FF | FF |
| maroon | вишневый | 80 | 00 | 00 |
| purple | фиолетовый | 80 | 00 | 80 |
| olive | оливковый | 80 | 80 | 00 |
| gray | темно-серый | 80 | 80 | 80 |
| silver | светло-серый | C0 | C0 | C0 |
| red | красный | FF | 00 | 00 |
| fuchsia | лиловый | FF | 00 | FF |
| yellow | желтый | FF | FF | 00 |
| 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-сайтов в Интернет и предоставляющий услуги по запросам клиентов.
URL (Uniform Resource Locator – универсальный указатель ресурса) – имя, обозначающее протокол доступа к ресурсу и IP-адрес конкретной Web-страницы. В HTML-документе может быть использован относительный адрес ресурса.
ЗАДАНИЕ 7
Подготовка простейшего гипертекстового документа
средствами программы Блокнот
 |
Часть I. Основные тэги оформления текста документа и рисунков
1. На рабочем диске создать свою папку, а в ней – текстовый файл с наименованием first.html
1.1. Запустить редактор Блокнот, ввести в него текст:
Приветствую Вас на моей первой web-страничке.
1.2. Сохранить файл в созданной папке. При сохранении, в окне диалога "сохранить как…" в строке "Тип файла:" выбрать вариант "Все файлы (*.*)" , а в строке "Имя файла" задать имя с расширением html или htm, например, first.html (где 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...
Быть иль не быть – вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы – иль против моря
Невзгод вооружиться, в бой вступить.
И все покончить разом...
5.2. Оформить каждый из вариантов монолога (5 строк) как отдельный абзац с помощью тэга <P>. Выровнять английский текст по левому краю, а русский – по правому.
5.3. Скопировать русский вариант монолога и сформировать из него один абзац:
Быть иль не быть – вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы – иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...
Оформить выравнивание абзаца – "по ширине".
6. Оформление абзацев с помощью парного тэга <PRE>.
6.1. Скопировать в конец документа английский вариант монолога, поместить его вовнутрь тэга PRE и оформить по приведенному образцу "лесенкой", используя клавишу табуляции:
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...
6.2. Сохранить документ first.html, скопировать его на свой диск для дальнейшей работы.
7. Выполнить шрифтовое оформление документа.
7.1. Создать документ second.html в Вашей папке на жестком диске. За основу документа взять файл first.html, оставить в нем заголовок, английский и русский варианты монолога. Заменить в тэге <TITLE> слово "первый" на "второй".
7.2. Оформить каждую строку английского текста монолога разным начертанием (полужирный, курсив, подчеркнутый и т.д.).
7.3. В русском тексте монолога оформить каждую строку различными вариантами шрифтового оформления с помощью тэга
<FONT SIZE=" " FACE= " " COLOR=" " > Для выбора гарнитуры шрифта FACE использовать текстовый процессор Word.
8. Оформление списков.
8.1. Дополнить текст документа – ввести после заголовка еще три строки:
Я знаю как оформлять:
Заголовки,
Абзацы
8.2. Оформить две последние строки как список нумерованный.
8.3. Дополнить список своих знаний. Например, между пунктами "Заголовки" и "Абзацы" добавить пункт "Текст". Проанализировать, как изменилась нумерация элементов списка.
8.4. Создать вложенный список. Добавить уточнение видов оформления шрифтов и абзацев и оформить полученный список по следующему образцу.
Я знаю как оформлять:
I.Шрифты
· Размер
· Цвет
· Гарнитуру
II. Заголовки
· От 1-го до 6-го уровня
III. Абзацы
· Выравнивание
· Разрыв строк внутри абзаца
· Использовать переформатирование
9. Вставить в текст рисунок.
9.1. Создать дополнительную папку Images. Подготовить в редакторе Paint свой автопортрет, размером 5×5 см (150×150 точек). Сохранить файл в папке Images 4 раза в разных форматах (разного типа):
24-разрядный рисунок (*.bmp) – под именем pic_24.bmp,
16-цветный рисунок (*.bmp) – под именем pic_16.bmp,
Формат GIF (*.gif) – под именем pic_g.gif,
Формат JPEG (*.jpg, *.jpeg) – под именем pic_j.jpg.
Сопоставить качество и размер рисунков. Оптимальный вариант разместить в рабочей папке под именем pic_1.gif (если Вы выбрали формат GIF).
9.2. Вставить рисунок в начало документа (после приветствия), поместив тэг: <IMG SRC="pic1.gif">
Просмотреть результат в Браузере.
9.3. Выровнять рисунок по правому краю (ввести в тэг рисунка атрибут выравнивания). Просмотреть результат обтекания в Браузере.
9.4. Дополнить тэг рисунка атрибутами, задающими размер рисунка, и альтернативный текст "Это мой автопортрет".
9.5. Сделать копию документа second.html и рисунка на своем диске.
10. Научиться оформлять фон HTML-документа.
10.1. Создать документ third.html, взяв за основу документ second.html. (Сохранить документ second.html под именем third.html.)
10.1.1. Отредактировать тэг <TITLE>, заменив слово "второй" на "третий".
10.1.2. Отредактировать тэг <BODY>, введя в него атрибут цветового оформления фона BGCOLOR= "цвет". Задать значение атрибута в формате RGB (см. табл. основных цветов).
10.1.3. Изменить цвет основного текста, дополнив тэг <BODY> атрибутом TEXT="цвет". Подобрать для текста цвет контрастный по отношению к цвету фону.
10.2. Отредактировать документ first.html так, чтобы фон в нем задавался фоновым рисунком. В качестве рисунка использовать (создать) цветной рисунок небольшого размера (несколько пикселей).
11. Продемонстрировать созданные документы преподавателю. Сохранить копии всех документов на своем диске для дальнейшей работы.
Часть II. Работа с таблицами, создание гиперссылок
1. Создать таблицу по приведенному образцу (рис. 7.1), сохранить документ под именем tabl_name.html. Сверху над таблицей разместить заголовок Таблица №1
|
Рис. 7.1 | При отображении таблицы в браузере должны удовлетворяться следующие условия: · таблица должна располагаться по середине экрана и быть симметричной, правильной формы; · в центральной ячейке поместить символ - *, остальные ячейки должны быть пустыми. |
Примечание. Для отображения пустых ячеек в них нужно разместить символьный приметив пробела  .
2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее.
2.1. В центральной ячейке разместить рисунок – ваш автопортрет.
2.2. "Раскрасить" все остальные ячейки в различные цвета.
2.3. Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному образцу (рис. 7.2).
2.4. В верхнюю строку поместить заголовок
Автопортрет студента Иванова ВВ
|
Рис. 7.2 | .Примечания. · Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan= и rowspan= · Для отображения пустых ячеек в них нужно поместить символьный приметив пробела  . |
Предъявить результат преподавателю.
3. Создать документ, структурированный с помощью таблицы.
3.1. Создать новый HTML-документ, сохранить его в той же папке, что и предыдущие три файла, задать ему имя index.html.
3.2. Разместить в документе следующие элементы.
3.2.1. В начале документа поместить заголовок:
Отчет по лабораторной работе – Создание HTML-документов
3.2.2. Создать таблицу, состоящую из двух ячеек (без обрамления). В правой ячейке поместить рисунок – Ваш автопортрет, в левой свои данные (фамилию, имя, учебную группу). Выполнить шрифтовое оформление текста.
4. Создать меню средствами таблицы.
4.1. Далее в документе index.html поместить текст:
Мною созданы три документа!
4.2. Ниже разместить таблицу, состоящую из трех ячеек по приведенному образцу.
| 1-й документ | 2-й документ | 3-й документ |
4.3. Оформить таблицу. Таблица должна иметь рамку, "раскрасить" ячейки в светлые тона, выровнять таблицу по центру экрана.
4.4. Связать созданные документы с помощью гиперссылок.
4.4.1. За текстом в каждой ячейке закрепить гиперссылку на соответствующий документ.
4.4.2. В конце каждого документа поместить рисунок 
и закрепить за ним гиперссылку для возврата к файлу index.html.
4.5. Создать гиперссылку на адрес электронной почты. В конце документа ввести фразу: Пишите мне. Закрепить за ней гиперссылку на свой адрес e-mail.
5. Сохранить все документы. Проверить переходы по гиперссылкам.
6. Оформить основной заголовок с помощью Бегущей строки.
7. Продемонстрировать созданные документы преподавателю.
Часть III. Создание меню с помощью карт-изображений
1. Подготовить на рабочем диске папку для размещения создаваемых документов.
2. С помощью графического редактора Pain создать рисунок размером 10х10 см или 300х300 точек (пикселей), состоящий из 3-х фигур (рис 7.3).
Рис. 7.3
3. Сохранить рисунок в файлах различного формата с соответствующими именами:
bmp- 24-разрядный fig_1_24.bmp,
bmp – 16-цветный fig_1_16.bmp,
jpg – под именем fig_13.jpg
и gif - под именем fig_14.gif.
Проанализировать, какой объем занимает каждый файл и какое при этом обеспечивается качество изображения. Выбрать для дальнейшей работы файл с наименьшим объемом и приемлемым качеством, переименовать его в fig_1.
4. Определить координаты активных зон для дальнейшего использования в карте-изображения. Для этого можно использовать графический редактор.
4.1. Открыть файл fig_1 в графическом редакторе и уточнить координаты областей рисунка- последовательно выделяя предполагаемые активные зоны, прочитать в строке состояния координаты нужных точек (рис. 7.3) и записать их для дальнейшего использования.
5. Создать HTML документ – map_1.html, содержащий заголовок:
Психологические портреты
Укажите на рисунке, какая фигура Вам больше всего нравится.
Далее разместить рисунок и фрагменты текста, поясняющие какие черты характера символизируют соответствующие фигуры. Каждый фрагмент должен начинаться названием фигуры и занимать не менее половины страницы. Названия оформить шрифтом с выделением.
6. Модифицировать документ так, чтобы рисунок служил картой-изображением. Теги для определения карты и активных зон приведены в приложении.
6.1. Ввести теги закладок перед заголовками – названиями фигур.
6.2. Ввести теги определения карты.
6.3. Проверить работоспособность активных зон.
6.4. Обеспечить средства для возврата в начало документа.
7. Создать файл с картой-изображением, обеспечивающей переходы на другие документы.
|
В лекции "Состояние процессов" также много полезной информации. Рис. 7.4 | 7.1. Нарисовать рисунок (подготовить фотографию), с изображением нескольких персон, например, Ваша компания или Ваша семья (рис. 7.4). Размер рисунка не должен превышать 10х10 см, объем файла - не более 15кБ. Дать название файлу company.gif и сохранить в подготовленной папке. 7.2. Определить координаты областей – активных зон для гиперссылок с помощью графического редактора. |
7.3. Подготовить HTML-документы для описания каждой персоны. Разместить их в рабочей папке, дать названия persona_1.html, persona_2.html и persona_3.html. В конце каждого документа обеспечить средство возврата в главный документ.
8. Подготовить главный документ – my_company.html, который должен содержать заголовок, краткий текст о представляемой компании, рисунок и подпись. Для создания эффекта обтекания рисунка рекомендуется использовать таблицу.
9. Убедиться в правильности переходов, предъявить результат преподавателю.
