Atributele opționale ale etichetei img includ: Etichete HTML pentru inserarea de imagini, imagini în HTML

Etichetă IMG conceput pentru a afișa imagini pe o pagină web în formă grafică format GIF, JPEG sau PNG. Această etichetă are un singur parametru obligatoriu, src , care specifică adresa fișierului cu imaginea. Dacă este necesar, desenul poate fi făcut un link către un alt fișier prin plasarea unei etichete IMG în containerul A. În același timp, în jurul imaginii este afișată un chenar, care poate fi eliminat prin adăugarea parametrului border=0 la eticheta IMG.

Imaginile pot fi, de asemenea, folosite ca hărți imagine, unde imaginea conține hotspot-uri care acționează ca link-uri. O astfel de hartă aspect nu diferă de o imagine obișnuită, dar, în același timp, poate fi împărțită în zone invizibile de forme diferite, unde fiecare dintre zone servește drept legătură.

Sintaxă

Etichetă de închidere
Nu este necesar.

Opțiuni
aliniere - determină modul în care imaginea va fi aliniată de-a lungul marginii și modul în care se va înfășura textul.
alt - text alternativ pentru imagine.
chenar - grosimea cadrului din jurul imaginii.
înălțime - înălțimea imaginii.
hspace - spațiu orizontal de la imagine la conținutul înconjurător.
ismap - spune browserului că imaginea este o hartă a imaginii pe partea de server.
lowsrc - calea către fișierul grafic cu rezoluție scăzută pentru afișarea preliminară.
src - calea către fișierul grafic.
vspace - spațiu vertical de la imagine la conținutul înconjurător.
width - lățimea imaginii.
usemap - link către eticheta MAP care conține coordonatele pentru harta imagine client.

Exemplul 1: Utilizarea etichetei IMG

Lorem ipsum dolor sit amet...

Descrierea parametrilor etichetei IMG

parametru ALIGN

Descriere
Pentru imagini, puteți specifica poziția lor față de text sau alte imagini de pe pagina web. Modul în care sunt aliniate imaginile este specificat de parametrul de aliniere al etichetei IMG.

Sintaxă

Argumente
Tabelul 1 listează valorile posibile ale parametrului de aliniere și rezultatul utilizării acestuia.

Opțiunile cele mai populare sunt stânga și dreapta, care creează o înfășurare a textului în jurul imaginii. Pentru a preveni potrivirea strânsă a textului cu imaginea, se recomandă adăugarea parametrilor hspace și vspace în eticheta IMG, care specifică distanța până la text în pixeli.

Deși toate valorile parametrului align sunt acceptate de browsere, argumentele absbottom , absmiddle , baseline și texttop nu sunt descrise în specificația HTML 4.

Valoare implicită
fund

Exemplul 2: Alinierea unei imagini

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

parametrul ALT

Descriere
Parametrul alt setează text alternativ pentru imagini. Acest text vă permite să obțineți informații text despre desen când încărcarea imaginii este dezactivată în browser. Deoarece imaginile sunt încărcate după ce browserul primește informații despre ele, textul de înlocuire al imaginii apare mai devreme. Și pe măsură ce se încarcă, textul va fi înlocuit cu o imagine.

Browserele afișează, de asemenea, text alternativ ca un sfat explicativ atunci când treceți mouse-ul peste o imagine.

Sintaxă

Argumente
Orice șir de text adecvat. Trebuie să fie cuprins între ghilimele duble sau simple.

Valoare implicită
Nu.

Exemplul 3: Adăugarea de text alternativ

alt="Reveniți la pagina principală" !}>

parametrul BORDER

Descriere
O imagine plasată pe o pagină web poate fi plasată într-un cadru de lățimi diferite. Acest lucru se face folosind parametrul de margine al etichetei IMG. În mod implicit, nu există chenar în jurul unei imagini decât dacă imaginea este un link. Culoarea chenarului în acest caz se potrivește cu culoarea textului specificată folosind stilul sau parametrul text al etichetei BODY.

Sintaxă

Argumente

Valoare implicită
0

