.

Etichetă are un atribut src obligatoriu, a cărui valoare este calea absolută sau relativă către imagine:

Pentru etichetă Următoarele atribute sunt disponibile:

Tabelul 1. Atributele etichetei

Atribut	Descriere, valoare acceptată
alt	Atributul alt adaugă text alternativ unei imagini. Afișat acolo unde apare imaginea înainte de a fi încărcată sau atunci când grafica este dezactivată și este afișată și ca un sfat instrument când treceți mouse-ul peste imagine. Sintaxă: alt="descrierea imaginii" . !}
origine încrucișată	Atributul crossorigin vă permite să încărcați imagini din resurse de pe alt domeniu folosind solicitări CORS. Imaginile încărcate în pânză folosind solicitări CORS pot fi reutilizate. Valori permise: anonim - Solicitarea de origine încrucișată se face 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 limitată. use-credentials — Solicitarea de origine încrucișată este efectuată prin transmiterea acreditărilor. Sintaxă: crossorigin="anonymous" .
î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ă situată pe server (o imagine de hartă este o imagine cu zone pe care se poate face clic). Când faceți clic pe o imagine de hartă, coordonatele sunt trimise la server ca șir de interogare URL. Atributul ismap este permis numai dacă elementul este un descendent al elementului cu un atribut href valid. Sintaxă: ismap.
longdesc	O adresă URL de descriere extinsă a imaginii care completează 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 opțiunile 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 vor fi 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 simbolul #. Valoarea este asociată cu valoarea numelui sau a atributului id al etichetei
lăţime	Atributul width specifică 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ă de la document,
url(/images/anyphoto.png) - cale relativă din directorul rădăcină.

Aceasta este interpretată după cum urmează:
../ - înseamnă a urca un nivel, la directorul rădăcină,
imagini/ - accesați folderul cu imagini,
anyphoto.png - indică către un fișier imagine.

1.2. Dimensiunile imaginii

Fără a seta dimensiunile imaginii, desenul este afișat pe pagină în dimensiunea sa reală. Puteți edita dimensiunile imaginii folosind atributele lățime și înălțime. Dacă este specificat doar unul dintre atribute, 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 și pot conține milioane de culori diferite. Imaginile se comprimă mai bine decât GIF-urile, dar textul și zonele mari de culoare solidă pot deveni pete.

format GIF (Format de schimb grafic). Ideal pentru comprimarea imaginilor care au zone de culoare solidă, cum ar fi logo-urile. GIF-urile vă permit să setați una dintre culori să fie transparentă, permițând ca fundalul unei pagini web să fie afișat printr-o parte a imaginii. GIF-urile pot include și animație simplă. Imaginile GIF conțin doar 256 de nuanțe, ceea ce face ca imaginile să pară pete și nerealiste la culoare, precum postere.

format PNG (grafică de rețea portabilă). Include cele mai bune caracteristici ale formatelor GIF și JPEG. Conține 256 de culori și face posibilă ca una dintre culori să fie transparentă, comprimând în același timp imaginile într-o dimensiune mai mică decât un fișier GIF.

format APNG (grafică de rețea portabilă animată). Un format de imagine bazat pe formatul PNG. Vă permite să stocați animație ș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 și capacitatea de a folosi șabloane. Imaginile SVG pot fi redimensionate fără a pierde calitatea.

Format BMP (Imagine bitmap). Este o imagine raster necomprimată (originală) al cărei șablon este o grilă dreptunghiulară de pixeli. Un fișier bitmap constă dintr-un antet, o paletă și date grafice. Antetul stochează informații despre imaginea grafică și fișierul (adâncimea pixelilor, înălțimea, lățimea și numărul de culori). Paleta este indicată 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). Format de stocare a pictogramelor de fișier în Microsoft Windows. De asemenea, pictograma Windows este folosită ca pictogramă pe site-urile web de pe Internet. Este o imagine a acestui 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 putând fi setate separat. Dimensiunea pictogramei poate avea orice dimensiune, dar cele mai comune sunt pictogramele pătrate cu laturile de 16, 32 și 48 de pixeli.

2. Etichetați

Etichetă

Eticheta are un atribut de nume disponibil, care specifică numele hărții. Valoarea atributului nume pentru etichetă

Element

3. Etichetați

Etichetă descrie doar o regiune activă ca parte a unei hărți de imagine pe partea clientului. Elementul nu are o etichetă de închidere. Dacă o zonă activă se suprapune cu alta, va fi implementată prima legătură din lista de zone.

Tabelul 2. Atributele etichetei

