Думаю всем известно, что изображения являются незаменимыми в Сетевом пространстве Интернет. Без изображений тексты воспринимаются уныло и с гораздо худшим энтузиазмом по сравнению с аналогичной ситуацией, когда тексты разбавлены иллюстрациями.
В этом уроке мне хочется научить Вас добавлять в текст изображения (благодаря вставке которых статьи будут иметь больший успех у аудитории).
Тег
Вставить изображение на страницу проще простого. Вот например если изображение помещено в корневую папку<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"> <!-- .стиль1 { font-family: "Times New Roman", Times, serif; font-size: large; font-style: italic; } --> </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 - определяет текст,
отображаемый браузером на месте изображения. Так как робот не видит то, что изображено на рисунке, пишите этот тег всегда!
<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> |
См. также
Следующий - Гиперссылки
Предыдущий - Работа цветом фона и текста
