Hogyan fonja be a szöveget egy kép körül

Nézzen meg bármelyik weboldalt, és látni fogja a szöveges tartalom és képek kombinációját. Mindkét elem alapvető eleme a weboldal sikerének. A szöveges tartalom az, amit a látogatók olvasni fognak, és milyen keresőmotorok fognak használni a rangsorolási algoritmusok részeként. A képek vizuális érdeklődést mutatnak a webhelyhez, és segítenek kiemelni a szöveges tartalmat.

A szövegek és képek weboldalakhoz való hozzáadása egyszerű. A szöveget a szabványos HTML címkékkel, például bekezdésekkel, címekkel és listákkal egészítik ki, míg a képek az elemre kerülnek. Miután hozzáadta a képet a weblapjához, előfordulhat, hogy a szöveg melletti szövegeket a kép mellett szeretné elhelyezni, nem pedig az alatta lévő sorrendet (ez az alapértelmezett módja annak, hogy a HTML kódhoz hozzáadott kép megjelenjen a böngészőben). Technikailag kétféleképpen érheted el ezt a megjelenést: CSS (ajánlott) vagy a vizuális utasítások közvetlen hozzáadásával a HTML-be (nem ajánlott, mert meg szeretné őrizni a stílus és struktúra szétválasztását az Ön webhelyén).

A CSS használata

A helyes módja annak, hogy megváltoztassuk az oldal szövegének és képének elrendezésének módját, és hogyan jelenik meg a böngésző vizuális stílusa a CSS-ben . Ne felejtsd el, mivel az oldalon látható vizuális változásról van szó (a kép körül egy szöveg megjelenése), ez azt jelenti, hogy a Cascading Style Sheets domainje.

1. Először is, adja hozzá a képet a weboldalához. Ne feledje, hogy kizárja a vizuális jellemzőket (például a szélesség és a magasság értékeit) a HTML-ből. Ez fontos, különösen egy olyan érzékeny weboldalon, ahol a képméret a böngésző alapján változik. Bizonyos szoftverek, például az Adobe Dreamweaver, hozzáadják a szélesség és a magasság információit az adott eszközzel beillesztett képekhez, ezért távolítsa el ezeket az információkat a HTML kódból! Biztos azonban benne, hogy tartalmazza a megfelelő alt szöveget . Íme egy példa arra, hogyan nézhet ki a HTML kód:
2. A styling célokra egy osztályt is hozzáadhat egy képhez. Ezt az osztályértéket használjuk a CSS-fájlunkban. Megjegyezzük, hogy az itt használt érték önkényes, bár ebben a stílusban hajlamosak vagyunk a "bal" vagy a "jobb" értékek használatára, attól függően, hogy milyen módon szeretnénk igazítani a képünket. Úgy találjuk, hogy az egyszerű szintaxis jól működik, és könnyű lehet azok számára, akiknek a jövőben meg kell érteniük egy webhelyet, de megadhatjátok ezt a kívánt osztályértéket.
   2. Önmagában ez az érték nem fog semmit tenni. A kép nem lesz automatikusan a szöveg bal oldalán. Ehhez a CSS-fájlunkra kell fordulnunk.

1. A stíluslapon most hozzáadhatja a következő stílust:
   1. .balra {
   2. balra lebeg;
   3. párnázottság: 0 20px 20px 0;
   4. }
   5. A CSS "float" tulajdonsága , amit itt csinált, a normál dokumentumáramlásból húzza ki a képet (ahogyan a kép normálisan megjelenik, a szöveg alatta lévő szöveggel), és a tartály bal oldalához igazítja azt . A HTML-jelölés után megjelenő szöveg most körülveszi. Hozzáadtunk néhány kitöltési értéket is, hogy ez a szöveg nem, hanem közvetlenül a kép ellen. Ehelyett lesz néhány szép térköze, ami vizuálisan vonzó lesz az oldal kialakításában. A CSS rövidítéséhez a párnázáshoz 0 értéket adtunk a kép felső és bal oldalához, és 20 képpontot a bal és az alsó részhez. Ne feledje, hozzá kell adnia a bal oldali kép jobb oldalát. Egy jobb oldali kép (amelyet egy pillanatra megnézünk) a padlólapra helyezve lenne.
2. Ha weboldalát böngészőben látja, akkor most látnia kell, hogy a kép az oldal bal oldalához igazodik, és a szöveg szépen körülveszi. Egy másik módja annak, hogy ezt mondják, hogy a kép "lebegett balra".

1. Ha módosítani szeretné ezt a képet a jobb oldali igazításhoz (például a cikkhez mellékelt fotós példában), egyszerű lenne. Először meg kell győződnie arról, hogy a "bal" osztály értékéhez hozzáadott stílusunk mellett a CSS-hez hozzáadunk egy jobb oldali beállítást is. Ez így fog kinézni:
   1. .jobb {
   2. úszó: jobb;
   3. párnázottság: 0 0 20px 20px;
   4. }
   5. Láthatja, hogy ez közel azonos az általunk írt első CSS-hez. Az egyetlen különbség az a "Float" tulajdonság és az általunk használt párnázási érték (hozzáadva a jobb oldali képhez a jobb oldali képhez).
2. Végül megváltoztatná a kép osztályának értékét a "bal" -ról "jobbra" a HTML-ben:
3. Nézd meg most az oldaladat a böngészőben, és a képed jobbra igazítva legyen, a szöveg pedig szépen körbefedve. Mindkét stílust "balra" vagy "jobbra" adjuk hozzá minden stíluslapunkhoz, hogy szükség esetén ezeket a vizuális stílusokat használhassuk, amikor weboldalakat készítünk. Ez a két stílus olyan szép, újrafelhasználható funkciókká válik, amelyekkel bármikor megfordíthatunk, amikor a szövegeket körülölelő képeket meg kell adnunk.

CSS helyett HTML használata (és miért nem kellene ezt tennie)

Annak ellenére, hogy a szöveg HTML-vel és stílusával (HTML) és stílusával (CSS) fenntartható, a webes szabványok diktálják a CSS-t (és a fenti lépéseket). Ez különösen akkor fontos, ha figyelembe vesszük, hogy bizonyos eszközök és elrendezések esetén a szövegnek nem kell áramlani a kép körül. A kisebb képernyőkön a reagáló weboldal elrendezése megkövetelheti, hogy a szöveg valóban összehangolódjon a kép alatt, és hogy a kép a teljes szélességet nyújtja. Ez könnyen elvégezhető a média lekérdezésekkel, ha a stílusok elkülönülnek a HTML-jelöléstől. A mai multi-eszköz-világban, ahol a képek és a szöveg különbözőképpen jelenik meg a különböző látogatók és a különböző képernyőkön, ez a szétválasztás elengedhetetlen egy weboldal hosszú távú sikeréhez és kezeléséhez.