Web-программирование (стр. 11 )

относительный URI "../cages/birds. gif" будет разрешен в:

http://www. /cages/birds. gif

Разрешение относительных URI

Агенты пользователей должны вычислять базовый URI для разрешения относительных URI в соответствии с [RFC1808], раздел 3. Далее описано, как [RFC1808] применяется именно к HTML.

Агенты пользователей должны вычислять базовый URI в соответствии со следующим приоритетом (от высшего приоритет к низшему):

1.  Базовый URI, устанавливаемый элементом BASE.

2.  Базовый URI, задаваемый метаданными, обнаруженными в процессе работы по протоколу, такими как заголовок HTTP (см. [RFC2068]).

3.  По умолчанию базовым URI является URI текущего документа. Не все документы HTML имеют базовый URI (например, документ HTML может присутствовать в сообщении электронной почты и может не определяться никаким URI). Такие документы HTML считаются erroneous, если они содержат относительные URI и используют базовый URI по умолчанию.

Кроме того, элементы OBJECT и APPLET определяют атрибуты, имеющие преимущество над значением, установленным для элемента BASE. Подробнее об относящихся к ним определениям URI см. в определениях этих элементов.

Ссылки, указанные в заголовках HTTP, обрабатываются в точности так, как элементы LINK, явно установленные в документе.

Тема 5. Списки

Маркированный список

<li>Текст один</li>

<li>Текст другой</li>

<li>Текст сякой</li>

<li>Текст эдакий</li>

Именно тэгом <li></li> они и задаются. Возникает вопрос: можно ли помимо закрашенного кружочка описать еще чего-нибудь подобное?

• По умолчанию - (1)

o Полый кружок - (2)

 Не будь таким квадратным - (3)

У тэга <li> есть параметр type:

В случае (1) - <li type="disk">,

в случае (2) - <li type="circle">,

в случае (3) - <li type="square">.

Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то вы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая функция есть и в HTML:

<ul>Ваш текст</ul>

Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя:

<ul><ul>Два отступа</ul></ul>

<ul><ul><ul>Три отступа</ul></ul></ul>

Сдвиг один

Сдвиг другой

Сдвиг сякой

Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>:

<ul><li>Сдвиг один</li></ul>

<ul><ul><li>Сдвиг другой</li></ul></ul>

<ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>

Нумерованный список

Тэги <ol> и <li>

Список такого типа создается при помощи тэгов <ol>…</ol>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и. после списка, отделяя таким образом список от основного содержимого документа. Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тэгом <li>. В тэге <ol> могут быть указаны следующие параметры: compact, type и start.

Сompact – показывает браузеру, что список необходимо выводить в компактном виде и используется без значений.

Type – используется для задания вида нумерации списка.

= А – задает маркеры в виде прописных латинских букв;

= а – задает маркеры в виде строчных латинских букв;

= I – задает маркеры в виде больших римских цифр

= I – задает маркеры в виде маленьких римских цифр

=1 – задает маркеры в виде арабских цифр.

Start – позволяет начать нумерацию списка не с единицы.

Список определений

Являются особенным видом списков. В отличие от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка записывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина. Список определений задается с помощью тэга-контейнера <dl>. Внутри контейнера тэгом <dt> помечается определяемый термин, а тэгом <dd> - абзац с его определением. Для тэгов <dt> и <dd> можно не записывать соответствующие закрывающие тэги.

Тема 6. Графика в Web-приложениях

1. Способы хранения изображений.

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

Фоновые изображения.

Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Фоновое изображение для HTML-документа всегда заполняет все окно просмотра. Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики. Обычно в качесвте фонового беретсч небольшое изображение, для загрузки которого по сети не требуется значительного времени.

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

Вставить картинку на страничку можно при помощи тэга:

<img src="my. jpg">

Вместо my. jpg подставить имя любой картинки (me. gif, main. png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и документ. Если картинка лежит в поддиректории, то ссылка на неё будет выглядеть так:

<img src="my/my. jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my. jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www. homepage. ru/my/my. jpg">

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

<html>
<head>
<title>Мой первый шаг </title>

</head>
<body text="#336699" bgcolor="#000000">

<center>
<H3>Здравствуйте, это моя первая страница.</H3>

<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify">

<img src="primtocodephoto. gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? </b>

</p>
</body>
</html>

Если бы текст аккуратно располагался сбоку от картинки, было бы намного интереснее. Сделать это можно следующим образом. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Параметр align есть у картинок:

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст - слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров: