Учебник: Html и Самиздат

В этой же папке есть еще два файла: 2.htm и 3.htm, а также папка pr2 с файлом 21.htm, и в ней еще папка pr3 с файлом 31.htm.

C:primer2.htm

C:primerpr2pr331.htm

Мы смотрим файл 1.htm

<a href="2.htm"> ссылка на 2.htm </a>

<a href=" pr2/21.htm "> ссылка на 21.htm </a>

<a href=" pr2/pr3/31.htm "> ссылка на 31.htm </a>

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

Допустим, мы перешли по ссылке на 21.htm.

<a href="../3.htm"> ссылка на 3.htm </a>

<a href=" pr3/31.htm "> ссылка на 31.htm </a>

А затем оказались на 31.htm

<a href="../../3.htm"> ссылка на 3.htm </a>

<a href="../21.htm "> ссылка на 21.htm </a>

Вот так, все понятно? (Две точки означают родительскую директорию.) Теперь переместите папочку primer куда-нибудь в другое место, откройте в браузере файл 1.htm, все ссылки будут работать. А если бы мы прописывали ссылки как абсолютные, то ничего бы не получилось. Теперь возьмите файл 1.htm, выдерните из папки, положите еще куда-нибудь, откройте. Ссылки работать не будут, надеюсь, понятно, почему?

Возьмем абсолютную ссылку:

<a href="C:/photo/my/ja.jpg "> мое фото </a>

Она сработает, если на компе на диске С есть папка photo, а в ней папка my, в которой лежит файл ja.jpg.

Еще ссылки можно прописывать от корня. Вот так:

<a href="/photo/my/ja.jpg">

Допустим, у нас есть сайт, и в его корневой директории среди прочих папок есть папка photo, ну и так далее. Эта ссылка будет работать только на этом сайте, впрочем, если у другого сайта файловая структура идентична, то ссылка сработает и там.

[к оглавлению]

<img>, вставляем рисунки

Ну а сейчас займемся картинками. Чтоб, значит, красивее было. Какими же графическими форматами мы будем пользоваться? Популярные графические форматы интернета: gif и jpg. Вот ими и будем. Есть, правда, сравнительно молодой формат png, который не получил особого распространения из-за происков Microsoft. Но для начала – краткая информация.

Формат jpg – используется для фотографий (в принципе, он был специально разработан именно с такой целью), а также для рисунков с большой цветовой гаммой, где много плавных переходов. Позволяет выставлять качество рисунка (quality) при сжатии, причем само сжатие происходит с потерей качества. Таким образом, вес файла прямо пропорционален качеству картинки. Ничего страшного в этом нет, если у фотографии, содержащей до миллиона цветов, оставить тысяч десять-двадцать, то вряд ли вы это заметите.

Формат gif – используется для немногоцветных рисунков с отчетливыми границами и резкими переходами цвета, возьмем в качестве примера различные логотипы и надписи. Поддерживает 256 цветов, также позволяет задать один или несколько цветов прозрачными. Немаловажная особенность – gif может быть анимированным, то есть он просто состоит из нескольких обычных файлов, которые проигрываются в соответствии с программой, заложенной в самом gif'e. В больших gif'ах может применяться чересстрочная развертка, и когда браузер выводит картинку, то мы видим постепенное ее проявление (на маленькой скорости соединения). Таким образом, если у вас плохой канал, вы получите представление о всей картинке еще до ее полной загрузки. Чем меньше цветов используется в gif-файле, тем меньше он весит. Но – порог оптимизации равен двум в энной степени, поясняю, 32-х цветная картинка будет весить меньше, чем 64-х цветная, а 50-ти цветная – нет.

Для очень маленьких изображений лучше использовать формат gif, так как jpg для них не приспособлен. Например, прозрачный gif размером 1 х 1 пиксель весит 43 байта, а тот же пиксель в формате jpg – больше 1,5 Kb.

Картинки вставляются в документ с помощью тэга <img>. Закрывающий тэг не нужен.

Параметры:

src – задает URL картинки, является обязательным параметром.

