Список разделов

• Раздел 1


• Раздел 2

Гиперссылки















Раздел 1

Текст раздела 1

Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 6

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 7

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 8

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 9

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 10

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 11

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 12

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 13

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 14

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 15

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 16

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 17

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 18

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 19

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 20

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 21

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 22

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 23

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 24

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 25

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 26

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 27

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 28

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 29

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.


Slide 30

Средства разработки Web-узлов


Базовый инструментарий под управлением
Windows 2K/XP:
•

Среда разработчика документов HTML — так
называемый WYSIWYG-peдактор. Возможно
использовать обычные текстовые редакторы,
имеющие
дополнительные
возможности,
например, Jview или встроенный редактор
файлового менеджера FAR с плагином Colorer,
подсвечивающем
комментарии,
теги
и
программные конструкции

Средства разработки Web-узлов
•
•
•

•
•

•

Редактор векторной графики (CorelDraw).
Редактор растровой графики (Adobe Photoshop.)
Браузер Microsoft Internet Explorer версии 8.0 или
7.0.
Браузер Opera версии 7 или выше.
Перекодировщик
кириллицы,
например
программы ConvHTML и SNKDECode. (Есть и во
встроенном редакторе FAR).
FTP-клиент, например программа CuteFTP. (Есть и
во встроенном редакторе FAR).

Средства разработки Web-узлов


Дополнительный инструментарий:








Оптимизатор HTML, например UtilMind HTML
Compressor версии 1.5или выше.
Оптимизатор растровых изображений GIF,
например программа Gif-Clean 32.
Оптимизатор растровых изображений JPEG,
например программа JPEGCleaner версии 2.1 или
выше.
Редактор GIF-анимации, например программа
Ulead GifAnimator.
Фрагментатор графики, например программа
PictureDiser.

Языки гипертекстовой разметки




Наибольшее распространение получили HTML HyperText Markup Language и XML - eXtended
Markup Language. Все они являются именно
языками разметки, то есть содержат набор
инструкций, описывающих как программа-браузер
будет отображать окруженный ими текст.
Первый характерен фиксированным набором
специальных инструкций - тегов, состав и
количество которых, а также их атрибутов, зависит
от версии языка. В настоящий момент наиболее
широко применяется версия 4.

Языки гипертекстовой разметки






