Реферат: Мировые информационные ресурсы

<TABLE>

<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 документе

Для размещения изображений используются в основном два графических формата:

• JPG
• GIF

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

Пример:

<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> текст будет отображаться внутри этого текстового поля (по умолчанию).

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 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 интерфейс – это сайты, которые через стандартные 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 документа.