Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Суть и составные части Web технологии

↑

Стр 1 из 9Следующая ⇒

Введение

Поскольку после прочтения " Обращения к читателям " вы остались на моих страницах - значит вас это вероятно интересует. Попробую утолить ваш информационный голод.

Немного истории

Всемирная информационная сеть (World Wide Web далее Web) имеет недолгую, по людским меркам, историю. Годом рождения Web считается 1992 год, а отцом основателем был некто Tim Berners-Lee, который сумел, используя новые сетевые технологии и опыт своих предшественников, сделать Web приятным и удобным средством распространения информации во всемирной сети компьютерных сетей Internet (Internet существует с середины 60-х годов).

Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц.
Ну а в дальнейшем сами знаете что случилось, или вы не обнаруживаете у себя признаков Internet-зависимости?

HTML был разработан на основе мощного языка разметки SGML, путем переноса некоторых его функций разметки данных в сетевую среду для разметки гипертекста. Одновременно с развитием Web технологий, насыщением Web новыми сервисами и возможностями, развивался и язык разметки гипертекста. С момента своего появления стандарт HTML претерпел множество изменений, последнее из которых это спецификация HTML 4.01, анонсированная консорциумом W3C 24 декабря 1999 г.

Краткую и позновательную историю о рождении и развитии гипертекста (с картинками) можно посмотреть здесь: Краткий экскурс в историю гипертекста.

Суть и составные части Web технологии

Итак выделим базовые элементы технологии Web:

Internet это всемирная сеть разнородных компьютерных сетей, взаимодействующих по протоколу TCP/IP.
Web является одним из приложений Internet (наряду с электронной почтой, новостями и прочими электронными сервисами), предназначенным для массового распространения разнообразной информации.
Носителями информации в Web служит Web-страницы, содержащие текст, графику, мультимедиа элементы и гиперссылки на другие ресурсы Web или Internet.
Для передачи гипертекста Web-страниц в Internet используется специально разработанный протокол HTTP (Hyper Text Transfer Protocol).
Для разработки Web-страниц используется специальный язык разметки гипертекста HTML (Hyper Text Markup Language).
Для просмотра Web-страниц используется специальная клиентская программа Web-броузер. В окне Web-броузера отображаются результаты интерпретации языка HTML с Web-страниц, полученных во время навигации по гиперссылкам.

Основы HTML

После экскурса в историю создания Web и теоретических основ технологии перейдем непосредственно к предмету - языку HTML.

Базовые элементы языка и структура HTML документа

Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ>

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.

<ТЕГ> Контейнер </ТЕГ>

Открывающий тег служит для указания программе-броузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-броузеру о конце объекта или окончания применения свойств, заданных в открывающем теге.

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

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

Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом структура простого HTML документа выглядит примерно так:

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

<HTML> - Начало документа

<HEAD>
ЗАГОЛОВОК ДОКУМЕНТА
</HEAD>

<BODY>
ТЕЛО ДОКУМЕНТА
</BODY>

</HTML> - Конец документа

А знаете ли вы что можно посмотреть HTML-код страницы в окне броузера? Большинство Web-броузеров позволяют просматривать Web-страницы в формате HTML. Например, в броузере Internet Explorer, для просмотра исходного кода документа необходимо нажать на просматриваемой странице правую кнопку мыши и выбрать во всплывающем меню пункт - Просмотр в виде HTML. Очень полезно, в целях самообучения, посмотреть как реализованы отдельные элементы на профессионально разработанных сайтах. Главное в этом деле не нарушать авторские права владельцев - например, копированием их графических элементов или сценариев на свои страницы.

Основы HTML

Ссылки в HTML документах

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