В отличие от HTML, язык XML достаточно гибок для того,
чтобы объявить любой дескриптор (например,
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг - о завершении текста заголовка.

HTML версии 3.2







Некоторые тэги, такие, как

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

Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов

 и 

.

Структура документа









HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа: (должно
быть в заголовке);
Тело: (содержимое
страницы).

Структура документа




Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...

Структура документа












Нормальная структура документа:



...


...



Теги заголовка




Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство WEB-браузеров отображают содержимое
тэга , размещается внутри -тэгов, как
показано выше. Заголовок документа НЕ появляется
при отображении самого документа в окне.

Теги заголовка




Главная задача для автора гипертекстового документа,
если он хочет донести свое послание до читающей
публики - "отметиться" наиболее удачным способом во
всех каталогах, куда захаживает потенциальный
читатель в поисках информации по интересующей его
теме. Для этой цели в набор команд языка HTML
включена специальная группа инструкций META,
предназначенных в основном для описания и
индексирования документа поисковыми машинами.
Команды META вносятся в "шапку" гипертекстового
документа - внутри блока ....
Наибольшее практическое значение имеют два типа
META - description (описание) и keywords (ключевые
слова).

Теги заголовка





Синтаксис этих команд прост и стандартен.
NAME="description"
CONTENT="Эта
страница
посвящена
проблемам индексирования гипертекстовых
документов WWW с помощью инструкций
МЕТА".>
NAME="keywords"
CONTENT="META, HTML, WWW, Web,
паутина, поиск, определение, рекомендации,
примеры использования, учебник, руководство,
информация, справка ">

Теги заголовка


Программы-роботы, индексирующие документы
HTML, пользуются описанием, которые они
находят в инструкции "description", при выводе
информации о вашей странице в результатах
поиска. Если этой инструкции в документе не
окажется,
то
поисковая
машина
вернет
информацию о вашем сайте в виде 256 или 512
первых символов найденной страницы за вычетом
команд HTML. Возможность контролировать,
какую информацию о вашей странице получит
пользователь, нашедший ее по ключевому слову в
поисковой машине, позволяет вам повысить свои
шансы на привлечение посетителей.

Теги заголовка





Поскольку инструкции МЕТА находятся в "шапке"
документа, они могут использоваться при настройке
параметров программы-браузера для оптимального
показа данного документа пользователю. В
частности, МЕТА может содержать информацию о
кодировке документа:
HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=KOI8-R">
Эта инструкция означает, что документ написан на
русском языке, в кодировке КОИ8. Браузеры
используют эту информацию для автоматического
переключения доступных кодировок.

Теги заголовка






МЕТА может использоваться для создания
документов, содержимое которых освежается через
заданный промежуток времени (в секундах):
HTTP-EQUIV="Refresh"
CONTENT="12;
URL=http://www.zhurnal.ru/">
Включение этой инструкции в "шапку" приведет к
тому, что через 12 секунд после загрузки текущего
документа браузер вызовет страницу, адрес которой
указан как значение URL. Если значением URL
является не документ HTML, а, скажем, звуковой
файл, то он будет исполнен в указанный срок. Эта
техника носит название Client Pull.

Теги заголовка






Как любой язык, HTML позволяет вставлять в тело
документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются
браузером. Синтаксис комментария:

Комментарии могут встречаться в документе где
угодно и в любом количестве.

Тело документа











Тэг позволяет не только указать начало тела
документа, но и дать его основные характеристики:
Фоновая картинка

Цвет фона (порядок: красный/зеленый/синий в
шестнадцатиричном счислении)

Цвет текста

Цвет ссылки


Тело документа











Посещенная ссылка

Активизируемая ссылка

Для указания стандартных цветов допускается
использовать их названия: RED, GREEN, BLUE и
другие.
Для создания произвольных цветов смешивайте
базовые:


Гиперссылки






Тэги тела документа идентифицируют отображаемые в окне
компоненты HTML-документа. Тело документа может
содержать ссылки на другие гипертекстовые документы
(гиперссылки) и фрагменты внутри документа.
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается
как текстовая и графическая (смысловая) информация
вашего документа.
HTML использует URL (Uniform Resource Locator) для
представления гипертекстовых ссылок и ссылок на сетевые
сервисы внутри HTML-документа. Для того, чтобы браузер
отобразил ссылку на URL, необходимо отчетить URL
специальными тэгами в HTML-документе. Синтаксис
HTML, позволяющий это сделать - следующий:

Гиперссылки





текст-который-будет-подсвеченкак-ссылка
Тэг открывает описание ссылки, а тэг
- закрывает его. Любой текст, находящийся между
данными двумя тэгами подсвечивается специальным
образом Web-браузером. Обычно этот текст отображается
подчеркнутым и выделенным синим (или другим) цветом.
Текст, обозначающий URL, не отображается браузером, а
используется только для выполнения предписанных им
действий при активизации ссылки (обычно при щелчке
мыши на подсвеченном или подчеркнутом тексте). Вот
пример сегмента HTML-документа:
Для получения дополнительной информации смотри
Текст-который-отобразится-впервой-строке-броузера
2. Создайте ссылку на данный анкер:
Текст
Например:


Список разделов




• Раздел 1


• Раздел 2





Гиперссылки















Раздел 1


Текст раздела 1


Раздел 2


Текст раздела 2

Вид на экране:
Список разделов
Раздел 1
Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2

Гиперссылки






Внимание! Анкер раздела может быть поставлен как в том
же документе, который просматривается в текущий момент,
так и в другом документе. Во втором случае браузер
осуществит загрузку другого документа и перейдет к
указанному для него разделу.
В качестве протокола в URL можно указывать не только
http://, но и ftp:// - для перехода к файлу (каталогу) на
FTP-сервере, например, для просмотра изображения или
выгрузки (upload) файла на компьютер посетителя Webстраницы. Пример:
"ftp://sunsite.nstu.nsk.su/pub/multimedia/pictures/Nov
osibirsk/2.jpg"> Необычный вид на центр города (96 k)


Гиперссылки






Протокол news: служит для вызова службы новостей, если
броузер ее поддерживает. Например:
Поддержка
WWW
Существует протокол mailto:, который активизирует
почтовую сессию с указанным пользователем. Ссылка:
с Web-page”> Пишите письма!
активизирует сессию посылки сообщения пользователю gun
на хосте ait.cs.nstu.ru с темой письма (Subject) “Письмо с
Web-page”, если браузер поддерживает запуск электронной
почты. Заметьте, что метод mailto: не требует указание
слэшей после двоеточия (как правило, после двоеточия
сразу идет электронный адрес абонента).

Заголовки разделов документов








HTML имеет шесть уровней заголовков, с номерами от
1 до 6 (заголовок первого уровня является заголовком
высшего уровня). По сравнению с нормальным текстом,
заголовки выделяются шрифтом - размером и
толщиной букв. Первый заголовок в каждом документе
должен быть выделен

. Синтаксис заголовков:
Текст заголовка
где ? - число от 1 до 6, определяющее уровень
заголовка.
Заголовок может быть с выравниванием


Секция






Секция служит для определения положения
фрагмента текста, заключенного между
тэгами



Возможные варианты выравнивания:
ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY>

Абзацы





В отличие от документов в большинстве текстовых
процессоров, прерывания строк и слов в HTMLфайлах не существенны. Обрыв слова или строки
может происходить в любом пункте в вашем
исходном файле, при просмотре это прерывание
будет проигнорировано. Например:


Параграф 1.

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



Абзацы





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

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

).
В абзацах допустимо выравнивание
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>


.