Exemplul 3. Încadrați în jurul imaginii

cadru verde de 2 pixeli grosime

Parametrul HEIGHT și WIDTH

Descriere
Pentru a redimensiona o imagine folosind HTML, sunt furnizați parametrii lățime și înălțime. Puteți utiliza valori în pixeli sau procente. Dacă intrarea procentuală este setată, atunci dimensiunile imaginii sunt calculate în raport cu elementul părinte - containerul în care se află eticheta IMG. Dacă nu există niciun container părinte, fereastra browserului funcționează ca acesta. Cu alte cuvinte, width=100% înseamnă că imaginea va fi întinsă pe toată lățimea paginii web. Adăugarea unui singur parametru de lățime sau înălțime păstrează proporțiile și raportul de aspect al imaginii. Browserul așteaptă până când imaginea este complet încărcată pentru a determina înălțimea și lățimea inițiale.

Asigurați-vă că setați dimensiunile tuturor imaginilor de pe pagina web. Acest lucru face ca pagina să se încarce ceva mai rapid, deoarece browserul nu trebuie să calculeze dimensiunea fiecărei imagini după ce o primește. Această afirmație este deosebit de importantă pentru imaginile plasate în interiorul unui tabel.

Lățimea și înălțimea imaginii pot fi modificate fie mai mici, fie mai mari. Cu toate acestea, acest lucru nu afectează în niciun fel viteza de încărcare a imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, micșorați cu prudență deoarece... Acest lucru poate provoca confuzie în rândul cititorilor cu privire la motivul pentru care o imagine atât de mică durează atât de mult să se încarce. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul se încarcă mai repede față de o imagine de aceeași dimensiune. Dar calitatea desenului se deteriorează.

Sintaxă

Argumente
Orice număr întreg pozitiv în pixeli sau procent.

Valoare implicită
Lățimea sau înălțimea inițială a imaginii.

Exemplul 4: Dimensiunile imaginii

Parametrul HSPACE și VSPACE

Descriere
Pentru orice imagine, puteți seta margini orizontale și verticale invizibile folosind parametrii hspace și vspace. Acest lucru este valabil mai ales atunci când textul se înfășoară în jurul unei imagini. În acest caz, pentru ca textul să nu se „cureze” strâns pe imagine, este necesar să adăugați spațiu gol în jurul acesteia.

Sintaxă

Argumente
Orice număr întreg pozitiv în pixeli.

Valoare implicită
0

Exemplul 5. Indentări din imagine

Parametrul ISMAP

Descriere
Parametrul ismap spune browserului că imaginea este o hartă a imaginii pe partea serverului. Hărțile de imagine vă permit să legați link-uri către diferite zone ale aceleiași imagini. Implementat în două diverse opțiuni- server si client. Când se utilizează opțiunea de server, browserul trimite o cerere către server pentru a obține adresa linkului selectat și așteaptă un răspuns cu informațiile necesare. Această abordare necesită timp suplimentar pentru a aștepta rezultatul și fișiere separate pentru fiecare card imagine.

Trimiterea datelor către server are loc după cum urmează. Trebuie să plasați eticheta IMG în containerul A, unde trebuie să specificați adresa programului CGI ca valoare a parametrului href. Programul analizează coordonatele de clic pe mouse-ul primite, care sunt calculate din colțul din stânga sus al imaginii și returnează pagina web necesară.

Sintaxă

Argumente
Nu.

Valoare implicită
În mod implicit, această opțiune este dezactivată.

Exemplul 6. Desenul ca hartă imagine

Dacă utilizatorul a setat coordonatele mouse-ului pe imagine la 100, 50, atunci după ce face clic pe link fișierul va fi deschis la http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Ultimele cifre sunt transferate în programul CGI folosind metoda GET și interpretate pe server.

Parametrul LOWSRC

