Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Курс лекций по учебной дисциплине Основы web - мастерства для специальности 230401

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

  • Информатика

Поделитесь материалом с коллегами:

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

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



РАССМОТРЕНО

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

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

техники»

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

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

_________________20_____ год

ОДОБРЕНО

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

колледжа

протокол №___

от___________ 20___года

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

_____________ Е.К. Ващук




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

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

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















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


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

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

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

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

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

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- документ это ASCII- текст, состоящий из HTML- кодов и основного текста документа.

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

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

Пример:

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

Замечание:

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

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

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

1.Элементы

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

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

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

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

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







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

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



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

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

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

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

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

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





















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

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

Вариант №1


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

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

    Какой протокол передачи данных разработали ученые Калифорнийского университета в Беркли
    3. Прародитель Интернета
    Дополните:

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

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

    Опишите:

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











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

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

    Вариант №2


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

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

    2. В каких кавычках помечают дескрипторы разметки
    3. Кому обязана сеть Интернет важным событием в своей биографии
    4. Какой дескриптор отвечает за принудительный разрыв строки
    Дополните:
    1. HTML-документ - это______________________________________

    Опишите:

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









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

    Тема 1.3. Стандарты 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>- имя документа.

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

    Атрибуты

    Атрибут

    Значение

    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)

    B)

    C)

    D)

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

    A) телом

    B) атрибутом

    C) заголовком

    D) элементом

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

    A)

    B)

    C)

    D)

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

    A) имя документа

    B) содержание документа

    C) начало строки

    D) заголовок документа

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

    A) 6

    B) 7

    C) 4

    D) 3

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

    A)

    B)

    C)

    D)









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

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


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

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

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

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

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

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

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

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

    Align=left /center/ right /justify

    Пример:

    <body>

    <div align=left>

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

    div>

    <div align=center>

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

    div>

    <div align=right>

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

    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>

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

    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>- подчеркнутый текст.

    , и , - перечеркнутый текст

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

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

    Атрибуты :

    Color=«цвет»

    Цвет шрифта

    Size=n

    Размер шрифта

    Size=+n/-n

    Увеличение (уменьшение) шрифта относительно основы <basefont> на значение n

    Face

    Задает тип шрифта

    Пример:

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

    ………..

    ……….

    ………

    …..

    …..


    ……

    ….

    ………...


    <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 i =a 1 +a2+a3 +



    E=mc 2

    body>

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























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

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


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

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

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

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

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

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






















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

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

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

    Вариант №1


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

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

    2. Для чего предназначен дескриптор <span>
    3.Посредством каких дескрипторов производится форматирование

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

    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)

    B)

    C)

    D)

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

    3.Какой буквой пишется текст в курсивном начертании
    4.Расшифруйте: size=n
    Дополните:

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








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

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


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

    В 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>

    ul>

    body>

    Встраивание в документ неупорядоченного списка производиться посредством <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>.

    Атрибуты

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

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

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

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

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

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

<li Value=n>

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

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

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

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

Пример:

<body>

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

<br>

<ol>

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

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

строчные буквы, 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>

<dt> БАГ dt>

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

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

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

<dt> БАЙ DT>

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

dl>

body>

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

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

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

Пример:

<body>

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

<br>

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

<ol type= «I»>

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

интересной

<ol type= «1»>

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

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

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

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

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

ol>

<br>

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

<ol>

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

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

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

ol>

ol>

body>



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

Списки в HTML


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

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

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

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

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

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

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

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

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

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


















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

Списки в HTML

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

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

    A)

    B)

    C)

    D)

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

3. Атрибуты дескриптора
A) type

B) value

C) square

D) align

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

    A) русскими

    B) римскими

    C) английскими

    D) арабскими

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

    A)

    B)

C)

D)

Дескриптор используется для:








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

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


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

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

Атрибуты

Frame

Void

Above

Below

Hsides

