Изображенията са много важна част от уеб страница, тъй като подобряват външния вид на уеб страницата и увеличават взаимодействието с клиентите. USP на множество уебсайтове е как те организират различни изображения на своите уеб страници и добавят вкусове към него. В това Статия за изображения, ще разберем как да вграждате изображения в уеб страница с помощта на HTML в следния ред:
Как да добавите изображение в HTML
За да вградите изображение в уеб страница, HTML ви дава етикет. Друг важен момент, който трябва да запомните е,
няма затварящ маркер. scr атрибут се използва за указване на пътя на изображението, който може да бъде url или път на изображение от системата / сървъра. Нека първо започнем с основния синтаксис на вграждане на изображение в уеб страница с помощта на HTML.
Синтаксис
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Примерен код
HTML изображение Вграждане на изображения в уеб страница
Подобно на други тагове, има различни атрибути, свързани с етикет. Нека разгледаме всеки един от тях един по един, да разберем нуждите им и как да ги използваме.
HTML изображения Тагове
- alt Атрибут
Атрибутът alt е алтернативният текст за изображение. Причината, поради която е въведен атрибут alt е, че поради някаква причина изображението не може да се зареди, тогава трябва да се появи алтернативен текст, даващ представа за изображението. Причините изображението да не се зарежда може да е бавна интернет връзка или изображението не се намира в предоставения източник и т.н.
Ако изображението се намира в същата папка, където е HTML файлът, можете директно да посочите името на файла. В противен случай трябва да предоставите абсолютния път на файла с изображение.
Стойността на атрибута alt трябва да описва изображението.
Пример
HTML изображение Вграждане на изображения в уеб страница
как да получите дължината на масив в javascript
- Ширина и височина на изображението
Атрибутът Style се използва за задаване на височина и ширина на изображението. В атрибута стил посочвате стила на CSS.
HTML изображение Вграждане на изображения в уеб страница
Някои от важните моменти при вграждането на изображение в уеб страница с помощта на HTML са:
- Атрибутите ширина и височина са дефинирани в пиксели.
- Можете също така да определите ширината и височината на изображението в проценти. Той ще вземе предвид процента според цялата уеб страница.
- Ако посочите само един от тях, той коригира съответно другия.
- Вграждане на изображения с помощта на URL
HTML също ви дава гъвкавостта, при която можете да изберете изображението от друг сървър, само като посочите URL адреса. Можете да използвате отделен сървър за хостване на изображенията и след това да ги вградите, като използвате URL.
HTML изображение Вграждане на изображения в уеб страница
- Изображението като връзка
Можете също да използвате изображението като връзка, където потребителят може да кликне върху изображението и да кацне на нова уеб страница. За да направите това, просто трябва да поставите ден в етикет.
HTML изображение Вграждане на изображения в уеб страница
- Изображение плаващо
Можете също така да регулирате подравняването на изображението, като използвате свойството CSS float. Всички свойства на CSS трябва да бъдат посочени в атрибута style.
HTML изображение
- Карти с изображения
Това е една от важните функции, предоставени от HTML. tag помага при дефинирането на карта с изображения. Сигурно се чудите какво представлява карта с изображения. Карта на изображението е изображение с области, върху които може да се кликва
какво е синхронизация в java
HTML изображение
- Фоново изображение
Можете също да добавите фоново изображение в уеб страница. Просто трябва да използвате свойството CSS, т.е. фоново изображение в стиловия маркер и да го добавите към HTML елемента.
HTML изображениеФоново изображение
BODY елемент
С това стигаме до края на този блог за HTML изображения.След изпълнението на горните фрагменти бихте разбрали как да вмъкнете изображение в HTML. Надявам се, че този блог е информативен и с добавена стойност за вас.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „HTML изображения“ и ние ще се свържем с вас.