Descriere
Parametrul lowsrc este folosit pentru a afișa o imagine de calitate scăzută înainte ca imaginea finală să fie complet încărcată. Această abordare este menită să reducă timpul de așteptare al utilizatorului. Mai întâi i se arată o imagine cu rezoluție scăzută sau un desen alb-negru, care se încarcă rapid datorită dimensiunii inițiale mici a fișierului. În timp ce utilizatorul îl vizualizează, imaginea se încarcă de bună calitate, care îl înlocuiește treptat pe cel original. Dimensiunile acestor imagini trebuie să fie aceleași.

Sintaxă

Argumente

Valoare implicită
Nu.

Exemplul 7. Calea către un desen de calitate scăzută

Parametrul SRC

Descriere
Adresa fisier grafic, care va fi afișat pe pagina web. Cele mai populare fișiere sunt în format GIF și JPEG.

Sintaxă

Argumente
Valoarea este calea completă sau relativă către fișier.

Valoare implicită
Nu.

Exemplul 8. Calea către fișierul grafic

Descriere

Etichetă conceput pentru a afișa imagini în format grafic GIF, JPEG sau PNG pe o pagină web. Adresa fișierului imagine este specificată prin atributul src. Dacă este necesar, desenul poate fi făcut un link către un alt fișier prin plasarea etichetei într-un recipient . .

Folosind un atribut pe care îl cunoașteți deja alinia puteți controla alinierea imaginilor în raport cu alte elemente ale paginii html. La atribut alinia sunt mai multe sensuri, dar noi suntem cele mai multe în acest moment Ma intereseaza doua:

• stânga- imaginea este situată în marginea stângă a paginii, iar textul curge în jurul imaginii din dreapta;


• corect- imaginea este situată în marginea dreaptă a paginii, iar textul și alte elemente curg în jurul imaginii din stânga.

De exemplu, codul HTML

browserul se va afișa așa

Și acest cod HTML:

va arata asa:

Pentru a opri textul să se înfășoare în jurul unei imagini, puteți utiliza eticheta BR(ne sunt familiare din secțiunea anterioară despre). La etichetă BR există un atribut clar, care poate lua trei valori:

• stânga- opriți înfășurarea textului în jurul imaginilor aliniate la stânga;


• corect- opriți înfășurarea textului în jurul imaginilor aliniate la dreapta;


• toate- opriți înfășurarea textului în jurul imaginilor aliniate atât la stânga, cât și la dreapta.

Inserați o poză:

Descriere și utilizare

Etichetă inserează o imagine într-un document HTML.

Rețineți că imaginile nu sunt inserate din punct de vedere tehnic în pagină. De fapt, imaginile leagă la pagini HTML. Etichetă creează un container pentru imagine.

La etichetă două atribute necesare: src și alt.

Diferența dintre HTML și XHTML

În eticheta HTML nu are o etichetă de închidere.

În eticheta XHTML trebuie să fie închis corespunzător.

Atributele „align”, „border”, „hspace” și „vspace” ale elementului img sunt depreciate și nu sunt acceptate în XHTML 1.0 Strict.

Sfat: Atributul alt este folosit ca text alternativ atunci când nu există nicio imagine, mai degrabă decât ca text peste mouse-ul. Pentru a afișa text când treceți cu mouse-ul peste o imagine, utilizați atributul titlu. Ca aceasta: .

Atribute obligatorii

Atribute opționale

Atribute standard

Atributele evenimentului

În zilele noastre, aproape niciun site web nu se poate descurca fără să folosească imagini în pagini HTML, pentru că așa cum spune înțelepciunea populară: „Este mai bine să vezi o dată decât să auzi de o sută de ori”. După ce ați citit acest articol, veți învăța cum să utilizați eticheta IMG, care este folosită pentru a adăuga imagini în paginile site-ului. Vom lua în considerare exemple pentru HTML 5, dar acestea vor funcționa și pentru versiunile anterioare ale limbajului de marcare hipertext.

Cum să inserați o imagine într-o pagină HTML

Pentru a insera o imagine într-o pagină, utilizați eticheta HTML IMG. Pentru o imagine trebuie specificate cel puțin două atribute: src (calea către fișierul cu imaginea) și alt (text alternativ pe care utilizatorul îl vede dacă imaginea nu s-a încărcat). Atributul alt poate fi gol, dar trebuie să fie prezent. De asemenea, puteți seta atributul titlu și apoi, când treceți cu mouse-ul peste imagine, va fi afișat textul specificat în acest atribut.

