У Навигатор э4-пз. Практические задания в данном разделе приведены две лабораторные работы, направленные на практическое овладение основами html-программирования.
Время, необходимое для выполнея работ:
Лабораторная работа №1 – 1 час.
Лабораторная работа №2 – 1 час.
Лабораторная работа «Общие понятия о гипертекстовом языке НТМL»
Перед началом работы создайте рабочую папку HTML и скопируйте в нее файл agree.jpg из папки, указанной преподавателем.
Гипертекстовый WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Internet. Чтобы реализовать все эти возможности, был разработан специальный компьютерный язык, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста.
Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и тэги разметки (markup tags). Тэги представляют собой определенные стандартом HTML последовательности символов, заключенные между знаками "<" и " >". Согласно тэгам разметки программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Файл на языке HTML принимает "гипертекстовый облик" только тогда, когда он интерпретируется программой просмотра.
1. Наберите в Блокноте приведенную в левом столбце программу:
Программа на HTML |
Пример на экране |
<HTML> <HEAD><TITLE>Простой HTML Документ</TITLE> </HEAD><BODY> <H1>Простой HTML Документ</H1> <P>Документ для публикации на WWW-сервере содержит следующие элементы : <UL> <LI>Cтилизованный текст <LI>Картинку <IMG SRC="agree.jpg" ALT="Знакомство"> <LI>Ссылку на страницу WWW-сервера с новыми анекдотами </UL> <P>Прочтите <А href="http://www.anekdot.ru/an/an9804/980402.html">новые анекдоты из России</А> и расслабтесь на минуту!</Р> </BODY> </HTML> |
Простой HTML Документ Документ для публикации на WWW-сервере содержит следующие элементы :
Прочтите новые анекдоты из России и расслабьтесь на минуту! |
2. Сохраните программу в своей рабочей папке под любым именем с расширением .htm.
3. Дважды щелкните по значку сохраненной программы левой клавишей мыши: программа будет автоматически просмотрена браузером. Проанализируйте полученный результат.
Этот документ начинается с Тэга <HTML>, который сообщит программе просмотра, что данный файл - это документ на языке HTML. Заканчивается документ Тэгом </HTML>, который является закрывающим Тэгом, парным Тэгу <HTML>.
Далее - между Тэгами <HEAD> и </HEAD> - следует головная часть документа, внутри которой, между Тэгами <TITLE> и </TITLE>, находится название документа. Название выводится не вместе с самим документом, а в полосе заголовка окна программы просмотра (title bar), а также используется и для других целей.
Затем - между Тэгами <BODY> и </BODY> - помещается основная часть документа, так называемое тело.
Между Тэгами <H1> и </H1> располагается заголовок (heading), который программа просмотра выводит крупным и/или жирным шрифтом.
Тэг <P> отмечает начало параграфа, текст которого выводится с новой строки. Каждому параграфу предшествует пустая строка. Обратите внимание на то, что длина строки текста, выводимого программой просмотра, в общем случае, не совпадает с длиной строки в исходном HTML-файле и определяется размером окна программы просмотра и размером символов шрифта, который эта программа использует для вывода текста.
Тэги <UL> и </UL> отмечают начало и конец так называемого непронумерованного списка (unnumbered list), каждому элементу которого предшествует Тэг <LI> (list item). Каждый элемент списка программа просмотра выводит с новой строки и предваряет символом.
Тэг <IMG SRC="images/agree.jpg" ALT="Знакомство"> (image source) включает в документ изображение, хранящееся в файле agree.jpg. Атрибут ALT="Знакомство" задает так называемый альтернативный текст (в данном случае, Знакомство), который неграфические программы просмотра выводят на экран вместо соответствующего рисунка. Этот же текст будет виден, если в графической программе просмотра отключить автоматическую загрузку изображений (что обычно делается при медленной работе сети).
Тэг <А href="http://www.anekdot.ru/an/an9804/980402.html">новые анекдоты из России</А> отмечает начало якоря гиперссылки (hyperreference anchor), или, как его называют чаще, якоря гиперсвязи (hyperlink anchor). Атрибут HREF="URL" указывает URL документа, на который делается ссылка. Синтаксис URL полностью совпадает с синтаксисом URL в гиперсвязях. Обратите внимание: URL гиперссылки заключен в двойные кавычки, - их пропуск является весьма частой ошибкой начинающих авторов. Якорь гиперссылки заканчивается Тэгом </A>. Как мы уже говорили, программа просмотра выделяет якорь из окружающего текста цветом и/или подчеркиванием и/или жирным шрифтом. Когда указатель мыши находится на якоре, то он обычно принимает вид указующего перста (в чем вы можете убедиться, подведя указатель к любому ближайшему якорю в тексте). Если в такой момент щелкнуть клавишей мыши, то программа просмотра начнет загружать связанный с этим якорем документ.
4. Ознакомьтесь с прилагаемым более подробным перечнем основных тэгов (раздел УМ4 Учебного пособия).
5. Используя перечень тэгов, отредактируйте Ваш HTML документ:
Измените цвет шрифта.
Введите горизонтальную линию.
Введите в документ таблицу.
Измените цвет фона.
Используйте в качестве гиперссылки графическое изображение и т.д.
Порядок редактирования:
В строке меню команд браузера открыть меню Вид, выбрать команду Показать в HTML-виде.
В открывшемся окне Блокнота произвести необходимую правку, после чего в меню Файл Блокнота выбрать команду Сохранить.
Закрыть Блокнот.
На панели инструментов браузера щелкнуть левой клавишей мыши по кнопке Обновить.
Проанализировать результат корректировки (редактирования).
Типичные ошибки при разработке HTML-документа: