Erről az emberről csak annyit tudni
hogy nem volt börtönben, de hogy miért nem volt börtönben, azt nem tudni.
Mark Twain.

Ez a lecke arról szól hogyan lehet képet beszúrni HTML-be, hogyan kell megtervezni, hogyan lehet szöveget körbefűzni egy kép köré stb. Hiszen köztudott, hogy a képek vonzóbbá teszik a webhelyet, és különböznek a többi forrástól, így a címke és attribútumainak használatának lehetősége nagyon hasznos a modern interneten. De itt a fő az arányérzék!

A túl sok grafika megnehezíti a html oldalt, és ennek megfelelően megnöveli a betöltési idejét. Ezenkívül a nagyszámú kép jelenléte elvonja a látogatók figyelmét a webhely fő tartalmáról (kivéve természetesen, ha a grafika a webhely fő tartalma). Tehát tartsa mértékkel, és csak ott használja, ahol szükséges. És boldog leszel!

A leckében már beszéltem arról, hogyan használhatsz képeket egy HTML-dokumentum háttereként. Most beszéljünk arról, hogyan használják a grafikákat egy html oldal „felső rétegében”.

§ 1. Kép ​​beszúrása

Ha képeket szeretne beszúrni a HTML-be, használja a címkét IMG Val vel kötelező tulajdonság SRC. Ez az attribútum közli a böngészővel a képfájl elérési útját. Azok. kép beszúrásához logo.jpg névvel az oldalon egy bizonyos helyre (feltéve, hogy az oldal és a kép is található egy mappában(könyvtár)) a következő html kódot kell beszúrnia erre a helyre:

src="logo.jpg">

Ha a kép és az oldal itt található különböző könyvtárak (mappák), akkor meg kell adnia a kép elérési útját viszonylag oldalakat. Például, ha egy html oldal található a könyvtár (mappa) oldalon, ugyanabban a könyvtárban (mappában) van egy alkönyvtár (mappa) képek, amelyben a logo.jpg képünk található, akkor a beillesztéséhez szükséges írj így:

images/logo.jpg">

Vagy nem kell aggódnia, és nem kell rámutatnia a kép teljes címe. Például így:

http://www..png">

Ez utóbbi esetben a böngésző a következőképpen jeleníti meg a kódot:

Jegyzet. Ha a kép található a számítógépeden, de be szeretné szúrni az internetes oldalra, akkor nem lesz belőle semmi. Ehhez először át kell helyezni a képet egy helyre az interneten(Például, ). És az oldal kódjában tüntesse fel a teljes címet idáig képpel.

A kötelező attribútum mellett SRC a címkénél IMG Van még néhány opcionális attribútum. Nézzük meg őket közelebbről.

§ 2. A kép méretének megadása

Kezdjük azokkal az attribútumokkal, amelyek lehetővé teszik a beállítást kép méretei(pontosabban jelöljön ki helyet ezeknek a méreteknek az oldalakon). Itt vannak:

• szélesség- képszélesség pixelben vagy százalékban;


• magasság- a kép magassága pixelben vagy százalékban.

Ha ezeket az attribútumokat használja, akkor először helyet foglal le a grafikák számára, előkészíti a dokumentum elrendezését, megjeleníti a szöveget, és csak ezután tölti be a képet. Ugyanakkor a képet a kiválasztott méretű téglalapba helyezi, még akkor is, ha a kép tényleges szélessége és magassága nagyobb (tömörítés) vagy kisebb (nyújtás). Abban az esetben, ha ezeket az attribútumokat nem használja, a böngésző azonnal betölti a képet, és az azt követő szöveg és egyéb elemek megjelenítése késik.

A képek szélessége és magassága megadható pixelben (a kép mérete a képernyő felbontásától függetlenül állandó lesz) és százalékban (a kép mérete a felhasználó képernyőjének felbontásától függ). Például:

width="50" height="20">

width="10%" height="5%">

3. § Alternatív szöveg

Ha a felhasználó letiltotta a képek megjelenítését a böngésző beállításaiban, akkor a kép helyett alternatív szöveg jeleníthető meg, amely elmagyarázza, hogy milyen grafikának kell lennie. Ez az attribútum használatával érhető el ALT:

Ebben az esetben a böngésző helyet foglal az oldalon a képnek, de maga a kép helyett azt a szöveget jeleníti meg, amit az attribútum értékében ír. ALT:

Ismétlem, ez akkor fog megtörténni, ha a felhasználó letiltotta a grafika megjelenítését. Ha nem, a kép elrejti az alternatív szöveget.

§ 4. A kép igazítása

Egy már ismert attribútum használata igazítsa szabályozhatja a képek igazítását a html oldal egyéb elemeihez képest. Attribútumnál igazítsa Számos jelentése van, de jelenleg kettő érdekel minket leginkább:

• bal- a kép az oldal bal szélén található, a szöveg pedig a jobb oldalon körbefolyik;


• jobb- a kép az oldal jobb szélén található, a bal oldalon pedig a szöveg és egyéb elemek körbefolynak.

Például HTML kód

a böngésző így fog megjelenni

És ez a HTML kód:

így fog kinézni:

A kép körüli szöveg tördelésének leállításához használhatja a címkét BR(ismerős számunkra az előző, kb. szakaszból). A címkénél BR van egy attribútum egyértelmű, amely három értéket vehet fel:

• bal- állítsa le a szöveget a balra igazított képek körül;


• jobb- állítsa le a szöveg tördelését a jobbra igazított képek köré;


• minden- állítsa le a szöveget a balra és jobbra igazított képek körül.

A kép megjelenítéséért felelős HTML tag

• HTML kép Bármilyen kép lehet PNG, JPEG és GIF formátumban.
• HTML kód a képhez címke határozza meg .
• HTML kép lehet egy weboldal háttere.
• HTML kép hiperhivatkozásként definiálható.

A D\My_first_site\ mappában vagy bármely más mappában, ahol az index.html fájl található, helyezzen el egy képet, amelynek kiterjesztése, mondjuk, .jpg, nevezze el tetszés szerint, például xxx.

Kép beszúrása egy oldal HTML kódjába:

Címke - párosítatlan. Ügyeljen a zárás módjára.

Tulajdonságok és értékek

• - kötelező, jelzi a kép forrását.
• alt="" - alternatív szöveget határoz meg, egy olyan megjegyzést, amelyet egy keresőrobot olvas be, amikor egy weboldal tartalmát elemzi. Azt is ki kell jelölni.
• width="" - a kép szélességét pixelben adja meg.
• height="" - a kép magasságát adja meg pixelben.

Adja meg a tényleges méreteket – így megőrzi az eredeti képminőséget.

Webfejlesztéshez három formátumú képek használhatók: PNG (.png), JPEG (.jpg) és GIF (.gif). Az Adobe Photoshop egy speciális eszköz a weboldalak grafikájának készítésére. Használható az egyik képformátum másikba konvertálására.

HTML kép | Vízszintes és függőleges margók

vagy a vízszintes és függőleges távolság között kép és szöveg

Eredmény:

Tulajdonságok és értékek

• hspace="" - határozza meg vízszintes távolság a kép és a szöveg között.
• vspace="" - határozza meg függőleges távolság a kép és a szöveg között.

HTML háttérkép

vagy egy kép által meghatározott oldal hátterét

A következő képünk van:

Írjuk meg egy külön oldal kódját:

A háttér és a háttér-kép attribútumait itt tárgyaljuk.

Kép beszúrásaés sorrendje → ../images/primer-img.jpg → lásd.

HTML kép - link

Példa kód:

border="0" - törli a grafikus hivatkozás szegélyét.

vagy a képek középre állításának minden lehetséges módja

Példa kód:

Mire kell itt figyelni? → Először is, a méretek feltüntetése - ez felgyorsítja a kép betöltését. Másodszor, alt="" attribútumok vannak megadva, ami szintén nagyon kívánatos akkor is, ha nincs alternatív szöveg. Az első esetben a központosítást határozták meg HTML paramétert, a másodikban pedig a lépcsőzetes stíluslapok lineáris felvételét használva.

A vizuális rész az egyik legfontosabb szempont a webhelyekkel végzett munka során. Természetesen funkcionalitásban gyengébb, de nem szabad idő előtt leértékelni. Ma arról fogunk beszélni, hogyan telepíthet HTML-képet webhelyére. Erre csak egy lehetőség van, vagy több? Hogyan illeszthetek be egy HTML-képet a webhelyembe, hogy más felhasználók is láthassák? Mi a jobb erre a célra – szerver vagy számítógép? Mi az a HTML? Ezt a rövidítést a következőképpen lehet megfejteni: hypertext document markup language.

Ezen a nyelven alakul ki a leendő oldal alapja. Itt van kidolgozva az oldal összes fő elemének elhelyezése is. Ezután itt vannak beállítva az adatátvitelért és a lépcsőzetes stíluslapokért felelős php fájlok. Minden weboldal alapja a HTML. Ezen a nyelven a képbeállításokat is elvégezheti. Ezt a műveletet más módon is végrehajthatja, de ha valamilyen egyszerű objektum kezdeti betöltését kell biztosítania, akkor jobb, ha ezt használja. Kezdjük a HTML-kép beszúrásával kapcsolatos probléma feltárásával.

Hogyan kell használni az img tag-et?

Térjünk át a grafika használatának kérdésére. Hogyan lehet képet beszúrni egy HTML dokumentumba? Először is, ez a művelet egy fájl beszúrását jelenti külön oldalobjektumként. Az img címkét használják ehhez a kiegészítéshez. Ez a címke olyan sorközi elemekre vonatkozik, amelyek cserélhető tartalmat tartalmaznak. A hipertext jelölőnyelvnek csak négy részét tartalmazza. Az egyik az src, magasság, szélesség. A továbbiakban róluk fogunk beszélni. További részek: objektum, beágyazás, iframe. A címke úgy működik, mintha egy soron belüli eleme lenne. A különbség az, hogy idegen külső tartalom kerül felhasználásra és megjelenítésre. Ebben az esetben lennie kell egy harmadik féltől származó fájlnak, amely betöltődik. Ha kérdései vannak a háttérkép HTML-ben történő visszaállításával kapcsolatban, a legjobb, ha azonnal elveti őket. Csak akkor jelenik meg, ha az a számítógép fut, amelyen a kép található.

Az src attribútum használata

Dolgozunk a grafikus kép HTML dokumentumba történő beillesztésének problémáján. A betöltendő kép elérési útjának megadásához használja az src parancsot. Az általános séma a következő: ezt az attribútumot, az egyenlőségjelet kell használni, és be kell írnia a címet. Amikor a böngésző eléri a címkét a HTML elemzése közben, létrehoz egy területet, ahol a soron belüli elem megjelenik. A külső fájl a jövőben be lesz töltve. Ez az elérési út nem tartalmazhat hibákat, mivel a program ide fog menni. Ha ez a program nem találja meg a fájlt, egy hiba ikon jelenik meg, ami nem tűnik túl esztétikusnak.
Ahhoz, hogy egy képet beszúrhasson egy HTML-dokumentum táblázatába, be kell írnia az összes szükséges kódot a kívánt cellába.

Képbeállítások

Most már tudja, hogyan kell képet beszúrni a HTML-be. Gondoljuk át, hogyan konfigurálható. Amikor elkezdődik a fájl letöltése a felhasználó számítógépére, a rendszer automatikusan meghatározza a kép méretét. Ha a fájl kezdeti paraméterei nem egyeznek a kívántakkal, akkor ebben az esetben a pixelben megadott szélesség és magasság paraméterek segíthetnek. A kód ebben az esetben a következőképpen lesz írva: src, majd a fájl címe. Egy hasonló utasítás a szélességet is meghatározza, és beállítja a szélességet, aminek lennie kell. Az utolsó paraméter a magasság és a magasság. A webmesterek gyakran elkövetik a következő hibát: egy nagy fájlt töltenek fel a szerverre, amelynek mérete eléri a több MB-ot. Ezután az elérési út megírásra kerül, és a képet a kívánt méretre állítják be. Így a felhasználó láthatja, hogyan töltődik be egy kis kép nagyon lassan. Kívülről nem tűnik túl vonzónak.

Ajánlások a munkához

A negatív aspektusok elkerülése érdekében próbálja meg előre csökkenteni a kép méretét. Természetesen, ha nem biztos abban, hogy milyen paramétereket kell használnia a vonzó megjelenéshez, akkor egyszerűen készíthet másolatot, és kísérletezhet vele. A kép súlyának optimalizálásakor is fokozottan ügyelni kell. Csökkenteni kell a grafikai fájlok súlyát a minőség romlása nélkül a fájlok más kiterjesztésre való konvertálásával, speciális programok és online szolgáltatások használatával. Ezt nem csak a webhely felhasználói, hanem a webmester is értékelni fogják. Az ilyen fájlok kevesebb helyet foglalnak el a tárhelyen, és gyorsabban töltődnek be.

Példa a rögzítési képességekre

Nézzük meg, hogyan adhatja meg a kép elérési útját.

1. Csak a fájlnevet állítsa be;
2. Adja meg a helyi számítógépen (szerveren) található kép címét;
3. A fájl helyének részletes elérési útja, amely egy másik gazdagépen található.

Ha az első pont példáját használja, akkor a képnek ugyanabban a könyvtárban kell lennie. A második esetben a hely egy almappa az aktuális oldalhoz képest. A harmadik példa azt az abszolút elérési utat adja meg, ahol a keresett kép megtalálható. Utóbbi esetben érdemes odafigyelni a következőre: a kép bármely szerveren lehet, ha a htaccess fájlban nincs tiltva az ilyen felhasználás, de ha onnan töröljük, akkor a kép eltűnik az oldalunkról. A HTML nyelv sajátossága, hogy csak egy jelölődokumentum szükséges. Az összes többi összetevő letölthető harmadik fél szervereiről. Ezeket a módszereket gyakran használják a letöltési sebesség növelésére. Itt tudnia kell, hogyan kell használni ezt az eszközt.

Az alt és a cím célja

Mi a teendő, ha valamilyen oknál fogva a grafikus fájl nem töltődik be a HTML dokumentummal? Ha helytelenül van írva, akkor az alt attribútumot kell használnia. Ez az attribútum a kép alternatív ábrázolásának feladatát látja el. Tegyük fel, hogy a grafika nem töltődik be, de a böngésző akkor is létrehoz egy területet a kép számára. Erre olyan esetekben is szükség van, amikor a felhasználó betöltésre vár, és meg kell mutatni neki, hogy a program grafikák fogadására készül. A kísérőszöveg megjelenítéséhez a title attribútumot kell használni. Ez lényegében csak egy eszköztipp, és szinte minden látható HTML-elemen használható. Ez jó dolog, mert segít tisztázni néhány konkrét szempontot. Az ebben az alcímben megadott két attribútum használata a következő: a korábban tárgyalt példához a magasság után először az alt, majd a cím szerepel. A webhely promóciójára is pozitív hatással lehetnek. Emiatt érdemes folyamatosan kulcsszavakat használni bennük. Ez javítani fogja az erőforrás rangsorolását a keresőmotorok képszolgáltatásaiban és a webhelyek értékelésében. Mindenben azonban ragaszkodnia kell az ésszerűséghez és az óvatossághoz.

Képek igazítása

Az align attribútumot mind a négy korábban említett jelölőnyelvi elemhez bevezették. Ezzel az attribútummal könnyen megváltoztathatja a kép helyét. Alapértelmezés szerint az aljára van igazítva. az alsó felelős ezért. Hogyan készítsünk felső igazítást? Ehhez a felsőt kell használni. A gyakorlatban ez így fog kinézni: az src attribútum után, ahol a felhasználó megadja a kép címét, hozzáadódik az align attribútum és annak értéke. Abban a sorban, amelyben a kép található, a kép a felső széléhez igazodik. Hogyan lehet egy képet középre helyezni HTML-ben? Van egy másik lehetőség a kép igazítására: középen. Ennek a funkciónak a használata alapvetően nem változtat semmit.

A kód használatakor a kép középre igazodik. A szöveget a kép körül áramolhatja. A bal és jobb attribútumok erre szolgálnak. Ilyenkor a kép lebegővé válik. A Shift balra ugyanúgy néz ki, mint a többi írásmód. A megfelelő attribútum használata hasonló eredményt ad, de egy különbséggel: a kép jobbra kerül. Ezeknek a szerkezeteknek megvannak a maga sajátosságai. Például az egyik fontos probléma az, hogy a szöveg túl közel van a képhez. Ennek eredményeként úgynevezett tapadó hatás jön létre, ami nagyon kellemetlen a szem számára. Ez HTML kód vagy lépcsőzetes stíluslap használatával javítható. Az ilyen változtatásokhoz a hspace és a vspace attribútumokat kell használni. Az első a jobb és bal oldali margókat, a második pedig az alsó és a felső margót állítja be.

Hogyan állítsunk be hátteret

Amikor képet szúr be egy HTML webhelyoldalba, a background attribútum nagyon hasznos. Ez az attribútum a body elem része. A cél egy grafikus fájl elérési útjának beállítása, amely külön cellát, táblázatot vagy oldalt tölt ki. Ennek az objektumnak a gyakorlati használata a következőképpen néz ki: a felhasznált kép címe a bodybackground paraméter értékeként kerül kiírásra. Az így beállított háttérkép megismétlődik az abszcissza és az ordináta tengely mentén, a bal felső saroktól kezdve.

Reméljük, hogy ez a cikk hasznos lesz az Ön számára. Jó olvasást!

A képek azonnal megértik, mennyire érdekes lehet számunkra egy adott oldal, cikk, hangulatot varázsolnak, új módon tárnak fel egy témát. Néha egy fotó többet ér ezer szónál.

De ne vegyen részt bennük, ha nincs Instagramja vagy online áruháza. Célszerű, hogy a képek:

• informatívak voltak
• illeszkedjen webhelye színsémájához
• megfelelőek voltak

Ha nem rendelkezik megfelelő fotóval, használhatja az ún photostock (fotóbank) - egy hely, ahol sok fényképet, illusztrációt és vektorgrafikát tárolnak. Nagyon sok ilyen forrás létezik, talán még az egyik legnagyobbról - a Shutterstockról is hallottál, de ott a letöltések fizetősek.

Azok számára, akik nem szeretnek túlfizetni, a cikk végén elkészítettük bónusz- számos fotóbank listája, ahol rengeteg kiváló minőségű, gyönyörű anyagot tölthet le teljesen ingyen :)

Képformátumok

A világhálón főként 3 féle képet használnak:

gif(Grafikus csereformátum - képcsere formátum)

Ez az első formátum, amelyet elkezdtek használni az interneten. Ennek a formátumnak az előnyei a rendelkezésre állás animációkés kis méretű, az oldal gyorsan betöltődik. Ezenkívül támogatja az átláthatóságot. Hátránya - csak használt 256 szín(valójában ezért kicsi a méret), pl. nem használható színes képekhez.

jpeg, más néven jpg(Közös fotószakértői csoport - Közös Fényképészeti Szakértői Csoport - ez a fejlesztő szervezet neve)

alkalmas színes, jó minőségű képek készítésére, fényképeket. Az ilyen képek mérete nagy, ezért általában nagy terhelést jelentenek a szerveren. Ha jpeg-et kell tömörítenie (kisebb képsúly érdekében), javasoljuk, hogy a végső kép méretét vegye fel a nyolc többszöröse , így a minőségromlás minimális lesz.

