Главная | Обратная связь | Поможем написать вашу работу!

Практическое занятие №1 посвящено изучению структуры Web-документа

Гипертекстовый документ хранится в файлах с расширением HTML или HTM. Существуют различные редакторы языка HTML, но рекомендуется использовать стандартное средство WINDOWS – блокнот.

Большинство тегов HTML являются контейнерами и имеют открывающую и закрывающую форму (по аналогии с открывающей и закрывающей скобкой), то есть их действие распространяется на то, что заключено между открывающей и закрывающей формой тега. Открывающая форма тега отличается от закрывающей формы тега тем, что в закрывающей форме тега перед названием тега ставится наклонная вправо черта (флеш). Название тега и все его атрибуты, если они указываются, заключается в угловые скобки, например:

<HTML>

содержание документа

</HTML>

Структура файла HTML, которой следует придерживаться при написании WEB-страниц:

- Заголовок оформляется тегом HEAD;

- основная часть документа, может быть телом документа или кадром и оформляется соответственно тегом BODY или FRAMESET.

Заголовок и тело (кадр) заключаются в контейнер тега HTML, который определяет границы документа HTML:

<HTML>

<HEAD>

содержимое заголовка

</HEAD>

<BODY>

содержимое документа (тело)

</BODY>

</HTML>

Тег HTML не является обязательным, так как браузер подставит этот тег, если он отсутствует в файле, но не надейтесь на браузер (их много!), так как неизвестно каким из них будет пользоваться потенциальный читатель документа, и как его браузер будет интерпретировать документ при отсутствии в нём тега HTML.

Информация, находящаяся в заголовке, является служебной и необходима браузеру для правильного отображения страницы.

Браузер сможет самостоятельно распознавать кодировку текста, если установить в MS Internet Explorer меню Вид команду Вид кодировки подкоманду Автоматически. Стандартной кодировкой объявлена двухбайтная кодировка Unicode, хранящая 65536 символов и не требующая дополнительных национальных таблиц. Документ может быть составлен с использованием других кодировок: ASCII, CP866, КОИ8-Р, Win-1251, MAC.

Атрибуты, как правило, могут принимать значение, которое записывается после атрибута и присваивается ему с помощью знака равенства. Значение атрибута может определить:

- размещение элемента документа относительно границ страницы;

- цвет фона и текста;

- рамку;

- отступ от смежных элементов и т. д.

Теги, размещаемые в заголовке, представлены в таблице 1.

Таблица 1. Тэги, размещаемые в заголовке HTML-документа.

Тег	Атрибут и значение атрибута	Пояснение
<TITLE> </TITLE >		Внешний заголовок документа (титул), будет отображаться в заголовке окна браузера.
<META>		Представление дополнительной информации о документе
	Name=”author” \| “keywords”	Определяет тип данных, например: автор или ключевые слова (для поисковых программ)
	Content=”имя автора” \| “слово1, слово2….”	Содержание, например: имя автора или перечень ключевых слов.
<BASE>		Используется для разрешения относительных ссылок. Особенно полезна например, при переносе страницы в другой каталог.
	HREF=”http://www.cpb.cpbgpu.edu/html”	Задаёт полный URL-адрес документа, аналогично заданию пути к файлу в команде DOS path.
<STYLE> </STYLE>		Определяет стиль страницы.
	Type=”text/css”	Указывается, чтобы браузеры, не поддерживающие таблицы стилей, могли игнорировать этот тэг.
<LINK> </LINK>		Используется для создания связей между документами
	Rel=”stylesheet”	Связываемый файл является таблицей стилей.
	Type=”text/css”	Формат файла текстовый, а расширение *.css.
	Href=”my.css”	Адрес файла с указанием пути.
<ISINDEX>		Используется для сообщения браузеру о том, что сервером поддерживается индексный поиск. В ответ на это браузер создаёт поле для ввода текста, по которому будет произведён поиск. Если вы не уверены, что на вашем сервере есть программы поиска, лучше этот тэг не использовать.
	Action=”switch.exe”	Указывает программу поиска, которой передаётся введённая строка текста.
	Prompt=”Подсказка”	Определяет подсказку, которая выводится вместо подсказки по умолчанию.

Форматирование документа может быть задано тремя способами:

1. Указывать атрибуты форматирования в тэге. Не рекомендуется, так как при изменении форматирования корректируется весь документ.

2. Описывать форматирование, определяя таблицу стилей для элементов HTML и классов в заголовке документа в теге STYLE.

3. Описывать форматирование, определяя таблицу стилей для элементов HTML и классов в файле с расширение ccs. В заголовок документа включается тэг LINK, в котором указывается имя файла, содержащего таблицу стилей.

Существуют приоритеты в применении форматирования, если используются все три способа. Наивысшим приоритетом обладает форматирование, заданное первым способом, затем следует по приоритету второй способ и третий.

Между открывающим и закрывающим тегом < STYLE > < /STYLE > размещаются определения стилей для элементов документа. В определении (правиле) указывается имя элемента HTML (селектор) и в фигурных скобках перечисляются декларации, состоящие из названия свойства таблицы стилей и значения ему присваиваемого. Каждая декларация заканчивается точкой с запятой. Название свойства отделяется от значения двоеточием. Название свойства состоит из одного, двух или трёх слов, разделённых дефисом. Например, для тела документа заданы: тип шрифта - Times New Roman, цвет фона – White (белый), цвет текста – Black (чёрный), размер шрифта – 14 pt, толщина шрифта – bold (полужирный), отступ слева и справа от края страницы - 40 px.

В таблице стилей определён класс с именем base, который может быть применён в любом элементе HTML в теле документа, используя для этого атрибут Class.

В таблице стилей определён стиль для заголовка H3.

В дополнение к уже заданному определению стиля для заголовка H3 определён класс с именем second, в котором изменён цвет текста для заголовка. Он может быть применён в элементе H3 в теле документа, используя для этого атрибут Class (Class= second).

Познакомившись с тегами, которые используются в заголовке документа, напишем пример использования этих тэгов. В заголовке документа задаётся: название документа в тэге TITLE, URL-адрес в тэге BASE, имя автора в тэге META, ключевые слова в тэге META, дата последней модификации в тэге META, файл с таблицей стилей в тэге LINK, стиль в тэге STYLE (для тела документа, заголовка H3, для классов base и second).

<HTML>

<HEAD>

<TITLE> Пример формирования заголовка Web-страницы. </TITLE>

< METAName=“keywords” Content=“тег, заголовок, Web-страница”>

BODY{ font-family: Times New Roman;

background-color: White;

color: Black;

font-size: 14pt;

font-weight: normal;

text-align=justify;

margin-left: 40px;

margin-right: 40px;}

.base { font-family: Arial;

color: Black;

font-size: 35px;

line-height: 45px

font-weight: bold;

margin-top: 10px;

weight: medium;}

H3 { font-family: Georgia;

color: Blue;

font-size: 14pt;}

H3.second { color: Black;}

< / STYLE>

</HEAD>

<BODY>

Практическое занятие №1 посвящено изучению структуры гипертекстового документа.

</BODY>

</HTML>

Упражнение 1.1. Напишите заголовок Web-документа по выбранной вами теме. Таблицу стилей заполните только для элемента, описывающего тело документа.

12 3 4 5 Следующая ⇒

Воспользуйтесь поиском по сайту: