Киров Москва
Поиск информации.
Поисковый сервис выдает список URL адресов, которые указывают на документы, соответствующие запросу пользователя. Общение с поисковым сервисом осуществляется с помощью Web интерфейса.
Поисковый сервис делится на 3 части:
1) Web интерфейс
.
2) Поисковый робот
.
3) СУБД
. В поисковой базе СУБД хранятся ссылки (URL адреса, хранящиеся в Internet). Помимо списка URL адресов в поисковой СУБД также хранится ключевое содержимое соответствующих документов.
Поисковый робот
– это программа, осуществляющая автоматическое сканирование Web ресурсов (индексирование) на предмет появления новых, модификаций существующих и удаление старых Web ресурсов.
В результате сканирования обновляется поисковая база.
Существует 2 способа работы поискового робота
:
1) Сканирование роботом Web ресурсов; заполнение базы данных.
2) Обращение пользователя к поисковому сервису через Web интерфейс (используется специальная форма для указания запроса).
Форму (пользователь передает сообщение (запрос))
Список всех
Список URL слов русского
адресов языка
Например
:
арбуз |
1 |
арбалет |
2,3,5,10 |
арка |
1 |
1 |
www.mail.ru |
2 |
www.rui.ru |
3 |
Каждая отметка сопровождается весом, например 2:50; 3:1 (вес показывает сколько раз слово встречается в документе).
Например, в поисковую систему пользователь вводит “арбалет”.
1.Ранжирование (вес), определяющее ценность документа рассчитывается на основании количества нахождений слова в документе.
2.Нахождение слова в составе заголовка документа.
3.Нахождение слова в составе ссылки документа.
Эффективность поисковой системы сводится к объему поисковых баз, а также определяется эффективностью алгоритма ранжирования документов, наличием языка запросов.
Язык запросов
– это набор команд, позволяющий пользователю уточнить поисковый запрос и получить более точные результаты на свой запрос.
Например
:
Если нужно найти в предложении Российская федерация, пишем, федерация пробел Российская. Будет найден пятый документ.
Российская |
1,5,10,17 |
… … … … |
Федерация |
2,5,11,12 |
Средства разработки
Web сайтов
Средства разработки состоят из среды разработки и языка разработки.
1.
Язык разметки
HTML.
(Это основной инструмент разработки Web сайтов).
Язык разметки
HTML
– это система команд, основная задача которой – представление текстовых и мультимедийных элементов Web страницы в наиболее благоприятной для восприятия форме.
(Первую часть определения можно отнести к любому языку разметки). В дополнение к командам разметки в язык HTML были добавлены команды для работы с гиперссылками.
Язык
HTML позволяет
:
1) Разместить элементы
Web страницы в удобной для восприятия форме
:
· Установить тип текстовых фрагментов, их стиль.
· Использовать в составе Web станицы элементы сложного форматирования (таблицы, списки и так далее).
2) Определять предназначение Web страницы в целом, отдельные ее свойства (кодировка, сроки использования); параметры взаимоотношения данной Web страницы с другими Web документами (наследование).
3) Поддерживать интерактивное взаимодействие с Web сайтом (это реализуется с помощью форм).
4) Переходить к другим Web документам посредством гиперссылок.
Документ
HTML состоит из нескольких частей
:
1)
Основная составляющая – это дескриптор (или ТЭГ)
HTML
.
Дескриптор (ТЭГ)
– это команды языка HTML, представляющие собой слово или аббревиатуру, заключенные в треугольные скобки(<HTML>).
Дескрипторы бывают двух видов: одиночные
и парные
.
Одиночный дескриптор
– определяет реакцию браузера в том месте, в котором он находится на Web странице.
Пример
.
Дескриптор <BR> переводит в то место, где встретится на Web странице.
Парный дескриптор
– определяет действие в отношении фрагмента Web страницы, в которой находится между открывающей и закрывающей частью парного дескриптора.
Пример
.
<I> … … … </I>
2)
Атрибут дескриптора.
В состав начального дескриптора могут применяться дополнительные параметры, например
:
Дескриптор абзаца (параграфа).
<P align=”center”>
----------------------
----------------------
<P>
Текст будет отображаться выровненным по центру.
Здесь Align является параметром, а center – значением данного параметра. (Такой параметр называется в языке HTMLатрибут
).
Атрибут дескриптора
– определяет дополнительное свойство дескриптора, уточняет его действие. В случае парного дескриптора используется внутри открывающего дескриптора.
У дескриптора может быть один атрибут, несколько атрибутов или может вообще их не быть.
Пример с несколькими атрибутами
.
<Font color=”red” size=3>
---------------------------------
</Font>
Два атрибута: color - атрибут цвета и size - атрибут размера.
2.Сценарий (
SKRIPT).
Сценарий (
SKRIPT)
- это программный код, обеспечивающий работу интерактивных и динамических элементов Web сайта.
Сценарии бывают двух видов
:
1)Серверный
– это программа, выполняющаяся на Web сервере.
2)Клиентский
– это программа, выполняющаяся с помощью интерпретатора браузера (то есть на компьютере пользователя).
Наиболее частая функция сценария – взаимодействие с базами данных и создание их на основе Web страниц.
Клиентский
сценарий в отличие от языка разметки
HTML предоставляет гораздо больше возможностей
:
- Для взаимодействия с операционной системой и браузером;
- По управлению элементами интерфейса операционной системы и браузером.
Серверный
сценарий
чаще всего используется для отображения в виде Web страниц содержимого баз данных, которые хранятся на сервере.
Преимущества серверного
сценария
:
Более широкий спектр возможностей по обработке взаимодействия пользователя и Web сайта.
Преимущества клиентского
сценария
:
Большая скорость обработки и экономия ресурсов (за счет уменьшения передачи данных между сервером и компьютером пользователя).
3.Среда программирования.
Среда программирования
(среда разработки) – это программное обеспечение, позволяющее эффективно создавать элементы Web станиц, разрабатывать сценарии и осуществлять их отладку.
Основные из них
:
1) MS Font Page.
2) Macromedia Dream Weaver.
3) Блокнот.
Основные дескрипторы
HTML
1.Заголовок
HTML документа
– определяет назначение HTML документа и его основные свойства.
Формируется при помощи парного дескриптора <HEAD>:
<HEAD>
-----------
</HEAD>
Содержимое заголовка обычно не отражается на экране пользователя при просмотре Web документа.
2.Тело
Web документа
– содержит содержательную часть Web документа (информация, графика и так далее).
Формируется при помощи парного дескриптора <BODY>:
<BODY>
------------
</BODY>
3.Дескриптор, определяющий начало и конец документа
.
Формируется при помощи парного дескриптора <HTML>. Начальный находится в самом начале HTML документа, конечный – в самом конце Web документа.
<HTML>
Заголовок
Тело
</HTML>
Заголовок
HTML документа и его основные свойства
Формируется при помощи МЕТА дескрипторов (<META>).
Дескриптор <
META>
используется для описания свойств HTML документа. Он является одиночным, однако содержит следующие атрибуты
:
Первые два используются для обозначения свойств (то есть дают свойству имя), последний используется для придания свойству значения.
Например
:
<META http-equiv=”expires” content=”Friday, 21-Feb-03 00:00:00GMT”>
Используется для обозначения годности документа.
<META http-equiv=”Content-Type” content=”txt/html; charset=Windows1251”>
Указывает на тип документа, его отношение к текстовому документу и его кодировка.
<META name=”DECRIPTION” content=”описание”>
Дает описание содержимого Web страницы.
<META name=”KEYWORDS” content=”…, …, …”
Ключевые слова указываются через запятую (можно пробел). Определяет ключевые слова данного Web документа.
Свойства HTML документа, обозначенные http-
equiv
передаются на компьютер пользователя в составе HTTP заголовка. Браузер обязательно интерпретирует http заголовок. Инструкции, содержащиеся в http заголовке особенно важны для правильного отображения HTML документа.
Свойства HTML документа, определенные с помощью атрибута name
носят рекомендательный характер и в большинстве своем игнорируются браузером.
Подобные МЕТА свойства (или свойства HTML документа) обрабатываются поисковыми системами.
Пример.
<BODY BGCOLOR=”red”/”gray”/”# FFCC22”
BACKGROUND=1.jpg>
Структура дескриптора
BODY
1.
Атрибут
bgcolor
– для отображения фона HTML документа.
Пример
.
bgcolor=”white” (black, blue и другие цвета)
Данному атрибуту может присваиваться свойство RGB (RGB – red, green, blue).
Пример.
bgcolor=”#FFCC22”, где
FF – уровень красной составляющей, CC - уровень зеленой составляющей, 22 – уровень синей составляющей.
В шестнадцатеричной системе исчисления FFFFFF – белый цвет, 000000 – черный цвет.
Данная кодировка (RGB) может использоваться во всем HTML документе.
2.
Атрибут
background
– определяет фон с помощью графического формата.
Пример
.
background=”2.jpg”
В значении атрибута указывается название документа и путь к нему. (Если указано только название, то данный файл должен находиться в той же папке, что и HTML документ).
Если путь указан так:
background=”/fold1/2.jpg”, то папка будет искаться начиная от корневого каталога.
3.
Атрибут
TEXT.
Значения данного атрибута могут быть такими же,
как у атрибута bgcolor.
Эти же правила верны и для следующих атрибутов
:
4.
Атрибут
LINK=
определяет цвет ссылки.
5.
Атрибут
VLINK=
определяет цвет уже посещенной ранее ссылки.
6.
Атрибут
ALINK=
определяет цвет активной ссылки (то есть ссылки, указывающей на текущий документ).
7.
Атрибут
TOPMARGIN
=(верхнее поле).
8.
Атрибут
LEFTMARGIN
=(левое поле).
Пример
.
TOPMARGIN=”20” (в пунктах).
LEFTMARGIN=”10” (в пунктах).
Все содержимое HTML документа будет смещено относительно левого и верхнего края HTML документа.
Пример парного дескриптора:
<BODY bgcolor=”…” LINK=”…”>
-----------------------
</BODY>
Форматирование текста
В HTML документе можно помещать комментарии (они игнорируются браузером и используются для служебных целей).
Комментарии.
1)
Одиночный дескриптор
.
<!--
Все, что находится между первой и последней треугольной скобкой считается комментарием.
-->
2)
Парный дескриптор
<COMMENT
> .
<COMMENT>
------------------
</COMMENT>
Браузеры игнорируют “обычные” средства форматирования текста, такие как последовательность пробелов, знаки табуляции, переводы строки и прочие. Чтобы отформатировать документ используются средства физического
и логического
форматирования.
К физическим
относятся дескрипторы, которые определяют напрямую внешний вид текста.
К логическим
относятся дескрипторы, которые определяют логический статус (значение) текста.
Физические средства форматирования.
1.
Одиночный дескриптор <
br>
-
перевод строки (разрыв строки)
.
2.
Парный дескриптор <
nobr>…</
nobr
> -
запрещает разрыв текста, находящегося в контейнере. Данный дескриптор еще называют дескриптор жесткого переноса.
По причине различных условий, в которых отражается HTML документ (разные браузеры, видеорежимы, разрешение экрана) HTML документ может отображаться с нарушением взаимного расположения элементов.
3.
Одиночный дескриптор <
wbr
>
- определяет место мягкого переноса. Данный дескриптор используется совместно с дескриптором <nobr>
и размещается внутри его контейнера.
Браузер осуществляет перенос в соответствии с этим дескриптором только в том случае, если строчка не помещается в ширину окна и обычный перенос запрещен с помощью дескриптора <nobr>
.
4.
Парный дескриптор<
p>…</
p
>
- параграф или абзац. Текст, находящийся внутри дескриптора оформляется в виде параграфа или абзаца.
Атрибут ALIGN=
выравнивание текста.
Возможные значения
:
· =LEFT – по левому краю.
· =CENTER – по центру.
· =RIGHT – по правому краю.
5.
Парные дескрипторы заголовка.
Бывают шести уровней
:
<H1
>…
</H1
>
… … …
<H6
>…
</H6
>
Текст заголовка выравнивается, до и после текста интервал.
Допустимо использование атрибута ALIGN.
Данные дескрипторы имеют большое значение для повышения информационной ценности документа в ”глазах” поисковой системы. (Дескрипторы заголовка – один из основных инструментов для повышения ценности).
6.
Дескриптор <
HR>
– одиночный горизонтальный дескриптор.
Там где находится данный дескриптор, отображается горизонтальная черта.
Атрибуты
:
· ALIGN
· COLOR
–цвет черты (значения как уbackground
).
· WIDTH
– ширина линии (в пунктах).
· SIZE
– толщина линии (в пунктах).
· NOSHADE
– без тени.
7.
Парный дескриптор <
FONT
>
…
</FONT
>.
Предназначен для определения шрифта (начертания) отображаемого текста (курсив и так далее).
Атрибуты
:
· FACE
– название шрифта.
Пример
:
FASE=”Times New Roman”
Текст, который помещен внутри контейнера будет отображен данным шрифтом. В связи с тем, что сложно угадать есть ли у пользователя такой же шрифт, допускается перечисление нескольких шрифтов через запятую в дескрипторе.
· COLOR
· SIZE=3
-по умолчанию
. (Размер символов может быть от 1 до 7).
8.
Одиночный дескриптор <
BASEFONT>
Данный дескриптор устанавливает базовое значение текстовых значений Web страниц, находящихся после <
BASEFONT>.
Атрибуты как у дескриптора <
FONT>
.
9.
Парный дескриптор <
PRE
>
…
</PRE
> - дескриптор пре форматирования.
Используется для форматирования текста стандартными способами (табуляцией, последовательностью пробелов и так далее).
Пример:
<PRE>
_ _ _ _ _ _ _ _ _ _ _ _ _ _
|_ _ _ _ _ _ _|_ _ _ _ _ _ _|
|_ _ _ _ _ _ _|_ _ _ _ _ _ _|
</PRE>
10.
Парный дескриптор <
DIV
>
…
</DIV
>
Используется для выравнивания группы элементов таблицы (группа – несколько текстовых или графических элементов). Все, что внутри таблицы выравнивается.
Пример:
<
DIV>
Align
<
/
DIV>
10.
Парный дескриптор <
Center
>
…
</Center
>
Все содержимое контейнера данного дескриптора выравнивается по центру.
Советы по форматированию текстовых фрагментов
1.
Использовать мягкий контраст между фоном и текстом (например, черный и белый).
2.
Использовать как можно меньшее число шрифтов (2-3). Принято для отображения заголовков использовать шрифты типа Arial (то есть без засечек), а шрифты с засечками для самого текста (например, ТАЙМС).
3.
Реже используйте выделения, подчеркивания и жирные шрифты.
Существуют так же дескрипторы
:
1)
<
b>…</
b>
- выделяет текст в контейнере с помощью жирного шрифта.
2)
<
i>…</
i> -
выделяет текст в контейнере с помощью наклонного текста (курсив).
Пример логического форматирования.
1)
Парный дескриптор <
CITE
>
…
</CITE
>
Используется для цитат. Обычно браузером отображается в виде курсива (наклонного текста).
2)
Парный дескриптор
<BLOCKQUOTE
>…
</
BLOCKQUOTE
>
Используется для выделения больших цитат. (Браузер обычно делает отступ от левого края).
В большинстве случаев браузер не допускает пересечение дескрипторов.
Пример пересечения
:
<
PRE>
<
FONT>
</PRE >
</FONT >
(В лучшем случае просто не запустится).
Но есть и исключения, например <
b>…<
i>…</
b>
…</i>
В том месте, где пересеклись дескрипторы <i> и <
b>, текст будет выделен жирным курсивом.
3)
Парный дескриптор
<U>…</
U
> - подчеркивание.
Специальные символы
Используются для отображения символов, которые являются в HTML управляющими и не могут быть отображены обычными способами.
Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как начало контрольной последовательности.
Для того чтобы все-таки отобразить эту скобку необходимо набрать последовательность
:
1) &
lt
- отобразится левая скобка.
2) &
gt
- отобразится правая скобка.
3) &
copy
- отобразится значок авторского права.
4) &
deg
- отобразится значок температуры.
5) &
nbsp
; отобразится символ пробела (жесткого пробела). Если пробел указан с помощью данного специального символа, то разрыв строки не допускается, так как браузер будет видеть слова и пробелы как одно слово.
Сложное форматирование
В отличие от простого форматирования символов и абзацев в HTML сложное форматирование производится с помощью многоуровневых конструкций, основу которых составляет дескриптор, задающий способ форматирования (список, таблица) и элементы более низкого уровня, используемые непосредственно для отображения текста.
Пример
:
<OL>
<LI>abc</LI>
<LI>def</LI>
</OL>
Данная конструкция формирует нумерованный список, при этом дескриптор <OL> является дескриптором, который определяет способ форматирования. В браузере отобразится:
1.abc или a. abc
2.def b. def
1. Парный дескриптор
<LI
>…</
LI>
(от английского слова List - список) используется для отображения элементов списка. Атрибутов не имеет.
2. Парный дескриптор
<OL
>…</
OL>
- формирует нумерованный список (или упорядоченный).
Изменение способа нумерации производится с помощью атрибута
TYPE.
Например
:
<OLTYPE=[1/a/A/I] , где
1 - арабские цифры.
а – прописные буквы.
А – заглавные буквы.
I – римские цифры.
Атрибут
START
позволяет указать номер, с которого начинается нумерация.
Например
, если START=3, то нумерация начнется с трех или с буквы “c”.
2. Парный дескриптор
<UL
>…</
UL>
Формирует не упорядоченный список (маркерный).
Например
:
<ULTYPE=disc, square, circle>
<LI>abc</LI>
</
UL>
Где disc – жирная точка; square - квадрат; circle – не закрашенная окружность.
При отображении элементов списка браузер делает отступ слева.
Многоуровневые списки.
Например
:
<ULTYPE=disc, square, circle>
<LI>abc</LI>
<UL>
<LI>def</LI>
<LI>ghi</LI>
</
UL>
</
UL>
Отобразиться
:
Браузер будет делать очередной отступ слева.
Таблицы.
1
. Парный дескриптор
<TABLE
>…</
TABLE>
В его контейнере должны быть сформированы элементы таблицы (ячейки) в которых и будет информация.
2
. Парный дескриптор
<TR
>…</
TR>
- формирует строку таблицы.
3
. Парный дескриптор
<TD
>…</
TD>
- формирует ячейку внутри строки.
Пример
:
<TABLE>
<TD>1</TD> |
<TD>2</TD> |
<TD>3</TD> |
<TD>4</TD> |
<TR> <TR>
<TR> <TR>
</TABLE>
Атрибуты дескриптора <
TABLE>
:
Атрибут
WIDTH
– определяет ширину таблицы (в процентах или пикселях).
Пример:
<TABLEWIDTH=100% или WIDTH=200>
- Атрибут
HEIGHT
– высота (принимает такие же значения, как и атрибут WIDTH).
- Атрибут
ALIGN
– выравнивание таблицы по ширине относительно краев окна.
- Атрибут
BORDER
– определяет ширину рамки (если значение данного атрибута 0, то рамки отсутствуют).
- Атрибут
bgcolor
– для формирования фона таблицы с помощью цвета.
- Атрибут
background
- для формирования фона таблицы с помощью картинки.
- Атрибут
cellpadding
– для указания отступов от краев ячейки (в пикселях).
- Атрибут
cellspacing
– расстояние между ячейками.
Если значение атрибута больше нуля,
то таблица выглядит так:
|
|
Обычная таблица
Атрибут
bordercolor
– цвет границ ячеек (рамки).
Атрибуты дескриптора <
TR>
:
1)
Атрибут
ALIGN
– выравнивание текста в ячейках.
2)
Атрибут
VALIGN
– определяет вертикальное выравнивание текста в ячейках.
Возможные значенияатрибута
VALIGN
:
· =
TOP – по верху.
· =
MIDDLE – по центру.
· =
BOTTOM – по нижнему краю ячейки.
3)
Атрибут
bgcolor
– для указания фона строки.
Атрибуты дескриптора <
TD>
:
- Атрибут
ALIGN
.
- Атрибут
VALIGN
.
- Атрибут
bgcolor
.
Вышеперечисленные атрибуты действуют так же, как для дескриптора <TR>.
Дополнительно атрибуты
:
Атрибут
COLSPAN
– объединение ячеек, находящихся в одной строке. Значение атрибута равно количеству близлежащих ячеек находящихся в одной строке, которые будут объединены.
Пример:
<TABLE>
<TD COLSPAN=2>1</TD> |
<TD>3</TD> |
<TD>4</TD> |
<TR> </TR>
<TR> </TR>
</TABLE>
Атрибут
ROWSPAN
– объединение ячеек, находящихся в одном столбце. Значение атрибута указывает количество близлежащих ячеек находящихся в одном столбце, которые будут объединены.
Пример
:
<TABLE>
<TD ROWSPAN=2>1</TD>
|
<TD>2</TD> |
<TD>4</TD> |
<TR> </TR>
<TR> </TR>
</TABLE>
Форматирование текстовых фрагментов
HTML документа
Кроме ширины и высоты таблицы в целом можно регулировать ширину и высоту ячеек (то есть использовать такие же атрибуты в дескрипторе <TD>, в пикселях и в процентах).
Если они не указаны, то браузер выравнивает размер ячейки по ширине текста.
Таблица является наиболее часто употребляемым инструментом в Web дизайне, позволяющим точно разместить на таблице отдельные мультимедийные элементы. Подобно спискам, таблицы могут быть вложены в другие таблицы.
Пример:
Чтобы добавить такую таблицу в контейнере дескриптора ячейки пишут следующее:
<TD>
<TABLE>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>
<TD>
Фон отдельных ячеек могут отображать не все браузеры.
Размещение графических изображений в
HTML документе
Для размещения изображений используются в основном два графических формата:
1.Формат
JPG.
Плюсы
- Графическое изображение, сохраненное в данном формате, имеют наименьший объем.
Минусы
– при сохранении происходит довольно сильное сжатие картинки, а при сжатии изображение теряет качество и наблюдается эффект пикселизации.
Пример
:
Картинка сжалась в девять раз.
Девять пикселей заменяются одним пикселем среднего цвета.
Изображение сохраняется в формате .
jpg
в том случае, если необходимо сохранить максимальное количество оттенков.
2.Формат
GIF.
При сохранении картинок в этом формате также происходит сжатие, но пикселизации не происходит.
Минусы
– изображение сохраняется с помощью ограниченного количества цветов (обычно 256 цветов) => изображение будет не очень красочным.
С помощью формата .
gif
сохраняются навигационные кнопки, навигационные графические элементы и фоновые изображения.
Для внедрения изображения используется одиночный
дескриптор
<IMG
>.
Атрибут
SRC
– основной атрибут. Он указывает путь и имя файла, в котором содержится графический элемент.
Пример
:
<IMG SRC=1.gif>
- Атрибут
WIDTH
– ширина внедряемого изображения (в пикселях).
- Атрибут
HEIGHT
- высота внедряемого изображения (в пикселях).
- Атрибуты
VSPACE,
HSPACE
– устанавливают отступ текста от внедряемого в HTML документ изображения.
- Атрибут
BORDER
– задает толщину рамки вокруг изображения.
- Атрибут
ALT
– задает альтернативный текст, который появляется в том месте, где должны быть картинки.
Пример
:
ALT=”Здесь была картинка”.
Обычно атрибут используют при размещении навигационных изображений (ссылок), а так же при размещении изображений, о которых надо дать знать поисковой системе.
Атрибут
ALIGN
– выравнивание.
Возможные значения
:
=LEFT, CENTER, RIGHT.
Добавляются значения: =TOP, MIDDLE, BOTTOM.
Если не используются атрибуты
WIDTH,
HEIGHT
, то изображение внедряется оригинального размера.
Если используется только один атрибут, например HEIGHT
, то браузер уменьшит или увеличит ширину пропорционально изображению.
Использование гипрессылок
Гипрессылка
–
это URL адрес того документа, который привязан к одному из элементов Web страницы (текстовому или графическому).
Для внедрения ссылок в HTML документ применяется парный дескриптор <A
>…</
A>
.
Пример
:
<A HREF=”http://www.kirov.ru/price.htm”>
Все, что находится внутри контейнера, называется элемент привязки (текстовый фрагмент или графический элемент).
</A>
В результате на экране отображается подчеркнутый выделенный текст.
Пример привязки к изображению
:
<A>
<IMG SRC=”1.gif”>
</A>
Изображение, к которому привязывается ссылка, называется навигационной картинкой (изображением).
В случае привязки к картинке ссылки вокруг картинки формируется рамка (чаще всего синего цвета). Чтобы ее убрать, необходимо указать:
<IMG border=”0”>
Значением атрибута
HREF
может быть абсолютный адрес (URL адрес) или относительный адрес (имя файла, в котором хранится HTML документ, указываемый с помощью ссылки). Например, HREF=”1.htm”. Браузер будет искать данный документ в текущей папке, то есть в той, в которой находится активный документ.
Исключение составляет дескриптор
<BASE>
<BASE URL=”http://www.kirow.ru”>
В случае использования данного дескриптора в заголовке HTML документа (то есть контейнера HEAD)относительные адреса (указанные в виде значений HREF) будут восприниматься браузером не относительно текущей папки, а относительно URL адреса, указанного в значении атрибута URL.
Использование дескриптора <A>…</A>
для указания отдельных элементов HTML документов.
1.
Атрибут
NAME
используется для указания места, до которого необходимо пролистать
HTML документ.
Пример
:
<A NAME=”ZDES”>
</
A>
В этом случае внутри дескриптора <A> находится якорь – это элемент HTML документа, который может быть адресован с помощью гиперссылки. Якорь не выделяется браузером.
Для того чтобы с помощью ссылки адресоваться к якорю надо после URL адреса добавить # и указать имя якоря.
Пример
:
<AHREF=”http://www.kirov.ru/price.htm#1>
Название якоря может формироваться без указания URL адреса HTML документа.
Пример
:
<A HREF=”#1”>
Данный якорь будет искаться в текущей папке.
При использовании абсолютного адреса необходимо использовать аббревиатуру http (например, http://www.kirov.ru).
HTML форма
Форма
(в документе HTML) – это средство, позволяющее организовать диалог пользователя и Web сайта.
Основные виды
HTML форм:
1) Кнопки.
2) Списки.
3) Текстовые поля.
4) Переключатели (флажки).
5) Радиокнопки.
Элементы управления HTML форм позволяют пользователю вводить информацию с помощью браузера и отправлять её на обработку Web сайту.
Для обработки форм, заполненных пользователем, на Web сайте используется программа-обработчик. В ответ на данную форму эта программа формирует HTML код.
Группа дескрипторов, формирующих
HTML форму
.
1.
Парный дескриптор
<
FORM>
- задает свойство формы и содержит в своем контейнере элементы этой формы.
Атрибуты:
Атрибут
NAME
– для задания имя формы.
Например,NAME=”anketa”.
! Каждый элемент HTML формы, как и сама форма, должны быть обязательно поименованы.
Атрибут
METHOD
– определяет, каким способом HTML форма будет отправляться к программе-обработчику.
Есть два варианта:
1)=POST – используется чаще всего.
2)=GET – используется для отправки HTML формы с помощью URL адреса.
(По умолчанию задается метод GET).
Атрибут
ACTION
– задает местоположение программы-обработчика. Значением атрибута служит адрес (абсолютный или относительный).
Например,
ACTION=”executive.php” – файл, в котором хранится программа-обработчик.
Или ACTION=“mailto:a@kirov.ru” – пользовательская форма будет отсылаться по указанному электронному адресу.
Атрибут
ENCTYPE
– тип кодировки.
Варианты:
=”text/htm/”
=”text/plain” – обычный текст без элементов форматирования.
Элементы
HTML форм
1.Текстовые поля.
Бывают двух видов
:
1)
Многострочное. Парный дескриптор
<
TEXTAREA>…</
TEXTAREA>
Атрибуты:
· Атрибут
NAME.
· Атрибут
ROWS
– высота поля в строчках.
· Атрибут
COLLS
– ширина поля в символах.
Размещенный в контейнере дескриптора <
TEXTAREA>
текст будет отображаться внутри этого текстового поля (по умолчанию).
2)
Однострочное. Формируется с помощью одиночного дескриптора
<
INPUT>
.
(Данный дескриптор также используется для переключателей, радиокнопок
).
Атрибуты:
· Атрибут
NAME
.
· Атрибут
TYPE
– задает тип создаваемого элемента. Для создания однострочного поля значение атрибута TYPE=”Text”.
· Атрибут
SIZE
– ширина поля в символах.
· Атрибут
MAXLENGTH
– максимальная длина вводимого текста.
· Атрибут
VALUE
– используется для хранения значения элемента формы.
Пример:
Мы можем задать значение поля по умолчанию VALUE=”Например, пошел дождь”.
2.Переключатель или флажок.
Формируется с помощью дескриптора
<
INPUT>,
атрибут
TYPE
которого принимает значение TYPE=”CHECKBOX”.
<INPUT TYPE=”CHECKBOX”>
У данного дескриптора имеются также атрибуты
:
· Атрибут
NAME
.
· Атрибут
CHESKED
– если он указан, то флажок будет установлен.
3.Радиокнопка.
(Выглядит как жирная точка).
Достигается с помощью двух дескрипторов <
INPUT>
, имеющих одинаковое имя. Например, NAME=”1”.
<INPUT TYPE=”RADIO” NAME=”1” VALUE=”GENAT”>
<INPUT TYPE=”RADIO” NAME=”1” VALUE=”XOLOST”>
4.Текстовое поле типа пароль.
<INPUT TYPE=”PASSWORD”>
Данный дескриптор формирует текстовое поле типа пароль. Работает также как и однострочное текстовое поле, но значение отображается в виде звездочек.
5.Кнопка
.
Используется для вызова клиентских скриптов (сценариев).
Выглядит так
:
Кнопка созданная с помощью
:<INPUTTYPE=”SUBMIT” VALYE=”Пуск”> предназначена для отправки формы на обработку в Web сайт.
Выглядит так
:
Предназначена для установления первоначального значения формы.
<INPUT TYPE=”RESET” VALUE=”Сброс”>
Выглядит так
:
6.Списки выбора
(меню) – это многоуровневая конструкция.
Парный дескриптор
<
SELECT >…</
SELECT >
(дескриптор первого уровня)формирует свойства меню.
Атрибуты:
- Атрибут
NAME
.
- Атрибут
SIZE
.
Если данный атрибут равен единице, меньше единицы или не указан, то формируется выпадающее меню.
Выглядит так
:
- ЕслиSIZE больше единицы, то формируется прокручиваемый список.
Выглядит так
:
Внутри контейнера дескриптора<SELECT> находятся элементы меню, которые формирует одиночный дескриптор <OPTION
> (дескриптор второго уровня).
Пример
:
<SELECT NAME=”Menu”>
<OPTION>Файл
<OPTION>Печать
</SELECT>
Ширина меню определяется максимальным значением элемента меню.
· АтрибутMULTIPLE
– для выбора нескольких разных опций.
Советы преподавателя
:
1) Размещать каждый дескриптор с новой строки.
2) Перед большими конструкциями делать интервал.
HTML форма отсылается на обработку Web сайту в виде записей, которые выглядят следующим образом:
Имя элемента формы(Name) = значение(Value).
Для списков, переключателей, кнопок, радиокнопокобязательно задавать значение атрибута Value. В остальных случаях значение задает пользователь (во время ввода). В случае если при формировании элементов формы типа переключатель (флажок) атрибут Value не используется, в качестве значения будет формироваться предлогOn.
Для списков таковым значением по умолчанию будет назначаться текст, расположенный сразу после дескриптора <OPTION>.
Если вы используете элемент Web формы для передачи информации Web сайту, при передаче формы на обработку должна появиться запись:
Имя элемента формы = его значение.
История создания
Internet
Толчком к созданию сети Internet послужила холодная война.
Первые разработки по созданию глобальных компьютерных сетей были осуществлены американским агентством по созданию военных разработок DARPA (агентство было создано в 1957 году).
В 1965
году состоялся первый сеанс удаленной связи между компьютерами. Был выделен специальный проект по созданию сети ARPANET (прообраз сети Internet).
В 1969
году были созданы первые маршрутизаторы, благодаря этому в этом же году было создано четыре узла маршрутизации, которые позволили в полной мере реализовать ту модель ГВС, которая была изначально принята за основу при создании сети ARPANET.
В 1972
году был запущен стандарт, регламентирующий основу транспортного протокола TCP.
В этом же году появились первые сервисы:
· TELNET (1972).
· FTP (1973).
С помощью этих сервисов пользователь получает удаленный доступ к командной строке сервера. Для передачи сообщений использовали командную строку. Для передачи электронной почты использовался протокол FTP.
В 1977
году появился стандарт на сервис электронной почты SMTP.
В 1983
году произошло официальное внедрение протокола TCP/IP.
В результате расширения сети было принято решение о передаче координации проекта ARPANET из обороны науке. И проект был переименован в NSFNET.
В середине 80-х
к NSFNET подключились британская сеть, затем канадская, финская и другие.
В 1993
году к Internet присоединилась Россия, и был образован домен .ru
В 1991
году был создан сервис Gopher – прообраз Web сервиса.
Основные организационные структуры,
координирующие работу
Internet
После выхода Internet за национальные рамки основная роль по управлению сетью была передана Всемирной общественной организации по назначению имен и чисел – ICANN
.
Инженерная организация по развитию Internet – IETF
.
Основная задача
: Развитие старых и создание новых сетевых стандартов.
Развитием Web стандартов занимается W3C
.
IOSC
– интернет сообщество. Основная задача – развитие содержательной части, правовые вопросы.
РСИЦ
– региональный сетевой информационный центр (в России). Этот центр занимается разработками, опираясь на стандарты четырех вышеперечисленных организаций.
В каждой стране есть такой центр.
Листы каскадных стилей или
CSS
CSS
– это набор правил для оформления и форматирования различных элементов HTML документов.
Правила подключения стиля к конкретному
HTML документу:
1) С помощью одиночного
дескриптора
<
LINK>
.
<LINK REL=”Stylesheet” TYPE=”text/css” [MEDIA=”SKREEN”] HREF=”URL”>
MEDIA – среда, в которой будут работать стили.
При задании значения атрибуту MEDIA правила будут действовать только при выводе страниц на:
MEDIA=”PRINT” – печать.
MEDIA=”SCREEN” – экран.
2) При помощи парного дескриптора
<
STYLE>…<
STYLE>
.
<STYLE TYPE=”text/css” [MEDIA=”…”]>…</STYLE>.
В контейнере дескриптора <STYLE> располагаются правила, определяющие свойства отдельных элементов страницы.
3) Определение стиля непосредственно внутри элемента страницы.
<P STYLE=”…”>…</P>.
4) Использование пользовательских стилей (то есть с помощью настроек браузера).
Правила описания стилей
Правила описания стилей - это команды, определяющие свойства HTML документов (цвет, выравнивание). Набор свойств, доступный через CSS гораздо больше, чем стандартный HTML набор.
Синтаксис:
P {text-align:right; color:red}, где
P – класс HTML документов, которые будут подвергаться форматированию (то есть к которым будет применяться стиль).
Набор таких правил у нас может храниться в отдельном файле, могут находиться в контейнере дескриптора <STYLE>.
Например
,
<P STYLE =”text-align:right”>
P.krass{color:red} – все параграфы класса krass будут красного цвета.
<P class=krass>…</P>
P:first-letter {color:red; font-size:300%; float:left}, где first-letter – имя псевдонима. (Здесь первая буква).
P.krass:first-letter
<P class=krass>
A:visited {color:red; font-size:300%; float:left}
A:active
first-line
Псевдокласс
– это множество HTML элементов, описываемых непосредственно спецификацией CSS.
#111{color:red} ,где#111 –идентификатор элемента.
<P ID=111>
Атрибут ID служит для присваивания идентификатора элементу.
Пример:
<IMG ID=111 SRC=”…”>
Так можно накладывать элементы друг на друга:
#111{top:10; left:100; width:100; height:200; width:100; height:200; z-index:2}
Координата z определяет место (порядок) элемента.
Каскадный приоритет
– это порядок, в котором правила, определяющие конкретные стили будут применяться.
1) На первом месте правила, определенные атрибутом STYLE.
2) Правила, определяемые с помощью стилей.
Например, P.1{…}.
3) Правила, определяющие стили для дескрипторов определенного типа.
Например, P {text-align:right; color:red}
Подключение стилей с помощью дескриптора <STYLE> является более важным, чем подключение стилей с помощью дескриптора LINE.
Чтобы придать акцент (приоритет) определенному правилу используется important.
Пример
:
P {text-align:right !important}- искусственное изменение приоритета.
4) На последнем месте каскадного приоритета (то есть наименьшие по важности) правила определения стилей указываемых пользователем с помощью браузера.
P, H1, DIV {…} – эта конструкция используется для одновременного присвоения свойств сразу нескольким классам.
XML - расширяемый язык разметки
Расширяемый язык разметки XML предназначен для описания внутренней логической структуры документа.
<ТЕМА>информация</ТЕМА>
В качестве команд языка HML используются элементы. Элемент начинается так же, как и дескриптор:
<название элемента>содержимое элемента</название элемента>
!Элемент всегда заканчивается закрывающимся тэгом. Одиночных элементов (как в HTML) не бывает.
При указании элементов могут использоваться атрибуты (свойства) элемента. В отличие от атрибута HTML, значения атрибутов обязательно должны заключаться в кавычки.
Иерархическая структура документов.
Все элементы XML документа должны располагаться в строгой иерархической последовательности. Обязательно должен быть один корневой элемент, от которого иерархическое дерево растет и изветвляется.
Пример:
<?XML version=”1.0” encoding=”windows-1251”?>
<PREDMET_LIST>
<PREDMET>
<NAME>МИР</NAME>
<PREPOD>Выдрин А.Л.</ PREPOD >
<TEMY_LIST>
<TEMA>Информация</TEMA>
< TEMA >Структура Интернета</ TEMA >
… … …
</ TEMY_LIST >
</ PREDMET >
</ PREDMET_LIST >
Основное свойство HML – его расширяемость. Создатель документа может использовать для обозначения элементов любые названия, определяющие смысл элемента одинаково для него и пользователя.
Для определения смысла отдельных элементов HML документа используются специальные конструкции DTD
– определители типа документов, которые определяют не только логический смысл элемента (дают комментарии по поводу описания использования элемента), но и жестко определяют структуру элемента.
Синтаксис данных определителей типа документов достаточно сложен и напоминает отдельный язык разметки (или язык программирования).
! Синтаксис достаточно строг. Нельзя делать ошибки.
DTD используются так же, как эталоны для проверки правильности XML документов.
Для задания внешнего представления XML документа используются стили. Основная нагрузка XML документа – содержание.
<?xml-stylesheet type=”text/css” ref=”1.css”?>
Классификация
Web ресурсов
Конечные (или функциональные) сайты |
Информационные
(тематические)
сайты
|
Сайты
электронной
коммерции
|
Сайты, являющиеся
Web интерфейсами
сетей Internet
|
Навигационные сайты
– перенаправляют пользователей к конечным сайтам (указующая и направляющая роль). Например, порталы Яндекс, Кирилл и Мифодий и прочие.
Портал
– это Web сайт, сочетающий в себе функции навигационного сайта и информационного ресурса по различным темам.
Конечный (функциональный) сайт
– это сайты или ресурсы, которые содержат информацию или документы, ради которых пользователи приходят в глобальные сети (Internet).
Информационные сайты
- обеспечивают доступ пользователей к документам определенной тематики.
Корпоративные сайты
, а так же сайты электронной коммерции
– дают доступ к коммерческой информации (информации о товарах, услугах, производителях), а также возможность удаленного заказа, оплаты и приобретения товаров и услуг.
Web интерфейс – это сайты, которые через стандартные HTML страницы (Web страницы) предоставляют доступ к сервисам Internet (электронной почты, телеконференций и другим).Роль последней группы сайтов очень велика.
Семинарские занятия
1) Знакомство с Internet (чтение учебника). Подключится к серверу.
2) Создание учетных записей. Создание оригинального сообщения.
3) Получить ваше сообщение. Создать правила для сообщений почты в отношении названных вами сообщений.
4) Получить ваше сообщение, создать ответ и отправить сообщение. Перенаправить ваше сообщение вам и еще кому-нибудь, присоединив к нему файл.
5) Подписаться на группу новостей.
6) Создание запросов. Найти в документах данные вами слова и фразы.
7) Создать
HTML документ.
В заголовке использовать дескрипторы <title>, <meta> (с атрибутами http-equiv, name, content). В теле опробовать действие атрибутов bgcolor, background, text, link, vlink, alink, topmargin, leftmargin.
8) Форматирование текста.
Создать HTML документ. Скопировать текст. Попробовать действие дескрипторов <!>,<comment>, <br>, <nobr>, <wbr>, <p> (с атрибутом align), заголовка от <h1> до <h6> (с тем же атрибутом), <hr> (с атрибутамиalign, color, width, size, noshade),< font> (атрибут face, color, size),< basefont> (атрибуты как у font), <pre>(в его контейнере создать таблицу стандартными средствами форматирования), <div>, <center>.
9) Форматирование текста.
Создать HTML документ. Скопировать текст. Попробовать действие дескрипторов <b>, <i>, <
cite>
, <blockquote>, <u>. Отобразить символы символов< (левая скобка), > (правая скобка), © (значок авторского права), ° (значок температуры),   (жесткий пробел).
10) Сложное форматирование.
Создать HTML документ. Создать нумерованный и маркерный списки. То есть попробовать действие дескрипторов <ol> (атрибуты type, start), <li> ,<ul> (атрибут type). Создать многоуровневый список.
11) Сложное форматирование.
Создать нарисованную на доске таблицу. Поменять ее размеры, ширину рамки, фон, расстояние между ячейками, цвет ячеек и их границ, выравнивание в ячейках. Попробовать создать таблицу в ячейке данной таблицы.
12) Внедрение графического изображения.
Создать HTML документ. Скопировать текст. В тексте поместить картинки, как показано на доске. Использовать дескриптор <img> (атрибуты src, width, height, hspace, vspace, border, align, alt).
13) Создание ссылок
. Создать три HTML документа. Связать их между собой с помощью ссылок, предусмотреть возможность перемещения обратно. Используем дескриптор <A> атрибуты href, name.
14) Скачать с компьютера преподавателя картинки и расположить их так, чтобы получился лабиринт (смотри на доску).
15) HTML форма
. Проверить действие дескрипторов <form> (атрибуты name, method, action, enctype), <
textarea> (атрибуты name, rows, colls), <input>(атрибут name, и всевозможные значения атрибута type с соответствующими каждому элементу формы возможными атрибутами), <select>(атрибуты name, size, option)
16) HTML форма.
Создать изображенную на доске форму заказа, заполнить ее и отправить ее на обработку в Web сайт. Проверить соответствие HTML кода и данных формы.
17) Листы каскадных стилей
. Создать HTML документ. В него скопировать текст и поместить два рисунка (один на другой). Подключить стили всеми возможными способами. Поменять приоритет стилей.
18) Листы каскадных стилей.
Создать HTML документ. В него скопировать текст создать правила, указанные на доске. Подключить стили. Поменять приоритет стилей.
19)XML.
Создать XML документ, описывающий структуру HTML документа.