WEB-технологии

Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция

Описание

В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.

Работа состоит из  1 файл

Лекции_Web-тех.doc

— 1.76 Мб (Скачать документ)

Свойство Keywords позволяет определить ключевые слова Web-страницы. При формировании списка ключевых слов необходимо использовать слова, содержащиеся в тексте документа. Не стоит включать в Keywords служебные слова, записывать слова во множественном числе или повторять их несколько раз. Очередность ключевых слов составляется по степени важности в порядке убывания. Оптимальная длина последовательности ключевых слов не должна превышать 250 символов.

<META name="Description" content="Интернет-магазин Всякая всячина – самые низкие цены!">

<META name="Keywords" content="Интернет-магазин,  игрушки, книги, литература, журнал, музыка, диски, видео, DVD, двд, кино, софт, программы, игры, ПО, игрушки,  books, video, music, software, toys">

Среди свойств группы HTTP-EQUIV наиболее важными являются свойства Content-Type, Content-Style-Type и Content-Script-Type.

Свойство Content-Type отвечает за указание типа документа и кодировки символов. Данный метаописатель устанавливает в качестве кодировки HTML-страницы Кириллицу (Windows):

<META http-equiv="Content-Type" content="text/html;  charset=windows-1251">

Свойство Content-Style-Type служит для указания языка таблицы стилей. Если язык таблиц стилей не задан, по умолчанию используется язык text/css. Приведенная ниже запись явно задает в качестве языка таблицы стилей CSS:

<META http-equiv="Content-Style-Type" content="text/css">

Свойство Content-Script-Type определяет язык программирования сценариев. Возможны несколько значений данного параметра, однако по умолчанию используется JavaScript. Язык программирования сценариев JavaScript можно задать с помощью следующего метаописателя:

<META http-equiv="Content-Script-Type" content="text/javascript">

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

Элемент BASE

Элемент BASE используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является их относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а его месторасположение относительно текущего адреса. Элемент BASE как раз и задает адрес, относительно которого и будут браться относительные ссылки.

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

Основным  атрибутом элемента является href, который задает полный URL-адрес документа. Пример иллюстрирует применение элемента BASE и относительных ссылок:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HEAD>

<TITLE>Пример использования  элемента BASE</TITLE>

<BASE href= "http://www.somewhere.ru">

</HEAD>

<BODY> ...текст документа...

<a href= "/images/someimage.jpg">Относительная  ссылка на изображение</a>

...текст документа...

</BODY>

</HTML>

В этом примере переход по относительной  ссылке задается относительно URL-адреса http://www.somewhere.ru. Таким образом, заданная в этом документе ссылка в абсолютном варианте независимо от месторасположения документа будет записана как http://www.somewhere.ru/images/someimage.jpg. Если базовый адрес не задан, то все относительные ссылки интерпретируются относительно каталога, в котором находится данный HTML-документ.

Элемент BASE можно использовать и в заголовке, и в теле документа, причем несколько раз. Область действия элемента определяется от места его задания и до конца документа или до следующего объявления элемента BASE, если таковой имеется.

Элемент LINK

Элемент LINK задает вид взаимоотношений между содержащим его документом и другим ресурсом Сети и устанавливает между ними логическую связь. Один элемент LINK устанавливает связь только с одним внешним документом. Однако в HTML-документе может присутствовать несколько таких элементов.

Основными атрибутами элемента LINK являются href, указывающий URL-адрес документа, с которым задается взаимоотношение, и rel или rev, задающие прямую и обратную ссылку и определяющие тип ссылки, который показывает, чем документ, указанный в ссылке, является по отношению к текущему документу. Типы ссылок определены в Спецификации HTML.

Например, запись

<LINK rel="Copyright" href="copyright.html">

означает, что документ copyright.html является документом, содержащим сведения об авторском  праве для текущего документа (прямая ссылка), а запись

<LINK rev="Chapter" href="main.html">

означает, что текущий документ является главой документа main.html (обратная ссылка).

На данный момент информация о взаимоотношениях документов, задаваемых элементом LINK, браузерами практически не отображается. Пользователь может увидеть эти сведения, только просмотрев HTML-код документа.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>Документ  на русском языке</TITLE>

<LINK title ="Этот  же документ на английском  языке"

type="text/html" rel="alternate"

href=http://www.somewhere.ru/english.html hreflang="en">

...

</HEAD>

<BODY>...текст документа на русском языке...</BODY>

</HTML>

Также важным применением элемента LINK является подключение к документу внешней таблицы стилей. В этом случае элемент LINK имеет вид:

<LINK rel="StyleSheet" href="style.css" type="text/css">

Элемент STYLE

