18:01
Как добавить изображения на веб-страницу
Изображения добавляют цвет блогу и любой странице в целом, делают перерыв в чтении для пользователя и часто служат графическим объяснением того, о чем рассказывается.

Поэтому наличие изображений при публикации может быть полезным для пользователя.

При работе над проектом веб-дизайнер-фрилансер должен уметь добавлять изображения, которые предоставляют полезную информацию, помогают пользователю и в то же время делают дизайн привлекательным. И все это без ущерба для скорости загрузки сайта.



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

Код для добавления изображения на сайт

Чтобы добавить изображения на веб-страницу, необходимо написать следующий HTML-код:

Код
src="/carpeta/archivo.jpg"


Атрибут src, путь к изображению

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

Код
src="/folder/file.jpg"


Вы также можете вызвать изображение с полным адресом:

Код
src="https://web.com/carpeta/archivo.jpg"


Высота и ширина изображения


Чтобы избежать лишних операций браузера и ускорить загрузку страницы, удобно определить ширину и высоту изображения.

Для этого используются теги height и width. Рекомендуется всегда устанавливать эти атрибуты. Например:

Код
<img src="archivo.jpg" width="300" height="150">


В этом случае изображение будет иметь ширину 300 пикселей и высоту 150 пикселей.

Как вставить изображения со ссылками

Пример:

Код
<a href="carpeta/web.html"><img src="archivo.png"></a>


nde href eDostablece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

Где href задает путь к странице, на которую будет помещено изображение. Другой пример:

Код
<a href="https://www.lawebera.es/">
  <img src="/carpeta/archivo.png" />
</a>


Атрибут alt, описание изображения

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

Атрибут alt выражается следующим образом:

Код
<img src="filename.jpg" alt="описательный текст alt" />


Полный код для добавления изображения на веб-сайт

Со всем вышеперечисленным мы можем довольно хорошо определить основные свойства изображения (напомним, что использование изображений в блогах и на веб-порталах очень важно).

Давайте посмотрим на пример с тем, что мы узнали:

Код
<a href="paginaweb.html">
  <img src="archivo.png"
  width="300" height="150"
  alt="texto alternativo de la imagen" />
</a>


Чтобы определить другие типы визуальных деталей, необходимо использовать CSS.
Категория: Сайтостроение | Просмотров: 149 | Добавил: vit90ivan | Теги: ссылка на картинку, изображение сайта | Рейтинг: 0.0/0
Всего комментариев: 0
avatar