Ссылка состоит из двух компонентов: так называемого якоря (anchor) или элемента привязки и URL (Universal Resurse Locator) связанного с ним ресурса Internet.
Первый компонент ссылки - якорь это текстовый или графический объект, который как правило служит органом управления на Web-странице. Каждый раз при просмотре Web-страниц мы видим множество различных элементов-якорей. Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные подчеркнутым курсивом элементы текста, адреса электронной почты.
Второй компонент ссылки не отображается Web-броузером, но служит конкретным указанием где в Internet найти, и что сделать при активизации пользователем соответствующего ему якоря.
Адреса ресурсов бывают относительные и абсолютные.

Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег <BASE> (См. раздел 2.3.). Относительный адрес задается в сокращенной форме (путь/файл). Например, если ваша начальная страница index.htm загружена броузером c httр://www.site.ru, то использование в ней относительной ссылки resume.htm означает загрузку httр://www.site.ru/resume.htm.

Абсолютные адреса используются для привязки к ресурсам других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл). Например:httр://www.sitename.ru/filename.htm.

Что такое ссылка теперь вроде ясно. А какие они бывают и как задаются в HTML-документе?
Ссылки в документах задаются при помощи контейнера <A>...</A>, следующей структуры:

<A HREF="Ресурс" TARGET="имя окна" TITLE="Подсказка">Элемент - якорь</A>

Атрибут HREF в открывающем теге задает ресурс который необходимо обработать броузеру при выборе на Web-странице, соответствующего ему якоря. Рассмотрим наиболее часто используемые ресурсы:

<A HREF="URL"> - ссылки на другие документы HTML и файлы.
<A HREF="ftр://ftp_server/path/filename"> - ссылки на файлы FTP-сервера.
<A HREF="mailto:e-mail"> - ссылки на адреса электронной почты.
<A HREF="news:newsgroup"> - ссылки на группы новостей.

Атрибут TITLE задает текстовую подсказку в стиле ToolTip, отображаемую броузером при позиционировании указателя-курсора в зоне элемента-якоря.

Заключеный в контейнер элемент-якорь выделяется броузером особым образом (текст-цветом и подчеркиванием, графика-рамкой) при отображении на Web-странице. Можно задать свой способ выделения элемента-якоря в атрибутах тега <BODY> - тела документа (См. раздел 2.4.).
Теперь рассмотрим несколько конкретных примеров использования ссылок в документах:

<A HREF="httр://www.site.ru" TITLE="Переход на www.site.ru"> Заходите к нам на огонек </A> - абсолютная ссылка: переход на сайт www.site.ru, текстовый якорь - Заходите к нам на огонек, с подсказкой.

<A HREF="/VW/cars.htm"> Модельный ряд VW </A> - относительная ссылка: открытие станицы cars.htm в подразделе VW относительно раздела основной страницы, текстовый якорь - Модельный ряд VW, без подсказки.

<A HREF="mailtо:webmaster@freemail.ru">Связь с вебмастером</A> - загрузка интерфейса к почтовой системе пользователя с автозаполнением реквизитов получателя, текстовый якорь - Связь с вебмастером, без подсказки.

<A HREF="ftр://ftp.site.ru/soft/driver.zip">Новый драйвер здесь</A> - доступ на FTP-сервере к файлу драйвера, текстовый якорь- Новый драйвер здесь, без подсказки.

При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <A>...</A> использовать конструкцию <IMG SRC="файл"> (См. раздел 3.2.). Например:

<A HREF="/VW/passat.htm"><IMG SRC="/VW/CARS/passat.gif"></A> - относительная ссылка: открытие станицы passat.htm в подразделе VW относительно раздела основной страницы, графический якорь-passat.gif, без подсказки.

Кроме вышеперечисленных ссылок существуют еще внутренние ссылки или закладки. Этот тип ссылок используется для удобства перемещения в пределах документа. Для использования в HTML-документе закладок необходимо задать имена тех областей документа, на которые необходимо ссылаться.

Имя закладки в теле документа задается использованием атрибута NAME=ИмяЗакладки в контейнере <A>...</A>. Причем в данном случае текст, заключенный в контейнер, не является элементом-якорем (но выводится).

Например для перехода на начало документа необходимо поместить там закладку:

<A NAME=DocBegin>Начало документа<A>

Внутренняя ссылка на закладку в документе имеет следующий формат:

<A HREF="URL документа#ИМЯ">Элемент - якорь</A>

Например для размещения в документе ссылки на внутреннюю закладку (содержащуюся в данном документе) необходимо применить:

<A HREF="#DocBegin">Перейти к началу документа</A>

А для размещения в документе ссылки на внешнюю закладку (например содержащуюся в файле Doc1.htm) необходимо применить:

<A HREF="Doc1.htm#DocBegin">Перейти к началу документа Doc1.htm</A>

В заключении надо описать еще один важный атрибут тега ссылки, это атрибут TARGET. Данный атрибут задает окно либо фрейм (См. раздел 4.2.) назначения для документа заданного атрибутом HREF. По умочанию загрузка происходит в текущее окно броузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов броузера: _blank, _self, _parent, _top. Например:

<A HREF="sample/sample.htm" TARGET="new_win">Пример</A> - загрузка документа sample.htm в новое окно броузера с именем "new_win".

Вот пожалуй и все что я могу вам рассказать о ссылках. Едем дальше?

Заголовок HTML документа

Заголовок является необязательной частью структуры HTML документа и служит для определения служебной информации и названия документа. В случае использования в документе контейнера заголовка <HEAD>...</HEAD> единственным обязательным его элементом является контейнер <TITLE>...</TITLE>, который задает имя документа. Именно это имя пользователь видит в заголовке окна броузера при просмотре Web-страниц в Internet.

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

Внимание! В этом и в дальнейших примерах используются выдуманные e-mail адреса!

Пример 1. Формирование заголовка документа. [просмотр примера в окне]

<HTML>
<HEAD>
<TITLE>Автомобили Фольксваген</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<META NAME="Keywords" LANG=ru CONTENT="автомобили, авто, Фольксваген, Гольф, Бора, Поло, Пассат, Жук">
<META NAME="Description" CONTENT="Модельный ряд автомобилей Фольксваген - 2000 года">
<BASE HREF="http://www.cars.ru/vw">
<LINK REL="author" HREF="mailto:autofan@mail.ru">
</HEAD>
<BODY>
В разработке.
</BODY>
</HTML>

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

Далее следует последовательность <META> тегов, задающих так называемую мета (или внешнюю) информацию о документе. У <META> тегов наиболее часто используются следующие атрибуты:

HTTP-EQUIV - задать имя мета-записи в документе;
NAME - задать имя дополнительной мета-записи (по умолчанию NAME=HTTP-EQUIV);
CONTENT - присвоить значение мета-записи заданной атрибутом NAME или HTTP-EQUIV;
LANG - язык описания значений мета-записи;

В нашем примере первый <META HTTP-EQUIV="Content-Type"> тег описывает тип и кодировку содержимого документа.
Два следующих <META> тега служат для передачи информации о содержании документа поисковым службам Internet.

А знаете ли вы как работают поисковые службы Internet? Многие поисковые службы индексируют только начальные страницы сайтов. Как правило индексированию подвергаются следующие элементы документа: заголовок <title>, заголовки уровней <h1>...<h6> в теле документа и ключевые слова заданные в <meta> теге. Какой индекс-описание вашего сайта будет сформирован при индексировании, если ваша начальная страница содержит только броскую графическую заставку и ссылки на другие страницы? Мягко говоря - неважный будет индекс. Ваш сайт никто не сможет найти. Какой выход? Серьезно относиться к выбору названия документа, созданию его структуры и использованию <meta> тегов.

Таким образом, тег <META NAME="Keywords" LANG=ru CONTENT=" "> задает список ключевых слов, содержащихся в документе, а тег <META NAME="Description" CONTENT=" "> является словесным описанием содержимого документа.

Далее следует тег <BASE HREF="URL">, задающий базовый адрес данного документа. Это необходимо для поддержания работоспособности относительных ссылок, в случае миграции документа в Internet или изменения каталога его загрузки. Как уже говорилось выше, при отсутствии тега <BASE> относительные ссылки в документе определяются от адреса его загрузки.

