Урок 11. Работа с изображениями.

Содержание урока:

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

Встраивание изображений

Размеры изображений

Отделение изображения от текста

Альтернативный текст

Изображение в качестве ссылки

Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства. Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь. Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне. Фоновые изображения Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге < body> атрибут background=" fon.gif", рисунком fon.gif будет залито все окно браузера. Пример кода:

< html>

< head>

< title> Фоновое изображение< /title>

< /head>

< body background="../images/fon.gif" bgcolor=" pink" >

Здесь содержание документа

< /body>

< /html>

Результат смотрите здесь Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor. Встраивание изображений Для размещения на странице изображений используется тег < img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения. Пример кода:

< html>

< head>

< title> Тег img< /title>

< /head>

< body>

< img src="../images/fish.gif" >

Остальное содержимое документа

< /body>

< /html>

Результат:

Остальное содержимое документа

Согласитесь, текст рядом с картинкой выглядит не очень красиво. Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметрalign. У этого параметра есть несколько значений. Рассмотрим их все на примерах. Пример кода с параметром align=" left"

< html>

< head>

< title> Тег img с параметром align=" left" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" left" >

Картинка слева, а текст обтекает ее справа и

этот текст может занимать несколько строчек.

< /body>

< /html>

Результат:

Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.

Пример кода с параметром align=" right"

< html>

< head>

< title> Тег img с параметром align=" right" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" right" >

Картинка справа, а текст обтекает ее слева и

этот текст может занимать несколько строчек.

< /body>

< /html>

Результат:

Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

Пример кода с параметром align=" top"

< html>

< head>

< title> Тег img с параметром align=" top" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" top" >

Верхняя граница изображения выравнивается по самому

высокому элементу текущей строки. Изображение

как бы встраивается в строчку. Если изображение

большое, то и строка раздвигается на эту высоту.

< /body>

< /html>

Результат:

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

Пример кода с параметром align=" texttop"

< html>

< head>

< title> Тег img с параметром align=" texttop" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" texttop" >

Верхняя граница изображения выравнивается

по самому высокому текстовому элементу

текущей строки (заглавная буква строки).

< /body>

< /html>

Результат:

Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).

Пример кода с параметром align=" middle"

< html>

< head>

< title> Тег img с параметром align=" middle" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" middle" >

< font size=7> Выравнивание< /font>

середины изображения по

базовой линии текущей строки.

< /body>

< /html>

Результат:

Выравнивание середины изображения по базовой линии текущей строки.

* крупный шрифт сделан для наглядности разницы между middle absmiddle Пример кода с параметром align=" absmiddle"

< html>

< head>

< title> Тег img с параметром align=" absmiddle" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" absmiddle" >

< font size=7> Выравнивание< /font>

середины изображения посередине текущей строки.

< /body>

< /html>

Результат:

Выравнивание середины изображения посередине текущей строки.

Пример кода с параметром align=" bottom"

< html>

< head>

< title> Тег img с параметром align=" bottom" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" bottom" >

< font size=7> Выравнивание< /font>

нижней границы изображения по базовой линии

текущей строки.

< /body>

< /html>

Результат:

Выравнивание нижней границы изображения по базовой линии текущей строки.

Пример кода с параметром align=" absbottom"

< html>

< head>

< title> Тег img с параметром align=" absbottom" < /title>

< /head>

< body>

< img src="../images/fish.gif" align=" absbottom" >

< font size=7> Выравнивание< /font>

нижней границы изображения по нижней границе

текущей строки.

< /body>

< /html>

Результат:

Выравнивание нижней границы изображения по нижней границе текущей строки.

Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег < br> с параметром clear, который запрещает обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all). Пример кода:

< html>

< head>

< title> Запрет обтекания картинки< /title>

< /head>

< body>

< img src="../images/fish.gif" >

< br clear=" all" > Остальные элементы документа

< /body>

< /html>

Результат:

Остальные элементы документа

Размеры изображений

Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки. Для этого у тега < img> существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана) При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению. Пример кода:

< html>

< head>

< title> Тег img< /title>

< /head>

< body>

< img src="../images/fish.gif" >

< img src="../images/fish.gif" width=" 50" height=" 50" >

