Преминете към основното съдържание

Изображения. Импортиране на шрифтове. Семантика на HTML таговете

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

HTML тагът <img> се използва за вграждане на изображения в уебстраници чрез създаване на връзка към тях. Той създава място за изображението, дефинирано чрез атрибути като src, width, height и alt, и не изисква затварящ таг. [1]

Съществуват два начина за вмъкване на изображения в уебстраница:

  • Чрез посочване на пълен път или адрес (URL) за достъп до файл в интернет.
  • Чрез посочване на път до файла, определен спрямо местоположението на текущата уебстраница.

Code


<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" alt="GFG image" />

Preview

  • Елементът <img> се използва за вграждане на изображение в уебстраница.
  • Атрибутът src указва URL адреса на източника на изображението.
  • Атрибутът alt предоставя описателен текст, в случай че изображението не може да бъде показано.

Някои атрибути​

АтрибутиОписание
srcУказва пътя до файла с изображението
altПредоставя алтернативен текст за изображението; полезен е, когато изображението не може да бъде показано
crossoriginПозволява импортиране на изображения от сайтове на трети страни с достъп между различни източници (cross-origin access); обикновено се използва с canvas
heightОпределя височината на снимката
widthОпределя ширината на снимката
srcsetУказва списък с файлове с изображения, които да се използват в различни ситуации, което позволява използването на адаптивни изображения.

alt​

Атрибутът alt в тага <img> предоставя алтернативен текст, когато дадено изображение не може да бъде показано, и подобрява достъпността.

  • Показва текст, ако изображението не успее да се зареди.
  • Помага на потребители с бавна интернет връзка или неработещи връзки към изображения.
  • От съществено значение е за екранните четци и поддържането на достъпността.

Code


<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/201907101022/download3.png" alt="This is GeeksforGeeks logo" />

Preview

width и height​

Атрибутите width и height в тага <img> определят размера на изображението, като стойностите по подразбиране са в пиксели.

  • Контролират ширината и височината, с които се показва изображението.
  • Стойностите се задават в пиксели.
  • Помагат за поддържане на последователно оформление и предотвратяват разместването на елементите на страницата.

Code


<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
      alt="GeeksforGeeks logo" 
      width="300" 
      height="300" />

Preview

title​

Атрибутът title добавя подсказка към изображение, която се появява, когато потребителят задържи курсора върху него.

  • Показва описателен текст при задържане на курсора на мишката.
  • Добавя се чрез атрибута title в тага <img>.

Code


<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
      alt="GeeksforGeeks logo" 
      width="200" 
      height="200" 
      title="Logo of GeeksforGeeks" />

Preview

border​

Атрибутът border се използва за управление на външния вид на рамката около изображение.

  • Той определя дебелината на рамката на изображението и задава видим контур.
  • Прилагането на border="0" премахва рамката напълно.

Code


<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
      alt="GeeksforGeeks logo" 
      width="200" 
      height="200" 
      border="5" />

Preview

align​

Подравняването на изображения в HTML определя как едно изображение се позиционира в оформлението на уебстраницата.

  • Подравняването се задава чрез атрибута align в тага <img>.
  • Често използваните стойности са left (вляво), right (вдясно) и center (в центъра).
  • Това спомага за подобряване на оформлението и визуалното представяне на страницата.

Code


<img 
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
      alt="GeeksforGeeks logo" 
      align="right" />

Preview

Добавяне на изображение като връзка​

Поставете тага <img> в рамките на таг <a>, за да направите изображението възможно за натискане от мишката и да го свържете с друга страница или ресурс.

Пътищата до файлове биват два вида:

  • Абсолютни пътища - Те винаги включват кореновия елемент, заедно с пълния списък от директории, необходим за намирането на файла.
  • Относителни пътища - Те указват местоположението на файл или папка спрямо текущата директория.

Code


<a href="https://www.geeksforgeeks.org/" target="_blank">
      <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
          alt="GeeksforGeeks logo" />
  </a>

Preview

Добавяне на анимация​

Анимираните изображения в HTML се добавят чрез GIF файлове, за да се създадат ефекти на движение върху уеб страниците.

  • Използвайте тага <img>, като зададете GIF файл като източник.
  • Анимацията се възпроизвежда автоматично в поддържаните браузъри.
  • Това подобрява визуалната привлекателност и ангажираността на потребителите.

Code


<img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3MycXhrNGtmcjNuamRteXVxNGk2NXpqbW96OWZmNXVuMWUzbzc3NCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LxPhEh5yYHkviFtLUy/giphy.gif" 
       alt="anya" 
       style="width: 200px; height: 200px" />

Preview

Формати на изображенията​

Ето често използваните файлови формати за изображения, които се поддържат от всички браузъри.

АбревиатураТип на файлаРазширение
PNGPortable Network Graphics.png
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
SVGScalable Vector Graphics.svg
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
APNGAnimated Portable Network Graphics.apng

Съвети за ефикасно използване на изображенията​

Използвайте разумно изображенията в HTML, за да подобрите производителността, достъпността и цялостното потребителско изживяване.

  • Оптимизирайте размерите - Компресирайте изображенията и изберете правилния формат (JPEG за снимки, PNG за ограничени цветове, SVG за вектори).
  • Използвайте ясен алтернативен текст - Опишете предназначението на изображението, за да подобрите достъпността и да поддържате екранни четци.
  • Направете изображенията адаптивни - Използвайте srcset, за да показвате различни изображения за различни устройства и резолюции.
  • Запазете съотношенията на страните - Избягвайте разтягането на изображенията, за да запазите визуалното качество.
  • Спазвайте авторските права - Използвайте само изображения, които притежавате или за които имате разрешение да ги използвате.
Бележка

Импортиране на шрифтове

Бележка

Семантика на HTML таговете

Използвана литература​