Všetko, čo je o tomto mužovi známe, je
že nebol vo väzení, ale prečo nebol vo väzení, nie je známe.
Mark Twain.

Toto je lekcia o ako vložiť obrázok do HTML, ako ho navrhnúť, ako obtočiť text okolo obrázka atď. Koniec koncov, je známe, že obrázky robia stránku atraktívnejšou a odlišujúcou sa od iných zdrojov, takže možnosť používať značku a jej atribúty je na modernom internete veľmi užitočná. Ale hlavná vec je tu zmysel pre proporcie!

Prebytok grafiky spôsobí, že html stránka bude ťažšia, a tým sa zvýši jej čas načítania. Prítomnosť veľkého množstva obrázkov navyše odvedie pozornosť návštevníkov od hlavného obsahu stránky (pokiaľ samozrejme nie je hlavným obsahom stránky grafika). Držte ho preto s mierou a používajte ho len tam, kde je to potrebné. A budete šťastní!

V lekcii o som už hovoril o tom, ako môžete použiť obrázky ako pozadie dokumentu HTML. Teraz si povedzme, ako sa používa grafika v „vrchnej vrstve“ html stránky.

§ 1. Ako vložiť obrázok

Ak chcete vložiť obrázky do HTML, použite značku IMG s povinné atribút SRC. Tento atribút informuje prehliadač o ceste k súboru obrázka. Tie. vložiť obrázok s názvom logo.jpg na určité miesto na stránke (za predpokladu, že stránka aj obrázok sú umiestnené v jednom priečinku(adresár)) musíte na toto miesto vložiť nasledujúci html kód:

src="logo.jpg">

Ak sa obrázok a stránka nachádzajú v rôzne adresárov (priečinkov), potom je potrebné zadať cestu k obrázku pomerne stránky. Napríklad, ak sa html stránka nachádza v adresári (priečinku), v tom istom adresári (priečinku) je podadresár (priečinok) obrázky, v ktorom sa nachádza náš obrázok logo.jpg, na jeho vloženie je potrebné napíš takto:

images/logo.jpg">

Alebo sa nemusíte báť a upozorňovať úplná adresa obrázku. Napríklad takto:

http://www..png">

V druhom prípade prehliadač zobrazí kód takto:

Poznámka. Ak sa obrázok nachádza na vašom počítači, ale chcete ho vložiť na internetovú stránku, tak z toho nič nebude. Ak to chcete urobiť, musíte najprv presunúť obrázok na nejaké miesto na internete(Napríklad, ). A v kóde stránky uveďte celú adresu až do tohto bodu s obrázkom.

Okrem požadovaného atribútu SRC pri značke IMG Existuje niekoľko ďalších voliteľných atribútov. Poďme sa na ne pozrieť bližšie.

§ 2. Určenie veľkosti obrázka

Začnime atribútmi, ktoré umožňujú nastavenie rozmery obrazu(presnejšie, vytýčte priestor pre tieto rozmery na stránkach). Tu sú:

• šírka- šírka obrázka v pixeloch alebo percentách;


• výška- výška obrázka v pixeloch alebo percentách.

Ak sa použijú tieto atribúty, najprv pridelí priestor grafike, pripraví rozloženie dokumentu, zobrazí text a až potom načíta obrázok. Zároveň umiestni obrázok do obdĺžnika zvolenej veľkosti, a to aj v prípade, že skutočná šírka a výška obrázka je väčšia (kompresia) alebo menšia (roztiahnuť). V prípade, že tieto atribúty nie sú použité, prehliadač načíta obrázok okamžite a zobrazenie textu a ďalších prvkov za ním bude oneskorené.

Šírka a výška obrázkov môže byť špecifikovaná v pixeloch (veľkosť obrázka bude konštantná bez ohľadu na rozlíšenie obrazovky) a v percentách (veľkosť obrázka bude závisieť od rozlíšenia obrazovky používateľa). Napríklad:

width="50" height="20">

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

§ 3. Alternatívny text

Ak si používateľ v nastaveniach prehliadača zakázal zobrazovanie obrázkov, tak sa namiesto obrázku môže zobraziť alternatívny text, ktorý by vysvetľoval, aká grafika tam má byť. To sa dosiahne použitím atribútu ALT:

V takom prípade prehliadač vyhradí miesto na stránke pre obrázok, ale namiesto samotného obrázka zobrazí text, ktorý napíšete v hodnote atribútu ALT:

Opakujem, toto sa stane, ak používateľ zakázal zobrazovanie grafiky. Ak nie, obrázok skryje alternatívny text.

§ 4. Zarovnanie obrázku

Použitie atribútu, ktorý už poznáte zarovnať môžete ovládať zarovnanie obrázkov vzhľadom na ostatné prvky html stránky. Pri atribúte zarovnať Existuje niekoľko významov, ale nás momentálne najviac zaujímajú dva:

• vľavo- obrázok sa nachádza na ľavom okraji stránky a text obteká obrázok vpravo;


• správny- obrázok sa nachádza na pravom okraji stránky a text a ďalšie prvky obchádzajú obrázok vľavo.

Napríklad HTML kód

prehliadač sa zobrazí takto

A tento HTML kód:

bude vyzerať takto:

Ak chcete zastaviť obtekanie textu okolo obrázka, môžete použiť značku BR(známe z predchádzajúcej časti o). Na štítku BR existuje atribút jasný, ktorý môže nadobúdať tri hodnoty:

• vľavo- zastaviť obtekanie textu okolo obrázkov zarovnaných doľava;


• správny- zastaviť obtekanie textu okolo obrázkov zarovnaných vpravo;


• všetky- zastaviť obtekanie textu okolo obrázkov zarovnaných vľavo aj vpravo.

HTML tag zodpovedný za zobrazenie obrázka

• HTML obrázok Môže to byť akýkoľvek obrázok vo formáte PNG, JPEG a GIF.
• HTML kód obrázka definované značkou .
• HTML obrázok môže byť pozadím webovej stránky.
• HTML obrázok možno definovať ako hypertextový odkaz.

Do priečinka D\My_first_site\ alebo akéhokoľvek iného priečinka, kde máte súbor index.html, umiestnite obrázok s príponou, povedzme, .jpg, pomenujte ho ako chcete, napríklad xxx.

Vloženie obrázka do HTML kódu stránky:

Tag - nepárový. Dávajte pozor na spôsob jeho zatvorenia.

Atribúty a hodnoty

• - povinné, označuje zdroj obrazu.
• alt="" - definuje alternatívny text, komentár, ktorý číta vyhľadávací robot pri analýze obsahu webovej stránky. Tiež je potrebné určiť.
• width="" - určuje šírku obrázku v pixeloch.
• height="" - určuje výšku obrázka v pixeloch.

Uveďte skutočné rozmery - týmto spôsobom zachováte pôvodnú kvalitu obrazu.

Na vývoj webu sú použiteľné obrázky troch formátov: PNG (.png), JPEG (.jpg) a GIF (.gif). Adobe Photoshop je špecializovaný nástroj na vytváranie grafiky pre webové stránky. Dá sa použiť na prevod jedného obrazového formátu do druhého.

HTML obrázok | Horizontálne a vertikálne okraje

alebo horizontálna a vertikálna vzdialenosť medzi nimi obrázok a text

výsledok:

Atribúty a hodnoty

• hspace="" - definuje horizontálna vzdialenosť medzi obrázkom a textom.
• vspace="" - definuje vertikálna vzdialenosť medzi obrázkom a textom.

HTML obrázok na pozadí

alebo pozadie stránky definované obrázkom

Máme nasledujúci obrázok:

Napíšme kód pre samostatnú stránku:

Atribúty pozadia a obrázka pozadia sú popísané v .

Vloženie obrázku a jeho poradie → ../images/primer-img.jpg → viď.

HTML obrázok - odkaz

Príklad kódu:

border="0" - zruší ohraničenie grafického odkazu.

alebo všetky možné spôsoby centrovania obrázkov

Príklad kódu:

Na čo si tu treba dať pozor? → Po prvé, skutočnosť, že sú uvedené rozmery - to urýchľuje načítanie obrázka. Po druhé, špecifikujú sa atribúty alt="", čo je tiež veľmi žiaduce, aj keď neexistuje alternatívny text. V prvom prípade bolo určené centrovanie HTML parameter a v druhom - pomocou lineárneho zahrnutia kaskádových štýlov.

Vizuálna časť je jedným z najdôležitejších aspektov pri práci s webovými stránkami. Funkčne je to, samozrejme, horšie, ale nemali by ste z toho vopred zľavovať. Dnes si povieme, ako nainštalovať HTML obrázok na váš web. Existuje len jedna možnosť alebo niekoľko? Ako môžem vložiť obrázok HTML na svoju webovú stránku, aby ho videli ostatní používatelia? Čo je lepšie použiť na tento účel – server alebo počítač? Čo je HTML? Túto skratku možno dešifrovať takto: hypertextový značkovací jazyk dokumentu.

Pomocou tohto jazyka sa tvorí základ budúcej stránky. Je tu vypracované aj umiestnenie všetkých hlavných prvkov stránky. Potom sa tu konfigurujú súbory php, ktoré sú zodpovedné za prenos údajov a kaskádové štýly. Základom každej webovej stránky je HTML. Pomocou tohto jazyka môžete vykonať aj úpravy obrazu. Túto operáciu môžete vykonať aj inými spôsobmi, no ak potrebujete zabezpečiť prvotné načítanie nejakého jednoduchého objektu, je lepšie ho použiť. Začnime skúmať problém súvisiaci s vložením obrázka HTML.

Ako používať img tag?

Prejdime k problematike používania grafiky. Ako môžete vložiť obrázok do dokumentu HTML? V prvom rade táto operácia znamená vloženie súboru ako samostatného objektu stránky. Na toto doplnenie sa používa značka img. Táto značka odkazuje na vložené prvky, ktoré obsahujú vymeniteľný obsah. Obsahuje iba štyri časti hypertextového značkovacieho jazyka. Jedným z nich je src, výška, šírka. Budeme o nich hovoriť ďalej. Ďalšie časti sú object, embed, iframe. Značka funguje, ako keby mala vložený prvok. Rozdiel je v tom, že sa používa a zobrazuje cudzí externý obsah. V tomto prípade musí existovať súbor tretej strany, ktorý sa načíta. Ak máte otázky týkajúce sa obnovenia obrázka na pozadí v HTML, je najlepšie ich ihneď zahodiť. Zobrazí sa iba vtedy, keď je spustený počítač, na ktorom sa obrázok nachádza.

Použitie atribútu src

Pracujeme na problematike vloženia grafického obrázku do HTML dokumentu. Ak chcete zadať cestu k obrázku, ktorý sa načíta, použite src. Všeobecná schéma je nasledovná: musíte použiť tento atribút, znak rovnosti a zadať adresu. Keď prehliadač pri analýze kódu HTML dosiahne značku, vytvorí oblasť, v ktorej sa zobrazí vložený prvok. Externý súbor sa doň načíta v budúcnosti. Táto cesta by nemala obsahovať chyby, pretože to je miesto, kam program pôjde. Ak tento program súbor nenájde, zobrazí sa ikona chyby, čo nevyzerá veľmi esteticky.
Ak chcete vložiť obrázok do tabuľky v dokumente HTML, musíte do požadovanej bunky napísať všetok potrebný kód.

Nastavenia obrazu

