Курс лекций по учебной дисциплине Основы web - масткрства для специальности 230401

Скачать материал

МИНИСТЕРСТВО ОБРАЗОВАНИЯ ИРКУТСКОЙ ОБЛАСТИ

ГБПОУ «Черемховский горнотехнический колледж им. М.И. Щадова»

РАССМОТРЕНО

Цикловой комиссией

«Информатики и вычислительной

техники»

председатель

_____________Е.А. Литвинцева

_________________20_____ год

ОДОБРЕНО

Методическим советом

колледжа

протокол №___

от___________ 20___года

Председатель МС

_____________ Е.К. Ващук

КОНСПЕКТ ЛЕКЦИЙ

учебной дисциплины ОСНОВЫ WEB - МАСТЕРСТВА

по специальности 230401 Информационные системы (по отраслям)

Черемхово, 2016г.

Раздел 1. Основные положения.

Тема 1.1. Исторические сведения.

Содержание учебного материала:

История создания языка разметки гипертекста- HTML.

История создания web - браузера.

Интернет - разветвленная глобальная сеть, посредством которой миллионы компьютеров обмениваются данными, используя определенные стандартные протоколы.

История Интернета.

1)В 60-е годы Министерство обороны США поставило задачу – разработать надежную компьютерную сеть, которая должна была служить стратегическим интересам США. В основу концепции надежной сети была положена идея децентрализации. В Распределенной децентрализованной системе частичный отказ в работе сети не приводил бы к полной потере работоспособности.

2)В 1969 г. большинство учреждений, связанных с Министерством обороны, объединили собственные сети в сеть ARPANet- прародитель сети Интернет.

3)В 1983 г. для стандартизации обмена данными между UNIX- серверами и клиентами, ученые Калифорнийского университета в Беркли разработали протокол передачи данных – TCP/IP.

4)Развитие Интернета сопровождалось ростом числа серверов. В начале следующего десятилетия их было 100 000.

5)ARPANet превратилась в Интернет после подключения к сети ARPANet коммерческих предприятий.

6)В 1993 г. число подключенных серверов перевалило за миллион. Интернет приобрела очертания, близкие к сегодняшним и провозгласила в качестве цели своего развития всеобщую информатизацию человечества.

7)Привлечение к сети Интернет пользователей ПК посредством бесплатной пересылки информации, ее поиска и других услуг и оплаты только услуг локального поставщика услуг.

8)Ограничения для типов подключаемых к Интернету компьютеров не существует, несмотря на то, что технологически большинство серверов Интернета базируются на UNIX- системах. Поэтому в 1994 г. насчитывалось 4 миллиона компьютеров, работающих в сети.

9)Важнейшим событием в своей биографии сеть Интернет обязана швейцарским ученым из Европейской Лаборатории ядерной физики CERN. С созданием языка описания документа HTML появилась возможность построения службы Word Wide Web(WWW), позволявшей объединить в одном структурированном документе текстовые и графические данные (а позднее и мультимедиа- элементы), а также включать в документ ссылки на другие документы, расположенные в произвольных местах сети.

10)Студенты факультета NCSA (National Center for Supercomputing Applications) из университета в Иллинойсе построили первый Web- браузер (программу – обозреватель) Mosaic, который позволил отображать на мониторах компьютеров HTML- документы.

Таким образом, языком представления документов в WWW является HTML. Этот формат описывает не то, как должен выглядеть документ, а его структуру и связи.

Контрольные вопросы

Исторические сведения.

1.Дайте понятие сети «Интернет»

2.Какую задачу поставило Министерство обороны США в 60-е годы?

3.Назовите прародителя сети Интернет

4.Перечислите этапы развития Интернета

5.Чем сопровождалось развитие Интернета?

6.Охарактеризуйте шестой этап развития Интернета

7.Важнейшие события в биографии Интернета

8.Как назывался первый web-браузер?

Раздел 1. Основные положения.

Тема 1.2. Язык разметки гипертекста HTML.

Содержание учебного материала:

HTML -язык.

HTML - документ.

Синтаксис описания элемента.

Синтаксис описания атрибута.

Определение: HTML- документ это ASCII- текст, состоящий из HTML- кодов и основного текста документа.

Для форматирования текста, задания структуры документа, встраивания ссылок и мультимедиа- объектов в HTML- документах используют специальные кодовые слова, которые называются дескрипторами разметки (тегами- Tags).

Будем помечать дескрипторы разметки угловыми кавычками, построенными из знаков >, <.

Пример: <head>

Определение: HTML язык - язык разметки гипертекста, который предназначен для описания гипертекстовых документов, публикуемых в WWW.

Замечание:

Применение ASCII- текста в качестве основы HTML- документа позволяет надеяться, что он будет понят и корректно интерпретирован независимо от компьютерной платформы.

Автор идеи- Бернес Ли.

Основа от SGHL- язык определения структурной разметки.

1.Элементы

<название элемента> содержание элемента </название элемента>

Пример: Параграф в документе: <р> параграф </р>

Замечание: Существует элемент без содержания, например, принудительный разрыв строки - <br>

2.Атрибут - описывает свойства элемента

<название элемента атрибут = «значение атрибута»> содержание </название элемента>

Контрольные вопросы

Язык разметки гипертекста HTML.

1.Дайте понятие HTML-документа

2.Дайте понятие HTML- языка

3. дайте понятие дескриптора разметки

4. Каков синтаксис описания элемента

5. Каков синтаксис описания свойства элемента

6. Приведите пример

Тестовые задания

Исторические сведения. Язык разметки гипертекста HTML.

Вариант №1

Выберите один или несколько правильных ответов:

1. В какие годы министерство обороны США поставило задачу разработать надёжную компьютерную сеть

А) 70-е	C) 60-е
B) 50-е	D) 90-е

2. Какой протокол передачи данных разработали ученые Калифорнийского университета в Беркли

А) TCPIP	C) TCP/IP
B) IP	D) TCP

3. Прародитель Интернета

А) ArpaNet	C) ArpaCet
B) ArpaNet	D) ArpaLet

Дополните:

4.Интернет - это________________________________________

5. HTML –язык - это____________________________________

Опишите:

6.Синтаксис описания свойства элемента __________________

Тестовые задания

Исторические сведения. Язык разметки гипертекста HTML.

Вариант №2

Выберите один или несколько правильных ответов:

1.В HTML-документах используются специальные слова, которые называются

А) дескрипторами разметки

В) атрибутами

2. В каких кавычках помечают дескрипторы разметки

A) { }	B) [ ]
C) < >	D) “ “

3. Кому обязана сеть Интернет важным событием в своей биографии

A) Швейцарским ученым	B) ученым калифорнийского университета
C) студентам факультета NCSA	D) Министерству обороны США

4. Какой дескриптор отвечает за принудительный разрыв строки

A) <p>	B) <br>
C) <head>	D) <meta>

Дополните:

5. HTML-документ - это______________________________________

Опишите:

6. Синтаксис описания свойства атрибута________________________

Раздел 1. Основные положения.

Тема 1.3. Стандарты HTML. Структура HTML документа

Содержание учебного материала:

Стандарты HTML.

Структура HTML-документа.

Стандарты HTML

1)HTML- стандарт 2.0 поддерживает только форматирование текста и встраивание простой графики.

2)В 1995 г. опубликованы предложения по расширенному стандарту HTML 3.0, которые стали использоваться как неофициальные HTML- рекомендации, воплотив, неся в программах- обозревателях.

3)В мае 1996 г. общественность познакомилась с HTML – стандартом версии 3.2, за которую несет ответственность организация объединения представителей промышленности и науки.

4)Первая публикация предложений по стандарту HTML 4.0 появилась 18.12.1997 г. Исправленная версия опубликована 24.04.1998 г.- в настоящее время - фактический стандарт.

24.12.1999 г.- спецификация версии 4.01. В ней устранены ошибки, обнаруженные в HTML 4.0.

Для просмотра HTML- документа необходим Web- браузер- специальная программа- обозреватель, которая в состоянии интерпретировать и корректно изображать HTML – дескрипторы на экране.

Пример: Netscape Navigator, Internet Explorer.

Структура документа в HTML

Документ состоит из 3-х частей:

1. Описание версии языка.

2. Раздел заголовка.

3. Тело документа.

HTML- документ ограничивается дескрипторами разметки:

<HTML> - начало документа

</HTML> - конец документа

Все остальные команды HTML и всё содержимое Web- страницы, в том числе заголовок, тело документа, должны располагаться между двумя данными дескрипторами.

Для определения версии языка можно воспользоваться дескриптором <! Doctype>, располагающимся в HTML- документе перед <HTML>

В заголовке документа определяются важные установки, например, имя документа, URL- адрес, используемые шрифты.

Главная часть HTML- документа называется телом и включает в себя содержимое Web- страницы, выводимое на экран браузером. Это содержимое может быть оформлено как линейная последовательность элементов с помощью <body>, </body> дескрипторов или как совокупность фреймов, делящих пространство на совокупность нескольких панелей (фреймов) с помощью <frameset>, </frameset>.

Заголовки располагается между дескрипторами разметки <head> и </head>.

В заголовке присутствует <TITLE> и </TITLE>- имя документа.

Может присутствовать, но не обязательно <META>и </META> передача информации, <Link> и </Link>- связь с другими документами.

Атрибуты <body>

Атрибут	Значение
Alink	Цвет активизируемой гиперсвязи
Bgcolor	Цвет фона
Link	Цвет гиперссылки
Text	Цвет текста
Vlink	Цвет используемой гиперссылки

Пример:

<!Doctype>

<html>

<head>

<title> Первые шаги </title>

</head>

<body> Первый HTML- документ!

</body>

</html>

Контрольные вопросы

Стандарты HTML. Структура HTML

1. Что такое атрибут?

2. С помощью какого дескриптора осуществляется описание версии языка?

3. Что должно располагаться между двумя дескрипторами <HTML> </HTML>?

4. Где установлены важные глобальные изменения?

5. Как называется главная часть HTML-документа?

6. Между какими дескрипторами разметки располагаются заголовки?

7. Какие теги отвечают за имя документа?

8. За что отвечает дескриптор <META> и</META>?

9. Перечислите атрибуты дескриптора <body>

10. Приведите пример

Тестовые задания

Стандарты HTML. Структура HTML

Выберите один или несколько правильных ответов

1. Описание версии языка осуществляется с помощью дескриптора

A) <doctype!>	B) <html>
C) <body>	D) <meta>

2. Главная часть HTML-документа называется

A) телом	B) атрибутом
C) заголовком	D) элементом

3. Между какими дескрипторами располагаются заголовки

A) <head>	B) <br>
C) <text>	D) <div>

4. Дескрипторы <TITLE> </TITLE> отвечают за

A) имя документа	B) содержание документа
C) начало строки	D) заголовок документа

5. Количество разделов в структуре документа

A) 6	B) 7
C) 4	D) 3

6. Какой дескриптор отвечает за связь с другими документами

A) <link>	B) <vlink>
C) <head>	D) <meta>

Раздел 2. Форматирование текста.

Тема 2.1. Текстовые блоки. Специальные символы

Содержание учебного материала:

Текстовые блоки.

Дескрипторы <div>, </div>, <p>, </p>, <span>, </span>, <h1>,…,<h6>, </h1>,…,</h6>, их атрибуты.

Специальные символы.

Фиксирование (физическое) форматирование задается посредством типографических дескрипторов. С их помощью можно задать полужирное или курсивное начертание, глобальное изменение типа шрифта и его размера.

Настраиваемое (логическое) форматирование определяет вид фрагмента текста в соответствии с его функцией. Каким образом это форматирование будет отображено на экране, зависит от используемого браузера и его настройки.

Текстовые блоки.

Формат текстовых блоков задается с помощью настраиваемого форматирования.

Выделение фрагментов документов с помощью пар дескрипторов <div> и </div> приводит к разбиению HTML- страницы на логические фрагменты, например, введение, основной текст и область ссылок.

Дескрипторы <div> и </div> предназначены для определения крупных фрагментов (более 1 строки), а <span>, </span>- фрагментов, ограниченных пределами первой строки.

Атрибуты дескрипторов <div> и <span>: align- предназначен для выравнивания фрагментов документа.

Align=left /center/ right /justify

Пример:

<body>

Первый фрагмент документа

</div>

Второй фрагмент документа

</div>

Третий фрагмент документа

</div>

</body>

Форматирование заголовков всех типов производиться посредством дескрипторов <h1> …….<h6>. Так же в конце заголовка необходимо ввести соответствующий концевой дескриптор.

<h1> соответствует верхнему уровню в иерархии заголовков,<h6>-нижнему.

Для форматирования заголовков допускается использовать атрибут

Align=left /center/ right /justify

Замечание: Дескрипторы <h1>……<h6> используются только для заголовков, при желании выделить фрагмент текста (не заголовок) более крупным или полужирным начертанием, пользуйтесь дескриптором <big> или <font>.

Пример:

<body>

<h1 align=center> Заголовок всей Web- страницы </h1>

<h2> заголовок уровня 2 </h2>

<h3> Заголовок уровня 3 </h3>

<h4> заголовок уровня 4- такой же размер, как у стандартного текста </h4>

Стандартный текст

<h5> заголовок уровня 5 </h5>

<h6 align=right> Авторские пометки Web- страницы </h6>

</ body>

Выделение абзаца текста можно осуществлять с помощью дескрипторов <p> и </p>. Для данного дескриптора существует атрибут align=center/left/right/justify.

Замечание: Концевой дескриптор <p> можно опустить, так как чаще он игнорируется браузером.

Цитаты знаменитых писателей, извлечения из стандартов, фрагменты первоисточников должны быть выделены <blockquote>.

Замечание 1: Для <blockquote> предусмотрен параметр cite=URL, позволяющий указать ссылку на сетевой ресурс, содержащий центрируемый документ.

Замечание 2: В HTML 4.0 и 4.01 для оформления цитат предусмотрен <q>. В отличии от предыдущего, который следует использовать для больших цитат, <q> рекомендован для «внутренних» цитат (несколько слов в пределах строки) например <p>.

Для <p> предусмотрен cite=URL.

В HTML существует возможность не форматировать текст с помощью <plaintext>.

Пример:

<body>

Далее следует

Простой текст и никакие дескрипторы не воспринимаются.

</plaintext>

<h1> попытка ввести заголовок </h1>

</body>

В окне браузера по умолчанию текст выравнивается по левому краю экрана, но <center> и </center> приводят к центрированию всех ограниченных ими HTML- элементов.

Web- браузер автоматически разбивает тексты фрагментов, превышающих по размеру одну строку, располагая их в нескольких строках (выполняет автоматическую верстку строк).

Текст, выделенный с помощью <nobr>…..</nobr>, браузер не разрывает.

Объяснить места, в которых браузеру разрешается выполнять разрыв текста, можно, вставив в него <wbr>.

Принудительный разрыв строки осуществляется с помощью <br>.

Для управления расположением перенесенного в следующую строку текста в Internet Explorer предусмотрен для <br> атрибут clear.

Clear=none (по умолчанию) – следующая строка начинается в следующей вертикальной позиции.

Clear=left ищет следующее пустое пространство на левом краю полосы набора.

Clear=right ищет следующее пустое пространство на правом краю полосы набора.

Clear=all использует пустое пространство, начиная с позиции, в которой оба края свободны.

Контрольные вопросы

Текстовые блоки. Специальные символы

1.Что такое фиксированное форматирование?

2.Что такое логическое форматирование?

3.Какой дескриптор предназначен для выделения крупных фрагментов?

4.С помощью какого дескриптора осуществляется выделение абзаца текста?

5.Предназначение дескриптора <blocquate>?

6.Предназначение дескрипторов <nobr> </nobr>?

7. Пример логического форматирования?

Раздел 2. Форматирование текста.

Тема 2.2. Логическое форматирование.

Содержание учебного материала:

Логическое форматирование.

Дескрипторы логического форматирования, их атрибуты

Логическое форматирование.

Фрагменты, сформатированные логически (то есть объявленные фрагментами определенного типа), не во всех браузерах выглядят одинаково.

Если в тексте документа вы ссылаетесь на книгу, статью, то можно выделить её название, используя <cite> и </cite>

<code> и </code> используется для изображения исходных текстов программ в окнах браузеров.

Для описания клавиш или их комбинаций используют <kdb> и </kdb>.

Пример:

<body>

Введение <kdb> Проверка </kdb> и нажмите клавишу <kdb> Return

</kdb>

</body>

Дескрипторы <samp> и </samp> предназначены выделять отдельные символы и фрагменты текста, представляющие собой примеры вводимых компьютером данных.

Пример:

<body>

При появлении этой ошибки программа выдает сообщение <samp>.

Критическая ситуация, обработка не возможна </samp> и

останавливается.

</body>

В сочетании с <code>, <kdb> для выделения имен переменных, символов- заменителей или значений используется дескриптор <var> и </var>

Пример:

<body>

Значение переменой < var> value </var> содержится в цепочке символов

<var> string </var>

</body>

Если необходимо сделать акцент или выделить отдельные текстовые фрагменты используют дескрипторы <em> и </em>.

Для усиления выделения можно воспользоваться дескрипторами <strong> и </strong>

Internet Explorer допускает особое форматирование в рамках определений с помощью дескрипторов <dfn> и </dfn>

Контрольные вопросы

Логическое форматирование.

1.Дайте понятие логическому форматированию

2. Пример логического форматирования?

3. Для чего предназначены дескрипторы <samp> и </samp>?

4.Какие дескрипторы можно использовать для усиления выделения?

5. Каково назначение дескрипторов <dfn> и </dfn>

Раздел 2. Форматирование текста.

Тема 2.3. Типографические дескрипторы форматирования.

Содержание учебного материала:

Типографическое форматирование
Дескрипторы типографического форматирования, их атрибуты

<b> (эквивалент <strong>) позволяет отобразить текст полужирным шрифтом.

<i> и </i>- текст в курсивном начертании.

<tt> и </tt>- пишущая машинка.

<u> и </u>- подчеркнутый текст.

<s>, </s> и </strike>, <strike>- перечеркнутый текст

<font> позволяет изменить для фрагмента текста размер и цвет шрифта по отношению к стандартному.

<basefont>, </basefont> позволяет задать стандартный размер шрифта.

Атрибуты <font>:

Color=«цвет»	Цвет шрифта
Size=n	Размер шрифта
Size=+n/-n	Увеличение (уменьшение) шрифта относительно основы <basefont> на значение n
Face	Задает тип шрифта

Пример:

<body>

<b> Мои успехи в учебе </b>

<font size=+4>…..

<font size=-1>…..

<br>

<font size=7 color=green>….

<font color=yellow>………...

<br>

<font color=black size=6 face=Times New Roman>…

<font face=Arial>…

</body>

Логические дескрипторы от <h1> до <h6> должны использоваться исключительно для форматирования заголовков. Если вы хотите изобразить текст более крупным шрифтом, следует пользоваться <font> (атрибут size), либо <big>,</big>.

Вложением <big> размер шрифта можно увеличить на несколько ступеней.

Логические <h5>, <h6> вряд ли целесообразно использовать для организации заголовка, так как они создают более мелкий текст по сравнению с обычным, следовательно, более корректным выглядит уменьшение фрагмента, достигнутое с помощью дескрипторов <small>, </small>.

Пример:

<body>

<h1 align=center> Мои увлечения </h1>

</body>

Для математических формул часто необходимо располагать числа или буквы, ниже основной позиции строки в виде индекса, что можно сделать с помощью дескрипторов <sub>,</sub>.

Пример:

<body>

Математические <sub> формулы </sub> могут выглядеть так:

A<sub> i </sub>=a<sub> 1 </sub>+a<sub>2</sub>+a<sub>3 </sub>+ <sub> </sub> <sub> </sub> <sub> </sub>

E=mc <sup> 2 </sup>

</body>

Текст, начинающийся с <sup> будет поднят на полстроки выше и будет изображаться шрифтом, несколько меньшим, чем обычный текст.

Контрольные вопросы

Типографические дескрипторы форматирования

1. Дайте понятие типографическому форматированию текста

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

3. Каково отличие при применении атрибута Size=+n/-n и Size=n

4. Какие дескрипторы позволяют располагать числа или буквы, ниже основной позиции строки в виде индекса

5. Каково назначение дескриптора <font>:

6. Какие возможности данного дескриптора известны?

Тестовые задания

Текстовые блоки. Специальные символы

Логическое форматирование. Типографические дескрипторы форматирования

Вариант №1

Выберите один или несколько правильных ответов:

1. Для чего предназначены дескрипторы <div> </div>

A) для выделения крупных фрагментов	B) для отображения правой границе
C) для связи с другими документами	D) для отображения левой границе

2. Для чего предназначен дескриптор <span>

A) для выделения крупных фрагментов	B) для выделения фрагментов в пределах одной строки
C) для отображения левой границе	D) для отображения верхней границе

3.Посредством каких дескрипторов производится форматирование

заголовков всех типов

A) <h>….<h>	B) ) <h>….<h>
C) </h>….</h>	D) </h>….</h>

4. C помощью какого дескриптора осуществляется выделение абзаца текста

A) <q>	B) <p>
C) <div>	D) <br>

5. Какой параметр предусмотрен для дескриптора <blocguate>, позволяющий указать ссылку на сетевой ресурс, содержащий цитируемый документ

A) cite=URL	B) cite=P
C) cite=Q	D) cite=M

Дополните:

6.Фиксированное форматирования- это___________________________

Тестовые задания

Текстовые блоки. Специальные символы

Логическое форматирование. Типографические дескрипторы форматирования

Вариант №2

Выберите один или несколько правильных ответов:

1. Какими дескрипторами можно выделить название, если в тексте документа мы ссылаемся на книгу или статью

A) <cite> </cite>	B) <meta> </meta>
C) <code> </code>	D) <div> </div>

2. Какие дескрипторы предназначены выделять отдельные символы и фрагменты текста, представляющие собой примеры, вводимые компьютером данных

A) <code> </code>	B) <var> </var>
C) <samp> </samp>	D) <strong> </strong>

3.Какой буквой пишется текст в курсивном начертании

A) <U>	B) <i>
C) <b>	D) <S>

4.Расшифруйте: size=n

A) значение цвета	B) пишущая машинка
C) перечеркнутый текст	D) размер шрифта

Дополните:

5.Логическое форматирование - это _________________________

Раздел 3. Списки, таблицы, формуляры

Тема 3.1. Списки в HTML.

Содержание учебного материала:

Списки.

Виды списков.

Дескрипторы <ul>, </ul>, <ol>, </ol>, <li>, <dl>, </dl>, <dt>, </dt>, <dd>, </dd>, их атрибуты

В HTML- стандарте предусмотрены команды, позволяющие структурировать тексты, создавая списки различных типов.

Неупорядоченные списки.

Наглядным примером неупорядоченного списка может послужить список покупок.

Пример:

<body>

Список покупок

<br>

(Неупорядоченный список - один уровень структуры)

<ul>

<li> 500 г. телятины

<li> 300 г. спагетти

<li> 1 упаковка томатной пасты

<li> 2 луковицы

<li> баночка соли

</ul>

</body>

При необходимости список можно структурировать, создав в нем иерархию.

Пример:

<body>

Список покупок

<br>

(Неупорядоченный список- 2 уровня структуры)

<ul>

<li> Мясо

<ul>

<li> 250 гр. Телятины

<li> 250 гр. Свинины

</ul>

<li> Овощи

<ul>

<li> 1 упаковка томатной пасты

<li> 2 луковицы

</ul>

<li> приправа

<ul>

<li> 1 баночка соли

<li> 1 баночка пердца

</ul>

<li> Прочие

<ul>

<li> 300 гр. Спагетти

</ul>

</body>

Встраивание в документ неупорядоченного списка производиться посредством <ul>, а завершается список </ul>.

Атрибуты дескриптора <ul>.

1) Compact- представляет список в компактной форме.

2) Type=circle - используется в качестве вводного символа не закрашенный круг.

Type=disc - используется в качестве вводного символа закрашенный круг (по умолчанию)

Type=square - используется в качестве вводного символа не закрашенный квадрат.

Нумерованные списки.

В нумерованных списках каждый элемент снабжен номером.

Пример:

<body>

Рецепт «Спагетти по болонски»

<br>

(Пронумерованный список)

<ol>

<li> луковицы порезать кубиками

<li> добавить фарш

<li> спустить вермишель в воду

</ol>

</body>

Нумерация не обязательна будет выполнена арабскими цифрами.

Специальный атрибут <ol> позволяет использовать при нумерации буквы или цифры.

Пример:

<body>

Предисловие

<ol>

<li> Посвящение

<li> Об авторе

<li> Предисловие издателя

</ol>

</body>

Пронумерованный список начинается с <ol> и заканчивается </ol>.

Атрибуты <li>

Атрибут	Назначение
Type	Задает тип вводного символа элемента списка
Value	Задает текущий номер

Элементы нумерованного списка по умолчанию нумеруются арабскими цифрами.

Type="1" нумерация арабскими цифрами.

Type="A" нумерация латинскими прописными буквами.

Type="a" нумерация латинскими строчными буквами.

Type="I" нумерация большими римскими цифрами.

Type="i" нумерация малыми римскими цифрами.

В нумерованном списке элементы нумеруются автоматически в порядке возрастания с шагом 1.

1) Value=n явным образом задает номер данного элемента = n.

2) Номер следующего элемента = n+1.

3) В списках пронумерованных буквами, римскими цифрами заданная величина n соответствующим образом конвертируется (например, 7 соответствует a или VII).

Пример:

<body>

Список с измененной нумерацией

<br>

<ol>

<li> Арабская нумерация

<li type= "I" > нумерация большими цифрами

<li type= "a" value=5> строчные буквы, <code> value=5

</code> Продолжит нумерацию с "5", то есть с "е"

<li type="i" value=8> нумерация маленькими римскими

цифрами

</ol>

</body>

Атрибуты <ol>.

Атрибут	Назначение
Compact	Доставление списка в компактной форме
Start=n	Задает число, с которого начинается список
Type	Задает способ нумерации списка

Используя несложный прием, в качестве вводного символа элемента списка можно использовать любую графику, следовательно, <li> заменяют на <img> с указанием используемого в качестве вводного символа рисунка.

Пример:

<body>

Документ по проекту «Манилов»

<br>

<ul>

<img src= «doc.gif»> мост через озеро <br>

<img src= «doc.gif»> Подземный ход в Москву <br>

<img src= « doc.gif»> Всеобщее благосостояние <br>

</ul>

</body>

Существует списки определений, они больше подходят для составления словарей.

Список определений начинается с дескриптора <dl> и завершается </dl>

<dt> используется для задания термина, которому дается определение. Для любого определения используется свой <dt>. За <dt> следует <dd>, который служит для оформления определений термина.

Пример:

<body>

Краткий справочник- словарь русского компьютерного диамента

(И.

Зыков)

<br>

<dl>

<dd> Странность или ошибка в работе программы </dd>

<dt> БАГЛАНД </dt>

<dd> Народное название фирмы Borland </dd>

<dd> Обычная форма прощания </dd>

</dl>

</body>

В HTML предусмотрена специальная форма предоставления списков, ориентированных на вывод информации в содержимом файловых каталог с помощью <dir>,</dir> (аналогично неупорядоченным списком с теми же атрибутами)

Встраивание меню в HTML- документ осуществляется посредством <menu>, </menu>, которые ведут себя аналогично неупорядоченным спискам с теми же атрибутами.

Для составления подробных списков со сложной структурой и разветвленной иерархией можно комбинировать несколько различных типов списков.

Пример:

<body>

Netscape- расширения: «за» и «против»

<br>

(Комбинирование списков)

<li> Netscape- расширения делают сеть Интернет

интересной

<li> Графика украшает интерьер

<li> Повышается комфортность работы пользователя

<ul>

<li> Полезные кнопки

<li> Надлежащее построение страницы

</ul>

<li> Новые приложения Интернета

</ol>

<br>

<li> Netscape- расширения является лишним балластом.

<ol>

<li> Условности коммерческого предприятия

<li> Монополизация HTML

<li> Хаос в стандартных WWW

</ol>

</body>

Контрольные вопросы

Списки в HTML

С помощью какого дескриптора производится встраивание в HTML-документ неупорядоченного списка?

2.Перечислите атрибуты <ul>

3. Дайте понятие «неупорядоченные списки»

4.Дайте понятие «нумерованные списки»

5.Перечислите атрибуты дескриптора <li>

6.Какими цифрами нумеруются элементы нумерованного списка?

7.Приведите пример нумерованного списка

8.Дайте понятие «списка определений»

9.Для чего служит дескриптор <dd>?

10.Каково предназначение <menu> и </menu>

Тестовые задания

Списки в HTML

Выберите один или несколько правильных ответов

1. Посредством какого дескриптора производится встраивание в HTML-документ неупорядоченного списка

A) <ol>	B) <br>
C) <ul>	D) <href>

2. Списки в HTML бывают

A) маркированные	B) неупорядоченные
C) последовательные	D) нумерованные

3. Атрибуты дескриптора <li>

A) type	B) value
C) square	D) align

4. Какими буквами нумеруются элементы нумерованного списка по умолчанию

A) русскими	B) римскими
C) английскими	D) арабскими

5. С каких дескрипторов начинаются списки определений

A) <dl> </dl>	B) <dd> </.dd>
C) <dt> </dt>	D) <li> </li>

6. Дескриптор <dt> используется для:

A) оформления определения терминов	B) оформления вводного символа
C) задания термина, которому даётся определение	D) задания выводного символа

Раздел 3. Списки, таблицы, формуляры

Тема 3.2. Таблицы в HTML.

Содержание учебного материала:

Таблицы.

Дескрипторы <table>, </table>, <tr>, </tr>, <th>, </th>, <td>, </td>, их атрибуты.

Сложные таблицы.

Таблица формируется дескрипторами <table> и </table>, а дескрипторы <tr>, </tr> выделяют строки, которые в свою очередь разбиваются на ячейки заголовков <th> , </th> или ячейки данных <td>, </td>.

Атрибуты <table>

Атрибут	Назначение
Align = left/center/right	Выравнивание по горизонтали
Bgcolor= «цвет»	Цвет фона
Border=n	Ширина рамки таблицы
Bordercolor= «цвет»	Цвет заполнения рамки таблицы
Cellpadding=n	Расстояние между содержимым и рамкой ячеек таблицы
Cellspacing=n	Расстояние между ячейками
Frame Void Above Below Hsides Lhs Rhs Vsides Box Border	Отображение сторон таблицы Границы вокруг таблицы не отображаются Отображается верхняя граница Отображается нижняя граница Отображается верхняя и нижняя границы Отображается левая граница Отображается правая граница Отображается левая и правая границы Отображаются все границы Отображаются все границы
Rules None Group Rows Cols All	Отображение границ между ячейками Границы между ячейками не отображаются Отображаются границы между группами колонок или строк Отображение границ между строками Отображение границ между колонками Все границы между ячейками
Width N N%	Ширина таблицы Задает минимальную ширину таблицы в пикселях (игнорируется, если содержимое ячеек требует для размещения определенного места, чем задано этим атрибутом) Задает, какую часть ширина окна браузера занимает данная таблица

Пример:

<body>

Табличная структура

<br>

<tr>

<th colspan=2> Ячейка заголовка

(Первая строка) </th>

</tr>

<tr>

<td> Ячейка данных (Вторая строка) </td>

<td> Вторая ячейка данных </td>

</tr>

</table>

</body>

Таблица в HTML состоят из строк, а строки из ячеек.

Дескриптор <tr> начинает табличную структуру, а </tr> заканчивает.

Между этими дескрипторами располагаются дескрипторы, описывающие самые мелкие элементы таблицы- ячейки (<th>, </th> или <td>, </td>).

Атрибуты <tr>

Атрибут	Свойство	Назначение
Align	Right/center/left	Выравнивание по горизонтали
Bgcolor	«Цвет»	Заполняющий цвет рамки
Bordercolor	«Цвет»	Заданный цвет таблицы
Valign	Top/Middle/Bottom/Вaseline	Выравнивание по горизонтали

Пример:

<body>

<td> Первая строка таблицы </td>

<td> <code> vаlign =top </code> </td>

</tr>

<td> Вторая строка таблицы </td>

<td> <code> vаlign=middle </code> </td>

</table>

</body>

В HTML располагают 2 категории ячеек: ячейки заголовков <tr> и ячейки данных <td>. Каждый из этих дескрипторов имеет соответствующие концевые дескрипторы.

Атрибуты <td>, <tr>.

Атрибут	Свойство	Назначение
Align	Right/left/center	Выравнивание по горизонтали
Bgcolor	«цвет»	Цвет фона
Bordercolor	«цвет»	Заполняющий цвет рамки
Colspan	n	Ширина ячейки, выраженная в строках
Rowspan	n	Ширина ячейки, выраженная в строках
Width	n	Ширина строки таблицы
Valign	Top/Middle/Bottom/Вaseline	Выравнивание по вертикали

Пример:

<body>

<tr>

<th colspan=5> Заголовок таблицы </th>

<tr>

<td> Отдельная ячейка </td>

<td> Вторая отдельная ячейка </td>

<td> Третья отдельная ячейка </td>

<td> Ячейка 4 </td>

<td> Ячейка 5 </td>

</tr>

<tr>

<td colspan=2> Ячейка 1+2 </td>

<td colspan=2> Ячейка 3+4 </td>

<td> Ячейка 5 </td>

</tr>

<tr>

<td> Ячейка 1 </td>

<td colspan=2> Ячейка 4+5 </td>

</tr>

</body>

Контрольные вопросы

Таблицы в HTML

1. Какими дескрипторами формируются таблицы в HTML?

2.Каково предназначение <tr> и </tr>

3. Перечислите атрибуты дескриптора <table>

4. Приведите пример

5. Расшифруйте : “ frame=above”

6. Каково предназначение <td> и </td>

7. Перечислите атрибуты дескриптора <tr>

8.Перечислите атрибуты дескрипторов <td> и <th>

9.Перечислите атрибуты дескриптора <select>

10. Каково предназначение дескриптора <options>

Тестовые задания

Таблицы в HTML

Вариант 1

Выберите один или несколько правильных ответов

1. Цвет фона таблицы можно изменить с помощью дескриптора

А) bordercolor	C) color
B) bgcolor	D) bedcolor

2. К атрибутам дескриптора <tr> относятся

А) align	C) frame
B) bgcolor	D) valign

3. Целочисленные значения могут принимать атрибуты

А) rules	C) frame
B) valign	D) border

4. Атрибут frame имеет свойство(а)

А) top	C) rows
B) left	D) rowspan

Установите соответствие

Атрибут<td>	назначение
1.colspan	А.Выравнивание по горизонтали
2.rowspan	Б.Ширина ячейки в столбцах
3.valign	В.Выравнивание по вертикали
	Г.Ширина ячейки в строках

Дополните

5. Таблица формируется ____________, а _________выделяют строки

Тестовые задания

Таблицы в HTML

Вариант 2

Выберите один или несколько правильных ответов

1.За отображение сторон таблицы отвечает дескриптор

А) border	C) frame
B) colspan	D) rules

2.К атрибутам дескриптора <td> относятся

А) rows	C) frame
B) bgcolor	D) valign

3.Целочисленные значения могут принимать атрибуты

А) rules	C) frame
B) cellpaddihg	D) border

4.Атрибут rowspan имеет свойство(а)

А) top	C) n
B) left	D) n%

Установите соответствие

Атрибут <table>	назначение
1.cellpadding	А.Выравнивание по горизонтали
2.cellspacing	Б.Расстояние между содержимым и рамкой ячеек таблицы
3.align	В.Выравнивание по вертикали
	Г.Расстояние между рамками таблицы

Дополните

6. _________выделяют строки, которые в свою очередь разбиваются на ячейки заголовков _____________ или ячейки данных__________________

Раздел 3. Списки, таблицы, формуляры

Тема 3.3. Формуляры в HTML.

Содержание учебного материала:

Формуляры.

Виды формуляров.

Дескрипторы <form>, </form>, <input>, их атрибуты.

Поле списка.

Разворачивающееся меню.

Группировка полей и легенд.

Дескрипторы <select>, </select>, <option>, <fieldset>, <fieldset>, <legend>, их атрибуты.

Формуляры (формы) позволяют создавать области HTML для ввода информации пользователя.

Для создания различных областей (полей) используют элементы областей формы: кнопки, текстовые поля, флажки, memo, поля для выбора файла, скрытые элементы управления.

Формуляр вставляется с помощью <form>, </form>.

Атрибуты <form>:

1) action=URL- адрес для отправки заполненного формуляра

2) method=get/post- способ передачи формуляра

method=get- заставляет Web-браузер передавать все данные формуляра по URL- адресу, заданному в action

method=post- заставляет Web- браузер связываться с сервером, обрабатываемым формуляром; после установления связи передает сами данные.

3) ansubmit= «script»- процедура, активизирующая при отсылки формы на сервер

4) onreset= «script»- процедура, активизирующая при сборе (очистке) формы

С помощью дескриптора <input>, в формуляре можно описывать элементы ввода управления.

Замечание: атрибуты name, type обязательно для <input> (концевого не существует).

Атрибуты <input>:

1) align= Right/left/center выравнивание по горизонтали;

2) Accesskey= «символ»- клавиша быстрого доступа к элементу.

3) Checked- устанавливается с типом type=radio или checkbox, устанавливающей переключатель.

4) Disabled- блокирующий элемент, не может использоваться с элементом hidden

5) Readonly- указывает, что содержимое этого поля не может быть изменено, используется с type=text

6) Maxlenght=n- максимальное число букв в тесте

7) Name= «имя»- приписывает элементу имя

8) Size=n (для type=text/password) позволяет указать максимальное количество символов, отображаемых в поле (видимый размер поля). Для прочих элементов позволяет указать занимаемый по горизонтали размер в пикселях

9) Src=URL-URL рисунка для type=image

10) Type=checkbox- флажки для многовыборных вариантов

Type=button- пользовательская командная кнопка, используемая для выполнения процедуры, связанной с событием нажатия этой кнопки (unclick). В атрибуте value задается надпись на кнопке

Type=submit- командная кнопка, отправляющая на сервер внесенные в формуляр данные

Type=reset- командная кнопка, возвращающая формуляр к исходному состоянию (сбрасывает)

Type=file- создает поле ввода, которое дает возможность пользователю, заполняющему формуляр, указать файл, пересылаемый на сервер вместе с формуляром.

Type=image- пользовательская кнопка на которой отображена иллюстрация

Type=password- создает защищенное поле ввода (вместо текста *)

Type=hidden- передает на сервер параметры, которые не могут быть изменены пользователем.

Type=radio- радио-кнопка.

Группировка полей и легенд.

<fieldset>, </fieldset> тематически объединяют близкие и рядом расположенные поля формуляра в группу и выделяют её визуально.

<legend>,<legend> приписывают группе полей текст комментарий.

<legend> имеет атрибут align

Меню

Пара дескрипторов <select>, </select> вставляют в существующий формуляр разворачивающейся memo или поля списка

Отдельные пункты memo или элементы списка определяются <options>.

Атрибуты <select>

1) Disabled- блокировка доступа к списку.

2) Multiple- разрешение использовать более одной опции.

3) Name=«имя»- имя поля

4) Size=n-количество одновременно изображаемых пунктов.

Атрибуты options.

1) disabled

2) label= «текст»- текст элемента списка

3) selected- выбранный по умолчанию элемент списка

4) value= «значение»- передаваемое значение

Контрольные вопросы

Формуляры в HTML

1. Каково предназначение формуляров

2. С помощью какого дескриптора вставляется формуляр?

3. Перечислите атрибуты <form>

4. Какие элементы формы используются для создания различных областей?

5. Для чего используется дескриптор <input>?

6. Перечислите атрибуты <input>

7. Расшифруйте “type=checkbox”

8. Каково предназначение дескриптора <fieldset> и</fieldset>

9. Расшифруйте « type=image”

10. Расшифруйте “action=URL”

Тестовые задания

Формуляры в HTML

Вариант №1

Выберите один или несколько правильных ответов

1.К элементам формы относят

А) ссылки	D)меню
B) кнопки	E)графическое изображение
C) легенды	F)графические поля

2.Атрибут method дескриптора <font> может принимать значение(я)

А) post	C) get
B) jet	D) нет верного ответа

3. К атрибуту(ам) дескриптора <input> относят

А) action	C) href
B) valign	D) нет верного ответа

4. Целочисленное значение принимает(ют) атрибуты

А) size	C) disabled
B) maxlenght	D) ) maxwidth

5. Атрибут type может принимать значение(я)

А) radio	C) file
B) imades	D) url

6. За группировку полей отвечает(ют) дескриптор(ы)

А) <fieldset>	D)<font>
B) </fieldset>	E) </font>
C) <input>	F) </input>

Установите соответствие

Атрибут	Значение
1.disablet	А. текст элемента списка
2.label	B. передаваемое значение
3. value	C. выбранный по умолчанию элемент списка
	D. блокировка доступа к списку

Дополните

8.Отдельные пункты меню или элементы списка определяются ___________

9. Атрибут align=bottom располагает _______________________

Тестовые задания

Формуляры в HTML

Вариант №2

Выберите один или несколько правильных ответов

1.К элементам формы относят

А) ссылки	D)меню
B) флажки	E)текстовые поля
C) легенды	F)графические поля

2.Значение “script” принимает(ют) атрибут(ы)

А) action	C) input
B) onreset	D) onsubmit

3. К атрибуту(ам) дескриптора <input> относят

А) action	C) src
B) align	D) нет верного ответа

4. Атрибут readonly используется с type=

А) password	C) image
B) text	D) нет верного ответа

5. Атрибут type может принимать значение(я)

А) radio	C) file
B) src	D) botton

6. За описание элементов ввода и управления отвечает(ют) дескриптор(ы)

А) <fieldset>	D)<option>
B) </fieldset>	E) </option >
C) <input>	F) </input>

Установите соответствие

Атрибут	Значение
1.disabled	А. текст элемента списка
2. selected	B. выбранный по умолчанию элемент списка
3. multiple	C. разрешение использовать не более 1 опции
	D. блокировка доступа к списку

Дополните

8.Разворачивающееся меню вставляется дескриптором(и)___________

9.Атрибут align=top располагает ________

Раздел 4. Гиперсвязи и ссылки

Тема 4.1. Организация гиперсвязей.

Содержание учебного материала:

Гиперсвязи в HTML-документах.

Категории ссылок.

Дескрипторы <a>, </a>, их атрибуты

Главная особенность гипертекста – возможность связывания документов друг с другом путем создания гиперсвязей.

Ссылки можно сделать на текст, графику, звуковые файлы или программы.

Гиперсвязи можно встроить в любом месте HTML – документа – в графику, таблицы, в текстовые абзацы.

Для описания гиперсвязей в web – документах используется <a>, </a> («якорь»).

Между <a>, </a> может находиться только текст, графика и заголовки.

Текст, располагающийся между <a>, </a> обычно изображается браузерами в цвете.

Атрибуты <a>, </a>

атрибут	свойство	функция
href	URL	Целевой адрес гиперсвязи
Name	«метка»	Имя связи
Title	Текст	Имя цели гиперсвязи
target	фрейм	Целевой фрейм (указывает браузеру, где отображать результат отработки данной гиперсвязи; в качестве значения атрибута браузер ожидает определенного ранее названия фрейма или окна).

Рекомендации по организации гиперсвязей:

1. для включения в текст большого числа гиперссылок рекомендуется использовать списки;

2. текст гиперссылки не должен быть длинным;

3. вставляйте в текст необходимые ссылки;

4. не размещайте 2 <a>, </a> рядом один с другим в тексте документа, не вставив между ними никакого разделителя;

5. выделяйте гиперссылки в одном стиле;

6. в качестве текста гиперсвязей можно использовать графику.

Гиперссылку можно указать на:

· Позицию в своем документе;

· Другой документ на своем сервере;

· Произвольный объект по любому адресу Интернета (a href=http://www/AltaVista.com> AltaVista</a>).

Пример:

В папке 2 файла: 1.html, 2.html.

1.html

<body>

<table>

……..

</table>

</body>

2.html

<body>

<a href=”1.html”>Ссылка</a>

</body>

Контрольные вопросы

Организация гиперсвязей.

1. Назовите главную особенность гипертекста

2. Куда можно встраивать гиперсвязи?

3. На что можно указать гиперссылку ?

4. Приведите пример?

5. Каким браузером отображается текст, расположенный между <a> и </a>?

6. Назовите главную особенность гипертекста

7. Куда можно встраивать гиперсвязи?

8. Для чего используют дескрипторы <a> и </a>?

9. Что может находиться между дескрипторами <a> и </a>?

10. Перечислите атрибуты дескриптора <a>?

11. Расшифруйте «href=URL»?

12. Перечислите рекомендации по организации гиперсвязей?

Раздел 5. Мультимедиа

Тема 5.1. Встраивание звука и фильма в HTML. Бегущая строка. Линии

Содержание учебного материала:

Дескрипторы <hr>, <bgsound>, их атрибуты.

Видео атрибуты <img>.

Линия. Встраивание звука и фильма в HTML.

Линия – простейший графический элемент.

Для встраивания горизонтальных линий в web – страницах используют <hr>.

Для увеличения расстояния между линиями и предыдущим (последующим) текстом применяют <br> или <p>.

Атрибуты <hr>

атрибут	свойство	функция
align	Center, Left, Right	Выравнивание по горизонтали
Noshade	-	Выключение теней
Size	N	Толщина линии
width	N, n%	Длина линии

Звук. Встраивание звука в HTML.

Звуковые форматы, распознаваемые Internet Explorer: wav, midi, all.

С помощью <bgsound> Internet Explorer загружает фоновый звуковой файл и проигрывает его, как только документ будет загружен.

Атрибуты <bgsound>

1. Loop=n/infinite – повторение звуков

Loop=n определяет n – кратное воспроизведение звукового файла.

Loop=infinite повторяет звуковой файл до тех пор, пока воспроизведение не будет прервано.

2. src=URL – исходный URL звукового файла.

Для воспроизведения звукового файла с помощью <object> следует задать в нем тип объекта с помощью атрибута type и адрес звукового файла с помощью атрибута data.

ПРИМЕР: Проигрывание мелодии, хранящейся в файле m.wav:

Встраивание AVI- фильмов в HTML.

Видео – атрибуты <img>:

1. dynsrc=URL – исходный URL AVI – файла;

2. Loop=n/infinite – повторение фильма

Loop=n определяет n – кратное повторение фильма.

Loop=infinite повторение фильма тех пор, пока пользователь не прервет воспроизведение, не загрузит другой web – документ или не нажмет кнопку для остановки воспроизведения.

3. start=fileopen соответствует установке, используемой по умолчанию, и начинает фильм по окончанию загрузки.

Start= mouseover запускает фильм, если пользователь проводит указателем мыши по полю демонстрации фильма.

С окном фильма можно делать все, что с обычной иллюстрацией.

В современных стандартах видеоклипы различных форматов (avi, jpeg и др.) рассматриваются как специфические объекты, описываемые <object>. В этом дескрипторе задается среди прочих атрибутов, тип обрабатываемого объекта, что позволяет браузеру выбрать утилиту для его интерпретации.

Пример:

Type=”video/avi”

Type=”application/mpeg”

Атрибуты <object>

1. align=center/right/left – выравнивание по горизонтали;

2. border=n – ширина рамки вокруг поля показа видео;

3. data=”URL” – URL объекта;

4. height=n/n% – высота объекта;

5. hspase=n – расстояние до объекта по горизонтали

6. vspase n – расстояние до объекта по вертикале

7. width-n/n% – ширина объекта

8. standby=”текст” – текст, отображаемый в ходе загрузки объекта

9. type= “тип объекта” – тип объекта

10. usemap=”ссылка”

Бегущая строка

Текст, выделенный <marguee>, </marguee>, изображается браузером в виде бегущей строки.

Атрибуты <marguee>, </marguee>

атрибут	свойство	функция
align	Center, Left, Right	Выравнивание по горизонтали
Behavior		Поведение бегущей строки
	Scroll	Строка «вбегает» со стороны, определенной атрибутом Direction, в пустое поле и выходит из него в противоположной строке
	Slide	Аналогично предыдущему, но текст не «выбегает» на др. стороне поля, а останавливается
	alternate	Позволяет началу текста появиться в окне, «добежать» до противоположного конца окна, остановиться и затем начать движение в противоположном направлении
Bgcolor	«цвет»	Цвет фона
Direction	Left, Right	Направление движения строки
Height	n/n%	Высота поля бегущей строки
Width	n/n%	Ширина поля бегущей строки
loop	n/infinite	Повторяет бегущую строку до тех пор, пока отображение документа не будет прервано

Контрольные вопросы

Встраивание звука и фильма в HTML. Бегущая строка. Линии

1. Перечислите дескрипторы, формирующие звук в HTML.

2. Перечислите дескрипторы формирующие строки, линии в HTML.

3. Каким образом можно внедрить фильм в HTML.

4. Назовите атрибуты вышеперечисленных дескрипторов.

Тестовые задания

Организация гиперсвязей. Встраивание звука и фильма в HTML. Бегущая строка. Линии

Вариант №1

Выберите один или несколько правильных ответов

5. Гиперсвязь можно встроить в

А) текст	C) звук
B) графику	D) ссылку

2. Атрибутом (ми) дескриптора <hr> является (ются)

А) behavior	C) noshade
B) align	D) loop

3 Атрибут hspase может принимать значение (я)

А) текст	C) loop
B) URL	D) n

Дополните

4. Для описания гиперсвязей используют дескриптор ____________

5. Атрибут <href> может принимать значение______________

6. Видео – атрибут dynsrc дескриптора <img> принимает значение ____________ и означает: ______________

7. Атрибут direction отвечает за:______________ и может принимать значения: ____________________

Установите соответствие

Атрибут	Назначение
1.hspase	A. Расстояние до текста по горизонтали
2.vspase	B.Задание высоты иллюстрации
3.height	C.Расстояние до текста по вертикали
	D.Задание ширины иллюстрации

Элемент	Дескриптор
1.линия	A. <marquee>
2.бегущая строка	B.<hr>
	C.<br>

Тестовые задания

Организация гиперсвязей. Встраивание звука и фильма в HTML. Бегущая строка. Линии

Вариант №2

Выберите один или несколько правильных ответов

1.Гиперсвязь можно встроить в

А) таблицу	C) текст
B) графику	D) ссылку

2. Атрибутом (ми) дескриптора <marquee> является (ются)

А) align	C) standby
B) border	D) noshade

3. Атрибут standby может принимать значение (я)

А) текст	C) loop
B) URL	D) n

Дополните

4. Гиперссылка может указывать на _________, на ________ , на ____________

5. Атрибут <src> может принимать значение_______________

6. Для увеличения расстояния между линиями и предыдущим (последующим) текстом применяют ________

7. 4. Атрибут behavior может принимать значение (я):_______________ и отвечает за: ___________

Установите соответствие

Атрибут	Назначение
1.href	A.Целевой адрес гиперсвязи
2.title	B.Целевой фрейм
3.target	C.Целевое имя
	D.Имя цели гиперсвязи

Элемент	Дескриптор
1.звук	A. <object>
2.avi - фильм	B.<marquee>
	C.<bgsound>

Раздел 5. Мультимедиа

Тема 5.2. Иллюстрации в HTML-документах. Изображение-карта

Содержание учебного материала:

Дескриптор <img>, его атрибуты.

Imagemаps.

Автономная imagemаps-иллюстрация, ее синтаксис.

Usemap-атрибут.

Дескрипторы <map>, </map>, <area>.

Атрибуты дескриптора <area>.

Вывод иллюстрации в отдельном окне.

Иллюстрации в HTML – документах.

Графические форматы: gif, jpeg, png (для сетевых иллюстраций).

Gif:

1. 256 цветов;

2. сжатие информации без потерь;

3. поддерживает поточечный формат передачи;

4. позволяет сохранить в одном файле несколько изображений, т.е. позволяет сохранить анимацию;

5. существует опция прозрачности: иллюстрации могут быть объявлены прозрачными, т.е. сквозь них можно видеть фон.

Jpeg:

1. 16,7 миллионов цветов;

2. сжатие с потерей информации;

3. прогрессивная разверстка (внутренняя переструктуризация jpeg – данных: иллюстрация делится на несколько чересстрочных частей, а несколько иллюстраций полного размера на различного уровня качества)

Для внедрения изображения будем использовать дескриптор <img> (</img> не предусматривается).

Примечание: для <img> традиционными стали форматы gif, jpeg.

Атрибуты <img>:

атрибут	значение	назначение
Align	Center/Left/Right	Выравнивание по горизонтали
Аlt	«строка»	Текст, замещающий иллюстрацию в текстовом режиме отображения
Border	n	Ширина рамки вокруг иллюстрации
Height	N/n%	Предварительное задание высоты иллюстрации
Width	N/n%	Предварительное задание ширины иллюстрации
Hspace	n	Расстояние до текста по горизонтали
Vspace	n	Расстояние до текста по вертикали
Src	URL	Исходный файл иллюстрации

Пример: <img src=”images.gif” alt=”картинка”>

Если рисунок встроен в текст, то существует несколько вариантов его расположения:

Align=left – текст обтекает рисунок, который располагается слева;

Align= Right – текст обтекает рисунок, который располагается справа;

Align= top – рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста;

Align= middle – рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка;

Align= bottom –рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста;

Изображение – карта.

Иногда возникает потребность ограничивать различные ссылки на одном графическом изображении. Можно, конечно, в этом случае «разрезать» изображение на несколько необходимых частей и каждой дать гиперссылку на соответствующий файл. Но при этом разрушается целостность композиции. Что же делать?

Существует возможность установить несколько гиперссылок с одного рисунка, не «разрезая» его.

Такое изображение называется картой графических ссылок (imagemaps). Imagemaps – размеченная графика, располагающая фиксированными чувствами к щелчку мыши по областям.

Щелчок на подобной области дает web – браузеру обновленный URL и загружается новая страничка, либо в результате щелчка на сервер посылаются координаты позиции щелчка, а сервер определяет в какой области он будет выполнен, и предпринимает необходимые действия.

Imagemaps – иллюстрация встраивается в web – документ традиционными способами с помощью <img>, который дополнительно содержит ismap – атрибут.

Пример: HTNL – код, ссылающийся на файл на сервере может выглядеть так:

Файл с определениями, находящимися на сервере, содержит точное описание чувствительных к щелчкам мыши областей графики и прописывает их URL.

При этом для каждой отдельной области предусматривается строка, в которой находятся сведения о форме области, ее координатах и URL в текстовой форме.

1. простейшая форма области – прямоугольник (rectangle);

2. пары координат дают сведения о положении верхнего левого и нижнего правого угла;

3. форма области circle означает окружность; первые два числа соответствуют координатам цента окружности, третьим числом является радиус;

4. форма области polygon соответствует многоугольнику; здесь указано столько координатных пар, сколько требуется для обозначения чувствительной к щелчкам мыши области.

Imagemaps – иллюстрацию можно использовать и в тех случаях, когда не имеется доступа к серверу – для автономной работы и переадресации в пределах одного документа и документов, хранящихся на вашем компьютере.

Для автономной imagemaps – иллюстрации <img> содержит как минимум, кроме атрибута src, атрибут usemap .

Синтаксис: <img usemap=ссылка>

Атрибут usemapсообщает веб – браузеру, что в этом HTML – документе определены позиции, на которые следует выполнить переход при щелчках мыши на заданных областях иллюстрации. При этом в качестве ссылки используют имя, определенное в map – дескрипторе, т.е. фактически – имя части HTML – файла, содержащей описание координатных областей.

Пример: HTML – код, ссылающийся на часть HTML – документа, содержащую определенные координатные области иллюстрации:

В отличии от серверного варианта обслуживания imagemaps – иллюстрации (атрибут ismap) здесь <a> не нужен.

HTML – документ, в который встраивается imagemaps – графика, ориентированная на локальную обработку, должна содержать описание «чувствительных» к щелчкам мыши областей.

1. описание может находиться в любой части документа и ограничивается <map>, <map>.

2. для каждой отдельной «чувствительной к щелчку мыши» области между <map>, <map> вставляется <area> с необходимыми атрибутами.

<map> имеет атрибут – name=»Имя описания»

Пример: в приведенном выше примере описание imagemap – иллюстрации должно располагаться между дескрипторами <map name= “Coordinates”> и </map>.

Атрибуты <area>:

1. <area cords=”Координаты”>

Замечание:

· Если область имеет форму прямоугольника (shape=rect), то в качестве значений атрибута cords приводится две пары координат (левого верхнего и правого нижнего угла прямоугольника на экране) в пикселях

Пример: cords=”0,0,99,49”

· Координаты отсчитываются от левого верхнего угла объекта (imagemap – иллюстрации)

· Если область имеет форму окружности (shape=circle), то в качестве значений этого атрибута приводится 3 числа, определяющие положение центра окружности и ее радиус в пикселях

Пример: cords=”50,50,25”

· Если область имеет форму прямоугольника (shape=poly), то список координат содержит по паре чисел для каждой вершины многоугольника в порядке построения.

Пример: cords=”0,0,99,49,49,49” - треугольник

2. <area href=URL>

Href задает ссылку на URL, к которому переходит веб – браузер как только пользователь выполняет щелчок мышью в области, определенной дескрипторами <area>

3. <area shape=default/circle/rect/poly>

Стандартом дописывается объявление 3-х различных форм: прямоугольника, многоугольника и окружности

Атрибуты shape=rect и shape= default задают прямоугольную область

shape=circle задает окружность

shape=poly задает многоугольник

Пример: определяющая часть для imagemap – иллюстрации в HTML – документе может выглядеть так:

</map>

Самостоятельно: изначально предполагаем, что нам дан рисунок компьютера; подготовлены файлы с описанием его монитора, процессора (chapter1.html, chapter2.html). Задача: создать титульную страницу и поместить на ней изображение компьютера; при этом щелчок на изображение монитора должен переводить на страницу с описанием монитора. На процессор – к странице с описанием процессора.

<body>

</body>

</map>

Контрольные вопросы

Иллюстрации в HTML-документах. Изображение-карта

1. Назовите графические форматы

2. Для чего используется дескриптор <img>?

3. Какие форматы стали стандартными для дескриптора <img>?

4. Перечислите атрибуты <img>

5.Расшифруйте «align=middlе»

6.Расшифруйте «width=URL»

7.Какие существуют варианты расположения рисунка, если он встроен в текст?

Дайте понятие «карте-ссылок»

8.Куда вставляются imagmaps – иллюстрации?

9.Когда можно использовать imagmaps – иллюстрации?

10.Опишите чувствительные к щелчкам мыши области

11.Перечислите атрибуты <area>

12.Проиведите пример imagmaps – иллюстраций

Тестовые задания

Иллюстрации в HTML-документах. Изображение-карта

Вариант 1

Выберите один или несколько правильных ответов

1. Сколько областей должна содержать imagemaps графика, ориентированная на локальную обработку

A) 4	B) 5
C) 2	D) 3

2. Форма области circle обозначает

A) овал	B) окружность
C) квадрат	D) радиус

3. Один из атрибутов дескриптора <area>

A) координата	B) точка
C) кривая	D) линия

4. Что содержит файл с определениями, находящимися на сервере

A) начертания	B) описание чувствительных к щелчку мыши областей
C) URL-адрес	D) имя

5. От какого угла отсчитывается координата

A) от левого верхнего	B) от правого нижнего
C) от левого нижнего	D) от правого верхнего

Дополните:

6. Карта ссылок - это__________________________________

Тестовые задания

Иллюстрации в HTML-документах. Изображение-карта

Вариант 2

Выберите один или несколько правильных ответов

1.Графическими форматами являются:

A) gif, peg, pug	B) gyf, pug, pag
C) peg, pug, gyf	D) pig, pog, peg

2. Какой дескриптор используют для внедрения изображения

A) <img>	B) <ol>
C) <ul>	D) <href>

3. Сколько существует вариантов расположения рисунка, если он встроен в текст

A) 4	B) 5
C) 2	D) 3

4. Расшифруйте align=top:

A) рисунок располагается справа текстовой строки	B) рисунок располагается слева текстовой строки
C) рисунок располагается внутри текстовой строки	D) рисунок располагается по центру

5. Какие форматы стали стандартными для дескриптора <img>

A) pog, pig	B) gif, peg
C) gif, pug	D) pug, pag

6.Расшифруйте border=n:

A) расстояние до текста по вертикали	B) исходный URL-иллюстрации
C) ширина рамки вокруг иллюстрации	D) расстояние до текста по горизонтали

Раздел 6. Фреймы

Тема 6.1. Фреймы: основные положения, описание структуры. Организация ссылок между фреймами

Содержание учебного материала:

Фреймы: основные положения, описание структуры.

Виды фреймов.

Дескрипторы <frameset>, </frameset>, их атрибуты.

Сложные фреймы.

Организация ссылок между фреймами.

Фрейм - обособленная область Web-документа со своими полосами прокрутки.

С помощью фреймов Web-страница разделяется на несколько взаимосвязанных областей. При этом можно открыть документ в первом фрейме по ссылке, которая находится в другом фрейме.

Фреймы предоставляют уникальную возможность размещения информации точно в нужном месте окна браузера. Так, можно поместить фрейм в нижней части окна, и независимо от прокручивания содержимого в основной части окна - эта область не изменяет своего положения.

HTML - документы, отображенные в отдельных фреймах, принципиально зависят один от другого. Теоретически, используя один фрейм, можно путешествовать по всей сети Internet, в то время, как содержимое остальных представленных на экране режимов остается без изменений.

Основой Web- страницы, состоящей из фреймов, является рамочный HTML- фрагмент, содержащий все определения структуры фреймов. Этот фрагмент содержит также ссылки на отображаемые внутри фреймов HTML-документы.

Для создания фреймовой структуры применяется <frameset>, </frameset>, которые заменяют <body>, </body> и используется для разделения экрана на области.

Допускается вложение фреймовых областей, то есть элементом данной фреймовой области, заданной дескриптором <frameset>, может быть отдельный фрейм, а может быть вложенная фреймовая область, описываемая собственным < frameset>.

Фреймы бывают вертикальные и горизонтальные. Все способы разделения окна применимы для атрибутов <frameset> cols и rows.

Отводимое под фреймы пространство можно указать в процентах от общих размеров окна браузера (%), частями (*) или в абсолютных величинах (пикселях).

Атрибуты <frameset>:

Атрибут	Способ задания	Описание	Пример
cols	%,%	вертикальное разделение окна браузера	<frameset cols= «50%,50%»> </frameset>
cols	число, %,*		<frameset cols= «150,30%»> </frameset> Под первый вертикальный фрейм отводится 150 пикселей, под второй – 30% доступного пространства, для третьего – вся остальная область окна браузера.
rows	число, число	горизонтальное разделение окна браузера	<frameset rows= «30,70»> </frameset>. Задание горизонтальных фреймов с точным указанием их высот: верхней -30, нижней-70 пикселей.
rows	%,*		<frameset rows= «30%*»> </frameset> Задание горизонтальных фреймов, когда первый займет-30% от высот окна браузера, второй- вся остальная область.

Внутри <frameset> находится <frame> (не имеет концевого дескриптора), который указывает на HTML- документ, предназначенный для изначальной загрузки в созданные фреймы.

Атрибуты фрейма определяют его формат и другие особенности, а фрейм без атрибутов создает лишь пустое пространство в окне браузера.

Атрибуты <frame>:

1. frameborder=0/1 - отображает/скрывает границу фрейма. Если frameborder=0, то граница фрейма скрыта, в противном случае – отображена;

2. marginheight=n – расстояние между содержимым фрейма и верхним/нижним краями;

3. marginwidth=n - расстояние между содержимым фрейма и левым/правым краем;

4. name=имя фрейма;

5. noresize - запрещение измерения размера пользователем (исключает возможность изменения размеров фрейма);

6. scrolling=yes/no/auto - показ/скрытие полос прокрутки. Если атрибут примет значение auto, то будет выполняться установка, используемая по умолчанию.

scrolling=yes - позволяет отображать полосы прокрутки на экране даже тогда, когда содержимое фрейма может уместиться полностью в фрейм;

7. src=URL - HTML-документ данного фрейма (содержимое).

Пример_1. Пусть нам необходимо разбить рабочую область окна браузера на два фрейма с именами fr1, fr2, в которые будет загружаться одноименные Web-документы.

В первый фрейм поместим фото b/jpg, второй s.jpg

Fr1.html

<body>

</body>

Файл, где будет храниться фреймы:

<head>

<title> файл с фреймами </title>

</head>

</frameset>

Пример_2. Пусть необходимо создать фреймовую структуру, где горизонтальному фрейму «Заголовок» отведено 15%, вертикальному («Меню») - 25%, а фреймы «Содержимое» - все остальное пространство.

Заголовок
Меню	Содержимое

</frameset>

Организация ссылок между фреймами

Используется атрибут target=«имя фрейма» дескриптора гиперсвязи <a>.

Web-страница, на которую указывается ссылка дескриптора гиперсвязи <a>, как правило, изображается в том же окне (или фрейме), в каком будет активизирована связь.

Контрольные вопросы

Фреймы: основные положения, описание структуры. Организация ссылок между фреймами

1. Что такое фрейм?

2. Для чего применяются фреймы?

3. Что является основой Web- страницы, состоящей из фреймов?

4. Какие бывают виды фреймов?

5. Какие атрибуты имеет дескриптор <frame>?

6. Как организуются ссылки между фреймами?

7. Для чего применяются атрибуты дескриптора <frameset> cols и rows?

8. Для чего применяются дескрипторы <frameset> и </frameset>?

Раздел 6. Фреймы

Тема 6.2. Встроенные фреймы. Элементы noframes

Содержание учебного материала:

Дескрипторы <noframes>, </noframes>, <iframe>.

Встроенные фреймы

В HTML предусмотрен специальный дескриптор <iframe>, который позволяет создавать фрейм строки текста.

Задаваемые для данного дескриптора атрибуты не отличаются от соответствующих атрибутов <img> и <frame>.

Между <iframe> и </iframe> можно поместить текст, подлежащий показу браузера, неспособного отображать фреймы, или в котором такая возможность заблокирована.

Пример_1

<body>

В этой строке вставлено

Вы можете

<a href= «c.html»> посмотреть содержимое фрейма </a>

</iframe>

</body>

Элемент noframe

Web-браузеры, которые не умеют интерпретировать дескрипторы <frameset> и </frameset>, <frame>, так как не поддерживают работу с фреймами, просто игнорируют их.

Для таких браузеров следует создавать в документе фрагмент, ограниченный <noframe> и </noframe> и содержащий описание информации, отображаемой на экране этих браузеров.

Браузер, способный оперировать с фреймами, распознает эти дескрипторы и сознательно проигнорирует текст между ними.

Пример_2

<head>

</head>

<body> <p> нужны фреймы </p>

</body>

</noframe>

</frameset>

Контрольные вопросы

Встроенные фреймы. Элементы noframes

1. Что такое фрейм?

2. Для чего применяются фреймы?

3. Для чего применяется дескриптор <iframe>?

4. Для чего применяются дескрипторы <frameset> и </frameset>?

5. Для чего применяется элемент noframes?

Раздел 7. Каскадные таблицы стилей

Тема 7.1. CSS

Содержание учебного материала:

Каскадные таблицы стилей (CSS).

Назначение CSS.

Типы CSS.

Общие сведения. Селекторы

Начиная со спецификации HTML 4.0, рекомендуется использовать для оформления страниц каскадные таблицы стилей (CSS). При этом многие теги и атрибуты, относящиеся к оформлению, отменяются.

CSS - эффективное средство автоматизации стилевого оформления HTML-документов.

Использование стилей для оформления электронных документов (в том числе и Web-страниц) позволяет:

1) Унифицировать оформление однотипных структурных фрагментов (абзацев, ячеек, таблиц, иллюстраций и подписей под ними и так далее) как в пределах одного документа, так и в рамках совокупности документов, принадлежащих одному проекту (например, одному узлу);

2) Упростить модификацию стиля по всей совокупности одинаково оформленных документов (например, при необходимости устранения обнаруженных ошибок оформления);

3) Решить проблему вывода одного документа на различных устройствах отображения.

Типы таблиц стилей:

1. Внутренние - могут быть объявлены в любом месте внутри действительного кода, с помощью атрибута style. Определяет свойства конкретного элемента.

Синтаксис:

<элементы STYLE= «Стилевое свойство1: значение1; стилевое свойство2:значение2;»>

Например, вместо

Пример_1

<p align= «right»> <font size= «-1»> Ну погоди!...

<br>

<i> (Из мультфильма) </i> </font> </p>

Заменится на:

Ну, погоди...

(Из мультфильма) </span> </p>

2. Встроенные - указывают свойство в пределах <style> и </style>, которые находятся внутри заголовка документа.

Используются, когда встречаются повторяющиеся свойства. Их можно определять для любого тега HTML заранее, и они будут впоследствии применяться к нему автоматически.

Синтаксис таблиц стилей таков: пишется имя элемента HTML, для которого определяется стиль, а после следует блок определения стиля заключенный в фигурные скобки.

Пример_2

<style>

