Понедельник, 18.11.2019, 23:04
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 HTML тег <img>

HTML тег <img>

В интернете трудно найти сайт, который бы не содержал изображений, и это не удивительно, ведь изображения - это основная часть дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Синтаксис тега <img>:

<img alt="Описание изображения" src="URL">

Данный тег является одиночным и не требует закрывающего тега. У него есть один важный атрибут src, которому присваивается адрес изображения. Приведем пример на html.

Пример 1. Использование тега <img>.

<body>

...

<img src=http://www.zarabotkii.ru/uroki/8.jpg>

...

</body>

Этот код преобразуется на странице в следующее:

Возможно размещение нескольких картинок подряд.

Пример 2. Вывод нескольких картинок друг за другом через <img>.

<body>

...

<img src=http://www.zarabotkii.ru/uroki/8.jpg>

<img src=http://www.zarabotkii.ru/uroki/9.jpg>

...

</body>

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

Атрибуты тега img

1) align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
left - выравнивание по левому краю
middle - выравнивание середины изображения по базовой линии текущей строки
bottom - выравнивание нижней границы изображения по окружающему тексту
top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
right - выравнивание по правому краю

2) alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
→ выдает подсказку при наведении
→ если в браузере отключены изображения, то выводится этот текст.
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению.

3) border="ЧИСЛО" - задает толщину рамки обтекающей изображение.

4) bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border имеет значение больше 0.

5) height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а высоту укажем 150 пикселей, то оно сжимается до 300х150, т.е. пропорционально.

6) width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется до 1200х960.

7) hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html.

8) vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html.

9) class="имя_класса" - можно присвоить класс изображению, чтобы задать определенный стиль всем изображениям этого класса.


Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 8. HTML тег form - подробное описание с примерами

← Перейти в каталог html уроков и советов

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz