Inserați imagini cu HTML - cum funcționează
Dacă doriți să introduceți o imagine pe site-ul dvs. cu HTML, utilizați eticheta img. Citiți aici cum funcționează exact acest lucru și ce trebuie să aveți grijă.
Cum se inserează imagini cu HTML - elementele de bază
- Cu ziua
poate introduce imagini. - Sursa imaginii este dată în etichetă:
introduce fișierul "testbild.webp" din subfolderul "imagini" de pe site-ul web. - Surse externe prin URL sunt de asemenea posibile:
integrează logo-ul CHIP de pe serverele noastre.
Atribute HTML pentru imagini încorporate
În eticheta img pot fi adăugate numeroase atribute:
- Utilizați „lățimea” și „înălțimea” pentru a determina dimensiunea imaginii de pe site-ul web: imaginea
este afișat pătrat cu o lungime laterală de 100 de pixeli. - Cu „alt” definiți un text alternativ care este afișat dacă imaginea respectivă nu poate fi încărcată. Ar trebui să setați întotdeauna acest atribut atunci când inserați imagini cu HTML.
- Atributul „border” specifică grosimea cadrului în pixeli. O imagine cu
are un cadru care este relativ gros cu cinci pixeli. - Folosiți „aliniere” pentru alinierea graficului. Valorile acestui atribut sunt „jos”, „sus”, „mijloc”, „stânga”, „dreapta” și „centru”.
- Cu „hspace” și „vspace” puteți (orizontal și vertical) să setați o distanță la imagine.
Ce format ar trebui să folosesc?
Există diferite formate de imagine pe care le puteți include în codul HTML.
- JPG: Imaginile în format JPG sunt cel mai frecvent utilizate pentru paginile web. Acest format reprezintă 16, 7 milioane de culori. În plus, un JPG poate fi comprimat foarte bine. Prin urmare, fișierul de imagine poate fi făcut foarte mic, ceea ce permite un timp de încărcare rapidă.
- PNG: formatul PNG poate afișa, de asemenea, 16, 7 milioane de culori și poate fi comprimat. Avantajul față de formatul JPG este că compresia este posibilă fără pierderi.
- Zonele definite în format PNG pot fi, de asemenea, afișate în mod transparent. Cu toate acestea, browserele foarte vechi au probleme de afișare a transparențelor.
- GIF: Dacă doriți să introduceți imagini în mișcare cu HTML, formatul GIF este potrivit. Doar 256 de culori sunt afișate în acest format, iar compresia are loc automat fără opțiuni de setare.
- Formatul GIF este cel mai potrivit pentru graficele mici, animate sau logo-uri. Pentru a vă asigura că logo-urile se încadrează armonios într-o pagină, transparențele pot fi utilizate în format GIF precum PNG.
exemplu HTML
- Aceasta integrează logo-ul CHIP de pe site-ul nostru web.
- Este afișat cu o înălțime de 100 de pixeli și o lățime de 200 de pixeli.
- Dacă nu poate fi încărcat, „CHIP-Logo” este afișat ca text necompletat.
- Imaginea este încadrată de un cadru de doi pixeli.
- Este aliniat la dreapta și are o distanță de 50 de pixeli față de alte elemente laterale.