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. |
|
|
| Всего комментариев: 0 | |