web-stroytel

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

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

Тег

Вставить изображение на страницу проще простого. Вот например если изображение помещено в корневую папку

<img src="/smile.jpg" width="64" height="56" />

Результат будет выглядеть примерно следующим образом:

Теперь мы на созданной нами ранее главной станице сайта index.html поместим изображение.

Изменим только путь изображения. Вот какой код приблизительно должен быть у вас на странице:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">

</style>
</head>

<body>
<p align="center" class="стиль1">Ура!!! Я вставил Свое первое изображение на страницу!</p>
<p align="center"><span class="стиль1"><img src="http://web-stroytel.ucoz.com/smile.jpg" alt="смайлик)" width="64" height="56" hspace="1" vspace="1" border="0" align="middle" /></span></p>
</body>
</html>

Сохраните страницу. Если вы уже заметили, мы только изменили путь к файлу. Теперь картинка прописана по адресу http://web-stroytel.ucoz.com/smile.jpg

У неё имеется http адрес и название smile.jpg. При это smile - это имя картинки данное пользователем, а jpg - специальное расширение изображения.
Есть всего три расширения, которые можно вставить на страницу:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Атрибуты тега IMG:
атрибуты:

ALIGN - определяет способ выравнивания картинки по горизонтали. Обычно используют:

LEFT (выравнивание по левому краю, текст будет обтекать справа)

RIGHT (выравнивание по правому краю, текст обтекает слева) Если на странице есть текст, то это обязательное свойство.

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки. HSPACE - горизонтальный отступ и VSPACE - вертикальный отступ.

HEIGHT и WIDTH - высота и ширина изображения в пикселях.

ALT - определяет текст, отображаемый браузером на месте изображения. Так как робот не видит то, что изображено на рисунке, пишите этот тег всегда!

TITLE - Определяет заголовок картинки, т.е. при наведении мышью высветится надпись из атрибута title.

<a href="ВАША ССЫЛКА"> Изображение можно сделать ссылкой на страницу сайта (подробности о ссылках в следующем уроке)

border="0" - чтобы убрать некрасивую рамку изображения пишут дополнительный атрибут border.

<a href="ВАША ССЫЛКА"><img src="http://web-stroytel.ucoz.com/smile.jpg" alt="смайлик)" width="64"

height="56" hspace="1" vspace="1" border="0" align="middle" /></a>

См. также

Следующий - Гиперссылки
Предыдущий - Работа цветом фона и текста

Регистрация

Поиск

Опрос:

Друзья

партнеры

Внимание!!

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

При копировании материалов ссылка на источник обязательна.
Если какой либо материал нарушает ваше авторское право, то пожалуйста обратитесь к администрации через ЛС.
Шаблон защищен авторским правом. подробнее