slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2069
<IMG> - тег картинки или просто изображения. Его используют, чтобы добавить на страницу необходимые иллюстрации, например фото.

Этот тег является непарным, для корректности его лучше писать так <IMG />.

Если добавить этот тег просто без необходимых атрибутов, то на страничке ничего не отобразится.

Важным атрибутом является SRC, путь до файла. Путь до картинки или изображения, лучше всего писать полный путь до картинки, с указанием домена, вы можете указать даже тот путь, который ведет на другой сайт, главное чтобы он был корректным. Так же есть возможность писать относительный путь. Возьмем файл, в котором будет подобный тег, тогда относительный путь будет указывать местоположение картинки, на вашем же хостинге, относительно папки, в которой лежит этот html-файл.

Пример вставки двух одинаковых картинок, с указанием полного пути и относительного

 

<HTML>
    <HEAD>
        <TITLE> Изображения. Пример использования разных путей в SRC </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <img src="http://web.cofp.ru/images/Courses/HTML_for_beginner/pages/9_Атрибут(src)/img/smile.jpg" /><br>
        <img src="/img/smile.jpg" />
    </BODY>
</HTML>

 

Получим

Другим важным атрибутом является ALT, в котором указывается письменное описание картинки. Добавление этого атрибута можно считать обязательным. Хотя если вы его пропустите, никто вас ругать не будет. Суть этого атрибута, в том, что если картинка не загрузилась (неправильный путь до картинки), то будет выводиться это описание. Не все браузеры так поступаю, для некоторых в случае некорректного ввода пути до картинки, будет выводиться значок не найденной картинки. Другое значение этого атрибута для поисковых систем. По этому тексту поисковики определяют, что это за картинка, а как им это делать иначе?

Атрибут TITLE так же стоит указывать, как и в случае со ссылками A, туда пишут текст, который появляется при наведении и удержании курсора на изображении.

Выведем две картинки, одну с корректным путем и описанием ALT и TITLE, а другую с некорректным путем, описанием ALT и TITLE.

 

<HTML>
    <HEAD>
        <TITLE> Изображения. Пример использования атрибута ALT </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <img src="/img/smile.jpg" alt="Смайлик" /><br>
        <img src="/img/smile2.jpg" alt="Смайлик" />
    </BODY>
</HTML>

 

Как это выглядит

У этого тега есть и другие атрибуты, но они не так часто используются, о них вы можете узнать в специальных справочниках.

Тестовые задания, для использования знаний на практике

В этом уроке будет всего одно задание первого уровня. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать. Задания опираются на все пройденные уроки, но основная часть - текущий урок, на его понимание.

Уровень первый

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

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Изображения. Тестовое задание. </TITLE>
    </HEAD>
    <BODY>
        <IMG src="/images/animals/mistifical/fenix.jpeg" alt="Феникс" width="300px" />
        <IMG src="/images/colors.jpeg" alt="Цвета" height="200" />
        <IMG src="/images/flowers/rose.jpg" alt="Роза" height="300px;" />
        <IMG src="/images/animals/mistifical/fenix.jpeg" alt="Феникс" width="300px" />
    </BODY>
</HTML>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.