Министерство Российской Федерации по налогам и сборам
Всероссийская государственная налоговая академия
ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА - HTML
Лабораторный практикум
Москва 2003
Практическая работа № 1. Создание простейшей Web-страницы
Цель работы: освоение приема создания документа HTML, знакомство с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.
Создайте в Вашей рабочей папке - подпапку Web, в этой папке должны хранится ВСЕ созданные файлы, которые будут созданы в процессе выполнения практических работ
Запустите текстовый редактор Блокнот (Пуск / Программы / Стандартные / Блокнот). Уменьшите окно редактора так, чтобы оно стало занимать 1/4 часть экрана монитора.
Введите следующий документ:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Содержание
документа
</BODY>
</HTML>
Сохраните этот документ под именем first.htm. Убедитесь, что в поле Тип файла выбрано Все файлы(*.*) (рис.1), так как необходимо сохранить наш файл first только с расширением .htm (иначе редактор Блокнот автоматически добавить в конец имени расширение .ТХТ). Сверните окно редактора Блокнот, но не закрывайте.
Рис. 1
Запустите программу Internet Explorer (Пуск / Программы /
Internet
Explorer).
Окно
редактора Internet
Explorer
восстановите во весь экран.Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл first.htm.
Посмотрите, как отображается этот файл – корректный простейший документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Т.е. получилось, что редактор Internet Explorer игнорирует разного рода отступы, концы строк и множественные пробелы. В принципе, текст можно рассматривать как одну длинную строку. Для того чтобы разбить текст на отдельные абзацы необходимо вставить определенные теги, они будут изучены в последующих практических работах. Проверьте, что происходит при уменьшении ширины окна.
Вернитесь в окно редактора Блокнот, но при этом не закрывайте окна редактора Internet Explorer. Добавьте после фразы «Содержание документа» Ваши фамилию, имя и отчество. Сохраните файл под прежним именем first.htm. Вернитесь в окно редактора Internet Explorer и нажмите кнопку
Обновить
на панели инструментов. Таким переходом
между двумя редакторами мы будем изучать
правила языка
HTML.ВСЕГДА СОХРАНЯЙТЕ ДОКУМЕНТ В БЛОКНОТЕ ПРЕЖДЕ ЧЕМ ПРОСМОТРЕТЬ ЕГО В INTERNET EXPLORER!!!
Практически все теги языка HTML имеют атрибуты, которые записываются после имени тега, например атрибут BGCOLOR тега <BODY> устанавливает цвет фона Web-страницы.
Измените написание тега с <BODY> на <BODY BGCOLOR=”AQUA”>; добавьте свое содержание между тегами:
<BODY>
У лукоморья дуб зеленый;
Златая цепь на дубе том:
И днем и ночью кот ученый ….
</BODY>
Сохраните в редакторе Блокнот и переходите в Internet Explorer, обновите содержимое окна. Как отображается наше стихотворение? Форматирование текста описано во второй практической работе.
Контрольные вопросы:
В каком приложении создается HTML-документ?
Какое расширение имеет HTML-документ?
Какая программа запускается при открытии HTML-документа через Мой компьютер?
Как открыть произвольный HTML-документ в Internet Explorer?
Что такое ТЕГ? Приведите для примера 3 тега?
Приведите пример атрибута. Что он означает и где он записывается?
Что редактор игнорирует?
Как обновить представление HTML-документа в окне Internet Explorer?
Практическая работа № 2. Форматирование абзацев.
Цель работы: изучение основных приемов форматирования абзацев (указание разметки), определение взаимовлияния некоторых тегов HTML на отображение соответствующих частей документа.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Введите заголовок первого уровня, заключив его между тегами <Н1> и </Н1>. Например: Сказка о рыбаке и рыбке.
Введите заголовок второго уровня, заключив его между тегами <Н2> и </Н2>. Например: А.С.Пушкин.
Введите тег горизонтальной линейки <HR>, внутри которого могут содержаться следующие атрибуты: SIZE = - толщина в пикселах и WIDTH= – ширина в пикселах. Например: <HR SIZE=5 WIDTH=300>.
Введите отдельный абзац текста, начав его с тега <Р>. Например: <Р> Жил старик со своею старухой…. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
Введите еще один абзац текста, начав его с тега <Р>. Например: <Р> У самого синего моря…. Таким образом, наберите еще несколько строк.
Сохраните этот документ под именем paragraph.htm.
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл paragraph.htm.
Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране. Если вы допустили какие-либо ошибки, чтобы их исправить вернитесь в редактор Блокнот, в котором открыт Ваш файл. Если редактор Блокнот уже закрыт, есть простой способ открыть его снова вместе с Вашим файлом, для этого щелкните в редакторе Internet Explorer правой кнопкой мышки и выберете команду Просмотр в виде HTML.
Таким образом были рассмотрены заголовки 1-го и 2-го уровня, еще можно оформлять текст заголовки тегами до 6 уровня. Текст тега <H6> оформляется самым мелким шрифтом, чтобы убедиться в этом наберите один и тот же заголовок шестью разными тегами.
Контрольные вопросы:
Какие теги отвечают за создание заголовков в документе?
Что определяет тег <HR>?
Какие атрибуты и параметры атрибутов имеет тег <HR>?
Какой тег определяет начало нового абзаца?
Как можно просмотреть теговую структуру HTML-документа из Internet Explorer?
Практическая работа № 3. Создание гиперссылок.
Цель работы: изучение приема создания гиперссылок, отображения их в документе, и освоение приемов пользования ими.
Термин Гипертекст подразумевает использование в нем ссылок на различные части этого текста или на другие документы. При щелчке левой кнопкой мыши на ссылку происходит переход к какому-то документу либо к какой-то части текста. Структура текстовой ссылки имеет следующий вид:
<A HREF=”адрес файла”> текст ссылки </A>
адрес файла – это путь к тому документу или фрагменту текста, куда направляется ссылка. Ссылкой может быть и текст, и изображение, и кнопка.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите фразу: Текст до ссылки. Введите тег: <А HREF="first.htm">. Введите фразу: Ссылка на открытие файла. Введите закрывающий тег </А>.
Введите фразу: Текст после ссылки.
Сохраните документ под именем link.htm.
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл link.htm.
Обратите внимание, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).
Щёлкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
Щелкните на кнопке
Назад
на панели инструментов, чтобы вернуться
к предыдущей странице. Обратите внимание,
что ссылка теперь считается «просмотренной»
и отображается другим цветом.Для того чтобы организовать ссылки внутри одного документа необходимо предварительно внутри текста расставить метки для перехода.
Наберите полстраницы произвольного текста. А лучше откройте произвольный текстовый файл (можно воспользоваться файлом License.txt) и скопируйте его часть в буфер обмена Ctrl + С , а затем вставьте перед закрывающим тегом </BODY>, используя клавиши Ctrl + V . Прямо в тексте расставьте метки следующим образом: перед выбранным словом (это то слово, на которое Вы хотите установить ссылку с начала документа) поставьте <A NAME=”ИМЯ МЕТКИ”>, а после него закрывающий тег </A>. В результате получится
<A NAME=”ИМЯ МЕТКИ”>слово или фраза из набранного текста </A>
На внешний вид текста это не повлияет, зато теперь можно будет сделать ссылку этому слову или фразе. В этом случае команда перехода будет выглядеть так:
<A HREF=”#ИМЯ МЕТКИ”>описание ссылки </A>.
Предположим, что имеется большой html-документ и необходимо установить ссылки на отдельные его части, при этом сами ссылки располагаем в начале документа. В данном примере ссылками являются названия глав документа - Глава1, Глава2 и Глава3:
<BODY>
<P ALIGN=CENTER>
<B><A HREF="#1"> Глава 1 </A> | <A Href="#2"> Глава 2 </A> | <A HREF="#3"> Глава 3 </A> <B>
<H1> <A NAME="1"> Глава 1 </A> </H1>
Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы.
<H1> <A NAME="2"> Глава 2 </A> </H1>
Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы.
<H1> <A NAME="3"> Глава 3 </A> </H1>
Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы.
</BODY>
Сохраните пример под именем Link_in.htm. Просмотрите его в Internet Explorer. Размер окна уменьшите до ¼ размера экрана.
Проверьте правильность работы ссылки внутри одного документа.
Контрольные вопросы:
Что означает термин Гипертекст?
Какой вид имеет тег ссылки на открытие другого файла?
Что может выступать в роли ссылки?
Как вернуться на предыдущую страницу просмотра в Internet Explorer?
Для чего служать метки в тексте?
Как создать метку в тексте HTML-документа?
Как создать ссылку на метку в тексте HTML-документа?