Imagine HTML. Inserarea unui fișier grafic într-o pagină web

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 dumneavoastră.

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 unei pagini 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 cu textul ș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ă stânga și 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:

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 imaginilor î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, lor specificatii tehniceși caracteristici.

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!

Este dificil să găsești pe Internet un site web care să nu conțină imagini, iar acest lucru nu este surprinzător, deoarece acestea reprezintă partea principală a designului site-ului, ceea ce îi conferă un aspect memorabil. A design bun site-ul web este cheia dezvoltării sale de succes. Pentru a afișa imagini în html există o singură etichetă .

1. Sintaxa etichetelor

Descrierea imaginii" src ="URL " [atribute ]>

Vă rugăm să rețineți că această etichetă este singură și nu necesita eticheta de inchidere .

Atributul src este obligatoriu. Este folosit pentru a specifica adresa imaginii afișate. Puteți specifica o adresă URL absolută sau relativă. Dacă nu specificați adresa sau o scrieți cu o eroare, imaginea nu va fi afișată.

Atribut alt="descriere" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Atributele rămase sunt opționale; le vom analiza mai jos. Mai întâi, să dăm un exemplu simplu de ieșire a unei imagini în HTML.

2. Cum se inserează o imagine în html

Pentru a insera o imagine în html, utilizați eticheta . Ne-am uitat la sintaxa puțin mai sus. Să dăm exemple practice.

Exemplul 2.1. Folosind o etichetă

... ...

Acest cod

În acest exemplu, am indicat adresa directă a imaginii din imaginile de pe Yandex Photos. Cel mai adesea, sunt furnizate link-uri către imagini care se află la aceeași adresă URL. De exemplu, src="/img/kartinka.jpg", i.e. se indică adresa relativă.

Este posibil să plasați mai multe imagini la rând. Dacă nu se încadrează pe o linie, se vor muta automat pe următoarea.

Exemplul 2.2. Afișarea mai multor imagini în html una după alta

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

Dacă am plasa o altă imagine, ar fi pe o linie nouă, deoarece nu s-ar mai încadra în aceasta.

Exemplul 2.3. Utilizarea textului alternativ (alt) în img

Se recomandă includerea textului alternativ (atributul alt) în etichetă , pentru a vă asigura de cazul în care poza nu este disponibilă. Mai jos este un exemplu de utilizare a textului alternativ. În primul caz, nu am specificat dimensiunea imaginii, dar în al doilea o facem.

... Imagine exemplu" src ="321.jpg "> ...

Se convertește în următoarele pe pagină:

Dacă am plasa o altă imagine, ar fi pe o linie nouă, deoarece nu s-ar mai încadra în această linie.

Acum să aruncăm o privire mai atentă la toate atributele etichetei .

3. Etichetați atributele și proprietățile

1. Proprietatea align="parameter" - determină alinierea imaginii. Această valoare afectează și modul în care textul va curge în jurul imaginii. Poate accepta următorii parametri:

• alinierea stânga - stânga
• mijloc - aliniați mijlocul imaginii la linia de bază a liniei curente
• jos - aliniați marginea de jos a imaginii la textul din jur
• sus - marginea superioară a imaginii este aliniată la cel mai înalt element al liniei curente
• alinierea dreapta - dreapta

Exemplul 3.1. Alinierea unei imagini în html la dreapta

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

2. Proprietate alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• Afișează balonul la trecerea cu mouse-ul
• Dacă imaginile sunt dezactivate în browser, acest text este afișat

Acest atribut este, de asemenea, foarte important atunci când se clasifică imagini în Yandex Images și Google Images. Ar trebui adăugat la fiecare imagine, deoarece acesta este unul dintre factorii în algoritmii motoarelor de căutare.

Exemplul 3.2. Ieșirea unei imagini în html cu un cadru (chenar)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Se convertește în următoarele pe pagină:

4. Proprietate bordercolor="color" - setează culoarea chenarului care se înfășoară în jurul imaginii. Are sens doar dacă atributul de frontieră este mai mare decât 0.

Exemplul 3.3. Ieșirea unei imagini în html cu un cadru colorat

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Rezultatul poate fi văzut chiar mai sus.

Notă

Atributele border și bordercolor pot fi setate în stilurile CSS ale img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Property height="NUMBER" - setează înălțimea imaginii: fie în pixeli, fie ca procent. De exemplu, dacă o imagine are o dimensiune de 400x200 și specificăm o înălțime de 150 de pixeli, atunci este comprimată la 300x150 (cu 25% mai mică), adică. proporţional.

6. Property width="NUMBER" - setează lățimea imaginii: fie în pixeli, fie ca procent. De exemplu, dacă o imagine are o dimensiune de 1000x800 și lățimea este specificată ca 1200 pixeli, atunci este extinsă automat cu 20% la 1200x960.

7. Proprietatea hspace="NUMBER" - setează indentarea orizontală a imaginii în pixeli din alte obiecte html.

8. Proprietatea vspace="NUMBER" - setează spațiul vertical al imaginii în pixeli din alte obiecte html.

Notă

În loc de hspace și vspace, vă sfătuiesc să utilizați marja veche și dovedită (puteți citi mai multe despre aceasta în lecția despre descrierea stilurilor html). Permiteți-mi să vă reamintesc pe scurt:

• margin-top: X px; (X - liniuță de sus)
• margine-jos: Y px; (Y - liniuță de jos)
• margine-stânga: L px; (L - liniuță din stânga)
• margine-dreapta: R px; (R - liniuță din dreapta)

Setați indentările de la obiecte în pixeli. Sunt permise valori negative. În mod implicit, fie moștenește valoarea strămoșului, fie are valoarea 0.

De exemplu. Marginea din stânga este de 50 de pixeli, iar marginea de sus este de 10 pixeli.

... margine-sus: 10px; margine-stânga: 50px"src=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Se convertește în următoarele pe pagină:

În acest exemplu, indentarea din partea de sus a fost de 10 pixeli, în partea stângă de 50 de pixeli.

9. Proprietate class="class_name" - puteți atribui o clasă unei imagini pentru a seta stilul pentru toate imaginile acestei clase.

4. Cum să faci din imagine un link

Această întrebare apare în rândul tinerilor webmasteri. De fapt, este foarte ușor. Pentru a face acest lucru, trebuie doar să încadrați eticheta etichetă (link).

De exemplu

... Adresă_imagine"> ...

5. Cum să rotunjiți colțurile unei imagini

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-radius: 30px">

Dragă cititor, acum ați aflat mult mai multe despre eticheta html img. Acum vă sfătuiesc să treceți la următoarea lecție.

În timp ce călătoriți pe Internet, vedeți, desigur, diverse imagini, bannere, fotografii și imagini grafice pe multe site-uri. Astăzi vom învăța cum să inserăm imagini într-o pagină HTML.

Adăugarea unei imagini are loc în două etape: în primul rând, este pregătit un fișier grafic dimensiunea potrivităși format, apoi este adăugat la pagina web prin intermediul etichetei: . Documentul HTML în sine este destinat doar să afișeze imaginea necesară, în timp ce fără a-l schimba deloc.

Există câteva lucruri de luat în considerare atunci când vă pregătiți imaginile.

1. Deoarece pagina web este încărcată prin rețea, un factor semnificativ este dimensiunea („greutatea”) fișierului grafic, încorporat într-un document web. Cu cât este mai mic, cu atât imaginea va fi afișată mai rapid.

2. Destul de des, dimensiunile fizice ale unei imagini (lățime și înălțime) trebuie limitate (reduse) prin lățime și înălțime. De exemplu, setați lățimea la cel mult 700-800 de pixeli. În caz contrar, întreaga imagine nu va încadra în fereastra browserului și vor apărea bare de defilare.

Formate grafice pentru site-uri web

Cele două formate principale care sunt cele mai utilizate pentru grafica web sunt: GIFȘi JPEG. Asemenea calități precum multifuncționalitatea, versatilitatea, un volum mic de fișiere sursă cu o calitate suficient de bună au servit bine acestor formate, de fapt, definindu-le ca standard pentru imaginile web.

Există și un format: PNG, care este, de asemenea, acceptat de browsere atunci când adăugați imagini și este disponibil în două variante: PNG-8Și PNG-24. Cu toate acestea, popularitatea formatului PNG este mult inferioară ca recunoaștere față de formatele GIF și JPEG.

De obicei, un folder separat este creat pentru imagini (imagini) în directorul rădăcină și toate imaginile pentru site sunt plasate în el. Uneori există mai multe astfel de foldere (dacă structura site-ului o cere sau este mai ușor pentru tine să navighezi). Acest folder se numește cel mai adesea: img sau imagini (Imagini). În codul paginii web, scrieți calea completă către fișierul grafic (unde se află imaginea), precum și numele acestui fișier (imaginea) pe care doriți să îl introduceți în documentul html.

Scriem cod pentru a insera o imagine într-o pagină web

Pentru a insera imagini într-un document HTML, utilizați construcția specificată în Lista 8.1. Acest cod este introdus în Locul potrivit pagini web (unde doriți să vedeți imaginea).

Pe pagina noastră dedicată mașinilor am pregătit și am inserat două imagini. Puteți vedea codul de încorporare pentru prima imagine în Lista 8.1.

Lista 8.1.

Iată cum va arăta prima imagine inserată pe pagina web a site-ului:

Și acum voi comenta mai detaliat ce este scris în Lista 8.1.

Imaginea în sine este „inserată” folosind eticheta: img src. Intrarea completă arată astfel: img src="img/mers1.jpg", Unde „img/mers1.jpg”– indică faptul că fotografia noastră se află în folderul: img, și numele fișierului grafic (imagine): mers1.jpg.

În principiu, acest lucru este deja suficient pentru a insera o imagine pe o pagină web, parametrii rămași sunt opționali, dar tot recomand să-i înregistrați întotdeauna, în caz contrar, imaginea poate fi supusă distorsiunilor geometrice.

Să ne uităm la opțiunile suplimentare:

border="0"– indică faptul că nu există niciun cadru în jurul imaginii, încercați să schimbați 0 cu un alt număr, de exemplu cu 1 , - corespunde grosimii cadrului din jurul imaginii în 1 pixel, 2 – corespunde grosimii cadrului din jurul imaginii de doi pixeli etc.

Important! Dacă intenționați să faceți o imagine un link, asigurați-vă că indicați valoarea: border="0".

width="400"– indică faptul că lățimea imaginii este: 400 pixeli(puneți un număr real pentru lățimea imaginilor dvs.).

înălțime="209"- indică faptul că înălțimea imaginii este: 209 pixeli(puneți un număr real pentru înălțimea imaginilor dvs.).

Dacă nu specificați parametrii: lăţimeȘi înălţime, atunci imaginea poate primi distorsiuni geometrice.

hspace="20"– indică o indentare de 20 de pixeli a textului în jurul imaginii.

align="left"– aceasta este o etichetă deja familiară pentru dvs.... Așa este, înseamnă aliniere la stânga, poate avea și sensul: dreapta- alinierea la dreapta.

alt="Vedere din față a mașinii" !}– aici este scris text alternativ, care este afișat când treceți mouse-ul peste imagine.

Exact în același mod, vom „insera” a doua imagine pe pagina web, singura diferență fiind că va fi aliniată la dreapta.

Comentarii la acest articol (lecție):

Vă rog să-mi spuneți unde exact ar trebui să creez folderul img?

Dosarul img este doar un nume convențional, îl poți numi cum vrei, atâta timp cât îl înțelegi mai târziu. Îl poți crea oriunde, pentru simplitate, creează-l în directorul rădăcină și pune toate imaginile acolo.

Chestia este că nu este afișată poza, ci doar inscripția. Ce poate fi greșit? Mulțumesc.

Aruncă o privire atentă la Lista 8.1 de mai sus. Ia totul pentru tine. În directorul rădăcină (unde se află toate fișierele HTML ale site-ului dvs.), faceți un folder img. Pune toate imaginile în acest folder. În listă, schimbați mers1.jpg cu numele fișierului dvs. Modificați, de asemenea, valorile de lățime și înălțime la dimensiunile reale ale fișierului dvs. Noroc.

Multumesc mult, totul a iesit.

Buna ziua.Am aceeasi situatie ca si vorbitorul precedent:Scriu codul ca al tau,schimb doar numele fisierului:in loc de mers.1/jpeg introduc link-ul Mercedes/jpeg.Apare doar o fereastra pe pagina cu inscripție în partea de sus „Vedere din față a mașinii”, și nu există nicio imagine. După părerea mea, browserul nu găsește calea către fotografie sau nu este scrisă corect. AICI ESTE CODUL MEU: b

Privește cu atenție codul img/mercedes/jpeg. Ați înțeles corect, browserul nu găsește calea către fișierul grafic. 2. Numele fișierului este incorect, vezi cum am mers1.jpg

Ei bine, am copiat codul si l-am lipit, am un oval fara poza, in oval e un link in partea de sus!

Buna ziua!Problema este aceeasi, am creat un folder numit img in acelasi loc cu documentele site-ului, in acest folder sunt salvate imagini cu numele 1.jpg, scriu totul ca in exemplul dumneavoastra.

Dacă ai observat că poza mea este în folderul img

Un articol foarte util pentru webmasterii începători. Singura avertizare la atributul „alt”. În raport cu figură, articolul oferă următoarea interpretare: „alt="Vedere din față a mașinii" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

aici este codul meu AȘA DE CE POZA ESTE PUNĂ ÎN LADO CÂND SARCINA PENTRU ESTE ESTE CENTRAL?

Și dacă iau o imagine de pe site-ul altcuiva, nu va fi o încălcare a drepturilor de autor?

Explicați de ce, atunci când încărcați un document HTML pe server, există spații goale în cadru în loc de imagini. Deși înainte de afișare, imaginile erau așa cum ar trebui să fie.

Dmitry, miracolele nu se întâmplă, ai greșit undeva, verifică toate căile către imagini, adică. cum sunt scrise imaginile în cod.

Acesta este codul meu, totul este dezvăluit pe pagină cu excepția imaginii, am încercat toată ziua în toate felurile posibile, dar nimic. te rog spune-mi ce sa fac

AndreyK, vă rog să mă contactați în scrisoarea mea. Nu pot introduce o imagine în niciun fel, introduc totul corect, dar nimic, apar doar cadrul și inscripția

Elvira, am citit scrisoarea ta, precum și toate celelalte comentarii și scrisori. Dar unde să răspund... la satul bunicului meu???

Nu știu de ce toată lumea este atât de supărată!? Trebuie doar să nu copiați și apoi să lipiți codurile, ci să le scrieți singur și totul va funcționa... aici este textul pozei mele

Ți-am copiat lista, am lipit valorile mele - există o imagine. Apoi introdu același lucru mai jos (manual) nu există nicio imagine - ce miracol?

AndreyK te rog spune-mi unde este eroarea? Indiferent de câte ori încerc, nu funcționează((

Andrey, spune-mi de ce nu pot vedea poza. Codul meu: Există o inscripție, dar nicio imagine. Adresa mea: [email protected] Mulțumesc.

Si eu am patit mult timp, dar a mers! Într-adevăr, folderul imj trebuie deschis într-un document HTML.

Cu siguranță o voi încerca, mulțumesc

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Si eu am patit mult timp, se pare ca folderul cu poze ar trebui sa fie in acelasi loc cu index.html, multumesc Elena

Andrei introduc:

Andrei introduc: si nu am poza in document, doar o inscriptie!!!Adresa mea: [email protected]

codul meu...nici nicio poza. Dosarul img se află în același folder cu index... vă rog ajutați. [email protected] Mulțumesc!

Ei bine nu stiu. Am citit toate comentariile. Am încercat totul. Mi-am copiat și lipit informațiile. Nimic nu funcționează. Dosarul cu imagini (img) se află în același loc cu index.html. Dar nu există nicio imagine. În schimb există o cruce roșie și o inscripție.Lucrez în browserul IE. Iată ce am introdus:

M-am uitat la codul HTML al paginii în locul fotografiei din lecție: Codul de pe pagină este diferit de ceea ce este în listă. De ce? si, de altfel, pe pagina este subliniat codul “mers1.jpg”. Copierea cu subliniere a eșuat. Am încercat să-l introduc așa. Inca nicio poza. Ce s-a întâmplat?

Ne întrebăm, ne răspundem. Am suferit multă vreme și nu a fost introdusă poza. S-a dovedit: 1, în loc de eticheta src aveam srk 2. M-am încurcat când compuneam calea către imagine. Am redenumit folderul în IMG și totul a funcționat. Am petrecut aproape două zile pe asta, dar a meritat.

Iubește, dar acum îți vei aminti asta pentru tot restul vieții:) Glumesc, desigur, nu fi jignit. Dar serios, dacă o persoană nu lasă o adresă de retur, atunci îmi este aproape imposibil să-l ajut.

Bună ziua, spuneți-mi cum să plasez o imagine în sus, a doua dedesubt în stânga și a treia în partea de jos în dreapta))))

..........care este eroarea mea de a lipsi imaginea?

Totul în cod este corect, dacă nimic nu este dezamăgit, totul ar trebui să funcționeze. Dar scrieți numele fișierului (poza) cu litere engleze. Multe servere nu acceptă alfabetul latin.

Dar iată ce este ciudat... în timp ce denumisem folderul nume diferite, imaginea nu a vrut să apară, deși calea a fost scrisă corect. Imediat ce am sunat la IMG, a apărut imediat. Care e siretlicul?

Marina, nu exista truc sau provocare :). În codul Listare 8.1. se indică faptul că această imagine se află în folderul: img. Dacă schimbați numele folderului pentru imagini de pe gazda dvs., apoi îl schimbați în listă, acesta este tot trucul.

Incerc sa inserez o imagine!!! Scriu totul folosind un blocnotes, fac totul corect, poate că nu merită să folosesc un blocnotes??

Și deschid totul în Mozilla Fire Fox cel mai recent))

Calea imaginii mele este C:Documents and SettingsdenisDesktopkoffevinogradwwwImg și poza în sine se numește gif, de asemenea, numele include 1.gif...Fac asta în notepad Am făcut-o și calea completă nu iese, mozilla nu vede fotografia exploratorului și o evidențiază cu o cruce roșie

Denis, redenumiți folderul Img în img, adică. totul cu majuscule și redenumiți și calea către acesta. Multe servere nu afișează corect majuscule.

Mai am aceeași întrebare: de ce nu imagini, ci doar inscripția. Am creat un folder separat pentru site: conține o pagină Web și un desen. Inserate: AJUTOR CARE ESTE EROAREA MEA DE POSTA: [email protected]

Cum să faci o imagine astfel încât să poată fi mărită sau redusă?

Din anumite motive, imaginea nu este centrată nici pentru mine. Care este captura?.. Codul este astfel:

Bună ziua, dragi cititori ai site-ului. Astăzi să trecem la un subiect mai interesant și anume inserția imagini. Pentru ca browserul nostru să încarce și să deschidă rapid o pagină cu o imagine, avem nevoie de o imagine OPTIMIZATĂ (despre de ce și cum să optimizăm imaginile). Pentru a descărca o astfel de imagine pre-optimizată, accesați și salvați această imagine făcând clic dreapta și selectând „Salvare imagine ca”.

Etichetă și locația folderului cu imagini

Pentru a stoca imagini, vom crea un alt folder „Imagini” în folderul nostru HTML și vom plasa imaginea acolo.

Să încercăm să introducem poza noastră cu imaginea între titlu și primul paragraf. Pentru a face acest lucru, vom scrie eticheta noastră în cod . Aceasta este prescurtarea pentru cuvânt englezesc imaginea este o imagine și este o singură etichetă.

Eticheta în sine nu prea spune nimic browserului. Prin urmare, trebuie să specificăm cu siguranță atributele etichetei. Cel mai important dintre atribute este atributul src – sursă. Trebuie să indicăm sursa imaginii noastre. În cazul nostru, imaginea se află în interiorul folderului imagini în raport cu folderul HTML. Acestea. trebuie să indicăm că imaginea noastră alarm.jpg se află în folderul imagini. Și așa arată.

Cu acest atribut specificat pentru etichetă , browserul, când întâlnește acest cod, va merge în folderul imagini și va prelua fișierul - poza alarm.jpg.

Dar asta nu este tot. De asemenea, este indicat să specificați lățimea și înălțimea acestei imagini, deoarece browserul trebuie să știe exact cât spațiu să aloce acestei imagini, iar întreaga încărcare se va face mai rapid și, cel mai important, fără decalaje de bloc.

Atributele latime si inaltime

Daca nu specificam dimensiunile, browserul va afisa si imaginea corect, dar va dura putin timp. mai mult timp pentru că mai întâi va trebui să încarce imaginea și abia apoi va putea determina cât spațiu trebuie să aloce. Dacă specificați inițial dimensiunile pentru imagine, acest lucru va simplifica sarcina pentru browser. În plus, prin modificarea dimensiunii imaginii în cod, browserul o va redimensiona și în funcție de dimensiunile specificate.

Pentru a afla dimensiunea imaginii, faceți clic dreapta pe ea și selectați elementul de meniu „Proprietăți”. Apoi, accesați fila „Detalii”.

După cum puteți vedea, lățimea imaginii este de 307 pixeli și înălțimea este de 450 pixeli. Să scriem dimensiunile în cod:

Atribut Alt pentru legenda alternativă

Un alt atribut de etichetă , pe care este indicat să îl indicați atunci când adăugați o imagine, este alt. Este destinat acelor utilizatori de Internet care au dezactivat afișarea imaginilor în browserul lor. Acestea. dacă imaginile sunt dezactivate în browser, în loc de imaginea noastră, utilizatorul va vedea cuvântul sau expresia pe care o scriem pentru atributul alt. În plus, motoarele de căutare, atunci când determină valoarea site-ului tău, se concentrează pe atributul alt al imaginilor, deci includerea acestuia este obligatorie.

Aceste patru atribute pentru o etichetă Este recomandabil să indicați când adăugați imagini pe pagină. Voi sublinia din nou aceste patru atribute: sursă, lățime, înălțime și text alternativ.

Să verificăm afișajul:

Desenul nostru a apărut exact acolo unde trebuia. Dar dacă ați observat, deși imaginea noastră are doar 307 pixeli lățime, browserul îi alocă întreaga linie. Foarte des apare sarcina de a face textul după ce imaginea să curgă în jurul lui, de exemplu. stătea pe aceeaşi linie cu ea. Această posibilitate există. Este implementat cu ajutorul unui familiar atributul de aliniere– aliniere.

Atributul align pentru a alinia o imagine

Acest atribut este aplicabil pentru eticheta noastră . Pentru această imagine putem specifica alinierea la dreapta ( dreapta), apoi imaginea va merge în partea dreaptă a ecranului, iar textul va curge în jurul ei în stânga. Sau putem specifica alinierea la stânga ( stânga) – apoi imaginea va merge în partea stângă a ecranului, iar textul va curge în jurul ei în partea dreaptă. Să setăm alinierea la stânga pentru eticheta noastră .

Acum să verificăm ce s-a întâmplat în browser.

Puteți vedea că textul se înfășoară în jurul imaginii din partea dreaptă, deoarece am dat imaginii o aliniere la stânga. Acum să schimbăm alinierea la marginea dreaptă.