Grafice și imagini în HTML, «img» tag-ul pentru a insera imagini și atribute pentru înregistrarea lor

Acest om este cunoscut numai,
că el nu este în închisoare, dar de ce nu stai - este necunoscut.
Mark Tven.

T lui este o lecție despre cum se introduce o imagine în HTML. cum să-l aranjeze, modul de a face fluxul de text în jurul imaginilor, etc. Este cunoscut faptul că imaginile face site-ul mai atractiv și diferit de alte resurse, astfel încât capacitatea de a utiliza tag-ul și atributele sale sunt foarte utile în Internet de astăzi. Dar lucrul cel mai important aici - un sentiment de proporții!

grafica P ereizbytok va determina ponderare html-pagini și, în consecință, va crește timpul de încărcare. În plus, prezența unui număr mare de imagini va distrage atenția vizitatorului de conținutul principal al site-ului (desigur, în cazul în care programul nu este conținutul principal al site-ului). Deci, când să se oprească și de a folosi imaginile în HTML numai în cazul în care este necesar. Și vei avea fericire!

În lecția despre atributele tag-ul corpului, am vorbit deja despre modul în care se poate folosi o imagine ca fundal documentul HTML. Acum, hai sa vorbim despre grafica folosită în „strat superior» html-pagini.

§ 1. Cum se introduce o imagine

L Pentru a insera o imagine într-o etichetă HTML IMG este utilizat cu un atribut obligatoriu al SRC. Acest atribut spune calea browser-ului la fișierul de imagine. Ie pentru a insera imaginea cu logo.jpg numele într-un anumit loc al paginii (atâta timp cât pagina, iar imaginea se află în același director (director)) ar trebui să fie în acest loc, inserați următorul cod HTML:

I imagine f și pagina sunt situate în diferite directoare (foldere), trebuie să specificați calea imaginii în raport cu pagina. De exemplu, în cazul în HTML-pagină este în site-ul director (folder), este un subdirector (director) imagini, și în care este logo.jpg noastră imagine, apoi introduceți-l în același director (director), aveți nevoie pentru a scrie:

În acest din urmă caz, browser-ul va afișa codul după cum urmează:

P omimo obligatoriu atributul SRC în tag-ul IMG are mai multe atribute opționale. Să le examinăm în detaliu.

§ 2. Dimensiuni Imagini

H achnom cu atribute care vă permit să specificați dimensiunea imaginii (sau, mai degrabă, a miza dintr-un loc în dimensiunea paginilor). Iată-le:

lățimea - lățimea în pixeli a imaginii, sau un procent;

înălțime - înălțimea imaginii în pixeli sau procente.

E Dacă utilizați aceste atribute, browser-ul va aloca mai întâi un loc în programul, să pregătească aspectul documentului arată textul și numai apoi încărcați imaginea. În același timp, el a pus imaginea în dimensiunea selectată a dreptunghiului, chiar dacă lățimea efectivă și înălțimea imaginii mai mare (compresa) sau mai mică (întindere). În cazul în care nu sunt folosite aceste atribute, browser-ul va încărca imaginea o dată, și de ieșire merge pentru textul ei, și alte elemente este întârziată.

Irene W, și înălțimea imaginii poate fi specificată în pixeli (dimensiunea imaginii va fi constantă, indiferent de rezoluția ecranului), și ca procent (dimensiunea imaginii va depinde de rezoluția ecranului utilizatorului). De exemplu:

§ 3. Textul alternativ

În cazul în care utilizatorul în setările browser-ului pentru a dezactiva imagine, este posibil în loc de un text alternativ de afișare a imaginii, care ar explica faptul că trebuie să existe în urmă. Acest lucru se realizează prin aplicarea atributul ALT.

În acest caz, browser-ul va rezerva spațiu pe pagina pentru imagine, dar în loc de imaginile arată textul pe care îl scrie în valoarea atributului ALT:

P utilizare repetată, acest lucru se va întâmpla în cazul în care utilizatorul a optat pentru grafică. Dacă nu, imaginea va ascunde un text alternativ.

§ 4. imagini Alinierea

Cu align familiare atributul puteți controla alinierea imaginilor în raport cu alte elemente ale HTML-pagini. În atributul align are valori multiple, dar suntem mai interesați în acest moment două:

stânga - imaginea este situat la marginea din stânga a paginii, iar textul se înfășoară în jurul imaginii de pe dreapta;

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

N De exemplu, HTML-cod

browser-ul va arăta calea

Se va arăta în felul următor:

D Pentru a opri învelirea imagini text pot fi folosite tag-ul BR (cunoscute din secțiunea anterioară despre formatare de text în HTML). Avem un atribut clar tag-ul BR. care poate lua trei valori:

stânga - încetarea de imagini de ambalaj de text aliniate pe marginea din stânga;

dreapta - încetarea de imagini de ambalaj de text aliniate pe marginea din dreapta;

toate - imagini de text de terminare folie, și aliniate la stânga și la dreapta.

§ 5. Crearea padding în jurul valorii de imagini

P re-implicit, imaginile sunt încorporate în pagina foarte aproape de text și alte elemente. Dacă acest ecran nu este îndeplinită, atunci puteți seta marginile din jurul imaginii. Acest lucru se face prin utilizarea următoarea etichetă atribute IMG:

vspace - creează margini superioare și inferioare;

hspace - creează margini laterale (stânga și dreapta).

H Valorile acestor atribute este specificată în pixeli. De exemplu, dacă avem un pic supliment exemplul anterior:

obținem următoarele:

Cu aceeași este și cu modul în care întreaga „compoziție“ uite înainte (de mai sus).

§ 6. Cadrul în jurul imaginii

Districtul de imagini poate crea un cadru negru, cu ajutorul atributului de frontieră. Valoarea acestui atribut este specificat în pixeli și determină grosimea cadrului. De exemplu, HTML-cod:

browser-ul arata ca acest lucru:

§ 7. Concluzie

H și această secțiune a tag-uri HTML. care sunt necesare pentru a insera imagini pe paginile site-ului este finalizată. Următoarea secțiune va vorbi despre modul de a crea link-uri, și cum să conectați un HTML-imagine în.

Imparte această pagină:

anterior ◈ următoarea