Приветствую Вас Гость Четверг, 23.11.2017, 01:01

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">
<!--
.стиль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 - определяет текст, отображаемый браузером на месте изображения. Так как робот не видит то, что изображено на рисунке, пишите этот тег всегда!

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>

См. также

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


Регистрация
Поиск
Опрос:
Поддерживаете ли Вы идеи создания сайта?
Всего ответов: 42
Друзья
Rambler's Top100
партнеры

Внимание!!
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0



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