Adăugăm imagini pe pagina WEB, precum și video și audio! Cum să inserați o imagine în HTML - editare, aliniere, atribute
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. Un design bun de site 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
...
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.
...
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
...
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)
...
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
...
Rezultatul poate fi văzut chiar mai sus.
NotăAtributele border și bordercolor pot fi setate în stilurile CSS ale img:
...
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. Căptușeala din stânga este de 50 de pixeli, iar cea de sus este de 10 pixeli.
...
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
...
5. Cum să rotunjiți colțurile unei imagini
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.
Sperăm că acest articol vă va fi de folos. Lectura placuta!
Imaginile ne permit instantaneu să înțelegem cât de interesant poate fi un anumit site sau articol pentru noi, creează o stare de spirit și pot dezvălui un subiect într-un mod nou. Uneori, o fotografie valorează cât o mie de cuvinte.
Dar nu ar trebui să participați la ele dacă nu aveți Instagram sau un magazin online. Este recomandabil ca imaginile:
- au fost informative
- se potrivesc cu schema de culori a site-ului dvs
- erau potrivite
Dacă nu aveți o fotografie potrivită, puteți folosi așa-numita fotostock (bancă foto) - un loc în care sunt stocate multe fotografii, ilustrații și grafice vectoriale. Există o mulțime de astfel de resurse, poate ați auzit chiar despre una dintre cele mai mari - Shutterstock, dar descărcările de acolo sunt plătite.
Pentru cei cărora nu le place să plătească în exces, la finalul articolului v-am pregătit primă- o listă cu mai multe bănci de fotografii de unde puteți descărca o cantitate imensă de materiale frumoase de înaltă calitate absolut gratuit :)
Formate de imagine
Există în principal 3 tipuri de imagini utilizate pe World Wide Web:
gif(Format de schimb grafic - format de schimb de imagini)
Acesta este primul format care a început să fie folosit pe Internet. Avantajele acestui format sunt disponibilitatea animatiiși de dimensiuni reduse, pagina se încarcă rapid. În plus, susține transparența. Dezavantaj - folosit doar 256 de culori(de fapt, de aceea dimensiunea este mică), adică nu poate fi folosit pentru imagini color.
jpeg, aka jpg(Grupul mixt de experți fotografici - Grupul mixt de experți fotografici - acesta este numele organizației de dezvoltare)
potrivit pentru crearea de imagini pline de culoare, de înaltă calitate, fotografii. Dimensiunea unor astfel de imagini este mare, așa că de obicei plasează o sarcină mare pe server. Dacă trebuie să comprimați un jpeg (pentru o greutate mai mică a imaginii), vă recomandăm să luați dimensiunea imaginii finale multiplu de opt , deci pierderea calității va fi minimă.
png(Grafică de rețea portabilă - Grafică de rețea portabilă. Pronunțat la fel ca ping, adică )
acest format a fost dezvoltat inițial pentru web, adică Imaginea cântărește de obicei puțin și nu încetinește pagina la încărcare. Acest format a fost creat pentru a înlocui gif-ul învechit, dar, spre deosebire de acesta, nu acceptă animația. Png-8, ca și gif, folosește doar 256 de culori. Format png-24 acceptă 16 milioane de culori, deși este deja destul de greu. Png-32 conține același număr de culori ca png-24 și, în plus, vă permite să obțineți o imagine cu fundal transparent , și puteți regla gradul de transparență. Când reduceți dimensiunea png, nu există nicio pierdere a calității culorii.
Să rezumam
gif- pentru animație
jpeg- pentru fotografii
png- pentru icoane, butoane, fundaluri, logo-uri, capturi de ecran, desene, texte, fotografii cu fundal transparent
Inserarea unei imagini într-un fișier html
Pentru a adăuga o imagine pe pagină, utilizați etichetă
(din limba engleză imagine - imagine, imagine). Aceasta este o singură etichetă și nu necesită o etichetă de închidere. Această etichetă conține atribute în interior.
Atribut src(din sursa engleză - sursă) indică calea către fișier (locul în care se află imaginea). Dacă poza se află pe computerul tău (site-ul este încă în curs de dezvoltare) sau pe serverul tău, folosește un link relativ. Dacă imaginea este din rețea, atunci este necesară o legătură absolută. Citiți cum să faceți acest lucru în articolul „Link-uri”.
Deci, pentru a conecta o imagine la pagina dvs. web, trebuie să scrieți cod astfel:
atribut alt(din alternativa engleza - alternativa) indica textul pe care utilizatorul il va vedea daca imaginea nu se incarca. Calea este indicată incorect, imaginea a fost ștearsă, internet prost - pot exista multe motive și este de dorit ca persoana să înțeleagă ce se află în spatele acestei pictograme urâte.
Motoarele de căutare acordă o atenție deosebită să se asigure că acest atribut este completat. Iar validatorul html (o resursă pentru verificarea corectitudinii codului) va percepe absența atributului alt ca o eroare. Dacă toate atributele
În exemplul de mai jos, am specificat în mod deliberat o cale inexistentă pentru imagine, astfel încât să puteți vedea cum funcționează atributul alt
Înălțimea și lățimea imaginilor
De asemenea, puteți seta înălțimea și lățimea imaginii dacă imaginea originală este de ex. mai mult decât ai nevoie.
În HTML5 se recomandă să faceți acest lucru folosind CSS sau atribut de stil
, ca aceasta:
În acest exemplu, am luat 30% din lățime, nu din imaginea originală, ci din dimensiunea ferestrei browserului. Când lățimea = 100%, imaginea se deschide pe toată lățimea browserului. Amintiți-vă de această caracteristică la sută, ca unități de măsură.
Apropo, dacă am fi scris doar lățimea, rezultatul ar fi fost același, încercați:
< img src = „https://site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = "panda în copac" stil = "lățime: 30%;" > |
De asemenea, puteți seta lățimea și înălțimea în pixeli.În cazul panda nostru, ale cărui dimensiuni inițiale sunt 1196 x 796 pixeli, pentru ca animalul să nu sufere atunci când este comprimat, trebuie să menținem proporțiile și aici nu te poți lipsi de un calculator. Să presupunem că vrem să reducem dimensiunea imaginii de 3 ori, apoi trebuie să setăm dimensiunile la 399 x 265 pixeli.
Vă rugăm să rețineți că dacă mărim imaginea proporțional, atunci este suficient să specificați un singur parametru, de exemplu. lăţime. Browserul inteligent în sine va calcula dimensiunea completă a imaginii.
Încercați să rulați acest cod și uitați-vă la rezultat:
< img src = „https://site/tutorials/wp-content/uploads/2016/07/panda.jpg” alt = "panda în copac" stil = "lățime:399px;" > |
Setați întotdeauna dimensiunile imaginii. De obicei, imaginile durează mai mult să se încarce decât restul codului html. Dacă browserul știe cât spațiu trebuie rezervat pentru imagini, poate continua să încarce site-ul fără a aștepta încărcarea imaginilor.
Puțină naftalină
Dacă vi se întâmplă să modificați codul unui site creat în HTML-4 sau chiar mai devreme, veți observa că dimensiunile imaginilor sunt setate folosind atribute de lățime Și înălţime. Aceasta este o metodă depreciată, deși încă valabilă în HTML5. Cu toate acestea, vă recomandăm să folosiți stilul, deoarece Atributele lățimii și înălțimii pot fi afectate de stilurile interne sau externe care vor locui în browser sau în fișierul dvs. CSS. Vom intra în mai multe detalii despre acest lucru când ne uităm la CSS, dar deocamdată uită-te la un exemplu despre modul în care stilurile afectează atributele înălțime și lățime.
Există 3 file în această fereastră: pe prima vedeți codul html, pe al 2-lea cod CSS și pe ultima - ca întotdeauna, rezultatul. Aceasta funcționează ca și cum prima filă ar fi un fișier index.html, a doua un fișier style.css și a treia un browser. Deci, acum CSS-ul nostru spune că toate elementele cu eticheta img au o lățime de 100%. Dimensiunile implicite ale atributelor de lățime și înălțime sunt în pixeli, deci nu este nevoie să adăugați nicio unitate aici.
Diferența de rezultate este evidentă :)
De asemenea, în versiunile mai vechi de html au fost utilizate următoarele atribute:
alinia, care a fost folosit pentru a alinia imaginea orizontal sau vertical.
hspace- indentare în stânga și în dreapta imaginii față de conținutul din jur (de exemplu, text sau o imagine adiacentă)
vspace- indentare deasupra și dedesubt de la imagine la conținutul din jurul acesteia.
frontieră- setați grosimea cadrului din jurul imaginii (în mod implicit este zero)
În zilele noastre, toată această manipulare (și multe altele) se face folosind CSS, așa că am decis să nu vă deranjam aici. Dacă încă sunteți interesat de cum să lucrați cu aceste atribute, scrieți în comentarii, vom adăuga acest articol :)
Plasarea unei imagini în cod
De unde ne punem eticheta depinde de modul în care va fi afișat în browser.
Exemplul nr. 1 - înainte de paragraful:
Elemente precum
ȘI
a se referi la elemente de bloc
. Ele încep întotdeauna pe o linie nouă și ocupă toată lățimea disponibilă a ferestrei browserului. Daca esti pe primul loc ![]()
, iar după el un element de bloc, de exemplu un paragraf, va fi mutat pe linia următoare.
Exemplul nr. 2 - la începutul paragrafului
Acesta este un element inline, se potrivește în interiorul unui element bloc și nu începe o linie nouă. În exemplul de mai sus, textul se înfășoară în jurul imaginii, deoarece codul
înregistrată în interior
Legende pentru ilustrații
Pentru a marca sau semna o fotografie pe o pagină, utilizați etichetă
Etichetă
Vă rugăm să rețineți că, implicit, browserul are unele setări de stil pentru etichetă
Deci, tu și cu mine am învățat
- adăugați o imagine la pagină: folosind etichetă
- a învățat atributele necesare pentru această etichetă: src pentru a indica calea şi alt pentru a descrie imaginea
- înțelegeți ce format este mai bun și ce să utilizați: jpeg pentru fotografii, png pentru logo-uri și capturi de ecran, gif pentru animație
- cum să setați cel mai bine dimensiunile imaginii: folosind atribut de stil cu parametrii lăţimeȘi înălţime
- Ne-am dat seama cum va fi afișată imaginea în funcție de locul din cod: separat dacă se află în fața unui element bloc și cu un wrap dacă în interiorul unui element bloc (de exemplu
)
Și pentru a avea cu ce să lucrăm, trebuie să luăm aceste imagini de undeva, fără a încălca drepturile de autor ale nimănui.
Deci este timpul pentru un bonus :)
Lista băncilor de fotografii gratuite
Înainte de a începe, vă rugăm să rețineți că fiecare captură de ecran de aici este un link către site. Cum să faci imagini ca link-uri, citește articolul „Link-uri”.
Pe pixabay veți găsi 680 de mii de imagini gratuite pe orice subiect, care sunt distribuite sub licența Creative Commons CCO (CC Zero), adică. pot fi folosite, distribuite, modificate în orice scop, chiar comercial.
Banca de fotografii conține 390 de mii de fotografii și imagini gratuite. Este mai greu să găsești o imagine cool aici, dar există și exemple bune. Publicitatea băncilor foto plătite este destul de distragătoare. Am plasat această resursă pe locul doi datorită numărului de imagini, dar din punct de vedere al prieteniei probabil va fi ultima în clasamentul nostru.
Photostock are peste 250 de mii de fotografii gratuite, majoritatea de înaltă calitate. Puteți descărca chiar și fără înregistrare. Disponibil numai în engleză.
O mulțime de fotografii elegante licențiate sub CC Zero. Puteți descărca fără înregistrare. Această bancă de fotografii vă va înțelege și numai în engleză.
Site-ul a fost creat de un web designer indian care înțelege cât de dificil poate fi să găsești fotografii de înaltă calitate. Toate fotografiile au fost făcute de el personal și poți face ce vrei cu ele. Îi place să fotografieze alimente, desktop-uri, computere și tot felul de obiecte. Caută - numai în engleză.
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 se inserează 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 sprijini 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 îndepărta 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:
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 arata asa:
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.
Așadar, inserarea unei imagini în html este, de asemenea, una dintre cele mai importante componente, așa că oricine are de gând să facă 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 î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 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 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ă, în eticheta img trebuie utilizat atributul de aliniere. Valorile sunt aceleași ca și pentru atributul etichetă.
Î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
| 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ă. | vot(e)
