În acest articol vă voi povesti despre etichete HTML foarte importante pentru inserarea de imagini și grafice pe o pagină, deoarece fără aceasta este dificil să creați un site frumos și bun.
Imaginile vă vor face site-ul unic și vor ieși în evidență din mulțime. Cu toate acestea, rețineți că utilizarea excesivă a graficelor pe un site web poate fi un factor rău.
Nu recompensati pagina html cu poze, pagina ar trebui sa fie usoara si sa nu sperie vizitatorii. Vizitatorul trebuie să asimileze întotdeauna informațiile principale și să nu fie distras, inserând imagini în HTML doar acolo unde este necesar.
Pe pagina Atribute ale tag-ului BODY, am spus deja că imaginile pot fi fundalul unei pagini html, iar acum vă voi spune cum aceste aceleași imagini pot fi folosite la un nivel mai înalt decât fundalul.
Și astfel, pentru a insera o imagine într-o pagină HTML, aveți nevoie de eticheta care are cel mai important atribut SRC. Acest atribut este necesar pentru a indica adresa imaginii. Să presupunem că trebuie să puneți imaginea image.jpg undeva pe pagina html, iar imaginea noastră va fi în același folder (director)) cu pagina, apoi trebuie să scrieți următorul cod html:
Dacă imaginea și pagina html sunt în foldere sau directoare diferite, atunci trebuie să scrieți calea către imagine în raport cu pagină. De exemplu, pagina noastră html se află în folderul sau directorul de știri, subdirectorul pop (folderul) se află în același director sau folder, în care se află imaginea noastră.jpg, apoi pentru a o insera trebuie să scrieți astfel:
Pe lângă atributul src al etichetei mai există câteva atribute opționale, dar importante:
- lățime - lățime imagine (puteți specifica pixeli sau procente);
- înălțime - înălțimea imaginii (puteți specifica pixeli sau procente).
Dacă nu specificați aceste atribute, browserul va încărca dimensiunile reale ale imaginii. Cu toate acestea, nu ar trebui să exagerați cu valorile acestor atribute, deoarece o creștere a lungimii sau lățimii unei imagini o poate distorsiona, ceea ce o va strica, de exemplu, o fotografie a unei persoane, în care proporțiile unui schimbarea persoanei.
După cum am scris deja, dimensiunea imaginii poate fi specificată atât în pixeli, cât și în procente. Vă dau doar un exemplu:
un alt exemplu de cod html:
Există momente în care capacitatea de a afișa grafică, inclusiv imagini, este dezactivată în browser și, pentru ca pagina dvs. să nu-și piardă sensul, se folosește atributul alt, în care scriem text alternativ dacă imaginea nu a fost încărcată pe pagină. cod html de exemplu:
- stânga - imaginea va fi situată în stânga, iar textul care se află lângă ea va fi în dreapta;
- dreapta - imaginea va fi situată în dreapta, iar textul care se află lângă ea va fi în stânga.
Iată codul HTML:
Text, lângă imagine.
iar browserul va afișa următoarele:
Text, lângă imagine.
Cod HTML pentru valoarea corectă:
Text, lângă imagine.
pe pagina html va fi asa:
Text lângă imagine.
Pentru a preveni curgerea textului în jurul imaginii, puteți utiliza eticheta BR menționată anterior pe pagina Formatare text în HTML. Apropo, eticheta BR are un atribut clar, cu valori proprii:
- stânga - nu împachetați textul, care va fi aliniat la stânga;
- dreapta - nu împachetați textul, care va fi aliniat la dreapta;
- toate - nu împachetați textul, care va fi aliniat la marginile din stânga și din dreapta.
Fără atributul de aliniere, textul se înfășoară în mod implicit în dreapta imaginii și aproape îndreptat. Dacă doriți ca textul să nu se înfășoare în jurul imaginii, puteți utiliza următoarele atribute:
- vspace - face marginile de sus și de jos în pixeli;
- hspace - face marginile laterale (stânga și dreapta) în pixeli.
Voi da un cod html simplu, de exemplu:
Iată o poză atât de frumoasă.
Încercați să vedeți ce se va întâmpla conform acestui exemplu.
De asemenea, puteți crea un chenar în jurul imaginii utilizând atributul chenar și să specificați dimensiunea acesteia în pixeli. Cu cât valoarea este mai mare, cu atât cadrul din jurul imaginii este mai mare. Codul HTML va fi astfel:
pe pagina html va arăta astfel:
Am scris etichetele HTML de bază necesare pentru a insera imagini într-o pagină html. În continuare, vă voi arăta cum să creați legături în HTML, precum și cum să faceți o imagine un link.
Data publicării: 15 mai 2012Majoritatea paginilor Web conțin grafică. Vă permite să prezentați informația colorat și clar. În multe cazuri, este mai bine să afișați o imagine decât să oferiți o descriere text lungă.
Există două moduri de a plasa elemente grafice pe o pagină:
- inserarea de imagini individuale;
- umplând fundalul cu o imagine.
În orice caz, graficul este preluat din fișier.
O imagine grafică dintr-un fișier în format grafic este inserată în pagină folosind eticheta
(din engleză, imagine - imagine) specificând adresa fișierului ca argument pentru atributul SRC:
Adresa fișierului imagine este fie o adresă URL, fie un nume de fișier, eventual cu o cale. De exemplu, pentru a afișa fișierul grafic logotip.jpg, scrieți eticheta
Pentru a crește rata de biți a unei imagini grafice dintr-o etichetă
puteți folosi atributul (opțional) LOWSRC, care ia ca argument adresa unui fișier grafic. Puteți crea două fișiere imagine: unul (de exemplu, să spunem logotip.jpg) conține o imagine de înaltă rezoluție, iar altul (de exemplu, logotip.gif) conține o imagine cu rezoluție scăzută. Apoi eticheta
Spune browserului să descarce mai întâi fișierul logotip.gif, apoi să îl înlocuiască cu fișierul logotip.jpg pe măsură ce este primit.
O altă modalitate de a accelera încărcarea graficelor este să dimensionezi zona dreptunghiulară în care graficul va fi plasat folosind atributele WIDTH (lățime) și HEIGHT (înălțime), măsurate în pixeli. Dacă specificați aceste atribute, browserul va aloca mai întâi spațiu pentru grafică, va pregăti aspectul documentului, va afișa textul și abia apoi va încărca grafica. Rețineți că browserul micșorează sau întinde imaginea pentru a se potrivi cu cadrele cu dimensiunea specificată. Un exemplu de specificare a dimensiunii unei imagini:
Graficele sunt de obicei folosite împreună cu textul, astfel încât apare sarcina de a alinia textul și grafica. Această sarcină este realizată folosind atributul ALINIA etichetă
folosind diverse argumente. De exemplu, am putea dori ca textul să curgă în jurul imaginii la dreapta sau la stânga. De obicei, imaginea este încorporată aproape de text, care poate fi urât. Pentru a evita acest lucru, puteți seta margini goale în jurul ilustrației. Câmpurile sunt create folosind atribute VSPACE pentru marginile de sus și de jos și НSPAȚIU pentru marginile laterale din etichetă
... Argumentele pentru aceste atribute sunt specificate ca numere care specifică dimensiunea marginilor în pixeli. Pentru a anula fluxul de text în jurul graficelor, utilizați eticheta
.
Următoarea etichetă setează fluxul de grafice din fișierul logotip.jpg la dreapta (imaginea va fi în stânga textului):
Dacă doriți să poziționați imaginea în dreapta textului, atunci aveți nevoie de atribut ALINIA atribui un argument DREAPTA:
Pentru a seta câmpurile din jurul imaginii, trebuie să scrieți o etichetă ca aceasta:
Aici numerele 20 și 10 determină dimensiunile câmpurilor.
Să luăm în considerare un exemplu de partajare a graficelor și a textelor. Deschideți Notepad (editor de text Notepad) Windows. Scrieți codul HTML în el folosind etichetele discutate mai sus. Mai jos este un program care produce text și grafică. Oricare dintre fișierele pe care le aveți poate fi folosit ca fișier grafic. Aceasta folosește fișierul logotip.gif.
<Н1>Textul se înfășoară în jurul graficului la dreapta
Acesta este un exemplu de combinare a textului și a graficelor.
Textul programului HTML poate fi scris în orice editor de text. Aceasta utilizează etichete de marcare text.
Acest text este afișat cu un nou paragraf. Pentru a face acest lucru, am folosit o etichetă specială.
Încercați să redimensionați fereastra browserului. Observați cum se modifică aspectul textului.
Orez. 657. Textul se înfășoară în jurul imaginii din dreapta
Oportunități ample de poziționare precisă a imaginilor (precum și a altor elemente) pe pagină oferă Meseși stiluri... Aceste elemente HTML vor fi discutate mai târziu. De exemplu, puteți defini un tabel fără cadre vizibile și puteți plasa imagini, texte și alte elemente în celulele acestui tabel.
Sperăm că acest articol vă va fi de folos. Lectura placuta!
Imaginile ne informează instantaneu cât de interesant poate fi un anumit site sau articol pentru noi, creează o stare de spirit și pot dezvălui un subiect într-un mod nou. Uneori, o fotografie valorează cât o mie de cuvinte.
Dar nu ar trebui să le adăugați prea des, dacă nu sunteți Instagram sau un magazin online. Este de dorit ca imaginile:
- au fost informative
- se potrivesc cu schema de culori a site-ului dvs
- erau potrivite
Dacă nu aveți o fotografie potrivită, puteți folosi așa-numita fotostock (banca de fotografii) - un loc în care sunt stocate multe fotografii, ilustrații și grafice vectoriale. Există o mulțime de astfel de resurse, poate chiar ați auzit de una dintre cele mai mari - Shutterstock, dar există descărcări plătite.
Pentru cei cărora nu le place să plătească în exces, la finalul articolului v-am pregătit primă- o listă cu mai multe bănci de fotografii de unde puteți descărca gratuit o cantitate imensă de materiale frumoase de înaltă calitate 🙂
Formate de imagine
Pe World Wide Web sunt utilizate în principal 3 tipuri de imagini:
gif(Format de schimb grafic - format de schimb de imagini)
este primul format folosit pe internet. Avantajele acestui format sunt prezența animatiiși de dimensiuni reduse, pagina se încarcă rapid. În plus, susține transparența. Dezavantaj - folosit doar 256 de culori(de fapt pentru că dimensiunea este mică), adică nu poate fi folosit pentru imagini color.
jpeg el este jpg(Grupul mixt de experți fotografici - Grupul mixt de experți fotografici - acesta este numele organizației dezvoltatorilor)
potrivit pentru crearea de imagini pline de culoare, de înaltă calitate, fotografii... Dimensiunea unor astfel de imagini este mare, așa că de obicei pun o sarcină grea pe server. Dacă trebuie să comprimați jpeg (pentru o greutate mai mică a imaginii), vă recomandăm să luați dimensiunea imaginii finale multiplu de opt , deci pierderea calității va fi minimă.
png(Grafică de rețea portabilă - Grafică de rețea portabilă... Pronunțat la fel ca ping, adică )
acest format a fost dezvoltat inițial pentru web, adică imaginea este de obicei ușoară și nu încetinește pagina la încărcare. Acest format a fost creat pentru a înlocui gif-ul învechit, dar spre deosebire de acesta, nu acceptă animația. PNG-8 like gif folosește doar 256 de culori. Format png-24 suportă 16 milioane de culori, deși greutatea este deja destul de mare. Png-32 conține același număr de culori ca png-24 și, în plus, vă permite să obțineți o imagine cu fundal transparent , și puteți regla gradul de transparență. Când reduceți dimensiunea png, nu există nicio pierdere a calității culorii.
Să rezumam
gif- pentru animație
jpeg- pentru fotografii
png- pentru pictograme, butoane, fundaluri, logo-uri, capturi de ecran, desene, texte, fotografii cu fundal transparent
Inserați imaginea în fișierul html
Pentru a adăuga o imagine pe pagină, utilizați etichetă
(din imaginea engleză - o imagine, o imagine). Aceasta este o singură etichetă, nu are nevoie de o etichetă de închidere. Această etichetă conține atribute.
Atribut src(din sursa engleză - sursă) indică calea către fișier (locul în care se află imaginea). Dacă poza se află pe computerul tău (deocamdată site-ul este doar în dezvoltare) sau pe serverul tău, folosește un link relativ. Dacă imaginea este de pe web, atunci este nevoie de un link absolut. Citiți cum să faceți acest lucru în articolul „Link-uri”.
Deci, pentru a conecta o imagine la pagina dvs. web, trebuie să scrieți cod astfel:
Atribut Alt(din engleză alternativă - alternativă) indică textul pe care utilizatorul îl va vedea dacă imaginea nu este încărcată. Calea este indicată incorect, imaginea a fost ștearsă, internetul este rău - pot exista multe motive și este de dorit ca persoana să înțeleagă ce se află în spatele acestei pictograme urâte.
Motoarele de căutare acordă o atenție deosebită să se asigure că acest atribut este populat. Iar validatorul html (o resursă pentru verificarea corectitudinii codului) va percepe absența atributului alt ca o eroare. Dacă toate atributele
În exemplul de mai jos, am specificat în mod deliberat o cale de imagine inexistentă, astfel încât să puteți vedea cum funcționează atributul alt.
Înălțimea și lățimea imaginilor
De asemenea, puteți seta înălțimea și lățimea imaginii, dacă imaginea originală este de ex. mai mult decât ai nevoie.
În HTML5 se recomandă să faceți acest lucru cu CSS sau atribut de stil
, ca aceasta:
În acest exemplu, am luat 30% din lățime, dar nu imaginea originală, ci dimensiunea ferestrei browserului. Când lățimea = 100%, imaginea se deschide pe toată lățimea browserului. Amintiți-vă de această caracteristică la sută ca unități de măsură.
Apropo, dacă am scrie doar lățimea, rezultatul ar fi același, încercați:
< img src = „https: //site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = "panda pe copac" stil = "lățime: 30%;" > |
De asemenea, lățimea și înălțimea pot fi setate pixeli.În cazul panda nostru, ale cărui dimensiuni originale sunt 1196 x 796 pixeli, pentru ca animalul să nu sufere în timpul compresiei, trebuie să menținem proporțiile, dar aici nu te poți lipsi de un calculator. Să presupunem că vrem să reducem dimensiunea imaginii de 3 ori, apoi trebuie să înregistrăm dimensiunile de 399 x 265 pixeli.
Vă rugăm să rețineți că dacă mărim imaginea proporțional, atunci este suficient să specificați un singur parametru, de exemplu. lăţime. Browserul inteligent va calcula în sine dimensiunea completă a imaginii.
Încercați să rulați codul ca acesta și vedeți rezultatul:
< img src = „https: //site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = "panda pe copac" stil = "lățime: 399 px;" > |
Setați întotdeauna dimensiunile imaginii. Imaginile durează de obicei mai mult să se încarce decât restul codului html. Dacă browserul știe cât spațiu trebuie rezervat pentru imagini, poate continua să încarce site-ul fără a aștepta încărcarea imaginilor.
Puțină naftalină
Dacă se întâmplă să cercetați codul unui site creat în HTML-4 sau chiar mai devreme, atunci veți observa că dimensiunile imaginilor sunt stabilite folosind atribute de lățime și înălţime... Aceasta este o metodă depreciată, deși încă valabilă în HTML5. Cu toate acestea, vă sfătuim să folosiți stilul, deoarece atributele de lățime și înălțime pot fi influențate de stilurile interne sau externe care vor rămâne în browser sau în fișierul dvs. CSS. Ne vom opri asupra acestui lucru mai detaliat când ne uităm la CSS, dar pentru moment vedem doar un exemplu despre modul în care stilurile afectează atributele înălțime și lățime.
Sunt 3 file în această fereastră: pe prima vedeți codul html, pe al doilea cod CSS, iar pe ultima vedeți rezultatul ca întotdeauna. Aceasta funcționează ca și cum prima filă ar fi fișierul index.html, a doua ar fi fișierul style.css, iar a treia ar fi browserul. Deci, acum în CSS-ul nostru este scris că toate elementele cu eticheta img au o lățime de 100%. Dimensiunile implicite ale atributelor de lățime și înălțime sunt în pixeli, așa că nu trebuie să adăugați nicio unitate aici.
Diferența de rezultat este evidentă 🙂
De asemenea, versiunile mai vechi de html foloseau următoarele atribute:
alinia cu care să aliniați imaginea orizontal sau vertical.
hspace- indentare la stânga și la dreapta imaginii față de conținutul din jur (de exemplu, text sau imagine adiacentă)
vspace- indentare de sus și de jos de la imagine la conținutul din jur.
frontieră- setați grosimea cadrului din jurul imaginii (în mod implicit este egal cu zero)
Acum toate aceste manipulări (și multe altele) sunt făcute folosind CSS, așa că am decis să nu vă deranjam aici. Dacă încă sunteți interesat de cum să lucrați cu aceste atribute - scrieți în comentarii, vom adăuga acest articol 🙂
Plasarea unei imagini în cod
De unde ne-am pus eticheta depinde de modul în care va fi afișat în browser.
Exemplul # 1 - înainte de paragraful:
Elemente precum
ȘI
a se referi la elemente de bloc
... Ele încep întotdeauna pe o linie nouă și ocupă toată lățimea disponibilă a ferestrei browserului. Daca esti pe primul loc ![]()
, iar după el un element bloc, de exemplu un paragraf, apoi va fi înfășurat la următoarea linie.
Exemplul numărul 2 - la începutul paragrafului
este un element inline, este plasat în interiorul unui element bloc și nu începe o linie nouă. În exemplul de mai sus, textul se înfășoară în jurul imaginii, deoarece codul
înregistrată în interior
Legendele ilustrației
Pentru a eticheta sau semna o fotografie pe pagină, utilizați etichetă
Etichetă
Vă rugăm să rețineți că, implicit, browserul are unele setări de stil pentru etichetă
Deci, tu și cu mine am învățat
- adauga imagine la pagina: cu etichetă
- a învățat atributele necesare pentru această etichetă: src pentru a indica calea şi alt pentru a descrie imaginea
- am înțeles ce format este mai bun pentru ce să folosești: jpeg pentru fotografii, png pentru logo-uri și capturi de ecran, gif pentru animație
- cum să setați cel mai bine dimensiunea imaginii: folosind atribut de stil cu parametrii lăţimeși înălţime
- mi-am dat seama cum va fi afișată poza în funcție de locul din cod: separat, dacă în fața unui element bloc și cu împachetare, dacă în interiorul unui element bloc (de exemplu
)
Și pentru ca noi să avem cu ce să lucrăm, trebuie să obținem aceste imagini de undeva, fără a încălca drepturile de autor ale nimănui.
Așa că este timpul pentru un bonus 🙂
Lista bancilor foto gratuite
Înainte de a începe, vă rugăm să rețineți că fiecare captură de ecran de aici este un link către un site. Cum să faci imagini ca link-uri, citește articolul „Link-uri”.
Pe pixabay veți găsi 680 de mii de imagini gratuite pe orice subiect, care sunt distribuite sub licența Creative Commons CCO (CC Zero), adică. pot fi folosite, distribuite, modificate in orice scop, chiar si comercial.
Banca de fotografii conține 390 de mii de fotografii și imagini gratuite. Este mai greu să găsești aici o imagine cool, dar sunt și exemplare destul de bune. Publicitatea băncilor foto plătite este destul de distragătoare. Am pus această resursă pe locul doi din cauza numărului de imagini, dar pentru prietenie probabil va fi pe ultimul în ratingul nostru.
Stocul de fotografii are peste 250 de mii de fotografii gratuite, majoritatea de înaltă calitate. Puteți descărca chiar și fără înregistrare. Disponibil numai în engleză.
O mulțime de fotografii elegante licențiate sub CC Zero. Puteți descărca fără înregistrare. De asemenea, această bancă de fotografii te înțelege doar în engleză.
Site-ul a fost creat de un web designer indian care înțelege cât de greu poate fi să găsești o fotografie de calitate. Toate fotografiile au fost făcute personal de el și poți face orice cu ele. Îi place să fotografieze mâncare, birou, computere și tot felul de lucruri. Căutare - numai în engleză.
Imagini HTML sunt adăugate paginilor web folosind o etichetă ... Utilizarea graficelor face paginile web mai atractive din punct de vedere vizual. Imaginile ajută la transmiterea mai bună a esenței și conținutului unui document web.
Utilizarea etichetelor HTML
Inserarea imaginilor într-un document HTML
1. Etichetați ![]()
Element reprezintă o imagine și conținutul său alternativ, care este adăugat folosind atributul alt. Din moment ce elementul
este în linie, se recomandă plasarea acestuia în interiorul unui element bloc, de exemplu,
Sau
Etichetă are atributul src necesar, a cărui valoare este calea absolută sau relativă către imagine:
Pentru etichetă sunt disponibile următoarele atribute:
| Atribut | Descriere, valoare acceptată |
|---|---|
| alt | Atributul alt adaugă text alternativ pentru imagine. Este afișat în locul în care apare imaginea înainte de a fi încărcată sau atunci când grafica este dezactivată și este afișat și ca un sfat instrument atunci când treceți cursorul mouse-ului peste imagine. Sintaxă: alt = "(! LANG: descrierea imaginii" . !} |
| origine încrucișată | Atributul crossorigin vă permite să încărcați imagini din resurse de pe un domeniu diferit folosind solicitări CORS. Imaginile încărcate pe pânză folosind solicitări CORS pot fi reutilizate. Valori permise: anonim - Solicitarea de origine încrucișată este făcută folosind un antet HTTP și nu sunt transmise acreditări. Dacă serverul nu oferă acreditări serverului de la care este solicitat conținutul, imaginea va fi coruptă și utilizarea acesteia va fi restricționată. use-credentials - Solicitarea de origine încrucișată se face cu acreditările trecute. Sintaxă: crossorigin = „anonim”. |
| înălţime | Atributul înălțime specifică înălțimea imaginii. Poate fi specificat în px sau % Sintaxă: înălțime: 300px. |
| ismap | Atributul ismap indică faptul că imaginea face parte dintr-o imagine de hartă găzduită de server (imaginea de hartă este o imagine cu zone pe care se poate face clic). Când faceți clic pe imaginea hărții, coordonatele sunt trimise la server ca șir de interogare URL. Atributul ismap este permis numai dacă elementul Sintaxă: ismap. |
| longdesc | Adresa URL pentru o descriere extinsă a imaginii, pe lângă atributul alt. Sintaxă: longdesc = „http://www.example.com/description.txt”. |
| src | Atributul src specifică calea către imagine. Sintaxă: src = "flower.jpg". |
| dimensiuni | Setează dimensiunea imaginii în funcție de parametrii de afișare. Funcționează numai când este specificat atributul srcset. Valoarea atributului este unul sau mai multe șiruri separate prin virgule. |
| srcset | Creează o listă de surse de imagine care urmează să fie selectate în funcție de rezoluția ecranului. Poate fi folosit împreună cu sau în locul atributului src. Valoarea atributului este unul sau mai multe șiruri, separate prin virgule. 
|
| harta de utilizare | Atributul usemap specifică imaginea ca hartă imagine. Valoarea trebuie să înceapă cu un caracter #. Valoarea este asociată cu valoarea numelui sau a atributului id al etichetei |
| lăţime | Atributul width stabilește lățimea imaginii. Poate fi specificat în px sau % Sintaxă: lățime: 100%. |
1.1. Adresa imaginii
Adresa imaginii poate fi specificată complet (adresa URL absolută), de exemplu:
url (http://anysite.ru/images/anyphoto.png)
Sau printr-o cale relativă de la document sau directorul rădăcină site:
url (../ images / anyphoto.png) - cale relativă din document,
url (/images/anyphoto.png) este calea relativă din directorul rădăcină.
Aceasta este interpretată după cum urmează:
../ - înseamnă să urci cu un nivel, la directorul rădăcină,
imagini / - accesați folderul cu imagini,
anyphoto.png - Indică un fișier imagine.
1.2. Dimensiunile imaginii
Fără a seta dimensiunile imaginii, desenul este afișat pe pagină în dimensiune reală. Puteți edita dimensiunile imaginii folosind atributele lățime și înălțime. Dacă doar unul dintre atribute este setat, al doilea va fi calculat automat pentru a menține proporțiile imaginii.
1.3. Formate de fișiere grafice
format JPEG (Grupul mixt de experți fotografici)... Imaginile JPEG sunt ideale pentru fotografii; ele pot conține milioane de culori diferite. Comprimă imaginile mai bine decât GIF-urile, dar textul și zonele mari de culoare solidă pot fi pătate.
format GIF (Format de schimb grafic)... Ideal pentru comprimarea imaginilor cu zone de culoare solidă, cum ar fi sigle. GIF-urile vă permit să setați una dintre culori să fie transparentă, astfel încât fundalul unei pagini web să poată apărea printr-o parte a imaginii. GIF-urile pot include și animații simple. GIF-urile conțin doar 256 de nuanțe, ceea ce face ca imaginile să pară pete și nerealiste precum posterele.
format PNG (grafică de rețea portabilă)... Include cele mai bune caracteristici ale formatelor GIF și JPEG. Conține 256 de culori și vă permite să faceți una dintre culori transparentă, comprimați în același timp imaginile la o dimensiune mai mică decât un fișier GIF.
format APNG (grafică de rețea portabilă animată)... Format de imagine bazat pe format PNG. Permite stocarea animației și, de asemenea, acceptă transparența.
format SVG (grafică vectorială scalabilă)... Un desen SVG constă dintr-un set de forme geometrice descrise în format XML: linie, elipsă, poligon etc. Sunt acceptate atât grafica statică, cât și grafica animată. Setul de funcții include diverse transformări, măști alfa, efecte de filtrare, posibilitatea de a folosi șabloane. Imaginile SVG pot fi redimensionate fără pierderi de calitate.
Format BMP (Imagine bitmap)... Este un bitmap necomprimat (original) modelat cu o grilă dreptunghiulară de pixeli. Un fișier bitmap constă dintr-un antet, paletă și date grafice. Antetul conține informații despre imaginea grafică și fișier (adâncimea pixelilor, înălțimea, lățimea și numărul de culori). Paleta este specificată numai în acele fișiere Bitmap care conțin imagini paletă (8 sau mai puțini biți) și constau din cel mult 256 de elemente. Datele grafice reprezintă imaginea în sine. Adâncimea culorii în acest format poate fi 1, 2, 4, 8, 16, 24, 32, 48 biți pe pixel.
format ICO (pictograma Windows)... Formatul de stocare pentru pictogramele fișierelor în Microsoft Windows. De asemenea, pictograma Windows este folosită ca pictogramă pe site-urile de pe Internet. Este o imagine cu acest format care este afișată lângă adresa site-ului sau marcajul din browser. Un fișier ICO conține una sau mai multe pictograme, dimensiunea și culoarea fiecăreia fiind stabilite separat. Dimensiunea pictogramei poate avea orice dimensiune, dar cele mai comune pictograme sunt pictograme pătrate cu laturile de 16, 32 și 48 de pixeli.
2. Etichetați
Etichetă
Atributul nume este disponibil pentru etichetă, care specifică numele hărții. Valoarea atributului nume pentru etichetă
Element
3. Etichetați
Etichetă descrie un singur hotspot ca parte a unei hărți imagine la nivelul clientului. Elementul nu are etichetă finală. Dacă un hotspot se suprapune pe altul, atunci prima legătură din lista de domenii va fi implementată.
| Atribut | Scurta descriere |
|---|---|
| alt | Specifică text alternativ pentru zona activă a hărții. |
| coorde | Determină poziția zonei pe ecran. Coordonatele sunt specificate în unități de lungime și separate prin virgule: pentru cerc- coordonatele centrului si razei cercului; pentru dreptunghi- coordonatele colțurilor din stânga sus și din dreapta jos; pentru poligon- coordonatele vârfurilor poligonului în ordinea dorită, se recomandă şi indicarea ultimelor coordonate, egale cu prima, pentru completarea logică a figurii. |
| Descarca | Complementează atributul href și spune browserului că resursa ar trebui să fie încărcată în momentul în care utilizatorul face clic pe link, în loc, de exemplu, să o pre-deschidă (ca un fișier PDF). Dând un nume atributului, dăm astfel un nume obiectului încărcat. Este permisă utilizarea atributului fără a specifica valoarea acestuia. |
| href | Specifică adresa URL pentru link. Poate fi specificată o adresă de legătură absolută sau relativă. |
| hreflang | Specifică limba documentului web legat. Folosit numai împreună cu atributul href. Valorile acceptate sunt o abreviere formată dintr-o pereche de litere care denotă un cod de limbă. |
| mass-media | Stabilește pentru ce tipuri de dispozitive va fi optimizat fișierul. Valoarea poate fi orice interogare media. |
| rel | Suplimentează atributul href cu informații despre relația dintre documentul curent și documentul legat. Valori acceptate: alternativ - un link către o versiune alternativă a documentului (de exemplu, o pagină imprimabilă, traducere sau oglindă). autor - link către autorul documentului. bookmark este o adresă URL persistentă folosită pentru marcaje. ajutor - link către ajutor. licență - un link către informațiile despre drepturile de autor pentru acest document web. next / prev - indică relația dintre adresele URL individuale. Datorită acestui marcaj, Google poate determina că conținutul acestor pagini este legat într-o secvență logică. nofollow - interzice unui motor de căutare să urmărească link-uri de pe această pagină sau un link specific. noreferrer - indică faptul că, în urma unui link, browserul nu trebuie să trimită un antet de solicitare HTTP (Referrer), care înregistrează informații despre pagina de unde a venit vizitatorul site-ului. prefetch - indică faptul că documentul țintă ar trebui să fie stocat în cache, de exemplu. browserul din fundal încarcă conținutul paginii în memoria cache a acesteia. căutare - Indică faptul că documentul țintă conține un instrument de căutare. tag - indică cuvântul cheie pentru documentul curent. |
| formă | Setează forma hotspot-ului pe hartă și coordonatele acestuia. Poate lua următoarele valori: rect - zonă activă de formă dreptunghiulară; cerc - zonă activă sub formă de cerc; poli - zonă activă sub formă de poligon; implicit - zona activă ocupă întreaga zonă a imaginii. |
| ţintă | Indică locul în care va fi încărcat documentul la urmărirea linkului. Ia următoarele valori: _self - pagina este încărcată în fereastra curentă; _blank - pagina se deschide într-o nouă fereastră de browser; _parent - pagina este încărcată în cadrul părinte; _top - pagina este încărcată în fereastra completă a browserului. |
| tip | Specifică tipul MIME al fișierelor la care se face referire, de ex. extensia de fișier. |
4. Un exemplu de creare a unei hărți imagine
1) Marcăm imaginea originală pe zonele active ale formei dorite. Coordonatele zonelor pot fi calculate folosind un program de procesare foto, de exemplu, Adobe Photoshop sau A picta.
Orez. 1. Un exemplu de marcare a imaginii pentru crearea unei hărți 2) Setați numele hărții adăugându-l la etichetă
Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Orez. 2. Un exemplu de creare a unei imagini-hartă, când apăsați cursorul mouse-ului pe o floare, mergeți la o pagină cu o descriere
Imaginile de pe paginile web pot fi utilizate în două moduri: ca fundal și ca imagine de sine stătătoare. Vă recomandăm să utilizați trei formate grafice: JPEG, GIF și PNG. Toate browserele le acceptă; alte formate pot necesita instrumente speciale.
De obicei, toate imaginile pentru un site sunt stocate într-un folder separat, de exemplu, imagini. Și căile către imagini sunt scrise în același mod ca și în link-uri. Dacă ai uitat, aruncă o privire.
În toate exemplele ulterioare, căile către imagini vor fi scrise pe baza faptului că imaginile sunt în folderul imagini, iar paginile sunt în folderul site-ului, care este la același nivel.
Imagini de fundal
Imaginea de fundal umple întregul spațiu al elementului pentru care este specificată. Deci, specificând în etichetă atribut fundal = "fon.gif", fon.gif va umple toată fereastra browserului.
Exemplu de cod: Rezultat
Când setați imaginea de fundal a documentului, nu uitați să specificați și parametrul bgcolor... Acest lucru se datorează faptului că utilizatorul poate avea dezactivat încărcarea imaginilor și nu va vedea fundalul tău frumos. Apoi browserul va folosi parametrul bgcolor.
Încorporarea imaginilor
Pentru a plasa imagini pe pagină, se folosește eticheta
care are un singur parametru necesar src specificând adresa URL a imaginii.
Cod simplu:
Etichetă imagine Restul conținutului documentului
Rezultat:
Restul conținutului documentului
De acord, textul de lângă imagine nu arată foarte frumos.
Pentru ca imaginile noastre să arate așa cum ne dorim să fie aliniate. Și parametrul ne va ajuta în acest sens alinia.
Acest parametru are mai multe valori. Să le analizăm pe toate cu exemple.
Exemplu de cod cu parametru align = "stânga"
Eticheta img cu parametrul align = "left" Imaginea este în stânga, iar textul curge în jurul ei în dreapta, iar acest text poate avea mai multe rânduri.
Rezultat:
Imaginea este în stânga, iar textul curge în jurul ei în dreapta, iar acest text poate avea mai multe rânduri.
Exemplu de cod cu parametru aliniere = "dreapta"
Eticheta img cu parametrul align = "right" Imaginea este în dreapta, iar textul curge în jurul ei în stânga, iar acest text poate ocupa mai multe rânduri.
Rezultat:
Imaginea este în dreapta, iar textul curge în jurul ei în stânga, iar acest text poate avea mai multe rânduri.
Exemplu de cod cu parametru aliniere = "sus"
Eticheta img cu parametrul align = "top" Chenarul superior al imaginii este aliniat cu cel mai înalt element al liniei curente. Imaginea este, parcă, încorporată în linie. Dacă imaginea este mare, atunci linia este îndepărtată de această înălțime.
Rezultat:
Marginea de sus a imaginii este aliniată cu cel mai înalt element al liniei curente. Imaginea este, parcă, încorporată în linie. Dacă imaginea este mare, atunci linia este îndepărtată de această înălțime.
Exemplu de cod cu parametru align = "texttop"
Eticheta img cu parametrul align = "texttop" Chenarul superior al imaginii este aliniat cu cel mai înalt element de text al liniei curente (litera majusculă a liniei).
Rezultat:
Marginea de sus a imaginii este aliniată cu cel mai înalt element de text de pe linia curentă (litera majusculă a liniei).
Exemplu de cod cu parametru aliniere = "mijloc"
Eticheta img cu parametrul align = "middle" Aliniază mijlocul imaginii la linia de bază a liniei curente.
Rezultat:
Aliniază mijlocul imaginii cu linia de bază a liniei curente. * imprimarea mare este făcută pentru claritate a diferenței dintre mijlocul absmiddle
Exemplu de cod cu parametru aliniere = "răzuială"
Eticheta img cu parametrul align = "absmiddle" Aliniază mijlocul imaginii în mijlocul liniei curente.
Rezultat:
Aliniază mijlocul imaginii la mijlocul liniei curente.
Exemplu de cod cu parametru aliniere = "de jos"
Eticheta img cu parametrul align = "bottom" Aliniază marginea de jos a imaginii cu linia de bază a liniei curente.
Rezultat:
Aliniază marginea de jos a imaginii cu linia de bază a liniei curente.
Exemplu de cod cu parametru align = "absbot"
Eticheta img cu parametrul align = "absbottom" Aliniază marginea inferioară a imaginii la marginea inferioară a liniei curente.
Rezultat:
Aliniază partea de jos a imaginii cu partea de jos a liniei curente.
Dacă dorim ca textul să fie localizat sub imagine, atunci trebuie să folosim eticheta
cu parametru clar care dezactivează împachetarea. Împachetarea poate fi dezactivată pe partea dreaptă (dreapta), pe partea stângă (stânga) și pe ambele părți (toate).
Cod simplu:
Preveniți înfășurarea în jurul unei imagini
Alte elemente ale documentului
Rezultat:
Alte elemente ale documentului
Dimensiunile imaginii
Orice imagine are o dimensiune specificată în pixeli. Când încorporați o imagine într-o pagină, poate fi necesar să reduceți dimensiunea imaginii originale.
Pentru a face acest lucru, eticheta
exista parametri lăţime- latime si înălţime- înălțime. Sunt setate în pixeli sau ca procent (procent din lățimea ecranului)
Când imaginea este încărcată, browserul va scala automat imaginea la parametrii specificați de lățime și înălțime. Rețineți că setarea incorectă a parametrilor poate duce la o modificare a proporțiilor imaginii și, prin urmare, la distorsiunea acesteia.
Cod simplu:
Rezultat:
Separarea imaginilor de text
Probabil ați observat că textul se lipește foarte aproape de imagini. Nu este întotdeauna frumos. Pentru a rezolva această problemă, există opțiuni hspace- indentare orizontală şi vspace- liniuță verticală. Marginile sunt setate în pixeli.
Cod simplu:
Etichetă img indentată Restul documentului nu mai este lipit de imagine.
Rezultat:
Text alternativ
Dacă utilizatorul a dezactivat modul de încărcare a imaginilor, atunci în loc de o imagine va vedea o cruce roșie (în Internet Explorer) sau o altă pictogramă (în alte browsere). Ar fi bine să-i dai un indiciu așa cum se arată în imagine. Pentru a face acest lucru, utilizați parametrul alt... Textul din acest parametru va fi afișat în locul imaginii (dacă modul de încărcare a imaginilor este dezactivat). Dacă imaginea este afișată, acest parametru oferă un indiciu atunci când cursorul mouse-ului se deplasează, însă nu în toate browserele.
