Содержание

• Шагать
• Метод 1 из 1. Вставка изображений с помощью HTML
• Советы
• Предупреждения

Добавление изображений на ваш веб-сайт или в профиль в социальной сети - отличный способ украсить вашу веб-страницу. HTML (язык разметки гипертекста) имеет множество функций для создания веб-страниц, но, к счастью, код, необходимый для добавления изображений, не так уж и сложен.

Шагать

Метод 1 из 1. Вставка изображений с помощью HTML

1. Загрузите свое изображение на бесплатный веб-сайт хостинга, например Photobucket или TinyPic, который позволяет создавать горячие ссылки. Горячие ссылки позволяют напрямую связать изображение с сервером веб-сайта; некоторые провайдеры запретили это, потому что горячие ссылки используют их пропускную способность и занимают место на их серверах.
   • Если у вас есть учетная запись платного хостинга, загрузите изображения прямо на сервер, на котором размещен ваш веб-сайт. Это всегда надежнее, чем бесплатный сайт, и совсем не обязательно должен быть дорогим.
2. Откройте новый документ в текстовом редакторе (например,, Блокнот / Блокнот) или откройте страницу на своем веб-сайте / в профиле, где вы можете напрямую изменить HTML-код.
3. Начнем с img тег. В img тег пуст, то есть закрывающий тег не требуется. Однако для проверки XHTML вы все равно можете поставить перед ним пробел и косую черту. больше чем знак.
   • img />
4. Доступных атрибутов много, но необходим только один:src. Это местоположение / адрес или также URL-адрес вашего изображения.
   • img src = "URL изображения" />
5. Далее вам нужно альт добавить атрибут. Это показывает альтернативный текст, если изображение не загружается. Это также сервис для слабовидящих, использующий программы чтения с экрана.
   • Если вы наводите курсор на изображение, этот текст также отображается как всплывающая подсказка, но это только в случае Internet Explorer. Решение, которое работает со всеми браузерами (Firefox и другие.) к нему заглавие атрибут для использования в дополнение к альт. (Вы можете опустить последнее, если не хотите, чтобы у изображения была всплывающая подсказка.)

В качестве примера:img src = "URL изображения" alt = "На всякий случай" title = "Tooltip" />

1. Теперь вы можете указать размер изображения с помощью высота а также ширина атрибут и указав пиксели или процент. Обратите внимание, что изменение размера таким образом изменяет только размер представления, а не размер самого изображения. Чтобы сократить время загрузки изображения, лучше, особенно с большими изображениями, заранее изменить их размер с помощью программного обеспечения для редактирования фотографий или онлайн-сервиса, такого как PicResize.com.
   • img src = "URL изображения" alt = "На всякий случай" title = "Tooltip" height = "50%" width = "50%" />
   • img src = "URL изображения" alt = "На всякий случай" title = "Tooltip" height = "25px" width = "50px" />

Советы

• Значение для этих атрибутов указывается в пикселях или в процентах от 1 до 100%.
• Изображение можно разместить в любом месте веб-страницы, используя различные атрибуты форматирования, такие как верх, низ, середина, право, лево и т. Д.
• Атрибут hspace используется для вставки горизонтального пространства слева и справа от изображения, а атрибут vspace используется для освобождения места вверху и внизу изображений и других объектов.
• Не слишком увлекайтесь изображениями. Это выглядит грязно и непрофессионально.
• Изображения в формате GIF подходят для логотипов или мультфильмов, но этот тип файлов менее подходит для фотографий и других изображений с большим количеством цветов.
  • Изображения в формате GIF поддерживают только 8-битный цвет с максимум 256 цветами для изображения. Поэтому следует ожидать, что воспроизведение 16- или 24-битной цветной иллюстрации или фотографии будет хуже.
  • Изображения в формате GIF также поддерживают прозрачность. Возможен один бит прозрачности, что означает, что один цвет можно сделать прозрачным.
  • Чередование также поддерживается изображениями в формате GIF, что означает, что посетитель сайта получит представление о том, как будет выглядеть изображение, прежде чем оно будет полностью загружено.
  • Формат GIF также поддерживает анимацию.
• Убедитесь, что в URL указан формат файла изображения (.webp, .gif и т. Д.).

Предупреждения

• Не хотлинк!