|
ЛАБОРАТОРНАЯ РАБОТА №19 |
|
Тема работы: Создание страницы HTML. Цель
работы: Ознакомление с особенностями
форматирования документов HTML и их
отображения при помощи обозревателя
Internet Explorer. Изучение разметки абзацев.
Создание документа, содержащего
гиперссылки, графику. Изучение атрибутов тега <IMG>.
|
|
Теоретическая часть: Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Теговая модель документа: "элемент" := <"имя элемента" "список атрибутов"> содержание элемента </"имя элемента">. Элемент HTML или гипертекстовый документ состоит из двух частей: заголовка документа (HEAD) тела документа (BODY) <HTML> <HEAD> Содержание заголовка </HEAD> <BODY> Содержание тела документа </BODY> </HTML> Элементы заголовка <TITLE> поля документа, <BASE> базовый адрес, <ISINDEX> поисковый документ, <LINK> общая гипертекстовая ссылка, <META> гипертекстовые контекстные ссылки. Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6>. Обычные абзацы задаются с помощью парного тега <P>.Гипертекстовая ссылка определяется при помощи парного тега <A>. Обязательным атрибутом является HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной. Примеры: <A HREF="http://polyn.net.kiae.su/index.html">. Индекс базы данных "Полынь"</A> <A NAME="point"> <A HREF="http://polyn.net.kiae.su/index.html#point"> Ссылка на точку "point" в документе "index.html"</A>. Для представления графики используют форматы файлов GIF и JPEG. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG>. Тег <IMG> должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением. Примеры: <img SRC="http://polyn.net.kiae.su/gif/sarclast.gif" ALT="Sarcofagus.Winter, 1997">, <A HREF="doc.html"><img SRC="icon.gif" ALIGN=MIDDLE></A>. Ход работы: Создание
простейшей Web-страницы.
1.
Запустите текстовый редактор Блокнот (Пуск
> Программы > Стандартные > Блокнот). 2.
Введите следующий документ: <HTML> <HEAD>
<TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Содержание
документа </BODY>
</HTML> 3.
Сохраните этот документ под именем first.
htm. Перед
сохранением убедитесь, что сброшен
флажок Не показывать расширения для
зарегистрированных типов файлов (Пуск
> Настройка > Свойства папки > Вид). В
противном случае редактор Блокнот
может автоматически добавить в конец
имени расширение .ТХТ. 4.
Запустите программу Internet Explorer (Пуск >
Программы > Internet Explorer). 5.
Дайте команду Файл > Открыть. Щелкните
на кнопке Обзор и откройте файл first, htm. 6.
Посмотрите, как отображается этот файл
— простейший корректный документ HTML.
Где отображается содержимое элемента
TITLE? Где отображается содержимое
элемента BODY? 7.
Как отображаются слова “Содержание” и
“документа”, введенные в двух отдельных
строчках? Почему? Проверьте, что
происходит при уменьшении ширины окна. Изучение
приемов форматирования абзацев.
1.
Откройте документ first.htm в программе
Блокнот. 2.
Удалите весь текст, находящийся между
тегами <BODY> и </BODY>. Текст, который
будет вводиться в последующих пунктах
этого упражнения, необходимо поместить
после тега <BODY>, а его конкретное
содержание может быть любым. 3.
Введите заголовок первого уровня,
заключив его между тегами <Н1 > и </Н1
>. 4.
Введите заголовок второго уровня,
заключив его между тегами <Н2> и </Н2>. 5.
Введите отдельный абзац текста, начав
его с тега <Р>. Пробелы и символы перевода
строки можно использовать внутри абзаца
произвольно. 6.
Введите тег горизонтальной линейки <HR>. 7.
Введите еще один абзац текста, начав его
с тега <Р>. 8.
Сохраните этот документ под именем
paragraph.htm. 9.
Запустите обозреватель Internet Explorer (Пуск
> Программы > Internet Explorer). 10.
Дайте команду Файл > Открыть. Щелкните
на кнопке Обзор и откройте файл paragraph.htm. 11.
Посмотрите, как отображается этот файл.
Установите соответствие между элементами
кода HTML и фрагментами документа,
отображаемыми на экране. Создание гиперссылок.
1.
Если это упражнение выполняется не
сразу после предыдущего, откройте документ
first.htm в программе Блокнот. 2.
Удалите весь текст, находящийся между
тегами <BODY> и </BODY>. Текст, который
будет вводиться в последующих пунктах
этого упражнения, необходимо поместить
после тега <BODY>. 3.
Введите фразу: Текст до ссылки. 4.
Введите тег: <А HREF="first.htm">. 5.
Введите фразу: Ссылка. 6.
Введите закрывающий тег </А>. 7.
Введите фразу: Текст после ссылки. 8.
Сохраните документ под именем link.htm. 9.
Запустите обозреватель Internet Explorer (Пуск
> Программы > Internet Explorer). 10.
Дайте команду Файл > Открыть. Щелкните
на кнопке Обзор и откройте файл link.htm. 11.
Убедитесь в том, что текст между тегами
<А> и </А> выделен как ссылка (цветом
и подчеркиванием). 12.
Щелкните на ссылке и убедитесь, что при
этом загружается документ, на который
указывает ссылка. 13.
Щелкните на кнопке Назад на панели
инструментов, чтобы вернуться к предыдущей
странице. Убедитесь, что ссылка теперь
считается “просмотренной” и
отображается другим цветом. Создание
изображения и использование его на Web-странице.
1.
Откройте программу Paint (Пуск >
Программы > Стандартные > Paint). Задайте
размеры нового рисунка, например 50х50
точек (Рисунок > Атрибуты). 2.
Выберите красный цвет переднего плана и
зеленый цвет фона. Залейте рисунок
фоновым цветом. 3.
Инструментом Кисть нанесите
произвольный красный рисунок на зеленый
фон. 4.
откройте этот рисунок в Microsoft Photo Editor и
сохраните рисунок под именем pict .git (в
формате GIF). 5.
Дайте команду Рисунок > Атрибуты.
Установите флажок Использовать
прозрачный цвет фона. Щелкните на кнопке
Выбор цвета и выберите зеленый цвет, уже
использованный на рисунке в качестве
фонового. 6.
Сохраните рисунок еще раз под именем
pic2.gif (в формате GIF) и закройте программу
Microsoft Photo Editor. 7.
Если это упражнение выполняется не
сразу после предыдущего, откройте документ
first, him в программе Блокнот. 8.
Удалите весь текст, находящийся между
тегами <BODY> и </BODY>. Текст, который
будет вводиться в последующих пунктах
этого упражнения, необходимо поместить
после тега <BODY>. 9.
Введите произвольный текст (протяженностью
4-5 строк) и установите текстовый курсор в
его начало. 10.
Введите Ter<IMG SRC="pic1.gif" ALIGN="BOTTOM">. 11.
Сохраните документ под именем picture.htm. 12.
Запустите обозреватель Internet Explorer (Пуск
> Программы > Internet Explorer). 13.
Дайте команду Файл > Открыть. Щелкните
на кнопке Обзор и откройте файл picture.htm.
Посмотрите на получившийся документ,
обращая особое внимание на изображение. 14.
Вернитесь в программу Блокнот и
измените значение атрибута: ALIGN="TOP".
Сохраните файл под тем же именем. 15.
Вернитесь в программу Internet Explorer и
щелкните на кнопке Обновить на панели
инструментов. Посмотрите, как изменился
вид страницы при изменении атрибутов. 16.
Вернитесь в программу Блокнот и
измените значение атрибута: ALIGN="LEFT".
Сохраните файл под тем же именем. 17.
Вернитесь в программу Internet Explorer и
щелкните на кнопке Обновить на панели
инструментов. Посмотрите, как изменился
вид страницы при изменении атрибутов. 18.
Вернитесь в программу Блокнот и
добавьте в тег <IMG> атрибуты: HSPACE=40
VSPACE=20. Сохраните файл под тем же именем. 19.
Вернитесь в программу Internet Explorer и
щелкните на кнопке Обновить на панели
инструментов. Посмотрите, как изменился
вид страницы при изменении атрибутов. 20.
Вернитесь в программу Блокнот и
измените имя рисунка: SRC="pic2.gif".
Сохраните файл под тем же именем. 21.
Вернитесь в программу Internet Explorer и
щелкните на кнопке Обновить на панели
инструментов. Посмотрите, как изменился
вид страницы при изменении атрибутов. В
чем различие между двумя созданными
рисунками? Контрольные вопросы: 1. HTML-язык гипертекстовой разметки документа. 2. Теги для создания гиперссылок, использования изображений. Отчет должен содержать: 1. Тему, цель работы, ответы на контрольные вопросы и на вопросы хода выполнения работы. 2. Описание выполненных действий по пунктам. |