Teraz viete, ako vložiť obrázok do HTML. Poďme zistiť, ako sa to dá nakonfigurovať. Keď sa súbor začne sťahovať do počítača používateľa, automaticky sa určí veľkosť obrázka. Ak počiatočné parametre súboru nezodpovedajú požadovaným, potom môžu v tomto prípade pomôcť parametre šírky a výšky, ktoré sú uvedené v pixeloch. Kód v tomto prípade bude napísaný takto: src a potom adresa súboru. Podobná inštrukcia tiež špecifikuje šírku a nastavuje šírku, ktorá by mala byť. Posledným parametrom je výška a výška. Pomerne často sa webmasteri dopúšťajú nasledujúcej chyby: nahrajú na server jeden veľký súbor, ktorého veľkosť dosahuje niekoľko MB. Potom sa napíše cesta a obrázok sa upraví na požadovanú veľkosť. Používateľ tak môže vidieť, ako sa malý obrázok načítava veľmi pomaly. Zvonku to nevyzerá veľmi atraktívne.

Odporúčania pre prácu

Aby ste sa vyhli negatívnym aspektom vo svojej práci, pokúste sa vopred zmenšiť veľkosť obrázka. Samozrejme, ak si nie ste úplne istí, aké parametre musíte použiť pre atraktívny vzhľad, môžete jednoducho vytvoriť kópiu a pokúsiť sa s ňou experimentovať. Pri optimalizácii hmotnosti obrázka musíte byť mimoriadne opatrní. Je potrebné znížiť hmotnosť grafických súborov bez straty kvality konverziou súborov na iné rozšírenia, pomocou špeciálnych programov a online služieb. To ocenia nielen používatelia stránky, ale aj správca webu. Takéto súbory zaberú na vašom hostingu menej miesta a rýchlejšie sa načítajú.

Príklad možností nahrávania

Pozrime sa, ako môžete určiť cestu k obrázku.

1.Nastavte iba názov súboru;
2. Zadajte adresu obrázka umiestneného na lokálnom počítači (serveri);
3. Podrobná cesta k umiestneniu súboru, ktorý sa nachádza na inom hostiteľovi.

Ak použijete príklad z prvého bodu, obrázok musí byť v rovnakom adresári. V druhom prípade je umiestnením podpriečinok vzhľadom na aktuálnu stránku. Tretí príklad špecifikuje absolútnu cestu, kde možno nájsť hľadaný obrázok. V druhom prípade stojí za to venovať pozornosť nasledujúcemu bodu: obrázok môže byť na akomkoľvek serveri, ak takéto použitie nie je zakázané v súbore htaccess, ale ak je odtiaľ vymazaný, obrázok zmizne na vašom webe. Zvláštnosťou jazyka HTML je, že je potrebný iba značkovací dokument. Všetky ostatné komponenty je možné stiahnuť zo serverov tretích strán. Tieto metódy sa často používajú na zvýšenie rýchlosti sťahovania. Tu musíte vedieť, ako používať tento nástroj.

Účel alt a názvu

Čo mám robiť, ak sa z nejakého dôvodu nenačíta grafický súbor s dokumentom HTML? Ak je napísané nesprávne, musíte použiť atribút alt. Tento atribút plní úlohu alternatívneho znázornenia obrázku. Povedzme, že grafika sa nenačíta, ale prehliadač aj tak vytvorí plochu pre obrázok. Je to potrebné aj v prípadoch, keď používateľ čaká na načítanie a je potrebné mu ukázať, že program sa pripravuje na prijatie grafiky. Ak chcete zobraziť sprievodný text, musíte použiť atribút title. Je to v podstate len popis a možno ho použiť na takmer akýkoľvek viditeľný prvok HTML. Je to dobré, pretože to pomáha objasniť niektoré špecifické aspekty. Použitie dvoch atribútov uvedených v tomto podnadpise je nasledovné: po výške sa k vyššie uvedenému príkladu pridá najskôr alt a potom názov Tieto atribúty môžu slúžiť nielen na zabezpečenie pohodlia návštevníka. Môžu mať tiež pozitívny vplyv na propagáciu webových stránok. Z tohto dôvodu by ste v nich mali neustále používať kľúčové slová. Tým sa zlepší hodnotenie zdroja v obrazových službách vyhľadávacích nástrojov a hodnoteniach webových stránok. Vo všetkom sa však treba držať racionality a opatrnosti.

Zarovnanie obrázkov

Atribút align bol zavedený pre všetky štyri prvky značkovacieho jazyka spomenuté vyššie. Pomocou tohto atribútu môžete ľahko zmeniť umiestnenie obrázka. Štandardne je zarovnaný nadol. za to môže dno. Ako urobiť horné zarovnanie? K tomu musíte použiť top. V praxi to bude vyzerať takto: za atribút src, kde používateľ zadá adresu obrázka, sa pridá atribút align a jeho hodnota. V riadku, v ktorom sa nachádza obrázok, bude zarovnaný k hornému okraju. Ako vycentrovať obrázok v HTML? Existuje ďalšia možnosť zarovnania obrázka: stred. Použitím tejto funkcie sa nič zásadne nezmení.

Pri použití tohto kódu bude obrázok zarovnaný na stred. Môžete nechať text obtekať obrázok. Používajú sa na to atribúty left a right. V takýchto prípadoch sa obraz vznáša. Shift vľavo vyzerá rovnako ako ostatné hláskovanie. Použitím atribútu right získate podobný výsledok, ale s jedným rozdielom: obrázok bude umiestnený vpravo. Použitie týchto štruktúr má svoje vlastné charakteristiky. Jedným z dôležitých problémov je napríklad príliš blízkosť textu k obrázku. V dôsledku toho vzniká takzvaný lepkavý efekt, ktorý je pre oči veľmi nepríjemný. Dá sa to opraviť pomocou HTML kódu alebo kaskádových štýlov. Na takéto zmeny musíte použiť atribúty hspace a vspace. Prvý nastavuje okraje vpravo a vľavo a druhý nastavuje okraje dole a hore.

Ako nastaviť pozadie

Pri vkladaní obrázka do HTML stránky je veľmi užitočný atribút pozadia. Tento atribút je súčasťou prvku tela. Účelom je nastaviť cestu ku grafickému súboru, ktorý má vyplniť samostatnú bunku, tabuľku alebo stranu. Použitie tohto objektu v praxi vyzerá takto: adresa použitého obrázku sa zapíše ako hodnota parametra bodybackground. Takto nastavený obrázok pozadia sa bude opakovať pozdĺž osi x a y súradníc, začínajúc od ľavého horného rohu.

Dúfame, že tento článok bude pre vás užitočný. Príjemné čítanie!

Obrázky nám okamžite umožňujú pochopiť, aký zaujímavý môže byť pre nás daný web alebo článok, navodiť náladu a odhaliť tému novým spôsobom. Niekedy jedna fotka vydá za tisíc slov.

Ale nemali by ste sa na nich podieľať, ak nemáte Instagram alebo internetový obchod. Odporúča sa, aby obrázky:

• boli informatívne
• zodpovedajú farebnej schéme vášho webu
• boli vhodné

Ak nemáte vhodnú fotografiu, môžete použiť tzv photostock (fotobanka) - miesto, kde je uložených veľa fotografií, ilustrácií a vektorovej grafiky. Takýchto zdrojov je veľa, možno ste už počuli o jednom z najväčších – Shutterstock, no sťahovanie tam je platené.

Pre tých, ktorí neradi preplácajú, sme na konci článku pripravili bonus- zoznam niekoľkých fotobánk, kde si môžete stiahnuť obrovské množstvo kvalitných krásnych materiálov úplne zadarmo :)

Formáty obrázkov

Na World Wide Web sa používajú hlavne 3 typy obrázkov:

gif(Formát výmeny grafiky - formát výmeny obrázkov)

Ide o prvý formát, ktorý sa začal používať na internete. Výhodou tohto formátu je dostupnosť animácií a malá veľkosť, stránka sa načítava rýchlo. Navyše podporuje transparentnosť. Nevýhoda - iba používané 256 farieb(preto je vlastne veľkosť malá), t.j. nemožno ho použiť pre plnofarebné obrázky.

jpeg, aka jpg(Spoločná skupina fotografických expertov - Spoločná skupina fotografických expertov - toto je názov organizácie rozvoja)

