Средства разработки Web-узлов Базовый инструментарий под управлением Windows 2K/XP: Базовый инструментарий под управлением Windows 2K/XP: Среда разработчика. - презентация

1 Средства разработки Web-узлов Базовый инструментарий под управлением Windows 2K/XP: Базовый инструментарий под управлением Windows 2K/XP: Среда разработчика документов HTML так называемый WYSIWYG-peдактор. Возможно использовать обычные текстовые редакторы, имеющие дополнительные возможности, например, Jview или встроенный редактор файлового менеджера FAR с плагином Colorer, подсвечивающем комментарии, теги и программные конструкции Среда разработчика документов HTML так называемый WYSIWYG-peдактор. Возможно использовать обычные текстовые редакторы, имеющие дополнительные возможности, например, Jview или встроенный редактор файлового менеджера FAR с плагином Colorer, подсвечивающем комментарии, теги и программные конструкции

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

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

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

5 Языки гипертекстовой разметки В отличие от HTML, язык XML достаточно гибок для того, чтобы объявить любой дескриптор (например, ) несколькими различными способами, в зависимости от определяемого Web-разработчиком типа документа (DTD Document Type Definition). В отличие от HTML, язык XML достаточно гибок для того, чтобы объявить любой дескриптор (например, ) несколькими различными способами, в зависимости от определяемого Web-разработчиком типа документа (DTD Document Type Definition). Document Type Definition (DTD) файл, в которым определен набор дескрипторов, используемых в некотором документе. Document Type Definition (DTD) файл, в которым определен набор дескрипторов, используемых в некотором документе. В основу XML положена идея предварительного программирования, что позволяет Web-разработчику создавать собственные дескрипторы и атрибуты. Для определения формата каждого дескриптора (цвет, шрифт и начертание шрифта) и в HTML, и в XML используются каскадные таблицы стилей. В основу XML положена идея предварительного программирования, что позволяет Web-разработчику создавать собственные дескрипторы и атрибуты. Для определения формата каждого дескриптора (цвет, шрифт и начертание шрифта) и в HTML, и в XML используются каскадные таблицы стилей.

6 HTML версии 3.2 Основные положения. Основные положения. Все тэги HTML начинаются с " " (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: Все тэги HTML начинаются с " " (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: Заголовок документа Заголовок документа Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг говорит WEB-браузеру об использовании формата заголовка, а тэг - о завершении текста заголовка. Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг говорит WEB-браузеру об использовании формата заголовка, а тэг - о завершении текста заголовка.

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

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

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

10 Структура документа Нормальная структура документа: Нормальная структура документа: Список сотрудников Список сотрудников

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

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

13 Теги заголовка Синтаксис этих команд прост и стандартен. Синтаксис этих команд прост и стандартен.

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

15 Теги заголовка Поскольку инструкции МЕТА находятся в "шапке" документа, они могут использоваться при настройке параметров программы-браузера для оптимального показа данного документа пользователю. В частности, МЕТА может содержать информацию о кодировке документа: Поскольку инструкции МЕТА находятся в "шапке" документа, они могут использоваться при настройке параметров программы-браузера для оптимального показа данного документа пользователю. В частности, МЕТА может содержать информацию о кодировке документа: Эта инструкция означает, что документ написан на русском языке, в кодировке КОИ8. Браузеры используют эту информацию для автоматического переключения доступных кодировок. Эта инструкция означает, что документ написан на русском языке, в кодировке КОИ8. Браузеры используют эту информацию для автоматического переключения доступных кодировок.

16 Теги заголовка МЕТА может использоваться для создания документов, содержимое которых освежается через заданный промежуток времени (в секундах): МЕТА может использоваться для создания документов, содержимое которых освежается через заданный промежуток времени (в секундах): Включение этой инструкции в "шапку" приведет к тому, что через 12 секунд после загрузки текущего документа браузер вызовет страницу, адрес которой указан как значение URL. Если значением URL является не документ HTML, а, скажем, звуковой файл, то он будет исполнен в указанный срок. Эта техника носит название Client Pull. Включение этой инструкции в "шапку" приведет к тому, что через 12 секунд после загрузки текущего документа браузер вызовет страницу, адрес которой указан как значение URL. Если значением URL является не документ HTML, а, скажем, звуковой файл, то он будет исполнен в указанный срок. Эта техника носит название Client Pull.

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

18 Тело документа Тэг позволяет не только указать начало тела документа, но и дать его основные характеристики: Тэг позволяет не только указать начало тела документа, но и дать его основные характеристики:BODY Фоновая картинка Фоновая картинка Цвет фона (порядок: красный/зеленый/синий в шестнадцатиричном счислении) Цвет фона (порядок: красный/зеленый/синий в шестнадцатиричном счислении) Цвет текста Цвет текста Цвет ссылки Цвет ссылки

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

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

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

22 Гиперссылки Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальный скрытый анкер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. При щелчке на ссылке браузер переместит вас на указанный раздел документа, а строка, в которой стоит анкер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера). Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальный скрытый анкер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. При щелчке на ссылке браузер переместит вас на указанный раздел документа, а строка, в которой стоит анкер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

23 Гиперссылки Для создания такой ссылки необходимо выполнить следующие шаги: Для создания такой ссылки необходимо выполнить следующие шаги: 1. Создайте анкер раздела. Синтаксис данного анкера следующий: 1. Создайте анкер раздела. Синтаксис данного анкера следующий:анкер Текст-который-отобразится-в- первой-строке-броузера Текст-который-отобразится-в- первой-строке-броузера 2. Создайте ссылку на данный анкер: 2. Создайте ссылку на данный анкер: Текст Текст Например: Например: Список разделов Список разделов Раздел 1 Раздел 1 Раздел 2 Раздел 2

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

25 Гиперссылки Внимание! Анкер раздела может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае браузер осуществит загрузку другого документа и перейдет к указанному для него разделу. Внимание! Анкер раздела может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае браузер осуществит загрузку другого документа и перейдет к указанному для него разделу. В качестве протокола в URL можно указывать не только но и ftp:// - для перехода к файлу (каталогу) на FTP-сервере, например, для просмотра изображения или выгрузки (upload) файла на компьютер посетителя Web- страницы. Пример: В качестве протокола в URL можно указывать не только но и ftp:// - для перехода к файлу (каталогу) на FTP-сервере, например, для просмотра изображения или выгрузки (upload) файла на компьютер посетителя Web- страницы. Пример: Необычный вид на центр города (96 k) Необычный вид на центр города (96 k)

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

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

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

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

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