Лабораторная работа n 12
Знакомство с Internet Explorer и основами разработки HTML-страниц
Цель работы: ознакомиться с интерфейсом браузера Internet Explorer и структурой HTML-документа.
1.Краткое описание приемов работы
1.1.Элементы HTML-документа
1.1.1.Структура HTML-документа
В общем виде HTML-документ состоит из трех частей: декларации <!DOCTYPE>, заголовка и тела (см. рисунок 1).
Рисунок 1 Структура HTML-документа
1.1.2.Теги
Большинство документов имеют стандартные элементы, такие, как заголовок, абзацы, списки, таблицы и т.д. Для обозначения этих элементов в HTML-страницах используются специальные команды разметки – теги. HTML-теги условно разделяются на две категории: теги, определяющие, как будет отображаться браузером тело документа в целом; теги, описывающие общие свойства документа, такие как заголовок или автор документа.
Теги начинаются с символа "<" и заканчиваются символом ">". Как правило, существует открывающий тег и завершающий тег. Завершающий тег выглядит так же, как открывающий, и отличается от него прямым слешем перед именем тега внутри угловых скобок. Например, тег <TITLE> - открывающий, а тег </TITLE> - соответствующий ему завершающий. Некоторые теги, такие, как <P> (тег, определяющий абзац), не требуют завершающего тега, но его использование придает исходному тексту HTML-документа улучшенную читаемость и структурируемость.
Ниже приведен пример разметки фрагмента текста с помощью тега <title>:
<TITLE> Заголовок документа </TITLE>
1.1.3.Шаблон html-документа
Ниже приводится общий вид HTML-документа, который может использоваться в качестве шаблона.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Пример HTML-документа</TITLE>
... другие элементы заголовка
</HEAD>
<BODY>
... тело документа
</BODY>
</HTML>
Тег <HTML> должен открывать документ, а тег </HTML> - закрывать его. Между этими двумя основными тегами располагается заголовок HTML-документа (теги <HEAD> и </HEAD>) и его тело (теги <BODY> и </BODY>). В заголовке HTML-документа обязательно должен присутствовать тег <TITLE>, задающий текст заголовка. Декларация <!DOCTYPE>, при работе с локальными HTML-документами может быть опущена.
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов. Выбор редактора зависит от личных пристрастий каждого автора. При выполнении лабораторных работ будет использоваться текстовый редактор Notepad (Блокнот).
1.1.4.Просмотр html-документов
Просмотр HTML-документов осуществляется с помощью браузеров. Самыми популярными браузерами являются Microsoft Internet Explorer и Netscape Navigator. При выполнении лабораторных работ будет использоваться браузер Microsoft Internet Explorer. Компоненты окна этого браузера показаны на рисунке 2.
Рисунок 2 – Элементы окна Internet Explorer
1.1.4.1.Строка меню
Строка меню содержит команды основного меню. Все команды являются иерархическими. Это означает, что при выборе одной из таких команд на экране появляется ее ниспадающее меню.
1.1.4.2.Панели инструментов
Панели инструментов предоставляют в ваше распоряжение удобное средство для быстрого выполнения команд и процедур. Для работы с панелями инструментов вам необходима мышь или аналогичное устройство позиционирования. Для того чтобы выполнить команду или процедуру, представленную на панели инструментов соответствующей кнопкой, вам достаточно нажать мышью. Кнопки панели инструментов дублируют команды меню.
На панели инструментов находятся следующие кнопки:
Назад (Back) – возврат на шаг назад (к предыдущему документу);
Вперед (Forward) – переход на шаг вперед (к последующему документу). С помощью этих кнопок можно перемещаться по списку просмотренных ранее документов и выбрать любой из них. Для этого необходимо нажать небольшую стрелку рядом с кнопкой Назад или Вперед и выбрать необходимый документа;
Остановить (Stop) – прерывание процесса загрузки документа;
Обновить (Refresh) – повторить загрузку текущего документа (адрес которого указан в адресной строке);
Домой (Home) – переход на начальную (домашнюю) HTML-страницу. Начальная страница автоматически загружается при запуске Internet Explorer и настраивается командой Вид|Свойства;
Поиск (Search) – выполнение поиска в сети Internet, используя мировые поисковые системы;
Избранное (Favorites) – список отобранных пользователем адресов Internet;
Журнал (History) – просмотр истории работы;
Во весь экран – отображение документа во весь экран компьютера, для увеличения площади просмотра. Повторное нажатие кнопки возвращает экран в исходное положение.
Почта (Mail) - переход к почтовой программе и программе чтения групп новостей;
1.1.4.3.Строка состояния
Строка состояния находится в нижней части окна. В строке состояния отображается процесс загрузки браузером HTML-документа.
1.1.4.4.Рабочая область
Основной областью окна браузера является рабочая область. В рабочей области отображается сформированный браузером документ.
1.1.4.5.Линейки
Линейки (горизонтальная линейка и вертикальная) позволяют вам визуально оценить текущее положение курсора в сформированном браузером тексте документа.
2.Задание на лабораторную работу
В результате выполнения работы вы должны:
ознакомиться с интерфейсом браузера Microsoft Internet Explorer;
ознакомиться с методикой создания простых HTML-документов при помощи текстового редактора.
3.Порядок выполнения
3.1.Создание простого HTML-документа
Для создания простого HTML-документа выполните следующие действия:
загрузите (Пуск|Программы|Стандартные|Блокнот) текстовый редактор NOTEPAD (БЛОКНОТ) c помощью которого будем создавать исходный текст документа;
используя редактор, наберите следующий текст:
<HTML>
<HEAD>
<META content="charset=windows-1251">
<TITLE>Лабораторная работа 12 Документ 1</TITLE>
</HEAD>
<BODY>
<H1>Фамилия Имя Отчество</H1>
<HR>
<P>
Протоколы Internet были разработаны как средство
коммуникаций в случае ядерного удара СССР по США.
Проект осуществлялся с 1969 года по 1982 год.
Помимо Internet в мире существуют и другие сети.
Например, Bitnet и Usenet.
</P>
</BODY>
</HTML>
сохраните ( Файл|Сохранить как.. ) текст документа в файле Docum1.htm (файл должен быть размещен в вашем рабочем каталоге).
В приведенном выше HTML-документе использованы следующие теги:
<HTML> - границы HTML- документ;
<HEAD> - заголовок документа. В заголовке имеется два тега <МЕТА>, задающий кодировку WINDOWS; и <TITLE> - задающий текст заголовка;
<BODY> тело документа. Тело документа содержит заголовок раздела (тег<H1>); горизонтальную линию (тег <HR>); абзац (параграф) с текстом (тег <P>).