Мировые Информационные ресурсы

появляется в том месте, где должны быть картинки.

Пример:

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 адреса добавить # и указать имя якоря.

Пример:

<A HREF=”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> текст будет

отображаться внутри этого текстового поля (по умолчанию).

0x01 graphic

2. Однострочное. Формируется с помощью одиночного дескриптора

<INPUT>.

(Данный дескриптор также используется для переключателей,

радиокнопок).

Атрибуты:

* Атрибут NAME.

* Атрибут TYPE - задает тип создаваемого элемента. Для

создания однострочного поля значение атрибута TYPE=”Text”.

* Атрибут SIZE - ширина поля в символах.

* Атрибут MAXLENGTH - максимальная длина вводимого текста.

* Атрибут VALUE - используется для хранения значения элемента

формы.

Пример:

Мы можем задать значение поля по умолчанию VALUE=”Например, пошел

дождь”.

0x01 graphic

2.Переключатель или флажок.

0x01 graphic

Формируется с помощью дескриптора <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”>

0x01 graphic

0x01 graphic

4.Текстовое поле типа пароль.

<INPUT TYPE=”PASSWORD”>

Данный дескриптор формирует текстовое поле типа пароль. Работает

также как и однострочное текстовое поле, но значение отображается

в виде звездочек.

0x01 graphic

5.Кнопка.

* <INPUT TYPE=”BUTTON”>

Используется для вызова клиентских скриптов (сценариев).

Выглядит так:

0x01 graphic

* Кнопка созданная с помощью:<INPUT TYPE=”SUBMIT”

VALYE=”Пуск”> предназначена для отправки формы на обработку

в Web сайт.

Выглядит так:

0x01 graphic

* Кнопка сброса формы.

Предназначена для установления первоначального значения формы.

<INPUT TYPE=”RESET” VALUE=”Сброс”>

Выглядит так:

0x01 graphic

6.Списки выбора (меню) - это многоуровневая конструкция.

Парный дескриптор < SELECT >…</ SELECT > (дескриптор первого

уровня) формирует свойства меню.

Атрибуты:

* Атрибут NAME.

* Атрибут SIZE.

* Если данный атрибут равен единице, меньше единицы или

не указан, то формируется выпадающее меню.

Выглядит так:

0x01 graphic

* Если SIZE больше единицы, то формируется прокручиваемый

список.

Выглядит так:

0x01 graphic

Внутри контейнера дескриптора<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 ресурсов

+-----------------+

| 0x08 graphic ||

| 0x08 graphic ||

| 0x08 graphic ||

| 0x08 graphic ||

| Навигационные ||

| сайты ||

|-----------------|

| 0x08 graphic |

| 0x08 graphic |

| 0x08 graphic |

| 0x08 graphic |

| Конечные (или |

| функциональные) |

| сайты |

+-----------------+

0x08 graphic

+----------------+

| Информационные |

| |

| (тематические) |

| |

| сайты |

|----------------|

| Корпоративные ||

| ||

| сайты ||

+----------------+

+--------------+

|Каталоги | |

|------------+ |

| Поисковые | |

| | |

| системы | |

|-------------+|

| Сайты ||

| ||

| электронной ||

| ||

| коммерции ||

|--------------|

| Сайты, |

| являющиеся |

| |

| 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

документа.

клиент

клиент

клиент

узел

узел

сервер

сервер

сервер

файл

файл

Клиентский компьютер

Программа клиент

Запрос

Пакет1

Пакет2

Пакет3

С3

С2

С5

С4

файл

Сервер, содержащий информационный ресурс

сервис

Сервис 1

(обеспечивает доступ к информационному ресурсу)

Папка f1

Папка f2

Отправитель

Компьютер пользователя

IP 1

IP 2

SMTP

SMTP

POP3

Папка user

Пользователь

Сервер новостей News

SMTP сервис

POP3 сервис

Web интерфейс

Почтовый сервер

ПК пользователя

Браузер

Web сервис

Специализированный сервис

Поисковая система

Например, принтер

Например, хранение данных

Internet

Web интерфейс

СУБД

База адресов

База ключей

20

10

Если значение атрибута больше нуля,

то таблица выглядит так:

Страницы: 1, 2, 3, 4