vhodné na vytváranie plnofarebných, vysokokvalitných obrázkov, fotografie. Veľkosť takýchto obrázkov je veľká, takže zvyčajne zaťažujú server. Ak potrebujete skomprimovať jpeg (pre menšiu hmotnosť obrázka), odporúčame vziať veľkosť výsledného obrázka násobok ôsmich , takže strata kvality bude minimálna.

png(Prenosná sieťová grafika - Prenosná sieťová grafika. Vyslovuje sa rovnako ako ping, t.j. )

tento formát bol pôvodne vyvinutý pre web, t.j. Obrázok zvyčajne váži málo a nespomaľuje stránku pri načítavaní. Tento formát bol vytvorený, aby nahradil zastaraný gif, no na rozdiel od neho nepodporuje animáciu. Png-8, rovnako ako gif, používa iba 256 farieb. Formátovať png-24 podporuje 16 miliónov farieb, aj keď je už dosť ťažký. Png-32 obsahuje rovnaký počet farieb ako png-24 a navyše vám umožňuje získať obrázok s priehľadným pozadím a môžete nastaviť stupeň priehľadnosti. Pri zmenšení veľkosti png nedochádza k strate kvality farieb.

Poďme si to zhrnúť

gif- pre animáciu

jpeg- pre fotografie

png- pre ikony, tlačidlá, pozadia, logá, snímky obrazovky, kresby, texty, fotografie s priehľadným pozadím

Vloženie obrázka do súboru html

Ak chcete na stránku pridať obrázok, použite tag (z anglického image - image, image). Toto je jedna značka a nepotrebuje uzatváraciu značku. Táto značka obsahuje atribúty vo vnútri.

Atribút src(z anglického source - source) označuje cestu k súboru (miesto, kde sa nachádza obrázok). Ak je obrázok vo vašom počítači (stránka je stále vo vývoji) alebo na vašom serveri, použite relatívny odkaz. Ak je obrázok zo siete, potom je potrebný absolútny odkaz. Prečítajte si, ako to urobiť v článku "Odkazy".

Ak chcete pripojiť obrázok k svojej webovej stránke, musíte napísať kód takto:

atribút alt(z anglického alternatíva – alternative) označuje text, ktorý používateľ uvidí, ak sa obrázok nenačíta. Cesta je nesprávne označená, obrázok bol odstránený, zlý internet - dôvodov môže byť veľa a je žiaduce, aby osoba pochopila, čo sa skrýva za touto nenávidenou ikonou.

Vyhľadávače venujú veľkú pozornosť vyplneniu tohto atribútu. A html validátor (zdroj na kontrolu správnosti kódu) bude absenciu atribútu alt vnímať ako chybu. Ak všetky atribúty budú vyplnené, a ak je to možné, obsahujú aj kľúčové slová – výrazne sa zvýši viditeľnosť vašej stránky, t.j. vo vyhľadávaní sa bude zobrazovať častejšie. To je z oblasti SEO a v tejto fáze nám stačí vedieť, že takýto atribút existuje a „živá“ stránka ho musí mať vyplnený. Kým je stránka na našom disku, je celkom možné nechať ju prázdnu.

V nižšie uvedenom príklade sme zámerne zadali neexistujúcu cestu pre obrázok, aby ste videli, ako funguje atribút alt

Výška a šírka obrázkov

Môžete tiež nastaviť výšku a šírku obrázka, ak je pôvodný obrázok napr. viac ako potrebujete.

V HTML5 sa to odporúča robiť pomocou CSS resp atribút štýlu , Páči sa ti to:

V tomto príklade sme vzali 30 % šírky nie z pôvodného obrázka, ale z veľkosti okna prehliadača. Keď je šírka = 100 %, obrázok sa otvorí na celú šírku prehliadača. Zapamätajte si túto funkciu percent ako merné jednotky.

Mimochodom, ak by sme napísali iba šírku, výsledok by bol rovnaký, skúste:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda na strome" style = "width:30%;" >

Môžete tiež nastaviť šírku a výšku pixelov. V prípade našej pandy, ktorej pôvodné rozmery sú 1196 x 796 pixelov, aby zviera pri stláčaní netrpelo, musíme zachovať proporcie a tu sa bez kalkulačky nezaobídete. Povedzme, že chceme zmenšiť veľkosť obrázka 3-krát, potom musíme nastaviť rozmery na 399 x 265 pixelov.

Upozorňujeme, že ak obrázok zväčšíme proporcionálne, potom stačí uviesť napríklad len jeden parameter. šírka. Inteligentný prehliadač sám vypočíta plnú veľkosť obrázka.

Skúste spustiť tento kód a pozrite sa na výsledok:

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

Vždy nastavte rozmery obrázka. Obrázky sa zvyčajne načítavajú dlhšie ako zvyšok html kódu. Ak prehliadač vie, koľko miesta má vyhradiť pre obrázky, môže pokračovať v načítavaní stránky bez čakania na načítanie obrázkov.

Trochu naftalínu

Ak sa náhodou pohrávate s kódom stránky vytvorenej v HTML-4 alebo ešte skôr, všimnete si, že veľkosti obrázkov sa nastavujú pomocou špeciálnych atribúty šírky A výška. Toto je zastaraná metóda, aj keď stále platná v HTML5. Odporúčame však použiť štýl, pretože... Atribúty šírky a výšky môžu byť ovplyvnené internými alebo externými štýlmi, ktoré budú existovať v prehliadači alebo vo vašom súbore CSS. Pozrime sa na to podrobnejšie, keď sa pozrieme na CSS, ale zatiaľ sa pozrite na príklad toho, ako štýly ovplyvňujú atribúty height a width.

V tomto okne sú 3 záložky: na prvej vidíte html kód, na 2. CSS kód a na poslednej - ako vždy, výsledok. Funguje to tak, ako keby prvá karta bola súbor index.html, druhá súbor style.css a tretia prehliadač. Takže teraz náš CSS hovorí, že všetky prvky so značkou img majú šírku 100 %. Predvolené veľkosti atribútov width a height sú v pixeloch, takže tu nie je potrebné pridávať žiadne jednotky.

Rozdiel vo výsledkoch je evidentný :)

Aj v starších verziách html boli použité nasledujúce atribúty:

zarovnať, ktorý slúžil na horizontálne alebo vertikálne zarovnanie obrazu.

hspace- odsadenie na ľavej a pravej strane obrázka vzhľadom na okolitý obsah (napríklad text alebo susedný obrázok)

vspace- odsadenie nad a pod obrázkom k obsahu okolo neho.

hranica- nastaviť hrúbku rámu okolo obrázka (v predvolenom nastavení je nula)

V dnešnej dobe sa všetky tieto manipulácie (a ešte oveľa viac) robia pomocou CSS, preto sme sa rozhodli, že vás s tým tu nebudeme otravovať. Ak vás ešte zaujíma, ako s týmito atribútmi pracovať, napíšte do komentárov, túto položku doplníme :)

Umiestnenie obrázka do kódu

Odkiaľ umiestnime náš štítok závisí od toho, ako sa zobrazí v prehliadači.

Príklad č. 1 - pred odsekom:

Prvky ako napr

A

odkazujú na blokové prvky . Vždy začínajú na novom riadku a zaberajú celú dostupnú šírku okna prehliadača. Ak ste na prvom mieste a za ním prvok bloku, napríklad odsek, presunie sa na ďalší riadok.

Príklad č.2 - na začiatku odseku

Toto je vložený prvok, zmestí sa do prvku bloku a nezačína nový riadok. Vo vyššie uvedenom príklade sa text zalomí okolo obrázka, pretože kód zaregistrovaný vo vnútri

Popisky k ilustráciám

Ak chcete označiť alebo podpísať fotografiu na stránke, použite tag

(z angl. figure - drawing). Táto značka označuje, že v nej bude umiestnený obsah, ako sú ilustrácie, fotografie, diagramy atď.

Tag