1 / 30

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

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

brandi
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

  10. Структура документа • Нормальная структура документа: • <HTML> • <HEAD> • <TITLE> Список сотрудников </TITLE> • ... • </HEAD> • <BODY> • ... • </BODY> • </HTML>

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

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

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

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

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

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

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

  18. Тело документа • Тэг <BODY> позволяет не только указать начало тела документа, но и дать его основные характеристики: • Фоновая картинка • <BODY BACKGROUND="URL"> • Цвет фона (порядок: красный/зеленый/синий в шестнадцатиричном счислении) • <BODY BGCOLOR="#$$$$$$"> • Цветтекста • <BODY TEXT="#$$$$$$"> • Цвет ссылки • <BODY LINK="#$$$$$$">

  19. Тело документа • Посещенная ссылка • <BODY VLINK="#$$$$$$"> • Активизируемаяссылка • <BODY ALINK="#$$$$$$"> • Для указания стандартных цветов допускается использовать их названия: RED, GREEN, BLUE и другие. • Для создания произвольных цветов смешивайте базовые: • <BODY ALINK="#0088ff">

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

  21. Гиперссылки • <A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A> • Тэг <A HREF="URL"> открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделенным синим (или другим) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа: • Для получения дополнительной информации смотри <A HREF= "http://www.softexpress.com/index.html> страницу компании СофтСервис</A>

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

  23. Гиперссылки • Для создания такой ссылки необходимо выполнить следующие шаги: • 1. Создайте анкер раздела. Синтаксис данного анкера следующий: • <A NAME="anchor"> Текст-который-отобразится-в-первой-строке-броузера </A> • 2. Создайте ссылку на данный анкер: • <A HREF="#anchor"> Текст </A> • Например: • <p><b>Список разделов</b></p> • <ul> <li><a href="#ex1">Раздел 1</a></li> • <li><a href="#ex2">Раздел 2</a></li> • </ul> <p>

  24. Гиперссылки • <a name="ex1"></a>Раздел 1 • <ul> Текст раздела 1</ul> • <a name="ex2"></a>Раздел 2 • <ul>Текст раздела 2 <br> • Вид на экране: • Список разделов • Раздел 1 • Раздел 2 • Раздел 1 • Текст раздела 1 • Раздел 2 • Текст раздела 2

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

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

  27. Заголовки разделов документов • HTML имеет шесть уровней заголовков, с номерами от 1 до 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен <H1>. Синтаксис заголовков: • <H?> Текст заголовка</H?> • где ? - число от 1 до 6, определяющее уровень заголовка. • Заголовок может быть с выравниванием • <H? ALIGN=LEFT|CENTER|RIGHT></H?>

  28. Секция • Секция служит для определения положения фрагмента текста, заключенного между тэгами • <DIV></DIV> • Возможные варианты выравнивания: • <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

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

  30. Абзацы • В исходном файле заголовок и два предложения находятся на двух разных строках. Web-браузер игнорирует это прерывание строки и начинает новый абзац только после знака <P>. Однако, чтобы сохранить удобочитаемость в исходных HTML-файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к <P>). • В абзацах допустимо выравнивание • <P ALIGN=LEFT|CENTER|RIGHT|JUSTIFY> </P>.

More Related