Atribut	Scurta descriere
alt	Setează 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 și razei cercului; Pentru dreptunghi— coordonatele colțurilor din stânga sus și din dreapta jos; Pentru poligon— coordonatele vârfurilor poligonului în ordinea cerută 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ă fie nevoit să o deschidă mai întâi (ca un fișier PDF). Specificând un nume pentru un atribut, dăm astfel un nume obiectului încărcat. Este permisă utilizarea unui atribut 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 asociat. Folosit numai împreună cu atributul href. Valorile acceptate sunt o abreviere formată dintr-o pereche de litere care indică codul limbii.
mass-media	Stabilește pentru ce tipuri de dispozitive va fi optimizat fișierul. Valoarea poate fi orice interogare media.
rel	Extinde atributul href cu informații despre relația dintre documentul curent și documentul aferent. Valori acceptate: alternativ - link către o versiune alternativă a documentului (de exemplu, o formă tipărită a paginii, o traducere sau o oglindă). autor — link către autorul documentului. marcaj - URL permanent folosit pentru marcaje. ajutor - link către ajutor. licență - link către informații 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 - împiedică motorul de căutare să urmărească link-uri dintr-o anumită pagină sau un anumit link. noreferrer - indică faptul că atunci când urmărește un link, browserul nu ar trebui să trimită un antet de solicitare HTTP (Referrer), care înregistrează informații despre pagina de pe care a venit vizitatorul site-ului. prefetch - indică faptul că documentul țintă ar trebui să fie stocat în cache, de exemplu. Browserul din fundal descarcă conținutul paginii în memoria cache a acesteia. căutare - Indică faptul că documentul țintă conține un instrument de căutare. tag - specifică cuvântul cheie pentru documentul curent.
formă	Specifică forma zonei active de pe hartă și coordonatele acesteia. Poate lua următoarele valori: rect — zonă activă dreptunghiulară; cerc — zonă activă în formă de cerc; poli — zonă activă în formă de poligon; implicit - zona activă ocupă întreaga zonă a imaginii.
ţintă	Specifică unde va fi descărcat documentul când se face clic pe link. Acceptă 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 se încarcă în fereastra completă a browserului.
tip	Specifică tipul MIME al fișierelor de legătură, de ex. extensia de fișier.

4. Exemplu de creare a unei hărți imagine

1) Marcați imaginea originală în zonele active cu forma dorită. Coordonatele zonelor pot fi calculate folosind un program de procesare foto, de exemplu, Adobe Photoshop sau A picta.

Orez. 1. Exemplu de marcare a imaginii pentru a crea o hartă

2) Setați numele cardului adăugându-l la etichetă

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Orez. 2. Un exemplu de creare a unei hărți imagine, când dați clic pe cursorul mouse-ului pe o floare, mergeți la o pagină cu o descriere

Salutare dragi cititori ai blogului! În acest articol veți afla totul despre cum să inserați o imagine într-o pagină html. Ai mai multe imagini pe care vrei să le pui pe pagina ta sau vrei să pui un logo pe site-ul tău? Toate acestea sunt ușor. După ce ați citit acest articol, veți putea insera imagini în paginile dvs. html fără dificultăți. Pentru a face acest lucru, vom vorbi în detaliu despre etichetă și atributele sale, vom arunca o privire rapidă asupra formatelor de fișiere grafice, cum ar fi gif, jpeg și png și, de asemenea, vom analiza noile funcții HTML5 care facilitează inserarea video și audio în site-ul dvs.

Deoarece datele grafice și textul html nu pot fi combinate într-un singur fișier, acestea sunt afișate pe un site diferit față de alte elemente ale paginilor html. În primul rând, imaginile grafice și alte date multimedia sunt stocate în fișiere separate. Și pentru a le încorpora într-o pagină web, sunt folosite etichete speciale care conțin link-uri către aceste fișiere individuale. În special, o astfel de etichetă este etichetă . După ce a întâlnit o astfel de etichetă cu o adresă, browserul solicită mai întâi fișierul corespunzător cu o imagine, audio sau video de la serverul Web și abia apoi îl afișează pe pagina Web.

Sunt apelate toate imaginile grafice și, în general, orice date care sunt stocate în fișiere separate de pagina web implementate elementele paginii.

Înainte de a introduce imagini și de a privi eticheta în detaliu , merită să înveți puțin despre formatele grafice.

Formate de imagini grafice.

Există multe formate grafice diferite, dar browserele acceptă doar câteva. Să ne uităm la trei dintre ele.