< img src="../images/fish.gif" width=" 25" height=" 25" >

< /body>

< /html>

Результат:

Отделение изображения от текста

Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах. Пример кода:

< html>

< head>

< title> Тег img с отступами< /title>

< /head>

< body>

< img src="../images/fish.gif"

align=" left" hspace=" 20" vspace=" 20" >

Остальное содержимое документа

теперь не прилипает к изображению.

< /body>

< /html>

Результат:

Альтернативный текст

Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или другую иконку (в других браузерах). Неплохо было бы дать ему подсказку, что изображено на рисунке. Для этого используется параметр alt. Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку при наведении курсора мыши, правда, не во всех браузерах. Пример кода:

< html>

< head>

< title> Тег img с альтернативным текстом< /title>

< /head>

< body>

< img src="../images/fish.gif" alt=" рыбка" >

< img src="../images/fish1.gif" alt=" рыбка" >

< /body>

< /html>

Результат:

Изображение в качестве ссылки

Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера < a>. В примере наша картинка будет ссылаться на страницу html_example1.html, которая будет открываться в отдельном окне. Пример кода:

< html>

< head>

< title> Изображение - ссылка< /title>

< /head>

< body>

< a href=" html_example1.html" target=" _blank" >

< img src="../images/fish.gif" alt=" рыбка" >

< /a>

< /body>

< /html>

Результат:

Теперь любая часть нашей картинки работает, как ссылка. Обратите внимание, вокруг нашего изображения появилась рамочка (она отображается не во всех браузерах, например, в Opera вы ее не увидите). Если вам это не нравится, то ее можно убрать, добавив в тег < img> атрибут border=" 0", значением которого является толщина рамочки. Аналогичным образом можно задать рамочку любому изображению. Пример кода:

< html>

< head>

< title> Изображение - ссылка< /title>

< /head>

< body>

< a href=" html_example1.html" target=" _blank" >

< img src="../images/fish.gif" alt=" рыбка" border=" 0" >

< /a>

< img src="../images/fish.gif" alt=" рыбка" border=" 3" >

< /body>

< /html>

Результат:

Теперь наша картинка-ссылка без рамочки, а вторую картинку мы украсили рамочкой шириной в 3 пиксела. Кстати, рекомендуется всегда указывать параметр border=" 0", если не хотите, чтобы ссылка выделялась рамочкой. Ведь вы не знаете каким браузером пользователь будет просматривать ваши страницы. Также полезно прочитать статью Как угодить браузеру. На этом восьмой урок закончен, в следующем уроке мы научимся работать с таблицами.

Урок 12. Работа с таблицами - тег table.

Содержание урока:

Создаем таблицу

Оформляем таблицу

Оформляем строки и ячейки

Создаем таблицу

Таблица - один из основных инструментов для создания web-страниц. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги, то вы понимаете о чем речь. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки.

Например:

Рассмотрим нашу таблицу с точки зрения HTML:

• сама таблица задается с помощью тегов < table> < /table>,
• у таблицы есть название - теги < caption> < /caption>,
• таблица состоит из строк - теги < tr> < /tr>,
• каждая строка состоит из столбцов - теги < td> < /td>,
• столбцы имеют названия, расположенные в первой строке - теги < th> < /th>.

Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:

< html>

< head>

< title> html table< /title>

< /head>

< body>

< table>

< caption> Название таблицы< /caption>

< tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr>

< tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < /tr>

< tr> < td> 21< /td> < td> 22< /td> < td> 23< /td> < /tr>

< tr> < td> 31< /td> < td> 32< /td> < td> 33< /td> < /tr>

< /table>

< /body>

< /html>

Результат:

Как видите, получилось не очень красиво, будем украшать. Оформляем таблицу Для этого у тега < table> существует ряд параметров:

• width - задает ширину таблицы (в пикселах или % от ширины экрана),

• bgcolor - задает цвет фона ячеек таблицы,

• background - заливает фон таблицы рисунком,

• border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы.

Применим эти параметры:

< html>

< head>

< title> html table< /title>

< /head>

< body>

< table width=" 300" bgcolor=" plum" border=" 1" >

< caption> Название таблицы< /caption>

< tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr>

< tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < /tr>

< tr> < td> 21< /td> < td> 22< /td> < td> 23< /td> < /tr>

< tr> < td> 31< /td> < td> 32< /td> < td> 33< /td> < /tr>

< /table>

< /body>

< /html>

Результат:

Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:

• align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),

• cellspacing - задает расстояние между ячейками таблицы (в пикселах),

• cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).

Применим эти параметры:

< html>

< head>

< title> html table< /title>

< /head>

< body>

< table width=" 300" bgcolor=" plum" border=" 1"

align=" center" cellspacing=" 5" cellpadding=" 10" >

< caption> Название таблицы< /caption>

< tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr>

< tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < /tr>

< tr> < td> 21< /td> < td> 22< /td> < td> 23< /td> < /tr>

< tr> < td> 31< /td> < td> 32< /td> < td> 33< /td> < /tr>

< /table>

< /body>

< /html>

Результат:

Обратите внимание, границы у таблицы двойные. Если указать cellspacing=" 0", то границы примут привычный вид:

< table width=" 300" bgcolor=" plum" border=" 1"

align=" center" cellspacing=" 0" cellpadding=" 10" >

Результат:

Вообще, за границы отвечают два параметра:

• frame - задает вид рамки вокруг таблицы и может принимать следующие значения:

o void - рамки нет,

o above - только верхняя рамка,

o below - только нижняя рамка,

o hsides - только верхняя и нижняя рамки,

o vsides - только левая и правая рамки,

o lhs - только левая рамка,

o rhs - только правая рамка,

o box - все четыре части рамки.

• rules - задает вид внутренних границ таблицы и может принимать следующие значения:

o none - между ячейками нет границ,

o groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),

o rows - границы только между строками,

o cols - границы только между стобцами,

o all - отображать все границы.

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

< html>

< head>

< title> html table< /title>

< /head>

< body>

< table width=" 300" bgcolor=" plum" border=" 1"

align=" center" cellspacing=" 5" cellpadding=" 10"

rules=" rows" frame=" void" >

< caption> Название таблицы< /caption>

< tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr>

< tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < /tr>

< tr> < td> 21< /td> < td> 22< /td> < td> 23< /td> < /tr>

< tr> < td> 31< /td> < td> 32< /td> < td> 33< /td> < /tr>

< /table>

< /body>

< /html>

Результат:

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

Оформляем строки (tr) и ячейки (td)

Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:

• align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
• valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
• bgcolor - задает цвет строки.

Посмотрим на примере:

< html>

< head>

< title> html tr< /title>

< /head>

< body>

< table width=" 300" bgcolor=" plum" border=" 1"

align=" center" cellspacing=" 0" cellpadding=" 10" >

< caption> Название таблицы< /caption>

< tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr>

< tr align=" center" valign=" middle" bgcolor=" yellow" >

< td>

11 Текст во всех ячейках этой строки

центрирован по центру как по вертикали,

так и по горизонтали

< /td>

< td> 12< /td>

< td> 13< /td>

< /tr>

< tr align=" left" valign=" bottom" >

< td>

21 Здесь текст прижат к левому краю

по горизонтали и книзу - по вертикали

< /td>

< td> 22< /td>

< td> 23< /td>

< /tr>

< tr align=" right" valign=" top" bgcolor=" yellow" >

< td>

31 Текст во всех ячейках этой строки

прижат по горизонтали к правому краю,

по вертикали - кверху

< /td>

< td> 32 < /td>

< td> 33< /td>

< /tr>

< /table>

< /body>

< /html>

Результат:

Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу < td>, действие будет распространяться только на саму ячейку. Например, в предыдущем коде добавьте в любой тег < td> параметр bgcolor=" red".

< td bgcolor=" red" >

21 Здесь текст прижат к левому краю

по горизонтали и книзу - по вертикали

< /td>

Результат:

Но к ячейкам можно применять еще два параметра:

• width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы),
• height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

Например, добавим в наш код, в теги < th> эти параметры

< tr>

< th width=" 50%" height=" 50" > 1< /th>

< th width=" 30%" > 2< /th>

< th width=" 20%" > 3< /th>

< /tr>

Результат:

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