Adăugarea imaginilor pe o pagină web
Dacă pagina web nu va fi nimic altceva decât informații de text, poate părea și cineva interesant, datorită informațiilor prezentate pe ea, dar este puțin probabil ca cineva va transforma limba să-l numesc atractiv. Adăugarea imaginilor pe o pagină Web este foarte ușoară. Pentru a adăuga aceleași elemente grafice care pot oferi paginii o imagine profesională, sunt necesare anumite cunoștințe. Ce, de fapt, este subiectul lecției de astăzi.
Cele două formate grafice utilizate cel mai frecvent pe Internet sunt GIF și JPEG. Format dezvoltat de un grup de JPEG (Joint Photographic Experts Group - Grupul mixt de experți privind prelucrarea mecanică a imaginilor fotografice) și a primit numele său, este de obicei folosit pentru stocarea de imagini cu tranziții fine de culoare, cum ar fi fotografiile.
Practic, toate celelalte elemente grafice sunt salvate în formatul GIF (Graphics Interchange Format), un format grafic de schimb de date. În prezent, există un alt format grafic nou, care câștigă popularitate în creștere: PNG (Portable Network Graphics - grafică portabilă de rețea). Este de așteptat ca în timp să înlocuiască formatul GIF. Cu toate acestea, nu vă grăbiți să salvați din nou toate fișierele grafice în acest format, deocamdată nu este acceptat de toate browserele.
Toate imaginile sunt adăugate la pagina web utilizând aceeași etichetă, numită eticheta sursă de imagine
Adăugarea inscripțiilor alternative
Călătorind pe Internet, probabil ați observat diferitele inscripții afișate când plasați indicatorul mouse-ului peste un element grafic al unei pagini Web. Aceste inscripții oferă, de obicei, câteva informații suplimentare despre imaginea în sine sau despre aria paginii pe care o ocupă.
Exemplul următorului cod HTML arată cum se adaugă atributul alt în interiorul etichetei
Atributul alt specifică textul alternativ pentru elementul grafic care este adăugat la pagina web. Acest text se numește alternativă, deoarece poate fi afișat pe ecran ca o alternativă la imaginea în sine. Atributul alt are un alt scop foarte important. Mulți vizitatori de internet care utilizează canale de acces cu viteză redusă pot instrui browserele să nu descarce sau să afișeze informații grafice. Acest lucru le permite să accelereze încărcarea paginilor web pe calculatoarele lor.
În plus, rețineți că nu toate browserele pot afișa grafice în ferestrele lor. De exemplu, browserul Lynx nu acceptă deloc această caracteristică. Deci, de imagini, atributul alt permite un designer web pentru a fi sigur că, în cazul în care paginile web vizitatorilor nu vezi imaginea de pe ecran, acesta va fi de cel puțin capabil să citească textul adăugat la informațiile de imagine.
Deși atributul alt poate fi definit pentru fiecare etichetă
Imagine atribute
Pentru etichetă
înălțime - Indică în pixeli sau procente - Definește înălțimea imaginii
lățime - Specifică în pixeli sau procente - Specifică lățimea imaginii.
Reglați înălțimea și lățimea imaginii
Dimensiunile imaginii plasate pe pagina web pot fi setate folosind atributele de înălțime și lățime. Valorile acestor atribute sunt specificate fie ca numere fixe de pixeli, fie ca procent din dimensiunile paginilor. Uitați-vă la codul HTML de mai jos. În prima etichetă, dimensiunea imaginii originale pe care ați văzut-o deja în capturile de ecran anterioare ale acestei lecții este stabilită la 60 de pixeli verticali și 60 de pixeli pe orizontală. În a doua etichetă, lățimea aceleiași imagini este setată la 6% din lățimea paginii, iar înălțimea este setată la 10% față de înălțimea paginii. Figura arată cum arată ambele imagini în fereastra browserului.
Reproducând imaginea în fereastra, browser-ul la fel de bine pentru a face față cu procesarea valorilor specificate în pixeli, și ca procent, Amintiți-vă, cu toate acestea, că pe calculatoarele vizitatorilor la rezoluția ecranului poate fi setat la o pagină web, alta decât cea care este instalat pentru monitorul dvs. Ce urmează de aici? De exemplu, monitorul are o rezoluție de 800x600. În exemplul anterior, lățimea imaginii care a fost adăugată la pagina web a fost stabilită la 6% din lățimea paginii, care la această rezoluție ar fi de 48 de pixeli. În cazul în care aceeași imagine vizualizate pe monitor cu rezoluție de 1024h800 indicată 6% din lățimea paginii se va potrivi cu lățimea deja egală cu 61 de pixeli.
Puteți crea iluzia unei încărcări mai rapide a imaginii. Indiferent dacă imaginea este redimensionată sau nu, specificați întotdeauna valorile pentru atributele de înălțime și lățime, deoarece acestea vor indica browserului informații importante despre cât spațiu trebuie alocat pe pagină pentru a plasa această imagine. În acest caz, browserul va putea să desemneze spațiul necesar imaginii și să continue să construiască alte elemente ale paginii, fără a opri descărcarea imaginii în sine. În acest fel, se pare că pagina se încarcă mai repede, deoarece vizitatorii săi nu trebuie să aștepte încărcarea completă a imaginii pentru a vedea în sfârșit o altă informație prezentată pe pagină.
Dacă este într-adevăr necesar, imaginea ocupă exact un anumit spațiu pe lățimea paginii, utilizați valorile procentuale. În acest caz, pe ecranul oricărui monitor, imaginea va ocupa aceeași parte a paginii ca și pe ecran. Dacă este necesar ca rezoluția desenului să rămână constantă (dimensiunea sa în pixeli), utilizați valorile exprimate în pixeli.
Aliniați textul și grafica
Atributul Aliniere al etichetei
Același atribut poate fi de asemenea utilizat pentru alinierea imaginii pe verticală (din nou cu privire la șirul de text). Pot avea nevoie de alte trei valori de sus, de jos și de centru. Dacă atributul Align este setat pe partea de sus, marginea de sus a imaginii este aliniată la partea de sus a oricărui text înconjurător. Dacă atributul aliniere este setat la partea inferioară, marginea inferioară a imaginii este aliniată la partea inferioară a textului înconjurător. Dacă atributul Align este setat la centru, centrul imaginii este aliniat la centrul șirului de text.
Utilizarea imaginilor ca link-uri
Imaginile sunt bune nu numai pentru proiectarea paginii web. Ele pot fi utilizate cu succes ca hyperlink-uri către alte documente. În HTML, această problemă este rezolvată doar pentru că imaginile sunt convertite în hiperlegături în exact același fel ca și inscripțiile. Pentru a face acest lucru, trebuie să aplicați și eticheta <а>, care au inclus în el un element al unei pagini web, care ar trebui să devină o legătură cu alt document. Astfel, dacă hyperlinkul trebuie să fie efectuat după ce faceți clic pe o anumită imagine, în etichetă <а> este necesar să încheiem eticheta acestei imagini.
După cum puteți vedea, faceți clic pe imagine thumbnail.jpg este însoțită de deschiderea unui fișier cu o altă imagine (image.jpg). Șirul de text specificat ca valoare a atributului alt spune vizitatorului cum să deschidă imaginea principală.
Secretele utilizării cu succes a imaginilor
Imaginile sunt interesante și atractive, transporta o mulțime de informații vizuale și acestea sunt foarte ușor de a adăuga la paginile dvs. de web, dar încă trebuie să respecte anumite reguli, prezentate mai jos, dacă într-adevăr doriți să creați un site care va deveni popular în rândul utilizatorilor de Internet.
Cu cât dimensiunea fișierului imagine este mai mare, cu atât este mai mult timp necesar să îl descărcați în computerul utilizatorului. Deoarece majoritatea vizitatorilor de Internet pentru acces la rețea utilizează în continuare canale de comunicații cu bandă mică, mărimea fișierelor descărcate este încă de o importanță fundamentală pentru aceștia. Asigurați-vă că luați în considerare această circumstanță și încercați să plasați imaginile pe paginile dvs. web cât mai mici posibil.
Articole similare
Trimiteți-le prietenilor: