Crearea de site-uri web

Pasul 9. Imagini

Să luăm în considerare câteva direcții ale căii spre imagine pentru a le posta pe o pagină web.

Fig. 9.1. Exemplu de alocare de fișiere

Numele dosarului de la începutul căii, fără niciun fel de slash și colon, raportează că atât fișierul curent, cât și dosarul imagine sunt la același nivel. După cum se arată în Figura 9.2, calea relativă la sample.gif din fișierul index.html va fi imaginile / pic.gif.

Fig. 9.2. Exemplu de alocare de fișiere

Exemplul 9.1 prezintă mai multe moduri de a specifica calea către un fișier grafic atunci când adăugați imagini la o pagină Web.

Exemplul 9.1. Introducerea unei imagini într-un document

Text alternativ

Textul alternativ vă permite să obțineți informații textuale despre imagine atunci când descărcarea de imagini este dezactivată în browser. Deoarece încărcarea imaginii apare după ce browserul primește informații despre el, textul alternativ apare înaintea cifrei în sine. Unele browsere afișează, de asemenea, text alternativ sub forma unui indiciu care apare atunci când mutați mouse-ul peste o imagine.

Pentru a crea un text alternativ, utilizați parametrul alt al etichetei . așa cum se arată în Exemplul 9.2.

Exemplul 9.2. Adăugarea unui text alternativ

Dimensiunile imaginii

Pentru a redimensiona imaginea folosind HTML, sunt furnizate parametrii de lățime și înălțime ale etichetei (exemplul 9.3). Ca valori, este folosit un pixel - un punct elementar pe monitor.

Exemplul 9.3. Dimensiunile imaginii

Asigurați-vă că setați dimensiunile tuturor imaginilor pe pagina web. Acest lucru accelerează oarecum încărcarea paginii, deoarece browserul nu are nevoie să calculeze dimensiunea fiecărei imagini după ce a fost primită.

Abordarea, atunci când trebuie să schimbați dimensiunea imaginii relative la original, nu trebuie utilizată frecvent. Dacă numărul pixelilor din imagine crește cu forță, atunci acestea nu vor apărea din nicăieri și browserul va trebui să utilizeze algoritmii de interpolare pentru a le termina independent. Același algoritm este aplicat în cazul opus, când este necesar să se reducă imaginea. Această abordare a redimensionării imaginii a primit termenul de reeșantionare. Calitatea reeșantionării depinde în mod direct de tipul imaginii, cu cât conține mai multe detalii contrastante, cu atât este mai rău rezultatul final, ceea ce se manifestă ca o neclaritate.

În jurul imaginii

În jurul imaginii, puteți adăuga un cadru care are aceeași culoare ca și textul de pe pagina web. Pentru a face acest lucru, utilizați parametrul frontal al etichetei (exemplul 9.4). Valoarea indică grosimea cadrului în pixeli.

Exemplul 9.4. Adăugați un cadru în jurul imaginii

Câmpuri în jurul imaginii

Pentru orice imagine, puteți specifica câmpurile goale orizontal și vertical utilizând parametrii hspace și vspace. Acest lucru este valabil mai ales atunci când textul curge în jurul imaginii. În acest caz, pentru ca textul să nu funcționeze dens pe imagine, este necesar să adăugați spațiu gol în jurul acestuia (Exemplul 9.5).

Exemplul 9.5. Adăugați elemente de umplutură în jurul imaginii

Lorem ipsum dolor stai amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis exercition ullamcorper suscipit lobortis nisl ut aliquip ex commodo consequat.

Alinierea imaginii

Pentru imagini, puteți specifica poziția lor față de text sau alte imagini de pe pagina web. Metoda de aliniere a imaginilor este specificată de parametrul de aliniere al etichetei . În tabel. 9.1 enumeră valorile posibile ale acestui parametru și rezultatul utilizării acestuia.

Tabel. 9.1. Valori de aliniere pentru alinierea imaginilor

Articole similare

Pagina anterioară

Pagina următoare