png(Hordozható hálózati grafika - Hordozható hálózati grafika. Ugyanúgy ejtik, mint a ping, azaz. )

ezt a formátumot eredetileg a webre fejlesztették ki, i.e. A kép általában keveset nyom, és betöltéskor nem lassítja az oldalt. Ezt a formátumot az elavult gif lecserélésére hozták létre, de vele ellentétben nem támogatja az animációt. Png-8, mint a gif, csak 256 színt használ. Formátum png-24 16 millió színt támogat, bár már elég nehéz. Png-32 ugyanannyi színt tartalmaz, mint a png-24, és emellett lehetővé teszi a kép elkészítését átlátszó háttérrel , és beállíthatja az átlátszóság mértékét. A png méret csökkentése esetén nem csökken a színminőség.

Foglaljuk össze

gif- animációhoz

jpeg- fényképekhez

png- átlátszó hátterű ikonokhoz, gombokhoz, hátterekhez, logókhoz, képernyőképekhez, rajzokhoz, szövegekhez, fényképekhez

Kép beszúrása html fájlba

Kép hozzáadásához az oldalhoz használja a címke (az angol képből - kép, kép). Ez egyetlen címke, és nincs szüksége záró címkére. Ez a címke attribútumokat tartalmaz.

Tulajdonság src(az angol forrásból - forrás) jelzi a fájl elérési útját (a kép helyét). Ha a kép a számítógépén van (az oldal még fejlesztés alatt áll) vagy a szerverén, használjon relatív hivatkozást. Ha a kép a hálózatról származik, akkor abszolút hivatkozásra van szükség. Olvassa el, hogyan kell ezt megtenni a "Linkek" cikkben.

Tehát egy kép weboldalához való csatlakoztatásához a következő kódot kell írnia:

alt attribútum(az angol alternatívából - alternatív) azt a szöveget jelöli, amelyet a felhasználó látni fog, ha a kép nem töltődik be. Az útvonal helytelenül van feltüntetve, a kép törölve, rossz internet - sok oka lehet, és kívánatos, hogy a személy megértse, mi rejlik a gyűlölt ikon mögött.

A keresőmotorok kiemelt figyelmet fordítanak annak biztosítására, hogy ez az attribútum ki legyen töltve. A html validátor (a kód helyességének ellenőrzésére szolgáló erőforrás) pedig hibaként fogja fel az alt attribútum hiányát. Ha az összes attribútumot ki lesz töltve, és lehetőség szerint kulcsszavakat is tartalmaz – az oldal láthatósága jelentősen megnő, pl. gyakrabban jelenik meg a keresésekben. Ez a SEO területéről származik, és ebben a szakaszban már elég, ha tudjuk, hogy van ilyen attribútum, és egy „élő” oldalon ki kell tölteni. Amíg az oldal a lemezünkön van, üresen is hagyható.

Az alábbi példában szándékosan adtunk meg egy nem létező elérési utat a képhez, így láthatja, hogyan működik az alt attribútum

A képek magassága és szélessége

A kép magasságát és szélességét is beállíthatja, ha az eredeti kép pl. több a kelleténél.

HTML5-ben ezt CSS ill stílus attribútum , mint ez:

Ebben a példában nem az eredeti kép szélességének 30%-át vettük fel, hanem a böngészőablak méretét. Ha szélesség = 100%, a kép a böngésző teljes szélességében nyílik meg. Emlékezzen erre a funkcióra százalék, mint mértékegységek.

Egyébként, ha csak a szélességet írtuk volna, az eredmény ugyanaz lett volna, próbáld meg:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda a fán" style = "szélesség:30%;" >

Beállíthatja a szélességet és a magasságot is pixel. Pandánk esetében, melynek eredeti mérete 1196 x 796 pixel, hogy az állat ne szenvedjen a tömörítéstől, be kell tartani az arányokat, és itt nem nélkülözhető a számológép. Tegyük fel, hogy a kép méretét 3-szorosára szeretnénk csökkenteni, akkor a méreteket 399 x 265 pixelre kell beállítani.

Kérjük, vegye figyelembe, hogy ha arányosan nagyítjuk a képet, akkor elegendő például csak egy paramétert megadni. szélesség. Az intelligens böngésző maga számítja ki a kép teljes méretét.

Próbáld meg futtatni ezt a kódot, és nézd meg az eredményt:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda a fán" style = "width:399px;" >

Mindig állítsa be a kép méreteit. A képek betöltése általában hosszabb ideig tart, mint a html-kód többi részének. Ha a böngésző tudja, hogy mennyi helyet foglaljon a képek számára, akkor folytathatja az oldal betöltését anélkül, hogy megvárná a képek betöltését.

Egy kis molygombóc

Ha véletlenül trükközik egy HTML-4-ben vagy még korábban létrehozott webhely kódjával, észreveheti, hogy a képméretek speciális beállításokkal vannak beállítva. szélesség attribútumok És magasság. Ez egy elavult módszer, bár még mindig érvényes a HTML5-ben. Javasoljuk azonban a stílus használatát, mert A szélesség és magasság attribútumokat befolyásolhatják a belső vagy külső stílusok, amelyek a böngészőben vagy a CSS-fájlban fognak megjelenni. Erről részletesebben fogunk kitérni, ha megnézzük a CSS-t, de most nézzünk meg egy példát arra, hogy a stílusok hogyan befolyásolják a magasság és szélesség attribútumokat.

Ebben az ablakban 3 fül található: az elsőn a html kód, a 2. CSS kódon, az utolsón pedig – mint mindig – az eredmény. Ez úgy működik, mintha az első lap egy index.html fájl lenne, a második egy style.css fájl, a harmadik pedig egy böngésző. Tehát most a CSS-ünk azt mondja, hogy az img címkével rendelkező összes elem szélessége 100%. A szélesség és magasság attribútumok alapértelmezett méretei pixelben vannak megadva, így itt nem kell egységeket hozzáadni.

Az eredmények között szembetűnő a különbség :)

A html régebbi verzióiban is a következő attribútumokat használták:

igazítsa, amely a kép vízszintes vagy függőleges igazítására szolgált.

hspace- behúzás a kép bal és jobb oldalán a környező tartalomhoz (például szöveghez vagy egy szomszédos képhez)

vspace- behúzás fent és lent a képtől a körülötte lévő tartalomig.

határ- állítsa be a kép körüli keret vastagságát (alapértelmezés szerint nulla)

Manapság mindezt a manipulációt (és még sok mást) a CSS segítségével végzik, ezért úgy döntöttünk, hogy itt nem zavarjuk Önt ezzel. Ha továbbra is érdekel, hogyan dolgozz ezekkel az attribútumokkal, írd meg a megjegyzésekben, mi hozzáadjuk ezt az elemet :)

Kép elhelyezése a kódban

Ahonnan a címkénket elhelyezzük attól függ, hogyan jelenik meg a böngészőben.

1. példa – a bekezdés előtt:

Olyan elemek, mint pl

ÉS

hivatkozni blokk elemek . Mindig új sorban kezdődnek, és a böngészőablak teljes elérhető szélességét elfoglalják. Ha az első helyen , és utána egy blokkelem, például egy bekezdés, a következő sorba kerül.

2. példa – a bekezdés elején

Ez egy beépített elem, elfér egy blokk elemen belül, és nem kezd új sort. A fenti példában a szöveg körbeveszi a képet, mert a kód belül regisztrálva

Feliratok az illusztrációkhoz

Egy oldalon lévő fénykép megjelöléséhez vagy aláírásához használja a címke

(angol ábra - rajz). Ez a címke azt jelzi, hogy olyan tartalom kerül elhelyezésre, mint például illusztrációk, fényképek, diagramok stb.

Címke