Порядок выполнения работы
1. С помощью меток языка HTML создать два текстовых файла с именами text1.htm и text2.htm, содержащие сведения о студенте, текущей дате и т.д. Тексты подготавливаются с помощью текстового редактора “Блокнот”, при первом сохранении на диск следует имя указывать полностью, то есть вместе с расширением htm.
2. В оба документа необходимо включить графические изображения. Если графические файлы с изображениями хранятся в той же папке, что и HTML-документы, то в метке <IMG> достаточно указать только имя файла, например: <IMG SRC= ”photo.jpg>. Ниже приведен пример текста HTML-документа, а на рис.9 – вид экрана при просмотре этого документа с помощью броузера.
<HTML>
<HEAD>
<TITLE> Простой HTML-документ </TITLE>
</HEAD>
<BODY BGCOLOR="#AAFFAA">
<H2 ALIGN=CENTER> <FONT COLOR="#FF0000">
HTML-документ №1
</FONT></H2>
<P ALIGN=LEFT> <FONT COLOR="#0000FF"> Документ подготовлен
с помощью текстового редактора "Блокнот"
<BR> Выполнил: И.И.Иванов, гр. ДМА-4-2, 20.10.2005 </FONT>
<P> <FONT COLOR="#000000"> Цветом выделено слово, связанное
<B> гиперссылкой </B> с
<A HREF="text2.htm"> другим документом </A>
<HR>
<IMG SRC="Photo.jpg" WIDTH="300" HIGTH="220" >
<BR> Группа ДМВ-4-2
</BODY>
</HTML>
Рис.9. Пример простого HTML-документа.
3. В обоих документах необходимо сделать внешние ссылки, с помощью которых можно переходить из одного документа в другой и обратно. Кроме того, в одном из документов необходимо привести пример внутренней ссылки, пометив один из последних абзацев, например, меткой <A HREF=”M1”> и сослаться на нее из начала документа с помощью метки <A HREF=”#M1”> …. </A> . Для того, чтобы переходы по внутренним ссылкам были заметны, необходимо, чтобы документ быт достаточно большим.
4
.
Убедившись, что документы отображаются
при просмотре правильно и работают все
гиперссылки, перейти к следующему этапу
– редактированию документа с целью
улучшения его внешнего вида в соответствии
с указаниями, полученными у преподавателя.
Например, можно расположить фотографию
в середине страницы, а поясняющие
надписи разместить слева и справа от
нее (см. рис.10).
Рис.10. Использование таблицы в документе.
Это можно сделать с помощью табличных меток <TABLE>,<TR> , <TD>.
Ниже приведен фрагмент измененного документа, в котором добавлена таблица, содержащая одну строку, разбитую на три колонки.
<TABLE BORDER ALGN=CENTER>
<TR>
<TD WIDTH="100">
<FONT COLOR="#000000"> Цветом выделено слово, связанное
<B> гиперссылкой </B> с
<A HREF="text2.htm"> другим документом </A>
</TD>
<TD> <IMG SRC="Photo.jpg" WIDTH="300" HIGTH="220" ></TD>
<TD WIDTH="100"> Группа ДМВ-4-2 на занятиях в дисплейном классе
кафедры АПП </TD>
</TR>
5. Сохраните результаты в своей рабочей папке. Сравните размеры файлов, содержащие HTML-документы, подготовленные с помощью меток языка HTML и созданный с помощью текстового процессора Word (ЛР №1).