Lhs

Rhs

Vsides

Box

Border

Отображение сторон таблицы

Границы вокруг таблицы не отображаются

Отображается верхняя граница

Отображается нижняя граница

Отображается верхняя и нижняя границы

Отображается левая граница

Отображается правая граница

Отображается левая и правая границы

Отображаются все границы

Отображаются все границы

Rules

None

Group


Rows

Cols

All

Отображение границ между ячейками

Границы между ячейками не отображаются

Отображаются границы между группами колонок или строк

Отображение границ между строками

Отображение границ между колонками

Все границы между ячейками

Width

N




N%

Ширина таблицы

Задает минимальную ширину таблицы в пикселях (игнорируется, если содержимое ячеек требует для размещения определенного места, чем задано этим атрибутом)

Задает, какую часть ширина окна браузера занимает данная таблица

Пример:

<body>

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

<br>


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

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

tr>

<tr>

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

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

tr>

table>

body>

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

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

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

Атрибуты

Пример:

аlign=top>

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

vаlign =top

аlign =middle>

Вторая строка таблицы

vаlign=middle

table>

body>

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

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

Пример:

Заголовок таблицы

<tr>

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

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

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

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

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

Ячейка 1+2

Ячейка 3+4

Ячейка 5

Ячейка 1

Ячейка 4+5







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

Таблицы в 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


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

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

А) bordercolor

C) color

B) bgcolor

D) bedcolor

К атрибутам дескриптора относятся

А) align

C) frame

B) bgcolor

D) valign

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

А) rules

C) frame

B) valign

D) border

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

А) top

C) rows

B) left

D) rowspan

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

5.

Атрибут

назначение

1.colspan

А.Выравнивание по горизонтали

2.rowspan

Б.Ширина ячейки в столбцах

3.valign

В.Выравнивание по вертикали


Г.Ширина ячейки в строках

Дополните

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





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

Таблицы в 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%

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

5.

Атрибут

назначение

1.cell"> А.Выравнивание по горизонтали

2.cellspacing

Б.Расстояние между содержимым и рамкой ячеек таблицы

3.align

В.Выравнивание по вертикали


Г.Расстояние между рамками таблицы

Дополните

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

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

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


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


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

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

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

Атрибуты :

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

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

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

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

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

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

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

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

Атрибуты :

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

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

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

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

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

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

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

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

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

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>.

Атрибуты

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

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

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

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

Атрибуты options.

disabled

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

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

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

























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

Формуляры в HTML


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

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

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

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

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

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

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

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

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

Расшифруйте “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. За группировку полей отвечает(ют) дескриптор(ы)

А)

D)<font>

B)

E) </font>

C) <input>

F) </input>

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

7.

Атрибут

Значение

1.disablet

А. текст элемента списка

2.label

B. передаваемое значение

3. value

C. выбранный по умолчанию элемент списка


D. блокировка доступа к списку

Дополните

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

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

А)

D)<option>

B)

E) </option >

C) <input>

F) </input>

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

7.

Атрибут

Значение

1.disabled

А. текст элемента списка

2. selected

B. выбранный по умолчанию элемент списка

3. multiple

C. разрешение использовать не более 1 опции


D. блокировка доступа к списку

Дополните

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

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


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

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


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


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

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

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

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

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

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

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

функция

href

URL

Целевой адрес гиперсвязи

Name

«метка»

Имя связи

Title

Текст

Имя цели гиперсвязи

target

фрейм

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

1.html

……..

2.html

Ссылка

body>
















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

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


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

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

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

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

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

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

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

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

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

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

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

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
















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

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


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


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

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

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

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

Атрибуты

свойство

функция

align

Center, Left, Right

Выравнивание по горизонтали

Noshade

-

Выключение теней

Size

N

Толщина линии

width

N, n%

Длина линии

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

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

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