alt – текст, который будет виден на месте картинки, если она почему-то не загрузилась, или если в браузере отключено изображение графики. При загруженной картинке этот текст будет появляться в виде подсказки при наведении курсора. Очень полезный параметр. Представьте, вы лазите по сети с отключенной графикой и видите вместо картинок одни слепые пятна, даже надписей нет. Кошмар! Надпись – дополнительная информация, если пользователь заинтересуется, то загрузит рисунок в два счета.

title – подсказка, появляющаяся при наведении курсора. Загружена картинка или нет – все равно появится. Если прописаны и title, и alt, то текст подсказки берется из title.

width и height – ширина и высота картинки в пикселях, либо в процентах от ширины окна браузера. Если размеры не совпадают с нормальными, то браузер произведет масштабирование. Рекомендуется всегда эти параметры прописывать, указывая реальные размеры, которые можно узнать в любом графическом редакторе или вьювере. Допустим, рисунок был увеличен, в таком случае он будет выглядеть некрасиво, обратный пример – рисунок был уменьшен. Зачем?! Картинка как весила энное количество килограмм, так и будет весить. Оно нам надо? Кому нужны "тяжелые" странички? Лучше обрежьте рисунок в графическом редакторе.

Если ширина и высота не заданы, то картинка выводится в естественных размерах. Если задан только один параметр, то картинка будет выведена пропорционально, то есть другой параметр как бы подстроится под заданный. При незаданных width и height, браузер построит на экране маленький стандартный прямоугольник. Учтите, текст грузится раньше, чем изображение, поэтому, когда придет картинка браузер будет вынужден полностью перерисовать экран, что не есть гут. Сидел пользователь, читал, вдруг – бац! страничка изменилась.

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

Кстати, необязательно задавать размеры только в пикселях или только в процентах, можно, например, написать так: width="400" height="50%".

hspace и vspace – свободное пространство вокруг картинки, задается в пикселях. Hspace – слева и справа, vspace – сверху и снизу. По умолчанию равны нулю. Рекомендуется задавать, чтобы текст не прижимался вплотную к рисунку, это некрасиво.

border – рисует вокруг картинки рамку толщиной в n пикселей. По умолчанию равен нулю, и рамка не выводится.

align – выравнивание (по отношению к соседним элементам). Имеет следующие значения:

left – выравнивание по левому краю. Текст обтекает рисунок справа.

right – выравнивание по правому краю. Текст обтекает рисунок слева.

top, texttop – выравнивание по верхнему краю. Верхняя кромка рисунка выравнивается по верхней линии текстовой строки.

middle – выравнивание по центру (вертикальное). Центр рисунка выравнивается по базовой линии текстовой строки.

absmiddle – почти то же самое. Центр рисунка выравнивается по центру текстовой строки.

bottom, baseline – выравнивание по нижнему краю. Нижняя кромка рисунка выравнивается по базовой линии текстовой строки.

absbottom – почти то же самое. Нижняя кромка рисунка выравнивается по нижнему краю самого глубокого символа текстовой строки. По умолчанию align="bottom".

Если нужно завершить обтекание картинки текстом и начать вывод с новой строки, то делаем следующее. Помните тэг <br>? У него есть параметр clear, который может принимать следующие значения: left, right и all.

Допустим, рисунок выровнен по левому краю (align="left"). Чтобы завершить обтекание справа, пишем: <br clear="left">. Именно left, а не right. Ну и соответственно, если рисунок выровнен по правому краю, clear="right". All – завершить обтекание вообще (и слева, и справа).

Интерфейс Самиздата позволяет привязывать рисунки только после заливки файла. Таким образом, вам приходится потом редактировать текст, чтобы вставить картинку. Честно говоря, я никогда так не делаю. Я спокойненько пишу себе вызов рисунка уже при верстке статьи или рассказа. СИ хранит рисунки по такому адресу:

http://samlib.ru/img/ 1-я буква раздела / наименование раздела / наименование файла /

Для меня это выглядит так:

http://samlib.ru/img/b/beloglazow_a_i/file_ name/

Я знаю, как назову файл, знаю, какое имя будет у картинки. Поэтому я просто пишу, например, так:

<img src="http://samlib.ru/img/b/beloglazow_a_i/flower/wfl.jpg" width=97 height=149 border=0 alt="цветочек" title="Хочешь?">

