- •Практическое занятие №1 посвящено изучению структуры Web-документа
- •Практическое занятие №2 посвящено изучению структуры внутри документа
- •Практическое занятие №3 посвящено изучению и использованию списков
- •Практическое занятие №4 посвящено изучению и использованию тэгов ссылки и изображения
- •Практическое занятие №5 посвящено изучению и использованию таблиц
- •Заголовок таблицы расположен над таблицей
- •Практическое занятие №6 посвящено изучению и использованию кадров (фреймов)
- •Практическое занятие №7 посвящено изучению и использованию форм
- •Практическое занятие №8 посвящено изучению и использованию объектов
- •Практическое занятие №9 посвящено изучению и использованию бегущей строки
- •Практическое занятие №10 посвящено изучению и использованию скриптов
- •Практическое занятие №11 посвящено изучению и использованию стилей
- •Содержание
Практическое задание на создание Web-страниц
Практическое занятие №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=”Подсказка” |
Определяет подсказку, которая выводится вместо подсказки по умолчанию. |
Форматирование документа может быть задано тремя способами:
Указывать атрибуты форматирования в тэге. Не рекомендуется, так как при изменении форматирования корректируется весь документ.
Описывать форматирование, определяя таблицу стилей для элементов HTML и классов в заголовке документа в теге STYLE.
Описывать форматирование, определяя таблицу стилей для элементов 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>
<BASE HREF=”http://www.cpb.cpbgpu.edu/html”>
<META Name=”author” Content=”Иванов Иван Иванович”>
<META Name=“keywords” Content=“тег, заголовок, Web-страница”>
<META Name=”Last Modified” Content=”17 июня 2003”>
<LINK Href=”my.css” Type=”text/css” Rel=”stylesheet”>
<STYLE Type=”text/css” >
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-документа по выбранной вами теме. Таблицу стилей заполните только для элемента, описывающего тело документа.