Основы разработки веб – приложений. HTML – язык разметки гипертекста

Постоянный рост – характеристика применимая ко всему, что касается Интернета, его услуг и возможностей. Растет не только число пользователей Интернета, увеличивается количество регистрируемых доменов, создаваемых сайтов, Интернет - представительств предприятий и государственных структур. Расширяется и число услуг, реализуемых через глобальную сеть, начиная от прогноза погоды, новостей и курсов валют и заканчивая оформлением официальных документов (налоговые декларации, заявки на гранты) путем заполнения ряда интерактивных web–форм.

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

Введение в веб – технологии

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

Особенности веб – технологий:

Web-технологии есть концепция работы с информацией. Она отличается следующими особенностями:

1. техническая основа Web-технологий – локальные и глобальные сети, Интернет
2. применение особого типа тонких клиентов: web-браузеров
3. число потребителей информации практически не ограничено. публикатор сам может задать особые условия на доступ к публикуемой информации;
4. в публикациях могут содержаться ссылки на другие публикации без ограничения на местоположение и источники материалов;
5. активная работа поисковых машин
6. доставка и тиражирование контента практически бесплатны.

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

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

Спецификации HTML

Язык HTML приобрел популярность в середине 90-х годов, благодаря экспоненциальному росту сети Интернет. К этому времени назрела необходимость стандартизации языка, поскольку различные компании, разрабатывавшие программное обеспечение для доступа в Интернет, предлагали свои варианты инструкций HTML, число которых все возрастало и возрастало. Настала пора прийти к какому-то единому соглашению в части применения тэгов языка HTML.

Работу по созданию спецификации HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно — W3C).

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

Вскоре после спецификации 2.0 была выпущена рабочая версия спецификации 3.0, срок окончания периода обсуждения которой истек в сентябре 1995 г. Эта спецификация так и не была принята в качестве официальной рекомендации. В нее планировалось включить большое разнообразие тэгов и возможностей, специфичных для отдельных браузеров, однако Консорциум W3C не нашел возможности разработать хорошую спецификацию для такого большого числа инструкций.

После долгих размышлений в мае 1996 г. был выпущен проект HTML 3.2.

Проект основывался на части тэгов, имеющихся в версии 3.0, которые показывали стабильность в работе. В сентябре 1996 г. после нескольких месяцев обсуждения версия 3.2 стала предлагаемой спецификацией, а в январе 1997 г. — официальной рекомендацией.

Июль 1997 года ознаменовался выходом предлагаемой спецификации HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На сегодняшний день это последняя из принятых спецификаций.

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

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

Первым тэгом, с которого следует начинать описание документов HTML, является тэг <HTML>. ОН должен всегда начинать описание документа, а завершать описание документа должен тэг </HTML>. Эти тэги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ является обыкновенным текстовым файлом. Без этих тэгов браузер или другая программа просмотра, возможно, будет не в состоянии идентифицировать формат документа и правильно его интерпретировать.

Чаще всего тэг <HTML> используется без параметров. В предыдущих версиях использовался параметр VERSION, отмененный спецификацией HTML 4.0. На смену этому параметру пришел тэг DOCTYPEX

Между парой тэгов <HTML> и </HTML> располагается сам документ. Документ может состоять из двух разделов — раздела заголовка (начинающийся тэгом <HEAD> ) и раздела содержательной части документа (начинающийся тэгом <BODY> ).

Для обозначения кодировки текста используется мета - тэг, размещающийся в разделе <HEAD> документа:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Раздел документа BODY

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

Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэгом </BODY>, между которыми располагается все содержимое данного раздела.

Связь с другими документами

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

Тэг <BASE>

Относительные ссылки расширяются до полных на основе базового адреса. По умолчанию базовым адресом считается текущий адрес страницы. Но, попадая на ПК пользователя, страница получает базовый адрес на основе текущего расположения в файловой системы пользователя, и относительная ссылка <a href="article.htm">Статьи</a> расширяется например так: file:///C:/article.htm.

Тэг <BASE> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер.

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

Тэг <BASE> имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа.

<BASE HREF="//osu.cctpu.edu.ru/news.htm">

Тэг <BASE> указывает браузеру, где искать файл. Т.е, если пользователь сохранит такую страницу, то относительная ссылка расширится до адреса http:// osu.cctpu.edu.ru/news.htm.

Тэг <LINK>

Тэг <LINK> можно применять:

1. для связи с другими документами, не только HTML

   Пример. Ссылка на первую страницу:

   <link rel="start" href="/" 
         type="text/html" title="Начало" />

   Пример. Ссылка на оглавление:

   <link rel="contents" href="/" 
         type="text/html" title="Оглавление" />
2. для связи с внешним файлом CSS:
   • а) содержимое которого будет использовано при обработке html-документа браузером:

     <link rel="stylesheet" href="/style.css" 
           type="text/css" media="all" />
   • б) содержимое которого может быть использовано для обработки html-документа, но не будет использовано по умолчанию, если есть связь со style.css и он загружен (см. предыдущий пункт). Можно использовать для переключения между несколькими таблицами CSS, вплоть до полного изменения внешнего вида html-документа:

     <link rel="alternate stylesheet" href="/redstyle.css" 
           type="text/css" media="all" title="Красный раздел сайта" />
3. чтобы подсказать браузеру, что у сайта есть новостные ленты в формате XML (RSS):

   <link rel="alternate" href="/rss2" 
         type="application/rss+xml" title="RSS 2.0 Новости сайта"/>

Размещать элемент <LINK> нужно в разделе <HEAD> документа.