Средства разработки Web-узлов Базовый инструментарий под управлением Windows 2K/XP: • Среда разработчика документов HTML — так называемый WYSIWYG-peдактор.
Download ReportTranscript Средства разработки Web-узлов Базовый инструментарий под управлением Windows 2K/XP: • Среда разработчика документов HTML — так называемый WYSIWYG-peдактор.
Средства разработки 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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
Slide 2
Средства разработки 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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
Slide 3
Средства разработки 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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
Slide 4
Средства разработки 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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
Slide 5
Средства разработки 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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.
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 достаточно гибок для того,
чтобы объявить любой дескриптор (например,
несколькими различными способами, в зависимости от
определяемого Web-разработчиком типа документа (DTD —
Document Type Definition).
Document Type Definition (DTD) — файл, в которым
определен набор дескрипторов, используемых в некотором
документе.
В основу XML положена идея предварительного
программирования, что позволяет Web-разработчику
создавать собственные дескрипторы и атрибуты. Для
определения формата каждого дескриптора (цвет, шрифт и
начертание шрифта) и в HTML, и в XML используются
каскадные таблицы стилей.
HTML версии 3.2
Основные положения.
Все тэги HTML начинаются с "<" (левой угловой скобки)
и заканчиваются символом ">" (правой угловой скобки).
Как правило, существует стартовый тэг и завершающий
тэг. Для примера приведем тэги заголовка, определяющие
текст, находящийся внутри стартового и завершающего
тэга и описывающий заголовок документа:
Завершающий тэг выглядит также, как стартовый, и
отличается от него прямым слэшем перед текстом внутри
угловых скобок. В данном примере тэг
WEB-браузеру об использовании формата заголовка, а тэг
HTML версии 3.2
Некоторые тэги, такие, как
(тэг, определяющий
абзац), не требуют завершающего тэга, но его
использование придает исходному тексту документа
улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих
тэг, и приведенный ранее пример может выглядеть
следующим образом:
Внимание! Дополнительные пробелы, символы табуляции
и возврата каретки, добавленные в исходный текст HTMLдокумента для его лучшей читаемости, будут
проигнорированы WEB-браузером при интерпретации
документа.
HTML-документ
может
включать
вышеописанные элементы только если они помещены
внутрь тэгов
и.
Структура документа
HTML-тэги могут быть условно разделены на две
категории: тэги заголовка и тэги тела документа. К
тэгам заголовка относятся следующие тэги:
Тип документа: (начало и
конец файла);
Заголовок: (описание
документа, например его имя);
Имя документа:
быть в заголовке);
Тело:
страницы).
Структура документа
Когда WEB-браузер получает документ, он
определяет,
как
документ
должен
быть
интерпретирован. Самый первый тэг, который
встречается в документе, должен быть тэгом
. Данный тэг сообщает WEB-браузеру,
что ваш документ написан с использованием
HTML. Минимальный HTML-документ будет
выглядеть так:
...тело документа...
Структура документа
Нормальная структура документа:
...
...
Теги заголовка
Внимание! Технически, стартовые и завершающие тэги
типа , и необязательны.
Но настоятельно рекомендуется их использовать,
поскольку использование данных тэгов позволяет
WEB-браузеру уверенно разделить заголовочную часть
документа и непосредственно смысловую часть.
Большинство 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
- Текст раздела 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-файлах, рекомендуется заголовки размещать
на отдельных строках, а абзацы отделять пустыми
строками (в дополнение к
).
В абзацах допустимо выравнивание
.