Атрибуты <bgsound>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<object type= “тип объекта”>При указании типа объекта задается тип файла, содержащего видеоклип

Пример:

Type=”video/avi”

Type=”application/mpeg”

Атрибуты

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

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

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

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

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

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

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

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

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

usemap=ссылка

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

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

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


Поведение бегущей строки


Scroll

Строка «вбегает» со стороны, определенной атрибутом Direction, в пустое поле и выходит из него в противоположной строке


Slide

Аналогично предыдущему, но текст не «выбегает» на др. стороне поля, а останавливается


alternate

Позволяет началу текста появиться в окне, «добежать» до противоположного конца окна, остановиться и затем начать движение в противоположном направлении

Bgcolor

«цвет»

Цвет фона

Direction

Left, Right

Направление движения строки

Height

n/n%

Высота поля бегущей строки

Width

n/n%

Ширина поля бегущей строки

loop

n/infinite

Повторяет бегущую строку до тех пор, пока отображение документа не будет прервано















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

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


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

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

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

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
























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

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

Вариант №1

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

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

А) текст

C) звук

B) графику

D) ссылку

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

А) behavior

C) noshade

B) align

D) loop

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

А) текст

C) loop

B) URL

D) n

Дополните

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

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

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

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

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

Атрибут

Назначение

1.hspase

A. Расстояние до текста по горизонтали

2.vspase

B.Задание высоты иллюстрации

3.height

C.Расстояние до текста по вертикали


D.Задание ширины иллюстрации

9.

Элемент

Дескриптор

1.линия

A.

2.бегущая строка

B.<hr>


C.<br>

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

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

Вариант №2

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

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

А) таблицу

C) текст

B) графику

D) ссылку

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

А) align

C) standby

B) border

D) noshade

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

А) текст

C) loop

B) URL

D) n

Дополните

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

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

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

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

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

8.

Атрибут

Назначение

1.href

A.Целевой адрес гиперсвязи

2.title

B.Целевой фрейм

3.target

C.Целевое имя


D.Имя цели гиперсвязи

9.

Элемент

Дескриптор

1.звук

A.

2.avi - фильм

B.<marquee>


C.<bgsound>

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

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


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


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

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

Gif:

256 цветов;

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

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

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

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

Jpeg:

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

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

прогрессивная разверстка (внутренняя переструктуризация 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.gifalt=”картинка”>

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

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

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

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

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

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

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

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

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

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

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

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

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

graphic.gif

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

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

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

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

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

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

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

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

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

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

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

frafic.gif”

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

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

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

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

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

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

Атрибуты :

Координаты”>

Замечание:

Если область имеет форму прямоугольника (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 - треугольник

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

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

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

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

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

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

map>

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

<body>

<img src=”graphic.gifusemap=”#coordinates”>

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) радиус

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

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)

B)

C)

D)

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

A) 4

B) 5

C) 2

D) 3

Расшифруйте align=top:

5. Какие форматы стали стандартными для дескриптора <img> A) pog, pig

B) gif, peg

C) gif, pug

D) pug, pag

6.Расшифруйте border=n:








Раздел 6. Фреймы

Тема 6.1. Фреймы: основные положения, описание структуры. Организация ссылок между фреймами


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


Фрейм - обособленная область Web-документа со своими полосами прокрутки.

С помощью фреймов Web-страница разделяется на несколько взаимосвязанных областей. При этом можно открыть документ в первом фрейме по ссылке, которая находится в другом фрейме.

Фреймы предоставляют уникальную возможность размещения информации точно в нужном месте окна браузера. Так, можно поместить фрейм в нижней части окна, и независимо от прокручивания содержимого в основной части окна - эта область не изменяет своего положения.

HTML - документы, отображенные в отдельных фреймах, принципиально зависят один от другого. Теоретически, используя один фрейм, можно путешествовать по всей сети Internet, в то время, как содержимое остальных представленных на экране режимов остается без изменений.

Основой Web- страницы, состоящей из фреймов, является рамочный HTML- фрагмент, содержащий все определения структуры фреймов. Этот фрагмент содержит также ссылки на отображаемые внутри фреймов HTML-документы.

Для создания фреймовой структуры применяется <frameset>, frameset>, которые заменяют <body>, body> и используется для разделения экрана на области.

Допускается вложение фреймовых областей, то есть элементом данной фреймовой области, заданной дескриптором <frameset>, может быть отдельный фрейм, а может быть вложенная фреймовая область, описываемая собственным < frameset>.

Фреймы бывают вертикальные и горизонтальные. Все способы разделения окна применимы для атрибутов <frameset> cols и rows.

Отводимое под фреймы пространство можно указать в процентах от общих размеров окна браузера (%), частями (*) или в абсолютных величинах (пикселях).

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

Атрибут

Способ задания

Описание

Пример

cols

%,%


вертикальное разделение окна браузера

<frameset cols= «50%,50%»>

число, %,*


<frameset cols= «150,30%»> frameset>

Под первый вертикальный фрейм отводится 150 пикселей, под второй – 30% доступного пространства, для третьего – вся остальная область окна браузера.

rows

число, число



горизонтальное разделение окна браузера

<frameset rows= «30,70»> frameset>.

Задание горизонтальных фреймов с точным указанием их высот: верхней -30, нижней-70 пикселей.

%,*


<frameset rows= «30%*»> frameset>

Задание горизонтальных фреймов, когда первый займет-30% от высот окна браузера, второй- вся остальная область.

Внутри находится <frame> (не имеет концевого дескриптора), который указывает на HTML- документ, предназначенный для изначальной загрузки в созданные фреймы.

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

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

1. frameborder=0/1 - отображает/скрывает границу фрейма. Если frameborder=0, то граница фрейма скрыта, в противном случае – отображена;

2. ;"> 3. ;"> 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

b.jpg

body>

Файл, где будет храниться фреймы:

файл с фреймами

Пример_2. Пусть необходимо создать фреймовую структуру, где горизонтальному фрейму «Заголовок» отведено 15%, вертикальному («Меню») - 25%, а фреймы «Содержимое» - все остальное пространство.


Меню

Содержимое

frameset>

frameset>

Организация ссылок между фреймами

Используется атрибут target=«имя фрейма» дескриптора гиперсвязи <a>.

Web-страница, на которую указывается ссылка дескриптора гиперсвязи <a>, как правило, изображается в том же окне (или фрейме), в каком будет активизирована связь.











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

Фреймы: основные положения, описание структуры. Организация ссылок между фреймами

Что такое фрейм?

Для чего применяются фреймы?

Что является основой Web- страницы, состоящей из фреймов?

Какие бывают виды фреймов?

Какие атрибуты имеет дескриптор <frame>?

Как организуются ссылки между фреймами?

Для чего применяются атрибуты дескриптора <frameset> cols и rows?

Для чего применяются дескрипторы <frameset> и frameset>?





















Раздел 6. Фреймы

Тема 6.2. Встроенные фреймы. Элементы noframes


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

Дескрипторы <noframes>, noframes>, <iframe>.


Встроенные фреймы

В HTML предусмотрен специальный дескриптор <iframe>, который позволяет создавать фрейм строки текста.

Задаваемые для данного дескриптора атрибуты не отличаются от соответствующих атрибутов <img> и <frame>.

Между <iframe> и iframe> можно поместить текст, подлежащий показу браузера, неспособного отображать фреймы, или в котором такая возможность заблокирована.

<iframe>, iframe> включается в обычный HTML-код внутри <body> и body>.

Пример_1

<body>

В этой строке вставлено

Вы можете

<a href= «c.html»> посмотреть содержимое фрейма a>


Элемент noframe

Web-браузеры, которые не умеют интерпретировать дескрипторы <frameset> и frameset>, <frame>, так как не поддерживают работу с фреймами, просто игнорируют их.

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

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

Пример_2

нужны фреймы

body>

noframe>

frameset>





















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

Встроенные фреймы. Элементы noframes

Что такое фрейм?

Для чего применяются фреймы?

Для чего применяется дескриптор <iframe>?

Для чего применяются дескрипторы <frameset> и frameset>?

Для чего применяется элемент noframes?
























Раздел 7. Каскадные таблицы стилей

Тема 7.1. CSS


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


Общие сведения. Селекторы

Начиная со спецификации HTML 4.0, рекомендуется использовать для оформления страниц каскадные таблицы стилей (CSS). При этом многие теги и атрибуты, относящиеся к оформлению, отменяются.

CSS - эффективное средство автоматизации стилевого оформления HTML-документов.

Использование стилей для оформления электронных документов (в том числе и Web-страниц) позволяет:

Унифицировать оформление однотипных структурных фрагментов (абзацев, ячеек, таблиц, иллюстраций и подписей под ними и так далее) как в пределах одного документа, так и в рамках совокупности документов, принадлежащих одному проекту (например, одному узлу);

Упростить модификацию стиля по всей совокупности одинаково оформленных документов (например, при необходимости устранения обнаруженных ошибок оформления);

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

Типы таблиц стилей:

Внутренние - могут быть объявлены в любом месте внутри действительного кода, с помощью атрибута style. Определяет свойства конкретного элемента.

Синтаксис:

<элементы STYLE= «Стилевое свойство1: значение1; стилевое свойство2:значение2;»>

Например, вместо

Пример_1

Ну погоди!...

<br>

<i> (Из мультфильма) i> font> p>

Заменится на:

Ну, погоди...

(Из мультфильма) span> p>

Встроенные - указывают свойство в пределах <style> и style>, которые находятся внутри заголовка документа.

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

Синтаксис таблиц стилей таков: пишется имя элемента HTML, для которого определяется стиль, а после следует блок определения стиля заключенный в фигурные скобки.

Пример_2

body {background-color: # BABAAO; color:rgb(29,29,24);}

style>

После этого в самом тексте HTML-документа достаточно указать тег , и к нему автоматически будет применены данные цвета фона и текста.

Например, вместо выравнивания заголовков по центу 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 class= «ab»>……div>

В таблице стилей эти классы можно определить так:

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»>) будет найден указанными свойствами.

Внешние - вся таблица стилей (без <style>, style>) пишется в отдельном файле с расширением .css, а затем ее подключают во все HTML- документы, которые должны ее исполнять.

Например, если файл таблицы стилей - m.css, то в <head> каждого из использующих HTML-документов необходимо вписывать фразу:

<link rel= «stylesheet» hret= «m.css» type= «text/css»>

Существует и другой способ «подключения» стилевой таблицы из внешнего файла - директива @import

Пример_4

@import url(m.css);



























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

CSS


Что такое каскадные таблицы стилей CSS?

Какие возможности предоставляет использование каскадных таблиц стилей CSS для оформления электронных документов?

На какие типы делятся каскадные таблицы стилей CSS?

Опишите синтаксис внутренних каскадных таблиц стилей CSS.

Для чего применяются внутренние каскадные таблицы стилей CSS?

Для чего применяются встроенные каскадные таблицы стилей CSS?

Опишите синтаксис встроенных каскадных таблиц стилей CSS.

Для чего применяются внешние каскадные таблицы стилей CSS?


















Раздел 8. Web технологии

Тема 8.1. Виды web – технологий (1).


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


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 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 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 оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

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



Выберите курс повышения квалификации со скидкой 50%:

Автор
Дата добавления 21.11.2016
Раздел Информатика
Подраздел Конспекты
Просмотров34
Номер материала ДБ-374226
Получить свидетельство о публикации
Похожие материалы

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