Элемент STYLE позволяет включать в документ внутренние таблицы стилей. Заголовок документа может содержать любое количество этих элементов. Обязательный атрибут type указывает на тип таблицы стилей, т.е. на язык, на котором описываются стили. Для каскадных таблиц стилей этот атрибут всегда должен иметь значение text/css.

Ниже  представлен пример включения каскадных  таблиц стилей в HTML-документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

  <TITLE>Пример использования  элемента STYLE</TYTLE>

  <STYLE type="text/css">

    body{

      background:#000;

      color:#ccc;

      font-family: helvetica, arial, sans-serif;

    }

  </STYLE>

</HEAD>

<BODY>

<P>Информация  к размышлению...</P>

</BODY>

</HTML>

HTML позволяет авторам создавать  документы, учитывающие особенности  устройств, на которых будет  отображаться HTML-документ. К таким  устройствам относятся принтеры, проекторы, устройства, предназначенные для людей с ограниченными физическими возможностями и др. Для того, чтобы использовать разные таблицы стилей для различных устройств, используется атрибут media. По умолчанию, значением данного атрибута является screen (т.е. предполагается, что документ будет отображаться на экране монитора).

В описанном  выше примере можно переопределить используемые цвета и размер шрифта, чтобы страница лучше выглядела  при печати. Для этого можно  добавить другой блок STYLE с атрибутом media со значением print, как показано ниже:

<STYLE type="text/css" media="print">

  body{

    background:#fff;

    color:#000;

    font-family: helvetica, arial, sans-serif;

    font-size:300%;

  }

</STYLE>

Результат предыдущего примера представлен на рисунке 5.2, где применяется стиль с параметром media="screen". На рисунке 5.3 представлен результат предварительного просмотра той же страницы, однако при этом уже действует стиль для печати, заданный параметром media="print" .

Рис. 5.2.  Страница со стилем для просмотра на мониторе

Рис. 5.3.  Страница со стилем для вывода на печать

Элемент SCRIPT

Элемент SCRIPT предназначен для добавления так называемых клиентских сценариев - сценариев, которые выполняются браузером и написаны на языке JavaScript. JavaScript добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.

Элемент SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Когда браузер встречает такой сценарий, он прекращает разбор оставшегося документа, пока не выполнит код сценария. Поэтому, чтобы гарантировать, что код JavaScript будет доступен до загрузки основного документа, его необходимо поместить в раздел HEAD .

Например, можно предупредить посетителя с  помощью следующего сценария, что  определенная ссылка отправит его на другой сервер:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>  <TITLE>Пример  использования элемента SCRIPT</TITLE>

  <SCRIPT>

    function crossing(){return confirm("Вы готовы перейти на другой сервер?")    }

  </SCRIPT></HEAD>

<BODY>

    <A href="http://www.somewhere.com" onclick="return crossing()"> Ссылка на другой сервер </A>

</BODY> </HTML>

Если открыть этот пример в браузере и щелкнуть на ссылке, то код попросит подтвердить действие пользователя, как представлено на рисунке 5.4.

Рис. 5.4.  Пример использования элемента SCRIPT

Структурирование  текста

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

Заголовки разделов страниц: элементы H1…H6

HTML предлагает шесть заголовков  разного уровня, для задания которых  используются элементы H1, H2, …, H6. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент H1 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент H6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:

<H1>Заголовок  1-го уровня</H1>

<H2>Заголовок  2-го уровня</H2>

<H3>Заголовок  3-го уровня</H3>

<H4>Заголовок  4-го уровня</H4>

<H5>Заголовок 5-го уровня</H5>

<H6>Заголовок  6-го уровня</H6>

А на рисунке 6.1 представлен вид заголовков различного уровня в браузере.

Рис. 6.1.  Вид различных заголовков в браузере

Стандартные параграфы: элемент P

Неприятной особенность браузеров  является то, что они не обрабатывают символы перевода строки. Т.е. текст, который разработчик набрал на своем  компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, удалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент P. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот, приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:

<P>Гоголь только под конец жизни о душе задумался,

 а смолоду у него  вовсе совести не было.

   Однажды невесту  в карты проиграл. И не отдал.</P>

Предварительно форматированный  текст: элемент PRE

Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на Web-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского "Блек энд Уайт" с помощью элементов P и SAMP. Результат представлен на рисунке 6.2.

Если

     Гаванну

             окинуть мигом -

рай-страна,

       страна что надо.

 

<PRE>

Если

     Гаванну

             окинуть мигом -

рай-страна,

       страна  что надо.

 

</PRE>

Рис. 6.2.  Пример использования элементов P и SAMP

Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB и SUP.

Цитирование других источников: элемент BLOCKQUOTE

Информация о работе WEB-технологии