Cum de a insera imaginea HTML și plasați aspectul său

Image - Poate că ei sunt cei care modelează înțelegerea noastră de bază a rețelei globale. Sunt de acord că informațiile grafice o persoană învață un întreg mult mai bine decât textul. Prin urmare, imaginile sunt o parte importantă a oricărui site și pagini web. Și așa vreau să-ți spun cum să inserați imaginea HTML.







În doar câțiva ani pe internet am găsit un număr de site-uri și servicii utile, care nu sunt direct legate de construirea site-ului și tema generală a acestui blog, dar am vrut doar sa le recomanda pentru tine:

Servicii de Cashback. cum ar fi Epn.bz și Letishops. Prima va economisi până la 15% pe Aliekspress iar al doilea stint cu Cash Back de mai mult de 1.000 de magazine online. bilete de avion, doar servicii excelente - Aviasales.ru. Căutări pe sute de site-uri și oferă toate opțiunile pentru bilete, puteți alege cel mai ieftin sau cele în care există mai puțin timp de călătorie. Ei au, de asemenea, o mare gloată. aplicații și plugin pentru browser.

Inserați imagini în HTML cu o etichetă

Cu siguranță știți că toate comenzile sunt executate în HTML utilizând tag-uri. Această imagine a venit cu o etichetă - . El este singur, adică, nu are porțiunea de acoperire.

Atribute suplimentare și dispunerea prin css

Deci, am digresiune de la subiect pentru a afișa imaginile pe care le este suficient pentru a specifica atributul src, dar design-ul are multe alte atribute.

  • lățime și înălțime - Lățimea și înălțimea imaginii. Acesta poate fi setat în atributele corespunzătoare din tag-ul img
  • alinia - alinierea în raport cu textul. Valoarea implicită este aliniat la stânga (stânga). De asemenea, puteți pune pe dreapta și în centru (dreapta, centru)
  • Alt - text alternativ, care va fi afișată în cazul în care utilizatorul a imaginilor dezactivat în browser. Este util să se completeze
  • titlu - practic la fel. Un fel de descriere a imaginii, care va fi afișată atunci când treceți peste ea
  • vspace și hspace - spațiu pe orizontală și verticală de restul conținutului imaginii. Atenție! Atributele sunt depășite, iar marjele mai bine stabilite de foaia de stil
  • clasa - clasa de stil, care se atașează de imagine și o pune pe unele stiluri






Astăzi, este recomandat să setați toți parametrii de apariție este prin css, așa cum este corect în ceea ce privește standardele. Să considerăm un exemplu:

Cum de a insera imaginea HTML și plasați aspectul său

Am pus o imagine frumos. Vreau deja să cânt, când mă uit la ea aici am atârnat pe clasa de imagine de previzualizare și poate acum cu css prin ea se referă la imagine.

Căptușeală previzualizare: 20px;
Margin: 10px;
Border: portocaliu solid 5px;
Transformare: skewX (10deg);
box-shadow: 0 0 15px 10px violet
>

Am adăugat o căptușeală internă și externă a imaginii, face un cadru și violet umbra neclară, precum și un pic transformat. Și asta e ceea ce sa întâmplat:

Cum de a insera imaginea HTML și plasați aspectul său

Ei bine? Acest lucru este în mod clar mai abrupt decât problema numai prin intermediul html?

Pentru a rezuma

Deci, pentru a afișa o imagine trebuie doar să scrie tag-ul img și oferă-l cu atributul src, care specifică calea către imaginea. Tot restul - este caracteristici avansate - alinierea, dimensiunea, text alternativ, rotație, cadre, etc.

În cele din urmă, toate acestea ar trebui să fie în mod ideal, prescris prin CSS. Acest lucru nu este de a seta dimensiunea atributele, și atârnă imaginea unui stil de clasă suplimentară, care va determina dimensiunea. Aceeași aliniere, care este în css se poate face cu proprietatea text-align. și un float unități plutitoare.