Завершает наш заголовок тег <LINK>. Данный тег не отображает информацию в окне броузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега <LINK> наиболее часто используются следующие атрибуты:

REV - отношение текущего документом с другим, заданным HREF (обратное REL);
REL - отношение между документом заданным HREF и текущим документом (обратное REV);
HREF - задает URL документа или объекта;
LANG - языковая версия;
MEDIA - назначение документа (Print/Screen);
TYPE - тип содержимого связанного объекта (листа стилей);

Данный тег довольно редко используется, как правило его применение ограничивается привязкой листа стилей (stylesheet) к документу (См. раздел 3.6.), но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов <LINK> с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev), документ/автор (author), документ/оглавление (index). В нашем примере тег <LINK> использован для формирования связи документ/автор.

Вот еще несколько примеров использования отношений в документах:

<LINK REL=Prev HREF="chapter7.htm"> - означает что документ chapter7.htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

<LINK REL=Next HREF="chapter9.htm"> - означает что документ chapter9.htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

<LINK REV=Next HREF="chapter9.htm"> - обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9.htm;

<LINK REL=stylesheet TYPE="text/css" MEDIA=print HREF="/style/PrnStyle.css"> - означает, что для печати текущего документа использовать лист стилей изstyle/PrnStyle.css;

Ну вот и все. От заголовка переходим к телу.

Тело HTML документа

Тело HTML документа располагается после заголовка и ограничено контейнером <BODY>...</BODY>. Содержимое тела документа отображается в окне Web-броузера и состоит из маркированного тегами форматирования текста, таблиц, графических и прочих мультимедиа-элементов, ссылок на другие ресурсы и различных органов управления. В приведенном в предыдущей главе примере (Пример №1), тело документа состоит из одной единственной строки " В разработке ".

Так как в контейнере <BODY> нами не были заданы атрибуты внешнего вида документа, то данный текст будет отображен в окне броузера в соответствии с пользовательскими установками. Для обеспечения соответствия между внешним видом документа в броузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега <BODY>:

BGCOLOR - цвет фона документа;
BACKGROUND - URL графического изображения, для создания фона;
BGPROPERTIES - режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES=FIXED - стационарный фон);
TEXT - цвет текста документа;
LINK - цвет выделения элементов-якорей ссылок;
ALINK - цвет выделения активных элементов-якорей ссылок;
VLINK - цвет выделения элементов-якорей просмотренных ссылок;

Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям:

BLACK=#000000		MAROON=#800000
GREEN=#008000		OLIVE=#808000
GRAY=#808080		NAVY=#000080
RED=#FF0000		PURPLE=#800080
YELLOW=#FFFF00		TEAL=#008080
BLUE=#0000FF		LIME=#00FF00
WHITE=#FFFFFF		FUSHSIA=#FF00FF
SILVER=#C0C0C0		AQUA=#00FFFF

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

Пример 2. Формирование тела документа. [просмотр примера в окне]

<HTML>
<HEAD>
<TITLE>Атрибуты тела документа</TITLE>
</HEAD>
<BODY BGCOLOR ="SILVER", TEXT="BLACK",
LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1>Наш документ такой - как мы задумали!</H1>
<HR>
<H2>Обратите внимание на:</H2>
<P>Цветовое выделение элемента-якоря ссылки в документе
<P>Цвет текста документа
<P>Цвет фона документа</P>
<HR>
<P ALIGN=CENTER><A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>
</BODY>
</HTML>

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

Зададимся теперь вопросами форматирования разнородного содержимого тела документа и перейдем к третьей главе.

Основы форматирования

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

Форматирование текста

Данные текстового формата по прежнему являются доминирующими в HTML документах (если конечно ваш сайт не относится к категории ХХХ или посвящен изобразительному искусству). Для форматирования текстовых данных в HTML применяются следующие теги:

Теги управления абзацами

<P ALIGN=CENTER/LEFT/RIGHT >...</P> - тег нового абзаца, используется в формате одиночного тега или контейнера. При использовании в форме одиночного тега концом абзаца считается начало следующего т.е следующий тег <P>. Атрибут ALIGN задает выравнивание элементов абзаца, значение по умолчанию LEFT

