Урок 6 - Изображения в HTML. Практика

Progger | 07.05.2011, 13:51:07 | Просмотров: 2916

УРОК 6

Вставлять изображения на страницу очень легко. Не забывайте, что всё содержимое должно располагаться между тегами <body> и </body>. За вставку изображений на страницу отвечает одиночный тег <IMG>. Для указания пути к файлу используется атрибут src. Покажу на примере как использовать вставку изображения.

Code

В нашем случае данный файл лежит в той же папке, что и index.html. Если все картинки лежат в другой папке, например в папке Images, то нам придется использовать такой код:

Code

Думаю, принцип вы поняли. Попробуйте нарисовать какой либо логотип и попробуйте вставить его себе на страницу. Если не получилось, перечитайте урок 6 заново.
Мы говорили, что размер изображения можно изменять в графических редакторах. Но его можно изменить также с помощью HTML кода. Для этого есть атрибуты width и height. Атрибут width мы уже использовали, когда создавали линии. Запомните width – это ширина, а height – высота. Давайте рассмотрим на примере:

Code

В данном случае ширина и высота измеряется в пикселях. Давайте зададим ширину и высоту в процентах.

Code

Дам совет, что всё же не надо лениться и задать размеры в графическом редакторе. Дело в том, что если вы измените ширину и высоту у файла, например с большого на маленький, то рисунок станет маленьким, а размер изображения останется таким, каким был у большого. Я клоню к тому, что изменение ширины и высоты в коде HTML – это всего лишь визуальный эффект, который не влияет на размер файла.
Давайте разберём такое понятие, как альтернативный текст. Представьте себе пользователя, у которого очень медленный интернет. И он для более быстрой загрузки страниц, отключил просмотр изображений в своём браузере, и тогда получатся все ваши рисунки коту под хвост? Для этого и существует такое понятие альтернативный текст. Он описывает изображение, что является очень важным в разметке web-страницы.
Давайте на примере рассмотрим, как работает альтернативный текст.
Добавим атрибут alt:

Code

Попробуйте отключить просмотр изображений в вашем браузере или укажите неверный путь к файлу, и вы увидите вместо изображения, ваше описание.
Давайте разберёмся с названиями изображений. Наведите курсор мышки на изображение у вас на страничке. Ничего не произошло? Ничего! Можно сделать так, чтобы при наведении курсора мыши, вам выскакивала подсказка поясняющая изображение. Делается это всё атрибутом title. Не путайте его с тегом <TITLE>. Давайте рассмотрим пример:

Code

Теперь сохраните вашу страничку и откройте в браузере, давайте посмотрим, получилось ли у нас? Мы видим, что при наведении курсора мышки на изображение выскакивает подсказка, в которой написано: «Это наш логотип».
Вспомните атрибут align. Мы использовали его, когда выравнивали текст, например по центру. Этот атрибут можно использовать и с изображением. Попробуйте сами.
Чтобы не писать align=”center”, есть такой парный тег - <center>. Сейчас я вам расскажу, как он работает. Вот например всё, что находится между тегами <body> и </body> является телом страницы и показывается на странице. А всё что находится между тегами <center> и </center> располагается по центру. Поставьте тег <center> после тега <body> и тег </center> перед тегом </center>. Вставьте какое-нибудь изображение между тегами <center> и </center> напишите какой-нибудь текст, например стишок, и просмотрите, что получилось. Ваше изображение и стишок располагаются по центру. Думаю, вы уловили суть этого тега.
Изображение можно также выделить рамкой. Создаёт рамку атрибут border.
Посмотрите пример:

Code

Что же такое 8? 8 – это толщина нашей рамки. Если вы поставите 0 – то рамки просто не будет.
Представьте такую страничку, где есть два изображения. Одно из них выровнено по левому краю, а другое по правому. И между ними располагается текст.Например:

Code

<html>
<head>
<title> Добро пожаловать </title>
</head>
<body>
<center>
<IMG src="web.jpg" border="2" align="left">
<IMG src="web.jpg" border="2" align="right">
<pre> Что такое WWW? Это
World Wide Web, что пе-
реводится как всемирная
паутина
</pre>
</center>
</body>
</html>

Где web.jpb - это изображение лежащее в папке с index.html

То, что мы сделали, называется обтеканием текста. Обтекание можно отменить с помощью тега <BR> с атрибутом clear. Например:

Code

Вместо all можете использовать другие границы обтекания, например left или right.
Так ну и напоследок, давайте разберем, как использовать фоновые изображения. При выборе фонового изображения смотрите на разборчивость текста. Желательно делайте фон светлым, и с малым количеством рисунков на нём. Если задаёте фон тёмным, то сделайте весь текст белым, вот так:

Code

Чтобы задать фон, используйте атрибут background в теге <body>. Например, так:

Code

Ну вот и всё. Напоминаю, что коды не копируйте, а пишите сами, иначе ничего не получится!!!! Не получится, потому что вместо " нужно писать кавычки (SHIFT+2).
На следующем уроке научимся выводить ссылки на вашу страничку.

Теги: html, изображения, изучение