В этой лекции мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала. Лекция имеет следующее содержание:
img и его атрибуты alt title longdesc для описания сложных изображенийwidth и heightОчень соблазнительно использовать на своем Web-сайте много визуальной информации. Изображения являются отличным способом создания настроения у посетителя, и иллюстрации являются прекрасным способом сделать сложную информацию легче для восприятия для зрячих учеников.
Недостаток изображений в Web состоит в том, что не все пользователи Web могут их видеть. В прошедшие дни, когда изображения стали впервые поддерживаться браузерами, многие посетители сайтов отключали вывод изоображений, чтобы уменьшить объем трафика и быстрее перемещаться в сети — соединения Web были когда-то очень медленными, и нужно было платить большие деньги за каждую проведенную в сети минуту. Хотя это не слишком распространено сегодня, но мы ушли еще не слишком далеко.
Поэтому очень важно выбирать изображения из разумных соображений и использовать их, когда уместно. Еще более важно убедиться, что вы всегда предлагаете запасной вариант для тех, кто не может видеть изображения. Имеются дополнительные пояснения по проблемам неправильного использования пиктограмм и изображений в лекции "Перемещение в Web и меню" в дальнейшем в этой серии. Пока давайте посмотрим, какие доступны технологии для добавления изображений в документ
Существует два основных способа добавления изображений в документ: содержательные изображения с помощью элемента img и фоновые изображения, применяемые к элементам с помощью CSS. Когда что использовать зависит от того, что вы хотите делать:
img с подходящим альтернативным текстом.С помощью элемента img очень легко добавить изображение в документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="balconyview.jpg"> </body> </html>
Если выполнить этот код в браузере, то будет получен вывод, показанный на рисунке 17.1.
(рис 17.1) Изображение, как оно выводится в браузереЭтот вывод изображения работает прекрасно, однако, он является недопустимым img должен иметь атрибут . Этот атрибут содержит текст, который выводится, если изображение недоступно по каким-то причинам. Изображение может быть недоступно, так как его невозможно найти, загрузить или потому что агент пользователя (обычно браузер) не поддерживает изображения. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения Web-страниц. Эти технологии считывают содержимое атрибутов элементов img своим пользователям. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут .
В сети Web можно найти множество текстов, говорящих о "тегах ". Это фактически неверно, так как не существует тега (или элемента) с таким именем. Это атрибут элемента img, крайне полезный как для доступности, так и для оптимизации поисковых машин.
Чтобы сделать изображение понятным каждому, необходимо добавить подходящий альтернативный текст, например, в данном случае "View from my balcony, showing a row of houses, trees and a castle" ("Вид с балкона … ")(inlineimageexamplealt.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle"> </body> </html>
Атрибут alt содержит текст, который должен выводиться, когда изображение недоступно. Информация в атрибуте не должна выводиться, когда изображение было успешно загружено и показано; Internet Explorer считает это неправильным, и показывает ее как всплывающую подсказку, когда указатель мыши перемещается на изображение на некоторое время. Это ошибка, так как ведет к тому, что множество людей добавляют информацию об изображении в атрибут . Если вы хотите добавить информацию, необходимо использовать вместо этого атрибут , к рассмотрению которого мы переходим в следующем разделе.
Большинство браузеров будут выводить значение атрибута элемента img как всплывающую подсказку, когда на изображение перемещается указатель мыши (см. рисунок 17.2). Это может помочь посетителю больше узнать об изображении, но нельзя полагаться на то, что все посетители будут иметь мышь. Атрибут может быть очень полезным, но он не является безопасным способом предоставления критически важной информации. Вместо этого он предлагает хороший способ, например, описать настроение изображения, или, что оно означает в контексте (inlineimagewithtitle.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with alternative text and title</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses,
trees and a castle"
title="What I see when I look out of my window;
the castle was one reason to move there.">
</body>
</html>
Если загрузить этот код в браузер, то можно будет увидеть изображение, показанное на рисунке 17.2.
(рис 17.2) Атрибут title выводится как всплывающая подсказка во многих браузерах.
Если изображение является очень сложным, как, например, график, можно предложить более длинное его описание, используя атрибут , чтобы люди, использующие считыватель экрана или при отключенном выводе изображений могли, тем не менее, получить доступ к информации, содержащейся в изображении.
Этот атрибут содержит URL, который указывает на документ, содержащий эту же самую информацию. Например, если имеется график, показывающий множество данных, можно соединить его с таблицей данных с той же информацией с помощью (inlineimagelongdesc.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with longdesc</title>
</head>
<body>
<img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption
amongst under 15 year olds. Most children ate Pineapples,
followed by Pears" longdesc="fruitconsumption.html">
</body>
</html>
Файл данных fruitconsumption.html содержит очень простую таблицу данных, которая представляет данные графика:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fruit consumption</title>
</head>
<body>
<table summary="Fruit Consumption of under 15 year olds, March 2007">
<caption>Fruit Consumption</caption>
<thead>
<tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>10</td></tr>
<tr><td>Oranges</td><td>58</td></tr>
<tr><td>Pineapples</td><td>95</td></tr>
<tr><td>Bananas</td><td>30</td></tr>
<tr><td>Raisins</td><td>8</td></tr>
<tr><td>Pears</td><td>63</td></tr>
</tbody>
</table>
<p><a href="inlineimagelongdesc.html">Back to article</a></p>
</body>
</html>
Два различных представления данных рядом выглядят как показано на рисунке 17.3.
(рис 17.3) Можно соединить документ со сложными данными с изображением, используя атрибут longdescОтметим, что не существует визуального ключа, который говорит о том, что имеется файл длинного описания, соединенный с этим изображением. Вспомогательные технологии однако позволят своим пользователям узнать, что имеется доступное альтернативное представление.
Когда агент пользователя встречает элемент img в коде src. По умолчанию, он не знает размеров изображения, поэтому просто выводит весь текст целиком, а затем смещает остаток документа, когда изображения наконец загрузятся и появятся. Это может замедлить загрузку страницы, и выглядит немного странно для посетителей страницы. Чтобы избежать этого, можно приказать агенту пользователя выделить необходимое пространство для изображений до их загрузки, задавая размеры изображений с помощью атрибутов width и height (inlineimagewithdimensions.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with dimensions</title> </head> <body> <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle" width="400" height="186"> </body> </html>
В этом случае выводится свободное пространство размером с изображение, пока изображение не загрузится и не займет свое место, поэтому исключается неприятное смещение страницы. Можно также изменять размеры изображений с помощью этих атрибутов (попробуйте уменьшить наполовину значения атрибутов в примере выше, сохранить его, и затем перезагрузите страницу), но это не слишком хорошая идея, так как изменение размера не во всех браузерах приводит к хорошему качеству результата. Особенно плохо изменение размеров изображений действует при превращении в пиктограммы, так как идея пиктограммы состоит не только в уменьшении физического размера изображения, но и также и в уменьшении размера файла. Никто не захочет загружать фотографию размером 300 Кб, чтобы увидеть просто небольшое изображение, которое должно иметь размер 5 Кбайт.
Имеется много других атрибутов, которые можно использовать с изображениями, но большинство из них объявлены исключенными, так как определяют компоновку и выравнивание изображения. Это работа не для
Вполне безопасно сказать, что Web-дизайн стал значительно более интересным, когда браузеры начали поддерживать CSS. Вместо хитроумного использования nbsp; ) для сохранения величины пробела, и GIF-изображений разделителей (прозрачных GIF-изображений размером 1х1 пиксель, которые изменялись в размере для создания полей), теперь можно использовать заполнения, поля, размеры и позиционирования в CSS, и оставить
CSS позволяет также использовать фоновые изображения самым разнообразным образом — можно разместить их позади и вокруг текста любым желательным образом, а также повторять изображения в регулярных шаблонах, чтобы создавать фоновые изображения. Здесь изображения CSS будет рассмотрены только кратко, так как будущая лекция рассматривает фоновые изображения CSS значительно более подробно.
Использовать CSS для применения изображений в качестве фона достаточно легко. Прежде чем рассматривать приведенный ниже код CSS, загрузите файл примера imagesandcss.html в браузер или посмотрите на рисунок 17.4, чтобы получить представление о всевозможных вещах, которые можно делать с фоновыми изображениями в CSS.
(рис 17.4) Фоновые изображения с помощью CSS Различные рамки являются, в действительности, стилизованными элементами заголовками h2 с некоторым заполнением и рамками, применяемыми с помощью CSS, чтобы создать достаточно пространства для фонового изображения. Если просмотреть файл h2 имеет уникальный id, позволяющий каждому из них использовать различные правила CSS. CSS для первого примера имеет следующий вид:
background-image:url(ball.gif); background-color:#eee;
Изображение добавляется с помощью селектора URL, чтобы определить добавляемое изображение. В качестве запасного варианта, на тот случай, если оно будет недоступно, необходимо также задать фоновый цвет с помощью селектора background-color и значение цвета (шестнадцатеричного значения, имени или RGB). В данном случае был выбран светло-серый цвет.
По умолчанию, фоновые изображения будут повторяться по горизонтали и по вертикали, чтобы заполнить все пространство элемента. Можно однако определить другой вариант повторения с помощью селектора
background-repeat :no-repeat;background-repeat :repeat-x;background-repeat :repeat-y;По умолчанию, фоновое изображение (если оно не повторяется) будет помещаться в верхнем левом углу элемента. Можно однако использовать top, center, и bottom для вертикального смещения, и left, center, и right для горизонтального смещения. Например, чтобы разместить изображение внизу справа, необходимо использовать
Управляя повторением и позицией фоновых изображений, и используя интересные изображения можно создавать множество удивительных эффектов, которые были невозможны до появления CSS, а сохранение определения фона в отдельном файле CSS существенно облегчает изменение внешнего вида всего сайта, изменяя несколько строк кода. Все это будет рассмотрено подробнее позже.
Это все, что нужно знать, когда речь идет о добавлении изображений в
src для местоположения файла изображения alt для текста, который должен быть доступен, когда изображение не загружается или его невозможно увидеть title для интересной (но несущественной) дополнительной информации longdesc для указания на внешний файл данных, содержащий альтернативное текстовое представление данных, проиллюстрированных изображением, когда изображение является, например, сложным графикомwidth и height, чтобы сообщить браузеру размер изображения, чтобы он мог выделить для него подходящее пространство alt хороший текст, и нужно ли это делать на самом деле? longdesc , и как браузеры показывают его?valign и align, почему они не были здесь расссмотрены?Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
В этой лекции мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала. Лекция имеет следующее содержание:
img и его атрибуты alt title longdesc для описания сложных изображенийwidth и heightОчень соблазнительно использовать на своем Web-сайте много визуальной информации. Изображения являются отличным способом создания настроения у посетителя, и иллюстрации являются прекрасным способом сделать сложную информацию легче для восприятия для зрячих учеников.
Недостаток изображений в Web состоит в том, что не все пользователи Web могут их видеть. В прошедшие дни, когда изображения стали впервые поддерживаться браузерами, многие посетители сайтов отключали вывод изоображений, чтобы уменьшить объем трафика и быстрее перемещаться в сети — соединения Web были когда-то очень медленными, и нужно было платить большие деньги за каждую проведенную в сети минуту. Хотя это не слишком распространено сегодня, но мы ушли еще не слишком далеко.
Поэтому очень важно выбирать изображения из разумных соображений и использовать их, когда уместно. Еще более важно убедиться, что вы всегда предлагаете запасной вариант для тех, кто не может видеть изображения. Имеются дополнительные пояснения по проблемам неправильного использования пиктограмм и изображений в лекции "Перемещение в Web и меню" в дальнейшем в этой серии. Пока давайте посмотрим, какие доступны технологии для добавления изображений в документ
Существует два основных способа добавления изображений в документ: содержательные изображения с помощью элемента img и фоновые изображения, применяемые к элементам с помощью CSS. Когда что использовать зависит от того, что вы хотите делать:
img с подходящим альтернативным текстом.С помощью элемента img очень легко добавить изображение в документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="balconyview.jpg"> </body> </html>
Если выполнить этот код в браузере, то будет получен вывод, показанный на рисунке 17.1.
(рис 17.1) Изображение, как оно выводится в браузереЭтот вывод изображения работает прекрасно, однако, он является недопустимым img должен иметь атрибут . Этот атрибут содержит текст, который выводится, если изображение недоступно по каким-то причинам. Изображение может быть недоступно, так как его невозможно найти, загрузить или потому что агент пользователя (обычно браузер) не поддерживает изображения. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения Web-страниц. Эти технологии считывают содержимое атрибутов элементов img своим пользователям. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут .
В сети Web можно найти множество текстов, говорящих о "тегах ". Это фактически неверно, так как не существует тега (или элемента) с таким именем. Это атрибут элемента img, крайне полезный как для доступности, так и для оптимизации поисковых машин.
Чтобы сделать изображение понятным каждому, необходимо добавить подходящий альтернативный текст, например, в данном случае "View from my balcony, showing a row of houses, trees and a castle" ("Вид с балкона … ")(inlineimageexamplealt.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image</title> </head> <body> <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle"> </body> </html>
Атрибут alt содержит текст, который должен выводиться, когда изображение недоступно. Информация в атрибуте не должна выводиться, когда изображение было успешно загружено и показано; Internet Explorer считает это неправильным, и показывает ее как всплывающую подсказку, когда указатель мыши перемещается на изображение на некоторое время. Это ошибка, так как ведет к тому, что множество людей добавляют информацию об изображении в атрибут . Если вы хотите добавить информацию, необходимо использовать вместо этого атрибут , к рассмотрению которого мы переходим в следующем разделе.
Большинство браузеров будут выводить значение атрибута элемента img как всплывающую подсказку, когда на изображение перемещается указатель мыши (см. рисунок 17.2). Это может помочь посетителю больше узнать об изображении, но нельзя полагаться на то, что все посетители будут иметь мышь. Атрибут может быть очень полезным, но он не является безопасным способом предоставления критически важной информации. Вместо этого он предлагает хороший способ, например, описать настроение изображения, или, что оно означает в контексте (inlineimagewithtitle.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with alternative text and title</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses,
trees and a castle"
title="What I see when I look out of my window;
the castle was one reason to move there.">
</body>
</html>
Если загрузить этот код в браузер, то можно будет увидеть изображение, показанное на рисунке 17.2.
(рис 17.2) Атрибут title выводится как всплывающая подсказка во многих браузерах.
Если изображение является очень сложным, как, например, график, можно предложить более длинное его описание, используя атрибут , чтобы люди, использующие считыватель экрана или при отключенном выводе изображений могли, тем не менее, получить доступ к информации, содержащейся в изображении.
Этот атрибут содержит URL, который указывает на документ, содержащий эту же самую информацию. Например, если имеется график, показывающий множество данных, можно соединить его с таблицей данных с той же информацией с помощью (inlineimagelongdesc.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with longdesc</title>
</head>
<body>
<img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption
amongst under 15 year olds. Most children ate Pineapples,
followed by Pears" longdesc="fruitconsumption.html">
</body>
</html>
Файл данных fruitconsumption.html содержит очень простую таблицу данных, которая представляет данные графика:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fruit consumption</title>
</head>
<body>
<table summary="Fruit Consumption of under 15 year olds, March 2007">
<caption>Fruit Consumption</caption>
<thead>
<tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>10</td></tr>
<tr><td>Oranges</td><td>58</td></tr>
<tr><td>Pineapples</td><td>95</td></tr>
<tr><td>Bananas</td><td>30</td></tr>
<tr><td>Raisins</td><td>8</td></tr>
<tr><td>Pears</td><td>63</td></tr>
</tbody>
</table>
<p><a href="inlineimagelongdesc.html">Back to article</a></p>
</body>
</html>
Два различных представления данных рядом выглядят как показано на рисунке 17.3.
(рис 17.3) Можно соединить документ со сложными данными с изображением, используя атрибут longdescОтметим, что не существует визуального ключа, который говорит о том, что имеется файл длинного описания, соединенный с этим изображением. Вспомогательные технологии однако позволят своим пользователям узнать, что имеется доступное альтернативное представление.
Когда агент пользователя встречает элемент img в коде src. По умолчанию, он не знает размеров изображения, поэтому просто выводит весь текст целиком, а затем смещает остаток документа, когда изображения наконец загрузятся и появятся. Это может замедлить загрузку страницы, и выглядит немного странно для посетителей страницы. Чтобы избежать этого, можно приказать агенту пользователя выделить необходимое пространство для изображений до их загрузки, задавая размеры изображений с помощью атрибутов width и height (inlineimagewithdimensions.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with dimensions</title> </head> <body> <img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle" width="400" height="186"> </body> </html>
В этом случае выводится свободное пространство размером с изображение, пока изображение не загрузится и не займет свое место, поэтому исключается неприятное смещение страницы. Можно также изменять размеры изображений с помощью этих атрибутов (попробуйте уменьшить наполовину значения атрибутов в примере выше, сохранить его, и затем перезагрузите страницу), но это не слишком хорошая идея, так как изменение размера не во всех браузерах приводит к хорошему качеству результата. Особенно плохо изменение размеров изображений действует при превращении в пиктограммы, так как идея пиктограммы состоит не только в уменьшении физического размера изображения, но и также и в уменьшении размера файла. Никто не захочет загружать фотографию размером 300 Кб, чтобы увидеть просто небольшое изображение, которое должно иметь размер 5 Кбайт.
Имеется много других атрибутов, которые можно использовать с изображениями, но большинство из них объявлены исключенными, так как определяют компоновку и выравнивание изображения. Это работа не для
Вполне безопасно сказать, что Web-дизайн стал значительно более интересным, когда браузеры начали поддерживать CSS. Вместо хитроумного использования nbsp; ) для сохранения величины пробела, и GIF-изображений разделителей (прозрачных GIF-изображений размером 1х1 пиксель, которые изменялись в размере для создания полей), теперь можно использовать заполнения, поля, размеры и позиционирования в CSS, и оставить
CSS позволяет также использовать фоновые изображения самым разнообразным образом — можно разместить их позади и вокруг текста любым желательным образом, а также повторять изображения в регулярных шаблонах, чтобы создавать фоновые изображения. Здесь изображения CSS будет рассмотрены только кратко, так как будущая лекция рассматривает фоновые изображения CSS значительно более подробно.
Использовать CSS для применения изображений в качестве фона достаточно легко. Прежде чем рассматривать приведенный ниже код CSS, загрузите файл примера imagesandcss.html в браузер или посмотрите на рисунок 17.4, чтобы получить представление о всевозможных вещах, которые можно делать с фоновыми изображениями в CSS.
(рис 17.4) Фоновые изображения с помощью CSS Различные рамки являются, в действительности, стилизованными элементами заголовками h2 с некоторым заполнением и рамками, применяемыми с помощью CSS, чтобы создать достаточно пространства для фонового изображения. Если просмотреть файл h2 имеет уникальный id, позволяющий каждому из них использовать различные правила CSS. CSS для первого примера имеет следующий вид:
background-image:url(ball.gif); background-color:#eee;
Изображение добавляется с помощью селектора URL, чтобы определить добавляемое изображение. В качестве запасного варианта, на тот случай, если оно будет недоступно, необходимо также задать фоновый цвет с помощью селектора background-color и значение цвета (шестнадцатеричного значения, имени или RGB). В данном случае был выбран светло-серый цвет.
По умолчанию, фоновые изображения будут повторяться по горизонтали и по вертикали, чтобы заполнить все пространство элемента. Можно однако определить другой вариант повторения с помощью селектора
background-repeat :no-repeat;background-repeat :repeat-x;background-repeat :repeat-y;По умолчанию, фоновое изображение (если оно не повторяется) будет помещаться в верхнем левом углу элемента. Можно однако использовать top, center, и bottom для вертикального смещения, и left, center, и right для горизонтального смещения. Например, чтобы разместить изображение внизу справа, необходимо использовать
Управляя повторением и позицией фоновых изображений, и используя интересные изображения можно создавать множество удивительных эффектов, которые были невозможны до появления CSS, а сохранение определения фона в отдельном файле CSS существенно облегчает изменение внешнего вида всего сайта, изменяя несколько строк кода. Все это будет рассмотрено подробнее позже.
Это все, что нужно знать, когда речь идет о добавлении изображений в
src для местоположения файла изображения alt для текста, который должен быть доступен, когда изображение не загружается или его невозможно увидеть title для интересной (но несущественной) дополнительной информации longdesc для указания на внешний файл данных, содержащий альтернативное текстовое представление данных, проиллюстрированных изображением, когда изображение является, например, сложным графикомwidth и height, чтобы сообщить браузеру размер изображения, чтобы он мог выделить для него подходящее пространство alt хороший текст, и нужно ли это делать на самом деле? longdesc , и как браузеры показывают его?valign и align, почему они не были здесь расссмотрены?Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.