Ako obaliť text okolo obrázka

Pozrite sa na ľubovoľnú webovú stránku a uvidíte kombináciu textového obsahu a obrázkov. Oba tieto prvky sú dôležitými zložkami úspechu webovej stránky. Textový obsah je to, čo návštevníci stránok čítajú a ktoré vyhľadávacie nástroje budú používať ako súčasť ich algoritmov na hodnotenie. Obrázky pridajú vizuálny záujem o stránky a pomôžu zdôrazniť obsah textu.

Pridávanie textu a obrázkov na webové stránky je jednoduché. Text sa pridáva so štandardnými značkami HTML, ako sú odseky, nadpisy a zoznamy, zatiaľ čo obrázky sú umiestnené na stránke s prvkom . Po pridaní obrázka na svoju webovú stránku však možno budete chcieť mať textový tok vedľa obrázka, a nie pod ním zarovnať (čo je predvolený spôsob, ako sa v prehliadači zobrazí obrázok pridaný do HTML kódu). Z technického hľadiska môžete tento vzhľad dosiahnuť dvoma spôsobmi, a to buď pomocou CSS (odporúčané), alebo pridaním vizuálnych pokynov priamo do HTML (neodporúča sa, pretože chcete zachovať oddelenie štýlu a štruktúry vašich webových stránok).

Používanie CSS

Správny spôsob, ako zmeniť spôsob rozloženia textu a obrázkov stránky a ako sa v prehliadači zobrazujú ich vizuálne štýly, je pomocou CSS . Len si pamätajte, pretože hovoríme o vizuálnej zmene na stránke (vytváranie textu okolo obrázka), čo znamená, že je to doména kaskádových štýlov.

1. Najprv pridajte obrázok na svoju webovú stránku. Nezabudnite vylúčiť akékoľvek vizuálne vlastnosti (ako sú hodnoty šírky a výšky) z daného kódu HTML. To je dôležité, najmä pre citlivé webové stránky, kde veľkosť obrázka sa bude líšiť v závislosti od prehliadača. Určitý softvér, napríklad program Adobe Dreamweaver, pridá informácie o šírke a výške do obrázkov, ktoré sú vložené do tohto nástroja. Nezabudnite preto odstrániť tieto informácie z kódu HTML! Nezabudnite však zahrnúť príslušný text . Tu je príklad toho, ako môže vyzerať váš HTML kód:
2. Na účely stylingu môžete do obrázka pridať aj triedu. Táto hodnota triedy je to, čo budeme používať v našom súbore CSS. Všimnite si, že hodnota, ktorú tu používame, je ľubovoľná, aj keď pre tento konkrétny štýl máme tendenciu používať hodnoty "ľavého" alebo "správneho", v závislosti od toho, akým spôsobom chceme, aby sa náš obrázok zosúladil. Zistili sme, že jednoduchá syntax funguje dobre a je ľahké pre ostatných, ktorí budú musieť spravovať stránky v budúcnosti, aby pochopili, ale môžete im dať akúkoľvek hodnotu triedy, ktorú chcete.
   2. Samotná hodnota triedy nič neurobí. Obraz nebude automaticky zarovnaný na ľavej strane textu. Preto sa teraz musíme obrátiť na náš súbor CSS.

1. V štýle šablón môžete teraz pridať nasledujúci štýl:
   1. .left {
   2. plavák: vľavo;
   3. polstrovanie: 0 20px 20px 0;
   4. }
   5. Čo ste urobili tu je použitie CSS "float" vlastnosť , ktorá bude vytiahnuť obrázok z bežného toku dokumentov (tak, ako by sa obraz normálne zobrazil s text zarovnaný pod ním) a bude zarovnať na ľavú stranu svojho kontajnera , Text, ktorý sa po ňom nachádza v značke HTML, sa teraz obklopuje. Pridali sme aj niektoré hodnoty výplne tak, aby tento text nebol priamo proti obrázku. Namiesto toho bude mať pekné medzery, ktoré budú vizuálne atraktívne v dizajne stránky. V stĺpci CSS na čalúnenie sme pridali 0 hodnôt na hornú a ľavú stranu obrázka a 20 pixelov doľava a dole. Nezabudnite, že musíte pridať nejaké polstrovanie na pravej strane ľavého zarovnania obrázku. Právo zarovnaný obrázok (ktorý sa budeme pozerať na chvíľu) by mal padding aplikovaný na jeho ľavej strane.
2. Ak si prezeráte svoju webovú stránku v prehliadači, mali by ste teraz vidieť, že váš obrázok je zarovnaný s ľavou stranou stránky a text sa pekne obklopí okolo neho. Ďalším spôsobom, ako povedať, je to, že obraz je "posunutý doľava".

1. Ak by ste chceli tento obrázok zmeniť tak, aby bol zarovnaný vpravo (ako na príklade fotografie, ktorý je priložený k tomuto článku), bolo by to jednoduché. Po prvé, musíte sa uistiť, že okrem štýlu, ktorý sme práve pridali do našej CSS pre hodnotu triedy "vľavo", máme tiež jeden pre zarovnanie vpravo. Vyzeralo by to takto:
   1. .správny {
   2. plavák: vpravo;
   3. polstrovanie: 0 0 20px 20px;
   4. }
   5. Môžete vidieť, že je to takmer totožné s prvým CSS, ktorý sme napísali. Jediným rozdielom je hodnota, ktorú používame pre vlastnosť "float" a hodnoty výplne, ktoré používame (pridanie niektorých na ľavú stranu nášho obrázka namiesto na pravý).
2. Nakoniec by ste zmenili hodnotu triedy obrázkov z "doľava" na "vpravo" vo vašom HTML:
3. Pozrite sa teraz na svoju stránku v prehliadači a obrázok by mal byť zarovnaný na pravej strane s textom, ktorý by sa okolo neho obalil. Máme tendenciu pridať oba tieto štýly "ľavý" a "správny" do všetkých našich šablón štýlov, aby sme mohli tieto vizuálne štýly použiť podľa potreby pri vytváraní webových stránok. Tieto dva štýly sa stávajú príjemnými a opätovne použiteľnými funkciami, na ktoré sa môžeme obrátiť vždy, keď potrebujeme štýlové obrázky s obalom textu okolo nich.

Používanie kódu HTML namiesto CSS (a prečo by ste to nemali robiť)

Hoci je možné obaliť text okolo obrázka s HTML, webové štandardy diktujú, že CSS (a kroky uvedené vyššie) je spôsob, ako ísť, aby sme mohli zachovať oddelenie štruktúry (HTML) a štýlu (CSS). Toto je obzvlášť dôležité, ak si myslíte, že pre niektoré zariadenia a rozloženia nemusí tento text pretekať okolo obrázka. Pri menších obrazovkách môže rozloženie odpovedajúceho webu vyžadovať, aby sa text skutočne zarovnal pod obrázkom a aby sa obraz roztiahol po celej šírke obrazovky. To sa dá ľahko vykonať pomocou mediálnych dopytov, ak sú vaše štýly oddelené od značky HTML. V dnešnom svete s viacerými zariadeniami, kde sa obrázky a text zobrazia iným spôsobom pre rôznych návštevníkov a na rôznych obrazovkách, je toto oddelenie nevyhnutné pre dlhodobý úspech a správu webovej stránky.