body {background-color: # BABAAO; color:rgb(29,29,24);}

</style>

После этого в самом тексте HTML-документа достаточно указать тег <body>, и к нему автоматически будет применены данные цвета фона и текста.

Например, вместо выравнивания заголовков по центу 3 раза можно написать в таблице стилей; h1,h2 {text-align: center;} и после этого просто указать в документе теги <h1> и <h2>, содержимое которых будет автоматически центрироваться.

Замечание: в таблицах стилей, чтобы определять стиль сразу для нескольких элементов, мы перечисляем их через запятую.

Пример_3

<body link= « # 634438» v link= «# 634438» alink=black> заменяется на:

a: link, a: visited {color: # 634438;}

a: active {color: black;}

Иногда в первом HTML-документе определяется один и тот же стиль для текста эпиграфа, а другой стиль для подписи к эпиграфу и все они расположены внутри элемента <div>.

В этом случае необходимо определить несколько различных стилей для первого элемента, то есть у нас должно быть три различных стилевых варианта для элемента <div>.

В CSS они называются классами.

Чтобы отличить эти элементы друг от друга, у них придется установить атрибут class=, приблизительно так:

В таблице стилей эти классы можно определить так:

div epig {text-align: justify;

font-size: smaller;

width :130;}

div pdps {font-style: italic;

text-align=right;}

div ab {text-align: justify;

text- indent: 2em;}

Замечание1: практически все другие элементы также могут иметь атрибут class;

Замечание2: если необходимо, чтобы определение класса было доступно всем элементам, его можно определить так:

.pdps {font-style: italic;

text-align; right ;}

Замечание3: кроме стилевых свойств элементов HTML и классов можно определить свойства так называемых идентификаторов (это связано с тем, что у любого элемента HTML может быть атрибут id - его уникальное имя в данном документе). Для определения в таблице стилей свойств для элемента, имеющие определяемый идентификатор id=, это можно сделать так:

.cool {color: white;

background-color: black ;}

Тогда элемент под именем cool (# <div id= «cool»>) будет найден указанными свойствами.

3. Внешние - вся таблица стилей (без <style>, </style>) пишется в отдельном файле с расширением .css, а затем ее подключают во все HTML- документы, которые должны ее исполнять.

Например, если файл таблицы стилей - m.css, то в <head> каждого из использующих HTML-документов необходимо вписывать фразу:

Существует и другой способ «подключения» стилевой таблицы из внешнего файла - директива @import

Пример_4

@import url(m.css);

</style>

Контрольные вопросы

CSS

1. Что такое каскадные таблицы стилей CSS?

2. Какие возможности предоставляет использование каскадных таблиц стилей CSS для оформления электронных документов?

3. На какие типы делятся каскадные таблицы стилей CSS?

4. Опишите синтаксис внутренних каскадных таблиц стилей CSS.

5. Для чего применяются внутренние каскадные таблицы стилей CSS?

6. Для чего применяются встроенные каскадные таблицы стилей CSS?

7. Опишите синтаксис встроенных каскадных таблиц стилей CSS.

8. Для чего применяются внешние каскадные таблицы стилей CSS?

Раздел 8. Web технологии

Тема 8.1. Виды web – технологий (1).

Содержание учебного материала:

Динамические web-страницы.

Клиентские технологии (HTML, Java-аплеты, XML, XSL, Flash, DHTML, CSS, JavaScript).

Серверные технологии (SSI, ASP, Java- сервлеты, CGI, PHP, Perl).

HTML

HTML, Hyper Text Markup Language, или, по-русски, «язык разметки гипертекста», является фундаментальной, базовой технологией Интернета. Несмотря на бытующее среди пользователей Всемирной сети мнение, HTML является полнофункциональным языком программирования, обладающим практически всеми чертами, характерными для других аналогичных языков. Практически все содержимое web-узлов, которое отображается на экране подключенных к Интернету компьютеров, является набором документов, содержащих программный код HTML. HTML позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять в дизайн сайта звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой. Файлы, содержащие гипертекстовый код, имеют расширение .htm или .html.

Примечание: HTML, Hyper Text Markup Language (язык разметки гипертекста) — язык, используемый для создания документов в Интернете. HTML-документом называется файл, содержащий код HTML. Такие документы являются основным информационным наполнением web-узлов, они позволяют отображать текст, графику, аудио- и видеоинформацию, а также другие компоненты ресурсов Интернета.

JAVA

Язык программирования Java, разработанный около восьми лет назад компанией Sun Microsystems и напоминающий по структуре и синтаксису хорошо знакомый многим программистам С, существует сегодня в Интернете в двух вариантах: JavaScript и собственно Java. Первый вариант языка является всего лишь надстройкой стандарта HTML и значительно расширяет возможности документа, созданного в этом формате. Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в броузер интерпретатор языка воспринимает и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно. Модуль Java в отличие от JavaScript не интегрируется в использующую его страницу, а существует как самостоятельное приложение с расширением .classили, выражаясь научным языком, апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой, но загружается, инициализируется и запускается на исполнение в виде отдельной программы, в фоновом режиме.

С помощью технологии Java можно придать своей странице элементы интерактивности, формировать, компоновать и полностью контролировать формат всплывающих окон и встроенных фреймов, организовывать такие активные элементы, как «часы», «бегущие строки» и иную анимацию, создать чат. Большинство web-камер, передающих на сайт «живое» изображение, также работают на базе соответствующих приложений Java.

Среди достоинств этой технологии следует отметить отсутствие необходимости устанавливать и настраивать на сервере какие-либо дополнительные модули, обеспечивающие работу Java-программ. Главный недостаток Java заключается в том, что пользователи броузеров старых версий, не поддерживающих компиляцию данного языка, воспринимать объекты, созданные при помощи Java и JavaScript, не смогут.

CGI

Технология CGI (Common Gateway Interface) подразумевает использование в составе ресурса Интернет интерактивных элементов на базе приложений, обеспечивающих передачу потока данных от объекта к объекту. Именно так организовано во Всемирной сети большинство чатов, конференций, досок объявлений, гостевых книг, поисковых машин и систем подсчета рейтинга. В общем случае принцип работы CGI выглядит следующим образом: пользователь заполняет на web-страничке ту или иную форму и нажимает на кнопку, после чего встроенная в код HTML строка вызова CGI-скрипта запускает соответствующую программу CGI и передает ей управление процессом обработки информации. Введенные пользователем данные отсылаются этой программе, а она, в свою очередь, «встраивает» их в другую страницу, отправляет по почте или трансформирует каким-либо иным способом, Скрипты CGI размещаются на сервере в специально отведенной для этих целей директории, которой, как правило, назначается имя CGI-BIN. Следует помнить, что подключение, отладка и запуск таких программ требуют соответствующих прав доступа к http-серверу,а также определенных знаний и навыков.

Технология CGI обычно реализуется двумя методами: либо с использованием программ, написанных на языке PERL (Practical Extraction and ReportLanguage), — такие файлы имеют расширение .pi, либо с помощью приложений, созданных обычно с применением языка С и откомпилированных непосредственно на сервере, поскольку большинство UNIX-совместимых платформ включают в себя встроенный транслятор этого языка. Подобные программы имеют расширение .cgi. Необходимо отметить, что PERL, как и HTML, является интерпретируемым языком. Иными словами, для того чтобы запустить подобный скрипт на исполнение, не требуется дополнительной компиляции. Помимо упомянутых возможностей с помощью данной технологии можно организовать систему показа последовательности рекламных баннеров или автозагрузки файлов на сервер, создать форму отправки электронного письма непосредственно со страницы сайта или службу виртуальных открыток. Среди достоинств CGI следует отметить их независимость от клиентского программного обеспечения — эту технологию сможет применять каждый пользователь, просматривающий содержимое сервера при помощи броузера практически любой версии. Главный недостаток заключается в том, что для установки и на- стройки приложений CGI на сервере нужно обладать как минимум правами администратора, поскольку эти программы при запуске способны нарушить нормальное функционирование серверного компьютера и дестабилизировать работу сети.

SSI

SSI (Server Side Includes) — технология, тесно переплетенная с упомянутой выше CGI. На основе макроязыка, очень напоминающего С, SSI позволяет реализовать такие возможности, как вывод в документе того или иного текста в зависимости от определенных условий или согласно заданному алгоритму, формировать файл HTML из динамически изменяющихся фрагментов или встраивать результат работы CGI в какой-либо его участок. Достоинства и недостатки SSI аналогичны описанным в предыдущем абзаце.

CSS

Зачастую у web-дизайнера возникает необходимость применить в процессе создания html-документа сложное форматирование — от абзаца к абзацу менять шрифт, расположение текста, его цвет, формировать различные таблицы данных. Можно решить эту проблему с помощью стандартных средств HTML: описывать каждый абзац отдельным набором команд, но в этом случае итоговый документ будет иметь большой размер, да и само создание кода становится весьма трудоемкой работой. Можно пойти другим путем: подключить к странице внешний файл, выполненный в стандарте CSS — Cascading Style Sheets (каскадные таблицы стилей), в котором с помощью специального макроязыка один раз жестко задать форматирование страницы. Другими словами, файл CSS выполняет роль некоего шаблона, применяемого для форматирования текста, таблиц и иных элементов в документе HTML. Есть возможность подключать один и тот же физический файл CSS к различным web-страницам сайта. CSS можно использовать практически на любом сервере без каких-либо ограничений. Крупные недостатки у данной технологии также практически отсутствуют. О каскадных таблицах стилей CSS мы подробно побеседуем в восьмом уроке.

РНР

РНР (Personal Home Page tools) — это еще один интерпретируемый язык, напоминающий PERL, предназначенный для придания web-страницам элементов интерактивности. Код, написанный на языке РНР, встраивается в документ HTML подобно подпрограмме: в тот участок документа, где необходимо разместить интерактивный элемент, просто вставляется сценарий РНР. Мнемоника данного языка базируется на синтаксисе PERL, Java и С, благодаря чему не вызывает каких-либо трудностей при изучении. Методики, которые позволяют серверам корректно распознавать файлы, содержащие скрипты РНР, различны и зависят в первую очередь от типа конкретного сервера. Считается достаточным назначить такому файлу расширение .php, иногда — с добавлением номера версии используемого языка, например .php2 или .php3.

Технология РНР позволяет организовать на web-странице счетчик посещений, подсчитывать статистику обращений к тем или иным разделам сайта, защитить доступ к какому-либо html-документу паролем и многое другое. Среди недостатков РНР следует отметить то, что данная технология поддерживается далеко не всеми серверами Интернета.

ASP

ASP (Active Server Pages, активные страницы сервера) — еще одна технология, аналогичная JavaScript и РНР. Для того чтобы сделать web-страницуинтерактивной с применением технологии ASP, необходимо встроить в ее код соответствующий скрипт, написанный на макроязыке, отдаленно напоминающем Java и С. Скрипт интерпретируется и исполняется непосредственно на сервере, после чего пользовательскому броузеру отправляется уже готовый html-документ с результатами работы сценария ASP. Отсюда следует вполне справедливое заключение о том, что для страниц, содержащих ASP, не имеет значения, какое программное обеспечение установлено на пользовательском компьютере. Зато принципиальное значение имеет тип сервера, на котором вы планируете использовать ASP, поскольку отнюдь не все они поддерживают данную технологию.

VBScript

VBScript, или Visual BASIC Script (Visual Beginners All-purpose SymbolicInstruction Code Script, визуальный символический универсальный командный код для начинающих) — очередная версия интерпретируемого языка, встраиваемого в html-документ с целью включения в состав web-страницы интерактивных элементов. Честь создания данной технологии принадлежит разработчикам компании Microsoft.

Если сравнить более распространенный стандарт JavaScript с VBScript, обнаружить серьезные различия очень трудно, поскольку мнемоника и синтаксис обоих языков во многом схожи. С помощью VBScript можно реализовать практически весь спектр возможностей, характерных для JavaScript. Обе технологии не зависят от типа сервера, на котором планируется опубликовать включающую их web-страницу. Однако VBScript в настоящее время менее распространен в Интернете, нежели его «конкурент», поскольку он поддерживается только броузерами производства Microsoft, а именно Internet Explorer версий 3.0 и выше. Netscape Navigator не имеет интерпретатора этого языка, поэтому приверженцы этого броузера лишены возможности использовать интерактивные элементы, созданные с применением VBScript, в то время как JavaScript поддерживается и Internet Explorer и Netscape Navigator.

Macromedia Flash

Стандарт Flash был разработан компанией Macromedia в 1996 году. Основное назначение данной технологии — создание высококачественной интерактивной анимации, которую можно представлять при относительно небольшом размере итогового файла. С помощью Macromedia Flash web-мастер имеет возможность изготавливать красочные анимационные заставки, определенные элементы которых могут «реагировать» на движения мыши, а также встроенные в web-страницы мини-игры, озвученные мультипликационные клипы и многое другое. Другими словами, Macromedia Flash способна практически на все, что доступно при применении Java, и даже больше.

Одним из основных отличий Macromedia Flash от всех остальных существующих ныне web-технологий является то, что это единственный стандарт, позволяющий работать не только с растровой графикой, но и с векторной. Помимо этого текст импортируется в среду Flash не как растровое изображение, а именно как текст, в котором один символ кодируется одним байтом информации, что является серьезным оружием в борьбе с излишним объемом результирующих файлов. Немаловажно, что во Flash имеется возможность воспроизведения музыки и звуков в формате МРЗ.

Для создания документов, подготовленных согласно данному стандарту, компания Macromedia выпустила специальную объектно-ориентированную среду разработчика в виде стандартного 32-разрядного приложения Microsoft Windows.Благодаря этому собственно процесс программирования при подготовке интерактивных элементов Flash и анимации сведен к минимуму: пользователю достаточно создать новый проект в удобной и дружественной среде, для чего необходимо лишь разобраться в принципах работы программного пакета и уметь обращаться с мышью, — по окончании работы программа встроит созданные объекты в документ HTML автоматически.

В среду Flash интегрирован специальный язык программирования, немного похожий на Java, но более простой в изучении. Написанные с его помощью программные модули импортируются в документ как апплеты и вставляются в нужный кадр анимации, где должно произойти динамическое изменение изображения. С помощью специального редактора можно написать небольшую программку, управляющую проигрыванием клипа, создать элементы, поддающиеся индивидуальным настройкам посетителями сайта, генерировать заставку с несколькими вариантами продолжения. Способов реализации этой возможности существует множество, но все-таки, чтобы использовать всю мощь встроенного языка, необходимо иметь определенный опыт в программировании. Механизм технологии Macromedia Flash достаточно прост: в общем случае подготовленные разработчиком интерактивные элементы и анимация превращаются в интерпретируемый код, который импортируется в страницу HTML. Для того чтобы клиентский броузер мог распознать объекты Flash, необходимо проинсталлировать на компьютере пользователя специальную надстройку кброузеру (plug-in), которая носит название Macromedia Flash Player. Эта про- грамма распространяется бесплатно фирмой-разработчиком данной технологии. Пользовательский броузер, сталкиваясь с документом в формате Flash, как правило, сам связывается с соответствующим узлом, после чего начинает загрузку и установку Flash Player в автоматическом режиме. Проигрыватель Flash уже интегрирован в броузеры Microsoft Internet Explorer 4.0-5.0 иNetscape Navigator версии 4.01 и выше. Другие броузеры, к сожалению, не уме- ют распознавать данный стандарт, в чем и заключается его основной недостаток.

DHTML

DHTML (Dynamic Hyper Text Markup Language, динамический язык разметки гипертекста) является расширением стандарта HTML и позволяет создавать web-страницы, включающие такие интерактивные элементы, как движущийся фон, расположенный под статичным содержимым документа, движущиеся объекты, выпадающие меню, кнопки, подсвечивающиеся при наведении курсорамыши, анимацию, бегущие титры и многое другое. По большому счету DHTML представляет собой «среднее арифметическое» между технологиями HTML и JavaScript. Этот стандарт использует простые сценарии, подготовленные с по- мощью интерпретируемого макроязыка, обрабатываемого броузером совместно с кодом HTML. Такие сценарии именуются «скриплетами». Для создания скриплетов используются стандартные расширения DHTML и любой макроязык, поддерживающий директивы интерфейса ActiveX. DHTML распознается броузерами Microsoft Internet Explorer, начиная с версии 4.0 ивыше.

XHTML и XML

XML (Extensible Markup Language, расширяемый язык разметки) является принципиально новым стандартом, предложенным в 2000 году создателем языка HTML — консорциумом World Wide Web Consortium (W3C). Это новейшая технология изготовления web-страниц, и ее окончательная спецификация $ настоящий момент еще находится в стадии разработки. По структуре XML представляет собой не собственно язык разметки гипертекста, а так называемый метаязык, предназначенный для описания других языков более низкого уровня. В свою очередь XHTML (Extensible Hypertext Markup Language, расширя емый язык разметки гипертекста) представляет собой промежуточный вариант между XML и HTML 4.O. Именно за счет его широкого применения W3C планирует осуществить постепенный переход от одного стандарта к другому. В спецификацию XHTML заложен принцип обратной совместимости. Иными словами, владельцам web-сайтов, страницы которых выполнены по технологии HTML 4.0или более ранних версий, не придется как-либо изменять формат опубликованных в Интернете документов: все дополнения и расширения нового языка полностью включают в себя предыдущие стандарты.

XML и XHTML значительно расширяют возможности HTML и позволяют web-мастерам использовать практически весь заложенный в современный Интернет потенциал на сто процентов, в первую очередь в сфере электронной коммерции. Поскольку XHTML подразумевает модульную архитектуру построения электронных документов, данный стандарт позволяет создавать механизмы взаимодействия с нетрадиционными для Интернета устройствами, такими как факсы, сотовые телефоны и телевизоры. По мнению аналитиков, в не столь отдаленном будущем XML станет основным стандартом во Всемирной сети, посте- пенно включив в себя большинство других использующихся ныне форматов.

Раздел 8. Web технологии

Тема 8.2. Браузеры. Поисковые машины

Содержание учебного материала:

Браузеры.

Некоторые классы браузеров.

Различия популярных web-браузеров.

Обзор поисковых машин.

Регистрация в поисковых системах.

Веб-обозрева́тель, бра́узер (от англ. Web browser; вариант броузер — устаревшая форма) — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой.

Примечание: Большинство браузеров умеют также показывать оглавление FTP-серверов.

Браузеры постоянно развивались со времени зарождения Всемирной паутины и с её ростом становились всё более востребованными программами. Ныне браузер — комплексное приложение для обработки и вывода разных составляющих веб-страницы и для предоставления интерфейса между веб-сайтом и его посетителем. Практически все популярные браузеры распространяются бесплатно или «в комплекте» с другими приложениями: Internet Explorer (совместно с Microsoft Windows), Mozilla Firefox (бесплатно, свободное ПО, совместимо с некоторыми дистрибутивами Linux, например Ubuntu), Safari (совместно с Mac OS X и бесплатно для Microsoft Windows), Google Chrome (бесплатно), Opera (бесплатно начиная с версии 8.50).

История развития

Первым распространённым браузером с графическим интерфейсом был NCSA Mosaic. Исходный код этого одного из первых браузеров был открыт и некоторые другие браузеры (Netscape Navigator и Internet Explorer) взяли его за основу. Этот браузер имел свои недостатки, но почти все они были устранены в браузере Netscape Navigator (некоторые сотрудники компании Netscape были из NCSA и участвовали в разработке Mosaic). Netscape выпустила Netscape Navigator под разные операционные системы (UNIX, Windows, Mac OS) и добилась заметного успеха, в том числе и коммерческого. Это побудило компанию Microsoft выпустить свой браузер Internet Explorer.

В отличие от Netscape, Microsoft сразу выпускала локализованные версии IE. В 1995 году Microsoft выпустила операционную систему Windows 95, в ней не было встроенного браузера, но через некоторое время в обновление системы (Windows 95 OSR2) браузер (Internet Explorer 3.0) был встроен. К тому же, Microsoft добавляла в свой браузер несовместимые со стандартами расширения языка HTML, и это можно считать началом войны браузеров, закончившейся монополизацией (более 95 %) рынка браузером от Microsoft.

Из-за потери рынка доходы компании Netscape упали и её приобрела AOL, а исходный код браузера Netscape был выпущен под свободной лицензией MPL (Mozilla Public License). Название «Mozilla» изначально присутствовало в браузере от Netscape и означало сокращение слов Mosaic+killer. Однако этот код было решено не использовать и вместо него для Netscape 6 с нуля был написан новый движок (Gecko), изначально ориентировавшийся на полную поддержку стандартов, на основе которого позже были созданы входящие в комплект Mozilla Suite браузер, почтовый и irc-клиент и редактор веб-страниц.

Впоследствии в Mozilla Foundation было принято решение поставлять и развивать браузер отдельно от общего пакета и родился проект Mozilla Firefox. Firefox содержит много возможностей, отсутствующих в IE или других браузерах, и постепенно набирает популярность.

Монополизация рынка браузером IE имела и другие последствия — Microsoft почти перестала развивать браузер и он с 4-й до 6-й версии почти не менялся: хуже других браузеров поддерживал стандарты, отставал по удобству использования и по скорости работы и отображения страниц. Такое положение сподвигло Microsoft вновь заняться браузером и седьмая версия вышла с некоторыми изменениями (были добавлены закладки-табы, улучшена поддержка стандартов, поднята скорость работы и более удобный интерфейс). 19 марта 2009 года Microsoft выпустила 8-ю версию Internet Explorer, а 14 марта 2011 года 9-ю версию Internet Explorer и активно продвигает её на российском рынке совместно с такими компаниями, как Яндекс, Mail.ru и Рамблер.

В 1995 году появился браузер Opera. Первоначально Opera распространялась как условно-бесплатное ПО (shareware), этим, возможно, объяснятся её низкая популярность в большинстве стран мира и высокая популярность в странах СНГ. Однако с 2005 года Opera также стала распространяться бесплатно.

Война браузеров была бы исключительно коммерческим делом корпораций, если бы основным приёмом в борьбе не стало добавление специфических, нестандартных возможностей к браузерам. Наибольшие различия возникали в поддержке JavaScript — языка сценариев, придающего интерактивность документам. В результате многие сайты «оптимизировались» под одни браузеры и плохо работали в других браузерах.

В Internet Explorer 8 Microsoft сначала предлагала ввести HTML-комментарий, который бы указывал браузерам, какие версии движков использовать (заголовок DOCTYPE при этом должен был быть отменён, как малоиспользуемый), что вызвало возмущение сторонников стандартов, так как указания на использование стандартов не предусматривалось. Позже было объявлено, что IE8 будет по умолчанию использовать «режим стандартов» (англ. standards mode), а не «режим совместимости» (англ. quirks mode), а при обнаружении соответствующего комментария использовать режим имитации предыдущей версии.

В 2008 году компания Google решила «помочь» конкуренции на рынке браузеров и выпустила свой браузер — Chrome, основанный на свободном проекте Chromium. Браузер Chrome содержит некоторые новшества (изоляция сбоев, режим «инкогнито» и т. д.). Выпущены версии для Windows XP, Windows Vista, Windows 7, Linux и Mac OS.

В начале 2009 года Microsoft объявила, что разрабатывает новый браузер, который будет называться Gazelle. Новый браузер будет применять принципы разделения ресурсов, характерные для многопользовательских операционных систем, что, согласно Microsoft, повысит его безопасность.

В сентябре 2009 года стало известно о намерении российской правительственной комиссии по федеральной связи и информтехнологиям разработать для государственных организаций свой браузер, выбрав разработчика по результатам открытого конкурса. Парадоксально, что Opera и Firefox отвергаются в пользу Internet Explorer из-за того, что они «передают информацию о пользователях в поисковую систему Google», хотя это легко отключается в настройках обеих программ

Распространённые браузеры : Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari

Менее распространённые: Lunascape, Sleipnir, ChromePlus, SRWare Iron, Chromium, Mozilla, Netscape Navigator, Flock, Maxthon, Konqueror, SeaMonkey, GreenBrowser, Avant Browser, AOL Explorer, Galeon, Epiphany, Kazehakase, Charon, Arachne, Links2, SlimBrowser, FastIE, MyBrowser, Dillo, K-Meleon, Arora, RockMelt, WallTriX

География распространения

Самый распространённый браузер (октябрь 2011):

Internet Explorer

Mozilla Firefox

Google Chrome

Opera

В России с января 2009 по конец сентября того же года первое место по популярности удерживает Opera (в районе 36-40 %), после чего случается резкое падение, в начале декабря Opera ненадолго восстанавливает лидерство, но затем уступает его Firefox’у и с тех пор всё время уступает ему на несколько процентов. Похожие данные по России показывал и LiveInternet.ru. Opera также занимает первое место по частоте использования на Украине, в Азербайджане, в Грузии, Казахстане и Узбекистане, пользуется большой популярностью в остальных странах СНГ.

Mozilla Firefox лидирует в Индонезии (около 80 %), Германии (больше половины), странах Восточной Европы, некоторых странах Африки и Юго-Восточной Азии.

В Южной Корее в 2007—2008 годах 99 % пользователей использовало Internet Explorer в Microsoft Windows, так как все банковские и правительственные сайты по закону требовали использования ActiveX (в июне 2010 года этот закон был отменён). В Китае доля Internet Explorer’а также близка к 90 %, кроме того, в этой стране популярен браузер Maxthon.

Chrome в 2010 году вышел на первое место в Тунисе и Албании; в марте 2011 года: в Филиппинах и Армении; в апреле 2011 года: в Черногории, Доминиканской республике и Уругвае; в мае 2011: в Чили, Молдове и Ямайке; в июне 2011: в Пакистане и Малайзии; июль 2011: Аргентина, Венесуэла, Колумбия и Мавритания.

Поисковые машины

Поиско́вая систе́ма — программно-аппаратный комплекс с веб-интерфейсом, предоставляющий возможность поиска информации в Интернете. Под поисковой системой обычно подразумевается сайт, на котором размещён интерфейс (фронт-энд) системы. Программной частью поисковой системы является поисковая машина (поисковый движок) — комплекс программ, обеспечивающий функциональность поисковой системы и обычно являющийся коммерческой тайной компании-разработчика поисковой системы.

Большинство поисковых систем ищут информацию на сайтах Всемирной паутины, но существуют также системы, способные искать файлы на FTP-серверах, товары в интернет-магазинах, а также информацию в группах новостей Usenet.

Улучшение поиска — это одна из приоритетных задач современного Интернета (см. про основные проблемы в работе поисковых систем в статье Глубокая паутина).

По данным компании Net Applications, в январе 2011 года использование поисковых систем распределялось следующим образом:

· Google — 84,65 %;

· Yahoo! — 6,69 %;

· Baidu — 3,39 %;

· Bing — 3,29 %;

· Ask — 0,56 %;

· AOL — 0,42 %.

Одним из первых инструментов поиска в интернете (до Всемирной паутины) был Archie.

Первой поисковой системой для Всемирной паутины был «Wandex», уже не существующий индекс, который создавал «World Wide Web Wanderer» — бот, разработанный Мэтью Грэем (англ. Matthew Gray) из Массачусетского технологического института в 1993. Также в 1993 году появилась поисковая система «Aliweb», работающая до сих пор. Первой полнотекстовой (т. н. «crawler-based», то есть индексирующей ресурсы при помощи робота) поисковой системой стала «WebCrawler», запущенная в 1994. В отличие от своих предшественников, она позволяла пользователям искать по любым ключевым словам на любой веб-странице — с тех пор это стало стандартом во всех основных поисковых системах. Кроме того, это был первый поисковик, о котором было известно в широких кругах. В 1994 был запущен «Lycos», разработанный в университете Карнеги Мелона.

Вскоре появилось множество других конкурирующих поисковых машин, таких как «Excite», «Infoseek», «Inktomi», «Northern Light» и «AltaVista». В некотором смысле они конкурировали с популярными интернет-каталогами, такими, как «Yahoo!». Позже каталоги соединились или добавили к себе поисковые машины, чтобы увеличить функциональность. В 1996 году русскоязычным пользователям интернета стало доступно морфологическое расширение к поисковой машине Altavista и оригинальные российские поисковые машины «Рамблер» и «Апорт». 23 сентября 1997 была открыта поисковая машина Яндекс.

В последнее время завоёвывает всё большую популярность практика применения методов кластерного анализа и поиска по метаданным. Из международных машин такого плана наибольшую известность получила «Clusty» компании Vivísimo. В 2005 году на российских просторах при поддержке МГУ запущен поисковик «Нигма», поддерживающий автоматическую кластеризацию. В 2006 году открылась российская метамашина Quintura, предлагающая визуальную кластеризацию в виде облака тегов. «Нигма» тоже экспериментировала с визуальной кластеризацией.

Помимо поисковых машин для Всемирной паутины, существовали и поисковики для других протоколов, такие как Archie для поиска по анонимным FTP-серверам и «Veronica» для поиска в Gopher.

Популярные поисковые системы

Согласно данным LiveInternet об охвате русскоязычных поисковых запросов:

Всеязычные:

· Google (37,2 %)

· Bing (0,8 %)

· Yahoo! (0,2 %) и принадлежащие этой компании поисковые машины:

· Inktomi

· AltaVista

· Alltheweb

Англоязычные и международные:

· AskJeeves (механизм Teoma)

Русскоязычные — большинство «русскоязычных» поисковых систем индексируют и ищут тексты на многих языках — украинском, белорусском, английском, татарском и др. Отличаются же они от «всеязычных» систем, индексирующих все документы подряд, тем, что в основном индексируют ресурсы, расположенные в доменных зонах, где доминирует русский язык или другими способами ограничивают своих роботов русскоязычными сайтами.

Яндекс (48,1 %)

Mail.ru (5,9 %)

Рамблер (1,2 %)

Нигма (0,3 %)

Некоторые из поисковых систем используют внешние алгоритмы поиска. Так, Qip.ru использует поисковый механизм Яндекса, а Nigma сочетает в себе как свой алгоритм, так и сборную выдачу от других поисковиков.

Необычные поисковые системы

· Koogle (с его помощью ортодоксальные иудеи могут найти контент, признанный раввинами удовлетворяющим религиозным требованиям).

· Yauba (индийский поиск «для параноиков» — в отличие от привычных поисковиков, за пользователями не следят, а все записи о его действиях удаляются с сервера).

· TinEye — поисковая система, специализирующаяся на поиске изображений в Интернете. С недавнего времени теряет свою актуальность, после того, как Google ввел такую функцию в своем поиске по картинкам.

· Генон — поисковая система, собирающая и создающая контент у себя на сайте.

· ImHalal - первый исламский поисковик. Новый поисковик может отличить разрешённые для мусульман (халяльные) результаты поиска от запретных (харамных). Был открыт в 2009 году. Ориентировочно с начала сентября 2011 прекратил функционирование в связи с недостатком финансирования.

Раздел 9. Введение в web дизайн

Тема 9.1. Основы web дизайна

Содержание учебного материала:

Web -дизайн.

Необходимый инструментарий.

Основные «постулаты» web-дизайна.

Технологии web-дизайна.

Элементы web-страницы.

Алгоритм создания нового проекта.

Веб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а также занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.

Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна.
Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет, растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров.

Этапы проектирования

Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Так же менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком.

HTML-верстка

Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.

В небольших студиях, html-кодированием занимается дизайнер, создавший макет сайта.

Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS, должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».

При программировании сайта специалисту назначаются контрольные точки сроков.

Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

Упомянутый Internet Explorer (версии 6) слишком по-своему трактует HTML-стандарты — отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, который создает много проблем для веб-дизайнера. Многие разработчики предлагали отказаться от верстки под IE 6. Однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутсвие на половине пользовательских компьютеров, вынуждает веб-дизайнеров тестировать свои проекты в нём.

Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных рамерах окна браузера, при отсутствии флэш-плеера и многие другие. Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены.

Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.

Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

Наполнение контентом и публикация

Сайт наполняют контентом — текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.

Внутренняя SEO-оптимизация.

Связана с некоторыми изменениями самого сайта. Начинается она с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам.

Внешняя SEO-оптимизация.

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» -такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Скачать материал

Скачать материал "Курс лекций по учебной дисциплине Основы web - мастерства для специальности 230401"

Как учитель может зарабатывать на Инфоуроке?

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 650 685 материалов в базе

Найти материалы

Скачать материал

Другие материалы

docx

ХХІ ғасыр көшбасшысы зияткерлік сайысы

21.11.2016
655
0

docx

Сертификат участия во II Областном конкурсе "ИК - технологии в образовательной деятельности""

21.11.2016
336
0

pptx

Материалы к открытому уроку по информатике в рамках Всероссийской акции "Час кода 2015"

21.11.2016
326
0

rar

Открытый урок по информатике в рамках Всероссийской акции "Час кода 2015".

21.11.2016
615
0

docx

Статья на тему "ОРГАНИЗАЦИЯ ИНФОРМАЦИОННОГО ОБРАЗОВАНИЯ И ПОВЫШЕНИЕ ИНФОРМАЦИОННОЙ КУЛЬТУРЫ ОБУЧАЮЩИХСЯ"

21.11.2016
627
1

pptx

Презентация по информатике на тему "Системы счисления. Восьмеричная и шестнадцатиричная"

Рейтинг: 4 из 5

21.11.2016
5763
453

pptx

Презентация по информатике на тему "Информационные процессы"

Рейтинг: 4 из 5

21.11.2016
5234
172

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 21.11.2016 1095
- DOCX 645.5 кбайт
- Рейтинг: 5 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Литвинцева Евгения Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Литвинцева Евгения Александровна
- На сайте: 7 лет и 7 месяцев
- Подписчики: 1
- Всего просмотров: 121120
- Всего материалов: 117