Dacă fișierul cu imaginea se află în același folder cu pagina pe care este încărcat, atunci atributul src Puteți specifica doar numele fișierului, de exemplu:

Dacă pagina se află la http://www..html și imaginea este http://www..jpg, atunci calea către imagine este specificată după cum urmează:

Dacă pagina se află în folderul http://www..site/logo.jpg, atunci calea va fi astfel:

Dacă imaginea se află în folderul http://www.site/images/, atunci indiferent în ce folder se află pagina de pe același site în care este inserată imaginea, calea către fișier poate fi specificată după cum urmează:

Sau puteți specifica calea completă către fișierul imagine dacă acesta se află pe alt site:

Lățimea și înălțimea imaginii

În versiunile anterioare de HTML, înălțimea și lățimea erau setate folosind atributele lățime și înălțime, dar acum tot ceea ce afectează afișarea imaginii este setat cu folosind CSSîn atributul stil. Cel mai adesea, lățimea și înălțimea sunt specificate în pixeli:

Dacă lățimea și înălțimea nu sunt specificate, imaginea va fi afișată în dimensiunea inițială. Dacă valorile sunt mai mici decât dimensiunile originale, atunci browserul va afișa imaginea într-o formă redusă, dacă valorile sunt mai mari, atunci browserul va întinde imaginea la dimensiunile specificate, dar în în acest caz, imaginea va fi mai puțin clară. Pentru a nu distorsiona accidental imaginea, puteți seta, de exemplu, doar înălțimea și apoi lățimea va fi redusă sau mărită proporțional cu valoarea înălțimii specificată.

De asemenea, lățimea și înălțimea pot fi specificate ca procent din lățimea sau înălțimea ferestrei browserului sau a oricărui element bloc în care se află imaginea:

Împachetarea imaginii în text și indentare

În mod implicit, textul este afișat sub imagine. Pentru ca textul să se înfășoare în jurul imaginii, este utilizată proprietatea float CSS, care înlocuiește atributul align. Dacă dorim ca imaginea să fie în stânga textului, iar textul să curgă în jurul ei la dreapta și dedesubt, atunci setați valoarea la stânga pentru Proprietăți CSS plutește, iar dacă imaginea ar trebui să fie în dreapta, atunci valoarea dreaptă este indicată:

De asemenea, puteți seta indentări în partea de sus, dreapta, jos și stânga a imaginii:

Același lucru poate fi afirmat într-o formă scurtă:

Alternativ, puteți seta marginile verticale și orizontale utilizând două valori ale proprietăților de marjă în loc de atributele vechi vspace și hspace. Să presupunem că avem nevoie de o marjă de 10 pixeli în partea de sus și de jos și de 8 pixeli în stânga și în dreapta:

Cum să faci dintr-o imagine un link către o pagină

Sau putem seta propria noastră culoare, tipul și grosimea ramei:

Formate de imagini pentru web

De obicei, site-urile web folosesc mai multe formate de imagine. Folosit pentru fotografii format JPEG, dacă aveți nevoie de imagine cu care să fie fundal transparent, apoi se folosește formatul PNG. Anterior, GIF a fost folosit în locul formatului PNG, dar este deja depășit - singurul său avantaj este capacitatea de a crea imagini animate. De obicei, PNG și GIF sunt folosite doar ca elemente de design și numai în cazurile în care imaginea trebuie să aibă zone transparente sau să fie translucidă. Deoarece fișierele în aceste formate au dimensiuni foarte mari, nu sunt recomandate pentru utilizare pentru fotografii obișnuite - există un format JPEG pentru aceasta. Înainte de a încărca imagini pe site, merită să le reduceți lățimea și înălțimea la dimensiunea în care vor fi afișate pe site, astfel încât să se încarce mai repede pentru utilizatori.

Copierea articolului este interzisă.