Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 7


Самоучитель по HTML и CSS

Добрый день.

Сегодня продолжаем тему, начатую в предыдущем выпуске рассылки.

6. Значения параметров у тегов (продолжение)

Размер

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

При использовании пикселов в качестве значений пишется только число, например: width="380". В листинге 6.2 приведено добавление изображения с заданными размерами.

Листинг 6.2. Размеры изображения в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Изображение</title>
</head>
<body>
<p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика"
width="111" height="102" hspace="4" vspace="4" border="2"></p>
</body>
</html>

В данном примере рисунок имеет ширину 111 пикселов (width="111"), высоту 102 пиксела (height="102"), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace) и толщину границы вокруг картинки 2 пиксела (border="2").

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%".

Замечание

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

Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В листинге 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.

Листинг 6.3. Размеры изображения в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Изображение</title>
</head>
<body>
<p><img src="figure.jpg" alt="Винни-Пух в гостях у Кролика" width="100%"></p>
</body>
</html>

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3

Рис. 6.3. Изображение с шириной 100%

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

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в листинге 6.3 к тегу <IMG> отступы по горизонтали (hspace="10") и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.

Адрес

- Папа, как пишется "адрес", - обращается сын программиста к папе.
- Напиши: "URL".

Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <IMG> адрес используется в качестве аргумента параметра href, он задает путь к файлу с изображением.

Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.

Абсолютные адреса

Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан URL и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В листинге 6.4 приведена ссылка, в которой применяется абсолютный адрес.

Листинг 6.4. Использование абсолютного адреса в ссылке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Ссылка</title>
</head>
<body>
<p><a href="http://htmlbook.ru/html/body.html">Описание тега BODY</a></p>
</body>
</html>

В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.

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

Относительные адреса

Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.

/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера - так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.

/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта и там "поискать" файл me.html.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двоеточия или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.

Замечание

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

В листинге 6.5 приведены ссылки, в которых используются относительные адреса.

Листинг 6.5. Относительные адреса в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Ссылки</title>
</head>
<body>
<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>
</body>
</html>

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

Статьи по теме

Размер изображения

Отступы вокруг изображения

Вопросы для проверки

1. Размер окна браузера установлен 500х400 пикселов. На веб-страницу добавлена таблица А, ширина которой задана как 60%. Внутри нее расположена еще одна таблица Б, у нее ширина 50%. Какова ширина таблицы Б в пикселах?

  1. 300
  2. 250
  3. 150
  4. 120
  5. 110

2. Какой цвет из приведенных ближе всех к оранжевому?

  1. #b0232a
  2. #4555c7
  3. #00b08b
  4. #ad806c
  5. #ffb300

3. Какое значение параметра width тега <IMG> является ошибочным?

  1. 13
  2. 120%
  3. 34.5%
  4. 1%
  5. 1097

4. Какое значение из приведенных ниже является веб-цветом?

  1. #ec1414
  2. #eaff00
  3. #00ff99
  4. #1200ff
  5. #00fffc

5. На сайте имеется три папки с именами: uranus, cronos и zeus, которые находятся одна в другой, т. е. внутри uranusa - cronos, а внутри cronosa - zeus. Оле необходимо задать адрес папки uranus относительно папки zeus. Какой URL в данном случае правильный?

  1. /
  2. ../../
  3. ../uranus/
  4. ../../uranus/
  5. /zeus/cronos/uranus/

Задание

1. Исправьте ошибки в каждой строке.

  1. <body bgcolor="#ffcc00" text="ffffee">
  2. <img src="..././lol.gif">
  3. <a href="fc0fge.html">Оранжевый<a>
  4. <img src="pan.html" width="134" height="13,6%" alt="Пан">

2. Создайте веб-страницу с зеленым фоном и белым текстом, как показано на рис. 6.4.

Рис. 6.4

Рис. 6.4. Веб-страница с фоном

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

Рецепты CSS

Как мне изменить цвет фона веб-страницы?

Раньше для этой цели применяли параметр bgcolor тега <BODY>, но теперь ту же функцию удобнее возложить на стили. В частности, параметр background, добавленный к селектору BODY, как раз и определит желаемый цвет фона всей веб-страницы.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Цвет фона</title>
<style type="text/css">
BODY {
 background: #333; /* Цвет фона */
 color: #fc0; /* Цвет текста */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Веб-страница с темным фоном и оранжевыми буквами

Рис. 1. Вид страницы, с измененным цветом фона и текста

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

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное