Лекция: Мировые информационные ресурсы

</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:” – пользовательская форма будет отсылаться по

указанному электронному адресу.

• Атрибут 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.Кнопка.

• <INPUT TYPE=”BUTTON”>

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

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

• Кнопка созданная с помощью:<INPUT TYPE=”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 >.</P>

P:first-letter {color:red; font-size:300%; float:left}, где first-letter –

имя псевдонима. (Здесь первая буква).

P.krass:first-letter

<P >

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 интерфейс – это сайты, которые через стандартные 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>. Отобразить символы символов &lt (левая

скобка), &gt (правая скобка), &copy (значок авторского права), &deg

(значок температуры), &nbsp (жесткий пробел).

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, 4, 5, 6