1. format JPEG(Grupul mixt de experți fotografi). Un format destul de popular folosit pentru stocarea imaginilor. Acceptă culoarea pe 24 de biți și păstrează toate semitonurile din fotografii neschimbate. Dar jpeg nu acceptă transparența și distorsionează micile detalii și textul din imagini. JPEG este folosit în principal pentru stocarea fotografiilor. Fișierele în acest format au extensiile jpg, jpe, jpeg.

2. format GIF(Format de schimb grafic). Principalul avantaj al acestui format este capacitatea de a stoca mai multe imagini simultan într-un singur fișier. Acest lucru vă permite să creați videoclipuri animate întregi. În al doilea rând, susține transparența. Principalul dezavantaj este că acceptă doar 256 de culori, ceea ce nu este potrivit pentru stocarea fotografiilor. GIF este folosit în principal pentru a stoca logo-uri, bannere, imagini cu zone transparente și care conțin text. Fișierele în acest format au extensia gif.

3. format PNG(Grafică de rețea portabilă). Acest format a fost dezvoltat ca înlocuitor pentru vechiul GIF și, într-o oarecare măsură, JPEG. Acceptă transparența, dar nu permite animația. Acest format are extensia png.

Când creează site-uri web, de obicei folosesc imagini în format JPEG sau GIF, dar uneori folosesc PNG. Principalul lucru este să înțelegeți în ce cazuri ce format este mai bine să utilizați. În scurt:

JPEG este cel mai bine utilizat pentru stocarea fotografiilor sau a imaginilor în tonuri de gri care nu conțin text;

• GIF este folosit în primul rând pentru animație;
• PNG este formatul pentru orice altceva (pictograme, butoane etc.).

Inserarea imaginilor în pagini html

Deci, cum inserați o imagine pe o pagină web? Puteți insera o imagine folosind o singură imagine etichetă . Browserul plasează imaginea în locația de pe pagina web în care întâlnește eticheta .

Cod pentru inserarea unei imagini în html pagina arata asa:

Acest cod html va plasa pe pagina web o imagine stocată în fișierul image.jpg, care se află în același folder cu pagina web. După cum probabil ați observat, adresa imaginii este indicată în atributul src. Ți-am spus deja ce este. Deci, atributul src este un atribut obligatoriu care servește la indicarea adresei fișierului cu imaginea. Fără atributul src, eticheta img este lipsită de sens.

Iată câteva exemple suplimentare de specificare a adresei unui fișier cu o imagine:

- acest cod html va insera o imagine numită image.jpg pe pagină, care este stocată în folderul de imagini situat la rădăcina site-ului.

Atributul src poate conține mai mult decât link-uri relative către imagini. Deoarece imaginile sunt stocate online împreună cu paginile html, astfel încât fiecare fișier imagine are propria sa adresă URL. Prin urmare, puteți insera adresa URL a imaginii în atributul src. De exemplu:

Acest cod va insera o imagine de pe site-ul mysite.ru pe pagină. O adresă URL este utilizată de obicei atunci când indicați o imagine pe alt site. Pentru imaginile stocate pe site-ul dvs., este mai bine să utilizați link-uri relative.

Etichetă este un element inline, deci este mai bine să-l plasați în interiorul unui element bloc, de exemplu în interiorul unei etichete

-paragraf:

Să exersăm și să inserăm pe pagina noastră o imagine din articolele anterioare despre html. Voi crea un folder „imagini” lângă fișierul html al paginii mele și voi plasa acolo un fișier imagine „bmw.jpg”, care arată astfel:

Atunci codul html al paginii cu imaginea inserată va fi astfel:

Site despre mașini.

Bine ați venit pe site-ul nostru auto. Aici veți găsi multe articole interesante și utile despre mașini, caracteristicile tehnice și caracteristicile acestora.

Limbajul științific auto Acest:

Vehicul rutier mecanic motorizat fără șenile cu cel puțin 4 roți.

---

Clasificarea mașinilor

Mașinile sunt de următoarele tipuri:

• Autoturism;


• Marfă;


• SUV;


• Buggy;


• Ridica;


• Sport;


• Curse.

Toate drepturile rezervate. 2010
Site despre mașini.

Și uită-te la rezultatul afișajului în browser:

După cum vedem, nu este nimic complicat în plasarea imaginilor pe paginile web. În continuare, să ne uităm la câteva alte atribute importante ale etichetei. .

Atributul alt este o opțiune de rezervă

Deoarece fișierele imagine sunt stocate separat de paginile web, browserul trebuie să facă cereri separate pentru a le prelua. Dar dacă există o mulțime de imagini pe pagină și viteza conexiunii la rețea este scăzută, atunci va dura o perioadă semnificativă de timp pentru a descărca fișiere suplimentare. Și este și mai rău dacă imaginea a fost ștearsă de pe server fără știrea ta.

În aceste cazuri, pagina web în sine se va încărca cu succes, în loc de imagini vor fi afișate doar dreptunghiuri albe. Prin urmare, pentru a spune utilizatorului care este imaginea, . Folosind acest atribut, specificați așa-numitul text de înlocuire, care va fi afișat într-un dreptunghi gol până când imaginea este încărcată:

Și cam așa arată:

Setați dimensiunile imaginii

Există încă câteva atribute de etichetă img despre care ar trebui să știți. Acestea sunt câteva atribute lăţimeȘi înălţime. Puteți folosi acestea pentru a specifica dimensiunile imaginii:

width="300" height="200">

Ambele atribute indică dimensiunea în pixeli. Atributul lățime spune browserului cât de lățime ar trebui să fie imaginea și atributul de înălțime cât de înaltă ar trebui să fie. Aceste două atribute pot fi utilizate împreună sau separat. De exemplu, dacă specificați doar atributul lățime, atunci browserul va selecta automat înălțimea proporțional cu lățimea specificată și, de asemenea, în cazul utilizării numai a atributului înălțime. Dacă nu specificați deloc aceste atribute, browserul va determina automat dimensiunea imaginii înainte de a o afișa pe ecran. Este de remarcat doar faptul că specificarea dimensiunilor imaginii va accelera ușor browserul la afișarea paginii.

Acesta este totul despre inserarea imaginilor în pagini deocamdată, apoi ne vom uita la cum să inserăm audio sau video pe un site web...

Inserarea video și audio folosind HTML 5

Noua specificație html5 introduce mai multe etichete noi care facilitează încorporarea fișierelor media. Acest lucru se aplică în primul rând video și audio.

A introduce audio HTML5 oferă o etichetă asociată Adresa fișierului în care este stocat clipul audio este indicată folosind atributul src care ne este deja familiar:

Etichetă

În mod implicit, clipul audio nu este afișat pe pagina web. Dar dacă în etichetă

O etichetă asociată este utilizată pentru a insera un videoclip pe o pagină web . Cu această etichetă totul este la fel ca și cu eticheta

Nu sunt multe de spus despre inserarea de imagini și multimedia în paginile html. sper intrebarea „Cum se inserează o imagine într-o pagină html?” ti-am raspuns. asa ca voi rezuma doar:

Pentru inserarea imaginilor în html pagină folosind o singură etichetă și indicați adresa fișierului cu imaginea din atribut src: ;

• prin utilizarea atribut alt etichetă puteți seta un text de înlocuire în cazul în care imaginea nu se încarcă;
• folosind atribute lăţimeȘi înălţime puteți seta dimensiunile imaginii pe o pagină web;
• există etichete asociate pentru inserarea audio și video în html5

Dacă ceva nu este clar, întrebați în comentarii și nu uitați să vă abonați la actualizările blogului meu. Ne vedem în postările următoare!

Lucrul cu imagini în HTML (cum să inserați o imagine, să schimbați dimensiunea acesteia, să faceți din imagine un link).

Inserarea unei imagini

O etichetă neîmperecheată este utilizată pentru a insera o imagine într-un document HTML , care este plasat în locația din document în care trebuie inserată imaginea. Această etichetă are un parametru obligatoriu src, a cărui valoare specifică calea către imaginea dorită în directorul site-ului tău.

De exemplu, pentru a plasa o imagine pe o pagină:

Următoarea linie este plasată în locul potrivit în document:

Acest lucru permite browserului să știe că directorul rădăcină al site-ului www.mysite.com există un subdirector img 1.png

Aici am specificat calea completă (sau adresa absolută) la imagine. Poti specifica adresa relativa Imagini:

Browserul interpretează această linie astfel: în directorul în care se află acest document html, există un subdirector img, conține o imagine cu numele 1.png, care ar trebui plasat pe pagină.

Iată un exemplu de specificare a unei adrese de imagine relativă dacă site-ul dvs. are o structură mai complexă, iar exemplul anterior nu este potrivit:

Browserul interpretează această linie după cum urmează: o combinație de caractere ../ înseamnă că trebuie să urcați cu un nivel din directorul în care se află acest document html; si apoi ca in exemplul anterior: in directorul in care ne gasim exista un subdirector img, conține o imagine cu numele 1.png, care ar trebui plasat pe pagină.

Din motive de securitate, este de preferat să indicați adresa relativă a imaginii, cu excepția cazurilor în care plasați o imagine aflată pe alt site pe pagina dvs.

Dimensiunile imaginii

Dimensiunea fiecărei imagini este specificată de doi parametri: lățime și înălțime. La etichetă Există parametri corespunzători: lăţimeȘi înălţime. Acești parametri iau valori în pixeli (px).

Puteți seta dimensiunile reale ale imaginii:

Acest lucru nu este necesar, dar este util pentru că... accelerează ușor procesul de încărcare a paginii de către browser (browserul nu trebuie să calculeze aceste valori în mod independent). Dacă dimensiunile imaginii sunt specificate imediat în parametrii etichetei , apoi va fi alocat spațiu pe pagină pentru această imagine, iar structura paginii nu se va mai schimba la încărcare - textul va sări, de exemplu.

Sau puteți mări sau reduce imaginea prin alocarea de parametri lăţimeȘi înălţime alte sensuri. Mai mult, dacă doriți să modificați ambii parametri proporțional, este suficient să indicați o nouă valoare doar unuia dintre ei și pur și simplu să o omiteți pe a doua. Browserul îl va calcula automat.

De exemplu, pentru a ne mări imaginea de 1,5 ori, putem scrie:

sau

Rezultatul va fi același:

Mai multe opțiuni lăţimeȘi înălţime poate lua valori în procente. Dar! Vă rugăm să rețineți că acestea sunt procente din dimensiunea ferestrei browserului. În acest caz, puteți specifica și un singur parametru și îl puteți omite pe al doilea.

De exemplu, dacă dorim ca imaginea să ocupe exact jumătate din lățimea paginii noastre, trebuie să scriem următoarele:

Și vom obține:

Încadrați în jurul imaginii

La etichetă mai există un parametru opțional frontieră. Utilizați-l pentru a seta grosimea cadrului din jurul imaginii. În mod implicit, grosimea cadrului imaginii este zero, adică nici un cadru.

De exemplu, iată cum puteți adăuga un cadru gros de 3 pixeli la imaginea noastră:

Iată ce ne va arăta browserul:

Culoarea chenarului se potrivește cu culoarea textului din pagina specificată folosind parametrul text etichetă (Consultați Lecția 6. Proprietățile paginii - parametrii etichetei corpului), culoarea implicită este negru.

Și dacă nu doriți să vedeți cadrul, forțați parametrul frontieră valoare nulă:

Text alternativ

Text alternativ este afișat de browser în locul imaginii până când este încărcat. Sau în locul unei imagini, dacă din anumite motive nu este afișată.

Când și dacă imaginea este încărcată, text alternativ va fi afișat când treceți mouse-ul peste această imagine.

Pentru a adăuga text alternativ, utilizați opțiunea alt etichetă , căruia i se atribuie o valoare șir, care trebuie inclusă între ghilimele.

Puteți crea text alternativ pe mai multe rânduri.

Pentru a face acest lucru, trebuie doar să inserați o întrerupere de linie în documentul HTML.

text">

Alinierea imaginii

Pentru o imagine, ca și pentru un paragraf, există conceptul de aliniere față de text și alte imagini de pe pagină. De asemenea, puteți seta tipul de aliniere folosind parametrul alinia etichetă .

Mai jos este un tabel cu valorile posibile ale parametrilor alinia:

Opțiuni texttop, top, mijloc, absmiddle, de bază, fund setați alinierea verticală a imaginii. Și parametrii stângaȘi dreapta informați browserul pe ce parte ar trebui să fie textul curge în jur imagine.

Umplutură în jurul imaginii

Pentru a împiedica textul să se înfășoare aproape de imagine, puteți seta umplutură în jurul imaginii. Puteți face acest lucru folosind parametrii hspace(căptușeală din stânga și din dreapta) și vspace(spații în partea de sus și de jos) a etichetei .

Următorul exemplu arată textul care se înfășoară în jurul unei imagini, cu imaginea aliniată la stânga și cu 5 pixeli de umplutură în jurul ei:

În orașul Stockholm, pe strada cea mai obișnuită, în cea mai obișnuită casă, locuiește o familie suedeză obișnuită pe nume Svanteson. Această familie este formată dintr-un tată foarte obișnuit, o mamă foarte obișnuită și trei copii foarte obișnuiți - Bosse, Bethan și Baby.

Iată rezultatul în browser:

În orașul Stockholm, pe strada cea mai obișnuită, în cea mai obișnuită casă, locuiește o familie suedeză obișnuită pe nume Svanteson. Această familie este formată dintr-un tată foarte obișnuit, o mamă foarte obișnuită și trei copii foarte obișnuiți - Bosse, Bethan și Baby.

Împărțirea unei imagini în părți

Există momente când trebuie să plasați o imagine mare pe o pagină. Dar apoi pagina va dura mult timp să se încarce. Ce să fac?

Una dintre posibile Cea mai bună cale de ieșire este să tăiați imaginea în bucăți și să o plasați pe pagină folosind un tabel. Pentru ca imaginea să arate ca un întreg, este necesar să eliminați chenarul tabelului și toată umplutura din interiorul și între celule. Acestea. atribuiți parametrilor etichetei corespunzători

valori nule: border="0", cellspacing="0", cellpadding="0".

În exemplul următor, împărțim imaginea în 4 părți. Iată cum va arăta tabelul:

Și iată rezultatul:

O zi bună tuturor, dragii mei prieteni, cititori și oaspeți ai blogului meu. Parcă ai fi în vacanță, dar nu ai timp suficient pentru nimic. Totul se grăbește cumva. Dar acest fenomen este temporar, totul se va stabili în curând. Și astăzi vom continua să învățăm elementele de bază ale html. Prieteni, ce părere aveți, fără de care orice pagină de internet va fi fără chip, gri și plictisitoare? Așa este, fără conținut grafic, fie că este vorba de fotografii, logo-uri sau fundaluri.

Așadar, inserarea unei imagini în html este, de asemenea, una dintre cele mai importante componente, așa că oricine va face site-uri web pe cont propriu ar trebui să o știe cu siguranță. Este exact ceea ce vom face astăzi cu toată această bacanală)))

Ei bine, să începem. După cum ați înțeles deja din titlu, eticheta este responsabilă pentru inserarea imaginii , dar are două nuanțe:

1. Eticheta este unică, deci nu este nevoie să o închideți
2. Eticheta funcționează întotdeauna împreună cu atributul, care specifică calea către imagine.

În general, să ne uităm la un exemplu pentru a consolida toată această acțiune. Am dreptate? Descărcați materialele lecției și deschideți fișierul html în Notepad. Și acum, înainte de textul principal, scrieți următoarele:

Toate. Această scurtă intrare ne va oferi o imagine pe site-ul nostru. Încercați să o scrieți într-un document.

Acum salvați fișierul și rulați-l în browser. Să vedem ce putem face. Am făcut-o așa.

Atribute

După cum am spus mai sus, eticheta img vine imediat completă cu atributul src. Ei bine, cred că ai înțeles deja asta, așa că hai să studiem restul. Există loc de extindere aici. Există doar o mulțime de atribute aici. Scuza-mi limbajul).

Alt

Dacă dintr-o dată imaginea din anumite motive nu s-a încărcat sau este inaccesibilă, veți vedea textul care a fost scris în valoarea atributului Alt. De obicei, ceea ce este scris aici este ceea ce este arătat în imagine, adică. dacă este descris ceva despre naționalități, atunci în alt este mai bine să scrieți „Bărbați și femei de diferite naționalități”. Într-un exemplu arată astfel:

Ca urmare, dacă imaginea nu poate fi afișată dintr-un motiv oarecare, atunci va apărea inscripția noastră.

În principiu, nu trebuie să introduceți nimic ca text alternativ, dar este mai bine să lăsați atributul în sine, chiar dacă este gol.

Latime si inaltime

Pentru cei care cunosc engleza, nu este greu de ghicit că aceste două atribute sunt responsabile pentru lățimea și înălțimea imaginii. Am decis să combin aceste două lucruri într-un singur articol, deoarece îndeplinesc funcții similare, s-ar putea spune - frați (sau surori).

Lățimea este responsabilă pentru lățimea imaginii, iar valorile acesteia includ dimensiunea în sine. În general, dacă aveți o imagine, de exemplu, 640*480 pixeli și trebuie să o afișați pe un site web de 320*240, atunci va trebui pur și simplu să faceți următoarele:

Toate. Acum, când salvați documentul și îl deschideți folosind un browser, veți vedea o imagine în miniatură. Rețineți că am schimbat doar parametrul de lățime, iar imaginea a fost redusă proporțional, adică. înălțimea a scăzut automat.

Înălțimea, după cum ați putea ghici, este responsabilă pentru înălțimea imaginii. Aici totul funcționează exact la fel, dar pe verticală. Să facem aceeași poză, dar nu vom seta lățimea, ci doar înălțimea.

Salvați și accesați documentul. După cum puteți vedea, imaginea a fost redusă la aceeași dimensiune ca în exemplul anterior, deși de data aceasta am stabilit doar înălțimea. Înțelegeți deja că totul aici funcționează în cadrul proporțiilor, așa că, în principiu, nu are rost să setați ambii parametri.

Să încercăm, doar pentru distracție, să setăm atributele atât pentru lățime, cât și pentru înălțime în același timp, dar le vom oferi doar parametri disproporționați. Ei bine, atunci vom vedea ce putem face.

Salvăm și acum ne uităm la ceea ce ni s-a dat. Hmm, acesta este ceva disproporționat). În general, cred că înțelegi esența. Exersează-te puțin pentru a consolida munca cu dimensiuni, apoi treci la următorul atribut.

Alinia

Ei bine, ești deja familiarizat cu acest atribut din acel articol, când am trecut de fapt prin el. Și probabil ați ghicit deja că el este responsabil pentru locația imaginii.

Există un total de cinci parametri pentru aliniere:

• stânga — aliniere la stânga
• dreapta — aliniere la dreapta
• mijloc — aliniați imaginea la linia de bază a liniei (veți vedea ce înseamnă acest lucru în exemplu)
• sus - marginea de sus a acestei imagini este aliniată în înălțime cu cel mai înalt element din rândul dat
• jos — aliniați marginea de jos a imaginii la text

Ei bine, să nu le enumerăm aici, dar conform tradiției, voi arăta totul cu un exemplu. Descărcați documentul html finalizat de aici și deschideți-l. Acolo vei vedea 5 paragrafe identice. Inserați acolo imagini cu atributele descrise:

Ei bine, acum ne salvăm documentul ca de obicei și vedem ce avem. Bine? Vedeți diferența? Acum știți cum diferă acești parametri).

Frontieră

Atributul chenar este setat pentru a indica grosimea cadrului de pe imagine. Și cu cât este mai mare, cu atât cadrul corespunzător este mai gros. Încercați să adăugați acest atribut unei imagini, dar schimbați-i constant valoarea și veți vedea singur cât de mult devine rama.

Hspace și Vspace

Ei bine, să ne uităm la cele mai recente atribute ale etichetei img pentru astăzi. Spațiul (engleză) este tradus ca spațiu, spațiu, spațiu (cheie), etc. Prefixele H și V înseamnă orizontală și verticală. Nu ar trebui să fie întrebări aici.

Deci, ce fac aceste atribute? Acestea stabilesc marginile verticale și orizontale de la imagine la textul din jur (sau alt conținut). Adică, dacă nu vă place ca imaginea să fie prea aproape de text, atunci puteți crește distanța dintre ele. Să vedem cum arată asta cu un exemplu.

Vezi? Marginile au crescut atât pe verticală, cât și pe orizontală. Asta ne-am dorit.

Apropo, puteți introduce aceste imagini și ca antet pentru site-uri web, puteți face imagini ca link-uri etc. Am vorbit despre toate acestea în.

Ei bine, în general, se pare că am totul. V-am spus elementele de bază ale inserării imaginilor, dar dacă doriți să învățați HTML și CSS ca un profesionist, vă recomand cu căldură să descărcați curs uimitor pe acest subiect, unde datorită acestui limbaj de marcare și a foilor de stil în cascadă puteți crea cu ușurință trei tipuri de site-uri: cărți de vizită, bloguri, magazine online. Totul este spus într-un limbaj simplu și ușor de înțeles. Este doar o bombă!

Ei bine, îmi iau rămas bun de la tine pentru azi. În doar câteva lecții, plănuiesc să vă ofer ultima lecție despre elementele de bază ale HTML, după care vom consolida toate cunoștințele pe care le-am dobândit în practică și vom crea un site web simplu de trei pagini. În general, totul va fi cool)

Ei bine, pentru a nu rata toate cele mai interesante lucruri de pe blogul meu, asigurați-vă că vă abonați la actualizările articolelor. Și, bineînțeles, uită-te la alte articole. Sunt sigur că veți găsi o mulțime de informații utile pentru dvs. Multă baftă. Ne vedem in alte articole. Pa! Pa!

Cu stima, Dmitri Kostin

În continuare, ne vom uita la cum să inserăm o imagine într-un document HTML și să configuram afișarea acesteia. Pentru a funcționa, aveți nevoie doar de editorul și browserul menționat mai sus.

Dacă încă nu aveți Notepad++ sau aveți o problemă la descărcarea lui și sunteți chinuit de întrebarea - cum să inserați o imagine în html în notepad?

Răspunsul este simplu, lucrul într-un blocnotes obișnuit diferă doar prin faptul că nu evidențiază codul în culori diferite pentru lizibilitate și separare a codului de textul în sine.

Cum să inserați o imagine într-o pagină HTML

După instalarea editorului, elementul corespunzător va apărea în meniul contextual care apare când faceți clic dreapta pe orice fișier.

Acum, pentru a edita un astfel de fișier, trebuie doar să apelați meniul contextual făcând clic dreapta pe el, apoi „Editați cu Notepad++”.

O pagină de test va fi folosită pentru a observa rezultatele modificărilor în cod.

Pentru a insera o imagine în codul html, utilizați o etichetă cu o singură linie img. Principalul său atribut este sursa fotografiei.

Acesta poate fi orice fișier, de pe un hard disk sau un link către o imagine existentă în rețea. Încadrat cu etichete < p> p>.

Pentru a adăuga o fotografie, va trebui să introduceți următorul rând:

.

Iată cum va arăta în editor:

Și așa va fi afișată prezența lui pe pagină:

Sr indică sursa imaginii. Un singur nume de fișier este suficient dacă fișierul imagine se află în același director cu documentul html.

Dacă fotografia se află într-un alt director, atunci va trebui să specificați calea către aceasta, pornind de la folderul în care se află fișierul html.

Sfat! Este important să luați în considerare că calea către un anumit fișier foto nu trebuie să conțină caractere chirilice. În plus, atunci când scrieți un nume de fișier, majusculele sunt importante.

Puteți utiliza o ilustrație de pe Internet ca sursă. Pentru a face acest lucru, trebuie doar să indicați un link către acesta în atribut, în loc de locația de pe hard disk.

Tabel de formatare a căii fișierului

Pentru a redimensiona o imagine, va trebui să adăugați două atribute: lăţimeȘi înălţime. Valoarea este formatată în același mod ca pentru orice atribut.

După semnul egal, trebuie să specificați dimensiunea în pixeli.

Dacă există dimensiuni clar definite ale ilustrației, aceasta va fi afișată pe pagină după cum urmează:

Alinierea și editarea unei imagini

Cum se inserează o fotografie în html în centru? Pentru a atribui poziția imaginii pe pagină, utilizați alinia, legat de etichetă p.

Pentru aceasta sunt permise mai multe valori: centru(centru), stânga(marginea din stânga) și dreapta(marginea dreapta).

Iată cum arată imaginea pe pagină, centrată pe marginea dreaptă.

Important! Pentru a atribui locația fotografiei în raport cu text, mai degrabă decât pagină, trebuie utilizat atributul align în eticheta img. Valorile sunt aceleași ca pentru atributul etichetei.

În funcție de valoarea specificată, imaginea își va schimba poziția față de text.

Pentru a plasa o imagine în text, trebuie doar să introduceți eticheta img(cu toate marginile) într-un bloc de text în .

Pentru a adăuga un chenar, utilizați atributul chenar cu o valoare numerică care indică grosimea chenarului în pixeli.

Pentru a seta margini verticale și orizontale, utilizați vspaceȘi hspace. Valoarea lor numerică înseamnă distanța de la text la imagine, direct în pixeli.

În exemplu, atributul vspace valoarea este setată la 50 de pixeli.

Dimensiunea de umplutură orizontală va indica distanța la care va fi plasat textul atunci când se înfășoară în jurul imaginii.

Încă două atribute utile - altȘi titlu. Primul setează text alternativ pentru imagine.

Cu acesta, dacă imaginea nu se încarcă dintr-un motiv oarecare, textul specificat în valoarea atributului va fi afișat în schimb.

Pentru a încerca capacitățile atributului, puteți muta fișierul din directorul specificat în cod.

Text specificat ca valoare de atribut titlu, va afișa un tooltip când treceți mouse-ul direct peste imagine. În cod, designul său nu este diferit de alte atribute.

După reîmprospătarea paginii, rezultatul va fi astfel:

Tabel cu atribute img

vot(e)

	Descriere
src=””	Identificatorul sursei imaginii. Poate fi folosit fie salvat pe hard disk, fie localizat in retea (adresa este indicata in locul locatiei de pe hard disk).
lăţime=""; inaltime=””	Indicatori de înălțime și lățime a imaginii. Dacă este specificat doar unul, al doilea este scalat automat în funcție de primul. Valoarea numerică indică numărul de pixeli.
aliniază=””	Atribut pentru poziția imaginii față de text. Valori valide: top,mijlocfund,stângadreapta.
frontieră=””	Atribuie un chenar în jurul imaginii. Valoarea numerică corespunde grosimii cadrului în pixeli.
vspace=""; hspace=””	Indicatori de indentare din elementele adiacente pe verticală și pe orizontală. Valoarea specifică numărul de pixeli dintre elemente. La împachetarea textului, atributul specifică distanța până la text.
alt=””	Atribuie o descriere alternativă în cazul în care imaginea din anumite motive nu s-a încărcat. Valoarea este arbitrară.
titlu=””	Setează textul indicativ pentru trecerea cu mouse-ul. Valoarea este arbitrară.