Cum se introduce o imagine în HTML fără probleme

Pentru a crea pagini web, chiar și site-uri întregi, după cum știți, folosește un limbaj de marcare specială HTML (Hypertext Markup Language), dar fără fotografii și diverse imagini, fiecare site ar fi un text simplu structurat și plictisitoare. De aceea, adăugarea de imagini pe site utilizează un cod special care este extrem de ușor de utilizat și permite ambele introduceți imaginea în HTML în

De unde să încep?

Pentru a scrie codul, trebuie să decideți ce program să faceți. Acum, există o mulțime de ele, unul dintre cele mai renumite este Notepad ++. Are o serie de funcții, foarte util atunci când scrie cod, vă permite să identificați erorile și să nu vă confundați în etichete. Cu toate acestea, dacă nu aveți posibilitatea de a recurge la ajutorul programelor specializate, puteți utiliza un notepad simplu, codul nu se schimbă de la acesta.

Care etichetă de care avem nevoie?

După ce ați decis cu programul să scrieți codul, trebuie să înțelegeți că în el să scrieți cum să inserați o imagine în HTML în notepad sau orice alt program. Începeți cu etichetă />. Această etichetă declară o imagine într-un document HTML, este unică și nu necesită închidere.

Și ce urmează?

Am anunțat în cod că vom folosi imaginea, dar nu am indicat-o încă. Deci, cum inserați o imagine în HTML? Pentru a face acest lucru, avem nevoie de atributul src, care este folosit cu tag-ul nostru. Acest atribut specifică locația imaginii noastre, indiferent dacă aceasta este pe un anumit site sau pe computerul nostru.

• Dacă imaginea este localizată pe un site terță parte, codul nostru va arăta astfel:

• În cazul în care găsiți imaginea în același director ca fișierul nostru HTML, codul va arăta astfel:

Text alternativ

Eticheta există încă un atribut - alt. Utilizați-l pentru a vă asigura că browserul poate vedea descrierea imaginii, dacă din anumite motive imaginea nu poate fi descărcată. Prezența sa este, de asemenea, de dorit să se asigure că persoanele cu deficiențe de vedere pot ști ce este prezent pe site-ul fel de imagine, deoarece textul este în valoarea acestui atribut este anunțată de cititoare de ecran. Codul rezultat cu atributele src și alt va arăta astfel:

ponturile

Printre altele, eticheta există încă un atribut de titlu. Datorită acestui atribut, când plasați cursorul mouse-ului peste imagine, textul alternativ va fi afișat în tooltip. Cu toate acestea, această funcție este acceptată numai de Internet Explorer, astfel încât astfel de solicitări să apară în alte browsere, vor fi necesare plug-in-uri speciale. Seturile de instrumente sunt utilizate împreună cu atributul alt, ele sunt opționale, dar dacă le folosiți, codul va arăta astfel:

Dimensiunea imaginii

Cu modul de inserare a unei imagini în text cu HTML, am sortat-o. Dar dacă vrem să facem imaginea puțin mai mare sau mai mică? Pentru a face acest lucru, HTML are atribute speciale: lățime (lățime) și înălțime (înălțime). Valorile acestor atribute pot fi în procente sau în pixeli. Dacă setați lățimea în pixeli și înălțimea în procente, atunci codul va arăta astfel:

Dacă specificați doar unul dintre atributele de mărime, atunci cel de-al doilea va fi calculat automat, dar în așa fel încât să se mențină raportul de aspect al imaginii. Atunci când specificați ambii parametri, este important să rețineți că, dacă dimensiunile depășesc cele originale, imaginea va fi întinsă, iar dacă dimensiunile sunt mai mici, se micșorează.

Imagine ca fundal

Și dacă nu vrem să folosim imaginea în text, dar să inserăm imaginea în fundal în HTML, cum să o facem? Pentru a face acest lucru, avem nevoie de o etichetă , fără de care nu există un document HTML. Conține tot conținutul vizibil al documentului, iar atributele acestuia pot specifica dimensiunea, culoarea fontului, inclusiv fundalul. Pentru a insera o imagine in HTML ca o imagine de fundal este foarte simpla, pentru aceasta va trebui sa utilizam atributul de fundal. Acest cod arată astfel:

...

Când se formează fundalul unei pagini web, este mai bine să se utilizeze astfel de imagini, cu care puteți obține efecte vizuale interesante, dar care nu interferează cu percepția normală a textului. Cu toate acestea, trebuie avut în vedere că, probabil, va trebui să schimbați dimensiunea și culoarea fontului dvs. pentru a fi mai ușor de citit.

Înfășurați textul cu text

Uneori este necesar ca imaginea să fie lângă text, ceea ce ar putea să o îndoaie într-un fel sau altul. Dar dacă introduceți o imagine doar în interiorul liniei, atunci grafic va arăta urât, textul va fi rupt în mod incorect. Deci, cum inserați o imagine în HTML, astfel încât imaginea să se potrivească fără probleme cu designul paginii? Pentru aceasta avem nevoie de atributul de aliniere al etichetei . Acest atribut poate avea două valori: stânga și dreapta.

Dacă utilizați valoarea stânga, imaginea va fi plasată în partea stângă a textului și dacă utilizați atributul drept, respectiv, în dreapta. Acest cod arată astfel:

sau

Dacă vrem ca textul să fie localizat între două imagini, codul va arăta astfel:

Și după acest cod va fi plasat textul, care ar trebui încheiat între aceste două imagini.

Imaginile permit să-și diversifice site-ul, face mai luminos, mai atractiv și mai memorabil, dar nu uitați că o mulțime de imagini site-ul de încărcare prea lent și va afecta textul.