<P>...</P> или <P>	Этот абзац выравнивается по левому краю. И этот абзац тоже.
<P ALIGN=CENTER>	Этот абзац выравнивается по центру. И этот абзац тоже.
<P ALIGN=RIGHT>	Этот абзац выравнивается по правому краю. И этот абзац тоже.

Теги управления переносом

<BR>,<NOBR>...</NOBR>, <WBR> - теги управления разрывами и переносом строк в тексте документа. При разрыве строки межстрочный интервал не увеличивается.

<BR>	Используется для указания места принудительного разрыва. Пример: <P>ФИО: <BR> Иванов С.С.</P> Будет выглядеть так: ФИО: Иванов С.С.
<NOBR>...</NOBR>	Используется для запрета разрыва текста, помещенного в данный контейнер. Пример: <NOBR>Это лучше не разрывать</NOBR> при необходимости переноситься на новую строку целиком, а не так: Это лучше не разрывать
<WBR>	Используется для указания рекомендуемого места для разрыва строки. Может быть вложенным в контейнер <NOBR>...</NOBR>. Пример: <NOBR>42301<WBR>810600000000001</NOBR> - номер счета заданный таким образом при помещении в поле уже своей ширины, разорвется после балансового счета: 42301 810600000000001

Использование графики

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

Web-броузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG (некоторые форматы требуют установки дополнительных программных компонентов броузера).

А что вы знаете о графических форматах? Доминирующими графическими форматами в Internet являются GIF и JPEG. Оба формата обладают специфическими особенностями, что и определяет область их применения. Формат GIF (поддержка 256 цветов, сжатие без потери качества, чересстрочный формат, анимация, "прозрачность"), широко применяется для создания различных элементов Web-страниц: органов управления (кнопки, иконки, баннеры), анимированных изображений и других быстро загружаемых изображений с низкой цветопередачей. Формат JPEG (поддержка 16,7 миллиона цветов, потери качества при сжатии, высокая контрастность) применяется для публикации высококонтрастных изображений, фотографического качества. Больший размер файлов и следовательно более медленная загрузка.

Списки и меню

В HTML существует несколько разновидностей списков и меню, для их определения используются следующие теги:

Упорядоченный список (Ordered list):

<OL> - начало контейнера списка
<LH> - заголовок списка
<LI> - первый элемент списка
<LI> - i элемент списка
<LI> - последний элемент списка
</OL> - конец контейнера списка

Способ отображения упорядоченного списка на Web-странице зависит от используемого броузера. По умолчанию список автоматически нумеруется с 1, допускается использование вложенных списков и внутренних тегов форматирования. Для изменения способа нумерации и отображения списка используются следующие атрибуты:

TYPE	Тип нумерации элементов. A/a-нумерация прописными/строчными буквами I/i- нумерация прописными/строчными римскими цифрами 1 - нумерация числами с единицы, N-нумерация числами с N
COMPACT	Компактный список

Неупорядоченный список (Unordered list):

<UL> - начало контейнера списка
<LH> - заголовок списка
<LI> - первый элемент списка
<LI> - i элемент списка
<LI> - последний элемент списка
</UL> - конец контейнера списка

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

TYPE	Тип маркировки элементов.DISC/SQUARE/CIRCLE
COMPACT	Компактный список (сжатый формат)

Списки каталогов (Directory list):

<DIR> - начало контейнера каталога
<LI> - первый элемент списка
<LI> - i элемент списка
<LI> - последний элемент списка
</DIR> - конец контейнера каталога

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

Списки определений (Definition list):

<DL> - начало контейнера определений
<DT> - термин 1
<DD> - определение термина 1
<DT> - термин N
<DD> - определение термина N
</DL> - конец контейнера определений

Способ отображения списка терминов на Web-странице зависит от используемого броузера. По умолчанию списки терминов выделяются разными отступами. Допускается использование атрибута COMPACT, вложенных списков, тегов форматирования и других элементов.

Списки меню (Menu list):

<MENU> - начало контейнера меню
<LI> - пункт 1
<LI> - пункт N
</MENU> - конец контейнера меню

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

Рассмотрим пример использования списков в HTML-документах, заодно освежим в памяти, что такое внутренние ссылки - закладки.

Пример 6. Списки и меню. [просмотр примера в окне]

<HTML>
<HEAD>
<TITLE>Использование списков и меню в документах</TITLE>
</HEAD>
<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>Списки и меню в HTML документах</H1>
<HR>
<A NAME=MENU>Главное меню<A/>
<MENU>
<LH><B>Виды списков в HTML</B>
<LI><A HREF="#OL">Упорядоченный список</A>
<LI><A HREF="#UL">Неупорядоченный список</A>
<LI><A HREF="#DIR">Список каталогов</A>
<LI><A HREF="#DL">Список определений</A>
</MENU>
<HR>
<A NAME=OL>Упорядоченный список<A/>
<OL TYPE=1>
<LH><B>Сотрудники отдела</B>
<LI>Иванов
<LI>Петров
<LI>Сидоров
<LI>Зайцев
</OL>
<A HREF="#MENU">Вернуться к меню</A>
<p><A NAME=UL>Неупорядоченный список<A/>
<UL TYPE=SQUARE>
<LH><B>Сотрудницы отдела</B>
<LI>Иванова
<LI>Петрова
<LI>Сидорова
<LI>Зайцева
</UL>
<A HREF="#MENU">Вернуться к меню</A>
<p><A NAME=DIR>Список каталогов<A/>
<DIR>
<LI>VSTUDIO
<DIR>
<LI>Project1
<LI>Project2
<LI>Project3
<LI>Project4
</DIR>
</DIR>
<A HREF="#MENU">Вернуться к меню</A>
<p><A NAME=DL>Список определений<A/>
<DL>
<DT>JavaScript
<DD>Язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Netscape на основе языка Java (Sun). Поддерживается всеми современными броузерами.
<DT>VBScript
<DD>Язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Microsoft на основе языка VBasic. Поддерживается Internet Explorer.
</DL>
<A HREF="#MENU">Вернуться к меню</A>
<HR>
<P ALIGN=CENTER>&copy 2001 Вебмастер
<A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>
</BODY>
</HTML>

В заключении отметим, что теги <MENU> и <DIR> исключены из последней спецификации HTML, т.к. они по сути дублировали возможности тегов <UL>, <OL> и <DT>. Старайтесь избегать использования данных тегов, что бы ваши документы соответствовали последним стандартам HTML.

Вставка файлов мультимедиа

Свойства CSS

CSS позволяет манипулировать следующими свойствами элементов:

Свойства шрифта

font-family - определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
font-style - стиль шрифта (normal, italic);
font-variant - варианты отображения шрифта (normal, small-caps);
font-weight - жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900);
font-size - размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
font - обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Свойства текста

word-spacing - расстояние между словами (значение, normal);
text-decoration - декорация текста (none, underline, overline, line-through, blink);
letter-spacing - расстояние между буквами (значение, normal);
vertical-align - позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);
text-transform - изменение текста (none, Capitalize, UPPERCASE, lowercase);
text-align - положение текста (left, right, center, justify);
text-indent - отступ (значение, %);
line-height - отступ сверху (normal, значение, %);

Свойства фон и цвет

color - цвет элемента (значение);
backgroung-color - цвет фона элемента (значение);
background-image - изображение фон (none, URL);
background-repeat - варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);
background-attachment - возможность прокрутки фонового изображения (scroll, fixed);
background-position - положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);
background -обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Свойства блока

margin-top - определяет отступ сверху (значение, %, auto);
margin-right - определяет отступ справа (значение, %, auto);
margin-bottom - определяет отступ снизу (значение, %, auto);
margin-left - определяет отступ слева (значение, %, auto);
margin - обобщает все вышеперечисленные свойства;
padding-top - отступ от верхнего border'а (значение, %);
padding-right - отступ от правого border'а (значение, %);
padding-bottom - отступ от нижнего border'а (значение, %);
padding-left - отступ от левого border'а (значение, %);
padding - обобщает все вышеперечисленные свойства;
border-top-width - толщина верхнего border'а (значение, thin, medium, thick);
border-right-width - толщина правого border'а (значение, thin, medium, thick);
border-bottom-width - толщина нижнего border'а (значение, thin, medium, thick);
border-left-width - толщина левого border'а (значение, thin, medium, thick);
border-width - обобщает все вышеперечисленные свойства;
border-color - Цвет border'а. (значение);
border-style - стиль border'ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
border-top - обобщает вышеперечисленные свойства для верхнего border'а;
border-right -обобщает вышеперечисленные свойства для правого border'а;
border-left - обобщает вышеперечисленные свойства для левого border'а;
border-bottom - обобщает вышеперечисленные свойства для нижнего border'а;
border - обобщает все вышеперечисленные свойства;
width - ширина элемента (значение, %);
height - высота элемента (значение, %);
float - расположение элемента (left, right, none);
clear - расположение других элементов вокруг данного (left, right, both, none);

Классификационные свойства

display - определяет, как будет отображаться элемент (none, block, inline, list-item);
white-space - определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap);
list-style-type - определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none);
list-style-image - задает вид list-item маркера из картинки (none, URL);
list-style-position - определяет положение маркера в зависимости от list item элемента (inside, outside);
list-style - обобщает вышеперечисленные свойства;

Свойства элемента

position - определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute);
top - определяет позицию элемента TOP относительно элемента родителя (значение, %);
left - определяет позицию элемента LEFT относительно элемента родителя (значение,%);
width - определяет ширину элемента (значение, %, auto);
height - определяет высоту элемента (значение, %, auto);
overflow - режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll);
visibility - управление видимостью элемента в документе (hidden, " ");

Правила CSS

Лист стилей представляет собой набор правил CSS. Правила задаются в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов.

Селекторы

Простейшее правило CSS задается следующим образом:

Селектор { свойство CSS: значение }

Селектор это любой из рассмотренных нами ранее тегов HTML (например BODY, P, H1, LI). Далее в фигурных скобках декларируется значение свойств CSS определяющих стиль данного элемента в документе. Например:

H1 { color:red } - задает стиль заголовкам первого уровня.

Для удобства применения можно декларировать в одном правиле несколько свойств CSS для нескольких селекторов. Например:

BODY { background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt } - данное правило задет стиль всему телу документа (вместо атрибутов тега BODY).

H1, H2, H3, H4, H5, H6 { color:black; font-style:italic } - данное правило задает стиль заголовкам всех уровней в документе.

Правила наследования

При задании правил можно использовать принцип наследования, который задается при помощи контекстных селекторов, стиль которых зависит от вложенности в другие элементы. Контекстные селекторы задаются без разделительных запятых.

Основной_селектор Вложенный_селектор { свойство CSS: значение }

Например:

P STRONG { color:red; font-weight:bold } - задает стиль для элементов STRONG заключенных в контейнере абзаца.

Кроме этого следует помнить о внутреннем наследовании стилей в документе. Например стиль элемента BODY (в части тех свойств CSS, значения которых не переопределены в персональных правилах вложенных элементов) распространяется на все дочерние элементы и без их перечисления в контекстных селекторах.

Классы элементов

В правилах CSS используется понятие класса. Класс элемента задается следующим образом:

Селектор.Класс { свойство CSS: значение }

Например:

H1.normal { color:black; font-style:normal; font-family:serif } - класс строгого стиля заголовка;

H1.funny { color:blue;font-style:italic; font-family:fantasy

12 3 4 5 6 7 8 9 Следующая ⇒

Познавательные статьи:

Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

История развития права интеллектуальной собственности

Последнее изменение этой страницы: 2016-08-01; просмотров: 276; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.119.158.110 (0.018 с.)