ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009
СТРУКТУРА HTML-ДОКУМЕНТА И ЭЛЕМЕНТЫ
РАЗМЕТКИ ЗАГОЛОВКА ДОКУМЕНТА
Лабораторная работа 1.1
Цель: Подготовка простейшего гипертекстового документа средствами программы Блокнот. Знакомство с основами создания структуры HTML-документа, с тегами форматирования шрифтов и абзацев.
Произведите запуск редактора Блокнот. Введите следующий текст: Приветствую Вас на web-страничке о настольном теннисе.
Сохраните файл в папке = Вашей фамилии.
При сохранении, в окне диалога "сохранить " в строке "Тип файла:" выберите вариант "Все файлы (*.*)" , а в строке "Имя файла" задайте имя с расширением html, например Nast.html
Закройте документ, найдите его пиктограмму в окне Вашей папки, используя Мой компьютер или Проводник.
Проанализируйте, с помощью какого приложения отображается файл и как выглядит введенная фраза.
Структура html-документа.
Для того, чтобы текстовой файл превратился в HTML-файл недостаточно задать его расширение - html , необходимо определить его структуру.
2.1. Введем теги, определяющие структуру html-документа.
С помощью меню браузера "Вид" - "Просмотр HTML-кода" откройте документ для его редактирования. Введите приведенные ниже теги, в разделе Заголовка (TITLE) указать свою фамилию.
<HTML>
<HEAD>
<TITLE> Настольный теннис </TITLE>
</HEAD>
<BODY>
Приветствую Вас на web-страничке о настольном теннисе.
</BODY>
</HTML>
где <HTML> и </HTML> - теги HTML- документа
<HEAD> и </HEAD> - теги секции заголовка
<TITLE> и </TITLE> - благодаря наличию данного тега в заголовке окна браузера будет выведено не имя файла, а заголовок, который отражает содержание HTML- документа
<BODY> и </BODY> - теги секции тела документа
Сохраните документ под тем же именем ( в меню "Файл" команда "Сохранить"). Перейдите в окно браузера и выберите в меню "Вид" команду "Обновить" .
Проанализируйте произошедшие изменения в отображении документа.
Рассмотрим более подробно область заголовка html-документа.
Элементы, относящиеся к заголовку документа:
<HEAD> и </HEAD> - определяют начало и конец заголовка
<TITLE> и </TITLE> - определяет имя всего документа, которое отображается заголовке окна браузера
<BASE> и </BASE> - служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме.
<STYLE> и </STYLE> - предназначен для размещения описателей стилей
<META> и </META> - содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа
Чаще всего применяются элементы TITLE, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP-обменом данными. BASE в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей стилей.
Теги заголовка - <TITLE> …</TITLE>
Первоначально существование заголовка определялось только необходимостью присвоения имени окну браузера. В настоящее время тег заголовка выполняет ряд и других служебных функций. Например, важным назначении заголовка HTML-документа является - поисковый образе документа для индексирования роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.
При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом, так как является заголовком окна браузера.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Рассмотрим более подробно теги тела html-документа.
Теги тела документа предназначены для управления отображением информации в программе просмотра Web-страницы пользователем. Создание тела документа начинается с написания тега <BODY>. Тег <BODY> имеет атрибуты:
атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Откройте Nast.html (в меню браузера "Вид" команда "Просмотр HTML-кода") и для него установите фон, который находится в файле image.gif с помощью записи:
<ВОDY ВАСКGROUND="image.gif"> - данная запись используется в том случае, если сам файл image.gif находится в папке, где храниться Ваш файл Nast.html.
В случае если файл находиться в другой папке, например с именем «Фон» на Вашем диске Z, то необходимо указать полный путь нахождения файла, а именно:
<ВОDY ВАСКGROUND="Z:\ФОН\image.gif">
Сохраните документ в Nast.html (не закрывайте его) и выберите команду "Обновить" для его просмотра в браузере. Проанализируйте произошедшие изменения в отображении документа.
атрибут ВGCOLOR=#ХХХХХХ – описывает цвет фона;
атрибут ТЕХТ=#ХХХХХХ - описывает цвет текста;
атрибут VLINK =#ХХХХХХ - описывает цвет пройденных гипертекстовых ссылок;
атрибут LINK =#ХХХХХХ - описывает цвет гипертекстовой ссылки.
Строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды представлены в приложении А.
Создайте копию файла Nast.html и присвойте ему имя Nast_zvet_fon.html Введите в тег <BODY> атрибуты BАСКGROUND и ТЕХТ , а также присвойте им произвольные значения, например:
<ВОDY ВАСКGROUND=00FFFF ;ТЕХТ=#000080>
Сохраните документ (не закрывайте его) и выберите команду "Обновить" для его просмотра в браузере. Проанализируйте произошедшие изменения в отображении документа.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.
Задайте левое поле = 20 пикселов в Nast_zvet_fon.html
Сохраните документ, просмотрите результат.
! В дальнейшем всегда после проведенных изменений документ нужно сохранять, а просмотр в броузере начинать с обновления загрузки документа с помощью кнопки "Обновить" на панели инструментов или нажатием клавиши F5.