Лекция 3 История развития html
В 1989-1991 г.г. использовалась версия HTML 1.0-2.0. Внешний вид веб-страниц оставлял желать лучшего. Никто особенно не беспокоился о дизайне – беспокоились только о том, чтобы у всех в Сети была собственная «домашняя страница».
1995 год существует версия HTML 3.0. В это время начались «войны» между браузерами. Netscape и Microsoft боролись за господство в Сети. В эпицентре боевых действий оказались веб-разработчики. Во время этих войн каждая компания, поддерживающая свой браузер, продолжала добавлять в него собственные возможности, чтобы быть впереди всех. Сложно было оставаться в курсе всех новинок. Кроме того, в те дни часто приходилось писать по две веб-страницы: одну для браузера Netscape, другую – для Internet Explorer.
В 1998 г. появилась четвертая версия HTML 4.0. Окончились войны между браузерами и был создан Консорциум Всемирной паутины (W3C). Его целью было создать единый HTML-стандарт, чтобы держать все под контролем. Суть их намерений состояла в том, чтобы разделить HTML-структуру и дизайн и использовать для них два разных языка: один для структуры (HTML 4.0) и другой – для дизайна веб-страниц (CSS), а также убедить создателей браузеров, что в их интересах принять эти стандарты. Перед тем как были изобретены каскадные таблицы стилей CSS, в HTML были элементы, предназначенные и для структуры, и для дизайна страниц. Сейчас элементы, которые использовались для дизайна в HTML, больше не нужны.
В 1999 г. появился HTML 4.01 и до сих пор это самая популярная версия. Несмотря на то, что все надеялись, что 4.0 будет последней версией, время от времени приходилось вносить в него кое-какие изменения, но они незначительны. Теперь, когда есть единый стандарт языка HTML 4.01, можно надеяться, что ваши веб-страницы будут отображаться практически одинаково во всех браузерах.
Однако все время что-то меняется, создаются новые технологии. В 2000 году HTML и другой язык разметки, известный как XML, объединились, и родился ХHTML 1.0 (eXtensible, расширяемый, HTML). Он унаследовал особенности обоих родителей: популярность и дружелюбие к браузерам от HTML и способность к расширению и точность от XML. XML – это язык, который может быть использован для изобретения новых языков разметки, а HTML – и есть язык разметки. Использование ХHTML более перспективно и современно: ХHTML становится языком, который выбирается для браузеров, мобильных устройств и сотовых телефонов. Выбирая XHTML, повышается вероятность корректного отображения веб-страниц в большинстве браузеров и в мобильных устройствах.
Гипертекст
Одним из важнейших понятий для HTML-документов являются ссылки. Само название - HTML, язык разметки гипертекста, указывает на принцип организации таких документов.
Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.
Ссылка состоит из двух частей:
- первая из них – это то, что вы видите на веб-странице; она называется указатель или метка ссылки (anchor). По умолчанию она подчеркнута, это говорит о том, что на ней можно щелкнуть и перейти на другую страницу.
- вторая часть называется адресной частью ссылки, она дает инструкцию браузеру в виде URL-адреса.
Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.
Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь.
<a href=”URL-адрес”> Текстовый указатель ссылки </a>
Атрибут href указывает браузеру адрес назначения ссылки.
Адрес URL может быть задан в абсолютной форме, то есть начинаться с указания протокола и адреса Web-узла. Такая запись адреса используется, когда необходимо направить посетителя на другой Web-узел, и рассматривается как внешняя ссылка.
<a href=”http://www.site.com/index.html”> ссылка </a>
При использовании относительного адреса в ссылке задается только относительный путь поиска документа. В этом случае предполагается использование того же протокола и того же Web-узла, а ссылка рассматривается как внутренняя. Относительный путь – это ссылка, указывающая на другие страницы вашего сайта относительно веб-страницы, на которой эта ссылка находится.
<a href=”first.html”> ссылка </a>
Рекомендуется использовать относительные пути, чтобы сослаться на собственные страницы на этом же сайте, и URL-адреса, чтобы создать ссылку на страницу с других сайтов.
Изображения также могут служить ссылками. В этом случае на месте указателя ссылки нужно поместить тег, вставляющий изображение, т.е. поместить <img> между тегами <a>.
<a href=”medicine.html”> <img src=”logo.gif”> </a>
С помощью атрибутов можно задать дополнительную информацию об элементе.
Например,
<style type=”text/css”> (атрибут type указывает на то, какой язык стиля мы используем в данном случае CSS)
<a href=”irule.html”> (Атрибут href указывает на адрес назначения ссылки)
<img src=”sweetphoto.gif”> (Атрибут src определяет имя файла с изображением, которое задается в теге img)
Атрибуты всегда пишутся одинаково: сначала идет имя атрибута, затем знак равенства, затем значение атрибута, взятое в двойные кавычки.
У элемента <a> есть атрибут title, который предоставляет дополнительную информацию о ссылке. В разных браузерах атрибут title применяется по-разному, но в большинстве случаев появляется всплывающая подсказка.
Например,
Читайте <a href=«http://buzz.headfirstlabs.com» title=”Все самое интересное о кофеине”> Все о кофеине </a>
Создание ссылки внутрь страницы
Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается легче, если он имеет оглавление со ссылками на соответствующие разделы.
Для построения ссылки на текущий документ сначала нужно создать указатель или якорь, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра id тега <a>. При этом параметр href не используется, и браузер не выделяет содержимое тега <a>.
<a id=”chapter_5”> Глава 5 </a>
После того как место назначения определено, можно создать ссылку на него. Для этого вместо указания в атрибуте href адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это ссылка на текущий документ.
Например, <a href=”#chapter_5”> Глава 5 </a>
Подобным образом можно создавать ссылки на определенную часть другой страницы. Обычно, когда вы переходите по ссылке на другую страницу, она загружается с самого начала. Однако можно создать якорь на загружаемой странице и сделать так, чтобы загружаемая страница отображалась сразу с определенного места.
В этом случае на другой странице в том месте, куда нужно будет перейти по ссылке, создадим якорь:
<a id=”Coffee”> Кофе </a>
Затем в исходном документе создаем ссылку, в которую добавляем имя якоря, вот так:
<a href=«http://buzz.headfirstlabs.com#Coffee» title=”Читайте все самое важное о кофеине”> Все о кофеине </a>
Списки
Для создания списков в HTML нужны два элемента, которые создают список только при условии использования их обоих. Первый применяется для разметки каждого пункта списка. Второй определяет тип создаваемого списка: упорядоченный (нумерованный) или неупорядоченный (маркированный).
Нумерованный список задается тегом <ol>, а маркированный <ul>.
Каждый пункт списка задается тегом <li> (с.135).
Существует также список определений. Каждый элемент списка определений состоит из двух частей. В первой части списка записывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
Списки определений задаются с помощью тега-контейнера <dl> (definition list).
Тег <dt> (definition term) помечает определяемый термин.
Тег <dd> (definition description) помечает абзац с определением термина.
Текст определений, как правило, выводится со следующей строки с отступом вправо.
Пример – с.138.