Это рисунок к моему рассказу "Хочешь цветочек?", если кому интересно. А можно вообще завести себе склад рисунков – сделать файл, скрытый ото всех, и привязывать к нему картинки. Удобно. Ведь адрес будет одинаковым. Особенно, если эти рисунки не являются самостоятельными, а представляют собой элементы оформления. Скажем, background таблицы.

[к оглавлению]

Картинка-ссылка, карта ссылок

Картинка может быть ссылкой. Все просто: прописываем тэг <img> внутри тэга <a>.

<a href=" "><img src=" "></a>

Обратите внимание: если между тэгом <img> и закрывающим тэгом </a> будут пробелы или разрыв строки, то у ссылки в момент нажатия появится хвостик. Наберите этот код в текстовом редакторе, а затем просмотрите в браузере.

<a href=" "> <img src=" "> </a>

Вот такой хвост. Что же делать, если текст не помещается в видимых пределах экрана и без разрыва строки никак не обойтись?

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

Совет второй: главное, чтобы не было пробелов и разрывов строки между ">" и "<", поэтому такой код вполне соответствует:

<a href=" "

><img src=" "

></a>

Если картинка является ссылкой, то браузер рисует вокруг нее рамку даже в том случае, когда параметр border не указан. Чтобы такого не случилось, надо явно прописать в тэге <img src=" " border="0">.

Часть рисунка тоже может быть ссылкой. Хоть сто частей, ведущих по ста разным адресам. Для этого рисунок необходимо разметить, а в тэг <img> вписать параметр usemap (подключить карту).

<img src=" " usemap="#map1">

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

Как мы видим, значение параметра usemap записывается аналогично ссылке-"якорю" на текущую страницу. Естественно, если вы используете больше двух карт в одном документе, их названия-идентификаторы должны быть уникальными. Разметка картинки на области-ссылки производится в тэге <map> ... </map>, который размещается в любом месте внутри тега <body> ... </body>.

<map name="map1">

<area shape="circle" cords="x,y,R" href=" " alt=" " title=" ">

<area shape="rect" cords="x,y,x,y" href=" " alt=" " title=" ">

<area shape="poly" cords="x,y,x,y,x,y..." href=" " alt=" " title=" ">

<area shape="default" nohref alt=" " title=" ">

</map>

Тэг <map> имеет параметр name, таким образом, карта относится к рисунку, у которого значение параметра usemap соответствует name.

Тэг <area> описывает области-ссылки, у него такие параметры:

shape – вид области. Значения:

circle – окружность.

rect – прямоугольник.

poly – многоугольник.

default – остальная область.

coords – координаты области в пикселях. За начало отсчета берется левый верхний угол картинки (0,0). Значения х отсчитываются в направлении правого верхнего угла, значения у – в направлении левого нижнего угла. Координаты разделяются запятыми.

Для окружности (circle) задаются три числа – координаты центра и радиус.

Для прямоугольника (rect) – две пары чисел, соответствующие координатам левого верхнего и правого нижнего угла.

Для многоугольника (poly) задаются пары точек (координаты вершин по порядку). Последняя точка автоматически замкнется на первую.

href – собственно ссылка.

nohref – указывает, что область не является ссылкой. Вот так можно вырезать дырки в других областях. Кстати, shape="default" nohref можно не писать, хотя... на всякий случай... Если будете делать дырки, то сначала укажите ее координаты, а уж потом область-ссылку, иначе ничего не получится. Почему так? Потому что области, описанные ранее, имеют преимущество перед областями, описание которых сделано позже. Пример:

<map name="m1">

<area shape="rect" coords="50,50,100,100" nohref title="нет ссылки" alt="нет ссылки">

<area shape="rect" coords="0,0,150,150" href="http://www.rusf.ru" title="Русская Фантастика" alt="Русская Фантастика">

</map>

alt – альтернативный текст для области.

title – подсказка, появляющаяся при наведении курсора на область.

Что-то не работает в одних браузерах, что-то – в других. Просто-напросто пишем и alt, и title одновременно.

[к оглавлению]

<table>, <tr>, <td>, таблицы

Ну вот мы и добрались до самого сложного – таблиц, которые практически незаменимы при построении дизайна страницы.