Inserarea unei imagini în HTML. Inserarea unui fișier grafic într-o pagină web

În acest material vă voi vorbi despre etichete HTML foarte importante pentru inserarea de imagini și grafice în pagină, deoarece fără aceasta este dificil să creați un site frumos și bun.

Imaginile vor face site-ul dvs. unic și îl vor face să iasă în evidență din mulțime. Cu toate acestea, rețineți că utilizarea excesivă a graficelor pe un site web poate fi un lucru rău.

Nu supraîncărcați pagina html cu imagini, pagina ar trebui să fie ușoară și să nu sperie vizitatorii. Vizitatorul trebuie să asimileze întotdeauna informațiile principale și să nu fie distras să insereze imagini în HTML doar acolo unde este necesar.

pe pagina Atribute eticheta BODY, am spus deja că imaginile pot fi fundalul unei pagini html, iar acum vă voi spune cum aceste imagini pot fi folosite la un nivel mai înalt decât fundalul.

Și astfel, pentru a insera o imagine într-o pagină HTML, veți avea nevoie de o etichetă , care are cel mai important atribut SRC. Acest atribut este necesar pentru a indica adresa imaginii. Să presupunem că trebuie să puneți o imagine imagine.jpg într-un loc pe o pagină html, iar imaginea noastră va fi localizată î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 știri, în același director sau folder există un subdirector (folder) pop, în care se află imaginea noastră imagine.jpg, apoi pentru a o insera trebuie să scrieți așa :

Pe lângă atributul src al etichetei Mai există câteva atribute opționale, dar importante:

width — lățimea imaginii (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 creșterea lungimii sau lățimii imaginii o poate distorsiona, ceea ce o va strica, de exemplu, o fotografie a unei persoane, în care proporțiile persoanei vor Schimbare.

După cum am scris deja, dimensiunile imaginii pot fi specificate atât în pixeli, cât și în procente. Permiteți-mi să vă dau doar un exemplu:

Un alt exemplu de cod html:

Există cazuri în care capacitatea de a afișa elemente grafice, inclusiv imagini, este dezactivată în browser și, pentru ca pagina dvs. să nu-și piardă sensul, folosiți atributul alt, în care scriem text alternativ dacă imaginea nu este încărcată în pagină. . cod html ca exemplu:

stânga - imaginea va fi situată în stânga, iar textul de lângă ea va fi în dreapta;
dreapta - imaginea va fi situată în dreapta, iar textul de lângă ea va fi în stânga.

Iată codul HTML:

Text lângă imagine.

iar browserul va scoate următoarele:

Text lângă imagine.

Cod HTML pentru valoarea corectă:

Text lângă imagine.

pagina html va arăta astfel:

Text lângă imagine.

Pentru a preveni înfășurarea 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 va înfășura implicit în partea dreaptă a imaginii și aproape se va închide. Dacă doriți ca textul să nu se înfășoare strâns î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 ca exemplu:

Aceasta este o imagine atât de frumoasă.

Încercați să vedeți singur ce se întâmplă în acest exemplu.

De asemenea, puteți crea un cadru în jurul imaginii utilizând atributul chenar și să specificați dimensiunea acestuia în pixeli. Cu cât valoarea este mai mare, cu atât cadrul din jurul imaginii este mai mare. Codul HTML va fi astfel:

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 spune cum să creați legături în HTML, precum și cum să faceți o imagine un link.

Data publicării: 15 mai 2012

26.06.2015

Salutare tuturor!
Continuăm să studiem cu sârguință elementele de bază ale HTML.
În această lecție vă voi spune, cum să inserați o imagine în HTML-document, cum să faci o imagine ca fundal, dimensiunea imaginii, înfășurarea textului în jurul unei imagini, cum să aliniați o imagine. Voi consolida toate posibilitățile enumerate cu exemple și rezultate.
Deci, imaginile de pe paginile web pot fi fie de fundal, fie obișnuite. Care este diferența dintre o imagine de fundal și o imagine obișnuită?

Imagine de fundal plasat ca fundal deasupra căruia puteți insera alte imagini, text, tabele etc.

Imagine normală va respinge alte elemente ale paginii (alte imagini, text, tabele etc.). Folosind exemplul, vei vedea și înțelege totul.
Pentru paginile web, se recomandă utilizarea formatelor de imagine JPEG (JPG), GIF și PNG.

○ Cum să faci o imagine ca fundal înHTML

Pentru a face o imagine ca fundal pentru o etichetă trebuie să specificați atributul „background”:

Acum să ne uităm la exemplul complet. Introduceți fișierul imagine „fon.jpg” lângă fișierul HTML.

și introduceți acest cod în fișierul HTML:

Jpg">

Rezultatul va fi astfel:

Atenţie

Nume gresit:

Nume corect:

○ Cum se introduce o imagine înHTML

Pentru a insera o imagine într-un document HTML, utilizați eticheta cu parametrul „src”, care specifică calea sau adresa către imagine.

Acum să ne uităm la exemplul complet. Introduceți fișierul imagine „kartinka.jpg” lângă fișierul HTML și scrieți acest cod în fișierul HTML:

Prima mea pagină HTML pentru site Buna ziua, aceasta este prima mea pagina de pe site.

Rezultatul va fi astfel:

Atenţie: Numele imaginii trebuie scris în latină, altfel imaginea nu va fi afișată.

Nume gresit:

Nume corect:

Cred că ai înțeles totul până acum. Acum să încercăm să combinăm cele două exemple împreună. Să creăm un fundal pentru pagina web, să inserăm o imagine și un text.

Jpg">

○ Cum să inserați o imagine dacă se află în folderul "img" sau "imagini"?

Dacă imaginea se află în folderul „img” sau „imagini”, atunci trebuie să specificați calea de la fișierul HTML la folderul „img” sau „imagini”, apoi introduceți doar numele imaginii cu extensia. Va arăta astfel:

Dacă fotografia se află pe alt site sau blog, atunci trebuie să indicați adresa site-ului și, dacă este necesar, folderul în care se află imaginea. Ei bine, desigur, trebuie să indicați numele imaginii cu extensia sa.

Postarea anterioară
Următoarea intrare

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.

Deci, 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:

Eticheta este unică, deci nu este nevoie să o închideți
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 cel mai bine este să scrieți „Bărbați și femei de diferite naționalități” în alt. Î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 privim 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 setează 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!

Salutări, Dmitri Kostin

Î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: mai întâi, este pregătit un fișier grafic de dimensiunea și formatul necesar, apoi este adăugat pe 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ționalitate, versatilitate, volum mic de fișiere sursă cu o calitate destul de bună, au servit bine aceste 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 este cel mai adesea numit: 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 dorit de pe pagina web (unde doriți să vedeți poza).

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 indentație 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.

Priviți cu atenție Listarea 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 vorbitorul precedent: scriu codul ca al tau, schimb doar numele fisierului: in loc de mers.1/jpeg inserez pe pagina doar o fereastra cu inscripție în partea de sus „Vedere din față a mașinii”, și nu există nicio imagine, în opinia mea, browserul nu poate găsi 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!

Salut 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 tau.

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 codurile și apoi să le lipiți, ci să le scrieți singur și totul va funcționa... aici este textul pozei mele

Ți-am copiat lista, mi-am lipit valorile - 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 să fie deschis într-un document HTML.

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

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Si eu am patit mult timp, reiese 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 inscriptionare!!! [email protected]

codul meu...nici nicio poza. Dosarul img se află în același folder cu index... vă rugăm să 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 Eu 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? iar, de altfel, pe pagină 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 tale:) 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 (imaginea) cu litere englezești. Multe servere nu acceptă alfabetul latin.

Dar iată ce este ciudat... în timp ce numeam folderului cu 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 site misto 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 poți face 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:

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împerechetă 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 paginii de către browser (browserul nu trebuie să calculeze independent aceste valori). 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ăți pagini - 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ă 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 zero: 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: