Топ-100 HTML уроки, 3 часть: изображения - Разработка сайтов на WordPress
HTML уроки, 3 часть: изображения

HTML изображения

Изображения объявляются следующим тегом: <img />. Обратите внимание, что <img /> не требует закрывающего тега, потому что он содержит символ конца тега: «/».

Вот пример вставки изображения:

<p>Это центрированное изображение:
<img src="/register1.jpg" width="300" alt="дизайн-сайта" align="middle" />
</p>

Результатом этого кода будет:

Это центрированное изображение:

дизайн-сайта

 

Атрибут <img /> имеет следующие параметры:

  • Название файла изображения. Используется фраза:
    src=“адрес-файла”где “адрес-файла” – это путь к каталогу (считается от текущей директории), где находится изображение, и само его название. Не забудьте указать точный адрес изображения, если оно находится в папке, отличной от текущей.
  • ширина и высота изображения. Задаются соответственно:
    width=ширина” и
    height=высота“.
    Вместо ширина и высота ставим соответствующий размер изображения (в пикселях). Если указать значения, отличные от реальных, изображение будет растянуто или сжато в соответствии с заданными width и height значениями.
  • альтернативное название. Обозначается
    alt=“альтернативное название”.Это текст, который будет отображаться на месте изображения, если по тем или иным причинам его невозможно загрузить.
    Всегда полезно писать значимые альтернативные имена: некоторые из ваших посетителей могут иметь проблемы со зрением и пользоваться услугами браузера, который читает тексты на страницах. Альтернативное имя – единственный способ понять, какое изображение вы разместили на своей странице.Еще одна причина, чтобы не пропустить заполнение alt – это индексации его в поисковых системах: поисковые роботы Google, Яндекс и др. не понимают изображения, но они прекрасно справляются с текстом и рейтинг сайта может быть изменен к лучшему, если вы позаботитесь включить в alt ключевые слова.
  • положение относительно текста. Используется
    align=позиции“и одно из следующих значений для позиции:

    • bottom: нижний край изображения совпадет с текстом.
    • middle: середина изображения и линия текста совпадают.
    • top: верхний край изображения находится на уровне текста.
    • left: изображение переносится к левой части экрана.
    • right: текст остается слева, а изображение – справа.
  • Рамка изображения: используйте
    border=рамка

Картинки можно использовать в качестве гиперссылки: достаточно обернуть изображения между тегами <a> и </a> .

Вы можете прочитать больше о типах файлов изображений в Интернете в статье “Изображения на сайте“.

Следующая статья: HTML уроки, 4 часть: таблицы, списки

VECHNOST
VECHNOST
Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач! Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?