ЛабыWeb / ЛабРабота1
.docТема «Основные разделы документа HTML»
Цель работы: Научиться создавать файлы web-документов. Изучить теги структуры web-страницы.
Теория. Html – hypertext markup language( язык гипертекстовой разметки) обеспечивает одно из основных свойств Интернет – возможность перехода с одной страницы на другую, независимо от того, на каком Web-узле эти страницы расположены. Web-страница – это отформатированный определенным образом текстовой файл.
Html- страница – это набор инструкций(тегов или дескрипторов), указывающих обозревателю/браузеру, как следует отображать прилагаемый текст и изображения. Обозреватель знает, с каким типом страницы он имеет дело, поскольку первая строка кода начинается тегом <html>, а последняя заканчивается тегом </html>. Большинство html-тегов парные или контейнеры, а непарные представлены одним элементом.
Тег или дескриптор может содержать дополнительные элементы, называемые атрибутами. Атрибуты изменяют исходный тег. Они используются либо с каким-то присвоенным значением, либо без такового. Атрибуты чаще всего имеют вид: атрибут = “значение” или атрибут = ‘значение’.
Чтобы сделать код html-страницы более удобочитаемым, можно по своему усмотрению использовать символы возврата каретки, пробела, табуляции. Для браузера, обрабатывающего информацию, значение имеют только теги и заключенный в них текст.
Для работы с HTML – кодом подойдет любой текстовой редактор, например Блокнот или WordPad. Исходный неформатированный текст вводят в документ, а затем добавляют необходимые дескрипторы HTML. Затем сохраняем файл с расширением .HTML или .HTM. После этого документ станет доступным для просмотра в окне обозревателя.
Документы состоят из двух разделов: заголовка, содержащего установки глобальных параметров –страницы, и основного раздела, содержащего текст элементы страницы, отображаемые в окне обозревателя. Данные разделы задаются с помощью пары специальных открывающих и закрывающих дескрипторов, определяющих начало и конец раздела.
Дескриптор <HTML>, с которого начинается любой файл web-страницы, и оповещает о HTML-разметке текста
Дескриптор < / HTML> - заканчивает действие HTML-разметки текста документа
Дескриптор <HEAD> - раздел заголовка Web-страницы, в котором указаны параметры для всей страницы, в общем.
Дескрипторы данной группы входят в раздел заголовка Web-страницы:
I) Дескриптор <МЕТА> Устанавливает глобальные параметры Web-страницы
Атрибуты дескриптора Meta: 1)CONTENT описание Web-страницы,
2)HTTP-BQUIV заголовок HTTP
3)NAME -метаописатель, 4)URL-путь к файлу Web-страницы
II) Дескриптор <TITLE>Создает заголовок web-страницы
Дескриптор <B0DY> Основной раздел Web-страницы, в который записывают все остальные дескрипторы
Атрибуты дескриптора Body: 1) ALINK цвет активной гиперссылки,
2)LINK цвет гиперссылки,
3)VLINK цвет использованной гиперссылки,
4) BGCOLOR Цвет фона,
5)BGPROPERTIES Фиксированный фоновый рисунок,
6)BOTTOMMARGIN Нижнее поле web-страницы,
7)LEFTMARGIN Левое поле web-страницы,
8)RIGHTMARGIN Правое поле web-страницы,
9)TEXT Цвет текста,
10)TOPMARGIN Верхнее поле web-страницы
11)BACKGROUND Фоновый рисунок,
Внимание! Каждый дескриптор из перечисленных является парным, т.е. если дескриптор где-то указан, его действие заканчивается точно таким же дескриптором, но с наклонной чертой перед ним.
ПРИМЕР.
<HTML><Head> <META http-equiv=Content-Type content="text/html; charset=windows-1251">
<TITLE>Дружба</TITLE>
</HEAD> <BODY bgColor=’green’> Hello!!!Привет!!!
</BODY> </HTML>
Внимание! Значения атрибутов задаются в виде строковых строк, взятых в кавычки. Можно использовать как двойные прямые ("), так и одинарные прямые(‘) кавычки. Важно, чтобы в начале и в конце строки кавычки были одного типа.
Задание
-
Открыть редактор Блокнот: Пуск - Все программы - Стандартные.
-
Из меню редактора выберите пункт меню Файл команды Сохранить как. В окне диалога «Сохранить как…» необходимо сменить Тип файла на Все файлы и только затем набрать Имя файла: образец.html.
Внимание!!! Не ставьте пробела между точкой и расширением html.
По умолчанию файл сохраниться в папке «Мои документы».
Переключитесь в документ ЛабРабота1 и скопируйте текст, начиная с тега <HTML> и заканчивая тегом </HTML>. Вернитесь в окно блокнота и вставьте текст примера. Сохраните изменения в файле и закройте блокнот.
-
В папке Мои документы через контекстное меню открыть файл образец.html с помощью Internet Explorer, т.е. запустить его. Посмотрите, как выглядит наш текст в формате html.
-
Необходимо, например, измените цвет фона страницы на «синий», т.е.’green’ заменить на ‘blue’. Для этого в папке Мои документы через контекстное меню открыть файл образец.html с помощью программы Блокнот. Внести изменения. Сохранить изменения в блокноте командой Файл – Сохранить. Переключиться в окно Internet Explorer.
-
В окне Internet Explorer выбрать пункт меню Вид команду Обновить или нажать клавишу F5 или щелкнуть на кнопке Обновить в панели инструментов окна приложения.
Внимание!!! Запомните приемы создания, просмотра и редактирования web-документа.
Самостоятельная работа
Для облегчения дальнейшей работы по созданию web-документов, создайте файл с именем shablon.html и наберите в нем теги:
<HTML>
<HEAD >
<TITLE>
</TITLE>
</HEAD >
<BODY>
</BODY>
</HTML>
Сохраните файл.
Каждый раз когда нужно будет создавать web-страницу, откройте shablon.html и выполните команду «Сохранить как», изменив имя shablon на подходящее новое имя файла по заданию. Останется только вписать название заголовка новой страницы и теги в основной раздел.
Контрольные вопросы и задания
-
Перечислите части веб-страницы.
-
Определите назначение языка Html.
-
Охарактеризуйте каждый атрибут тега МЕТА.
-
Задайте для страницы ОБРАЗЕЦ цвет фона черный, а цвет текста –белый.
-
Измените заголовок web-страницы файла ОБРАЗЕЦ.html на свою фамилию.