Vkládání obrázků do html stránky. Příklad vytvoření obrázkové mapy. Zarovnání a úprava obrázku

Jak vložit obrázek do html stránky

Chcete-li vložit obrázek (fotku nebo jakoukoli grafiku) na stránku, musíte zadat cestu ke zdroji (k souboru obrázku) pomocí značky img Tag img je zkratka pro anglický obrázek (image, image). Zdroj - v angličtině zdroj, zkráceno src
Důležité: hmotnost a velikost obrázky (malé), název souboru(žádné mezery a pouze latinská písmena a čísla), formát obrázku(přípony: GIF, JPG, JPEG, PNG. Je možné použít animované obrázky (GIF).
Cesta k obrázku je uvedena absolutní nebo relativní, v závislosti na tom, kde se obrázek nachází na vašem webu nebo na internetu na zdrojích třetích stran (pak musíte zadat adresu URL)

Mlha. Umělec Vladimir Knyagnitsky

Kód. Kód obsahuje relativní adresu (vzhledem ke složce na mém serveru)

Kód. Kód obsahuje absolutní adresu obrázku

Velikost obrazu a tloušťka rámu

Skutečná velikost tohoto obrázku: Šířka (šířka) = "499" Výška (výška) = "434". Aniž byste se uchýlili k aplikaci Photoshop, můžete obrázek na obrazovce vytvořit větší nebo menší, než je jeho skutečná velikost. K tomuto účelu se používají atiributi šířka A výška. Například, aby obrázek vypadal 2krát menší, zadejte šířku (width)="250" a výšku (výška)="217" . A přidejte rámeček o tloušťce 4 pixely ( pohraniční"4"). Vlevo je obrázek s rámečkem, vpravo pro srovnání bez rámečku

Atributy značek IMG

src-Povinný atribut označující adresu URL obrázku (jeho adresu, umístění)
IMG SCR= "img/kartinka.gif"

zarovnat- Zarovná obrázek na jednu stranu dokumentu
align="left" - Zarovnání doleva
align="right" Zarovnání doprava
align="bottom" Zarovnání dolů
align="top" Zarovnání nahoru
align="middle" Zarovnání na střed

alt- Zobrazí text k obrázku. Alternativa ke grafice, pokud se nenačítají
pohraniční- Nastaví tloušťku rámečku kolem obrázku v pixelech. Ve výchozím nastavení se nepoužívá žádný rámec.

šířkašířka obrázku v pixelech nebo procentech
výška- výška obrázku v pixelech nebo procentech

hspace horizontální odsazení
vspace vertikální prostor

Příklady zarovnání obrázků s textem pomocí HTML

Obrázek je umístěn před text bez uvedení jakýchkoli atributů. Žádné formátování textu. Výsledek je to, co vidíte. Obrázek je umístěn vlevo od textu pomocí atributu align s hodnotou vlevo. align="left" .
To je samozřejmě mnohem lepší než předchozí možnost uspořádání obrázku s textem. Ale nemyslím si, že by se někomu líbilo, když je obrázek přitisknutý blízko k textu. Na obrázku je motýl, motýl, motýl. A text, text, text o motýlovi, motýl, motýl. Příliš blízko obrázku. Obrázek by neměl splývat s textem, i když je text psán jednoduše jako text, aby byl jasně demonstrován text obtékající obrázek. Je velmi důležité, aby obrázek na obrazovce nesplýval s textem, aby nedráždil, lahodil oku a byl na svém místě. Dostatečné množství textu příklad jasně dekonstruuje.
Existují pravidla pro uspořádání při vydávání knih a měla by existovat pravidla pro uspořádání při vytváření webových stránek. Obrázek je umístěn vlevo od textu o použití atributuzarovnat s hodnotou LEFT, odsadit od textu - 20 pixelů vodorovně.
align="left" hspace=20 Odsazení se přidávají pomocí atributů HSPACE(horizontální odsazení) a VSPACE(svislé odsazení). V tomto případě je svislé odsazení nulové, takže horní část obrázku je v jedné rovině s horním řádkem textu. Pokud je odsazení nulové, není uvedeno. Vertikální posun je uveden v atributu. A přestože jsou webmasteři v současnosti nabádáni, aby opustili HTML atributy a přešli zcela na CSS, zdá se mi, že jednoduchost této metody jí dává právo na existenci.
KÓD Obrázek je umístěn napravo od textu o použití atributu zarovnat o hodnotěPRÁVO, přidali odrážky pomocí atributů HSPACE(horizontální odsazení). A VSPACE(svislé odsazení). V zásadě je vše stejné jako v předchozí verzi, pouze místo toho vlevo, uvedeno právo a obrázek není vložen před text, ale přibližně doprostřed. Formátování pomocí atributů zarovnat(lineární zarovnání) a použití vodorovného a svislého odsazení dává zcela normální výsledek. Obrázek je obklopen textem vlevo, nahoře a dole (pokud je textu hodně). Odsazení textu od obrázku vlevo, nahoře a dole je 20 pixelů. Vše je tak, jak jsme uvedli v kódu.
Nejčastěji se používají dva typy zarovnání (levý a pravý) a zbytek... Téměř všechny ostatní jsou považovány za zastaralé. Na moderních webech jsou všechny obrázky (a vlastně celý design) formátovány pomocí kaskádových stylů (CSS)

Text, text, textové pokračování textu

Obrázek je umístěn pomocí atributu align s významem střední. Přidáno odsazení pomocí atributů HSPACE(horizontální odsazení) a VSPACE. Vypadá to takto, kód je napsán níže. Zde končíme s atributy umístění obrázku

Jak používat atributy alt a title.

Atributy alt a title obsahují název obrázku. ALT je alternativou k obrázku, pokud se z nějakého důvodu nenačte. Titul je titulní nápis na obrázku. Zobrazí se, když najedete myší na obrázek.
Pokud vytváříte web jen pro sebe, pak tyto atributy používat nemusíte. Pokud je web určen pro lidi, pak musí být tyto atributy vyplněny jasným a přesným popisem obrázku.
Za prvé je to pohodlné pro návštěvníky a za druhé je to nutné pro vyhledávače. Právě text uvnitř značky IMG umožňuje vyhledávacím robotům indexovat obrázky, třídit je podle klíčových slov a vracet je na základě požadavků uživatelů. Mimochodem, Yandex dokonce varuje, že pokud obrázek nemá smysluplný popis, nebude zařazen do vyhledávání. Indexovány jsou pouze obrázky ve standardních grafických formátech (JPEG, GIF a PNG). Obrázky na pozadí a obrázky otevřené pomocí skriptu nejsou indexovány.

KÓD obrázku s vyplněným alt a názvem

Jak udělat z obrázku odkaz

Jakýkoli odkaz je vytvořen pomocí značky A a atributu href (pokud se jedná o hypertextový odkaz) nebo name if (odkaz na odstavec nebo prvek umístěný na stejné stránce).
Startovací značka Zdroj obrázku uzavírací značka

Při cestování po internetu samozřejmě na mnoha stránkách vidíte různé obrázky, bannery, fotografie a grafické obrázky. Dnes se naučíme vkládat obrázky do HTML stránky.

Přidání obrázku probíhá ve dvou fázích: nejprve se připraví grafický soubor požadované velikosti a formátu a poté se přidá na webovou stránku pomocí značky: . Samotný HTML dokument je určen pouze k zobrazení požadovaného obrázku, zatímco aniž by to vůbec měnil.

Při přípravě obrázků je třeba zvážit několik věcí.

1. Vzhledem k tomu, že se webová stránka načítá přes síť, je to důležitý faktor velikost ("váha") grafického souboru, vložené do webového dokumentu. Čím je menší, tím rychleji se obrázek zobrazí.

2. Dost často je potřeba fyzické rozměry obrázku (šířka a výška) omezit (zmenšit) šířkou a výškou. Nastavte například šířku na maximálně 700–800 pixelů. Jinak se celý obrázek nevejde do okna prohlížeče a objeví se posuvníky.

Grafické formáty pro webové stránky

Dva hlavní formáty, které se nejčastěji používají pro webovou grafiku, jsou: GIF A JPEG. Takové vlastnosti jako: multifunkčnost, všestrannost, malý objem zdrojových souborů s poměrně dobrou kvalitou těmto formátům dobře posloužily, ve skutečnosti je definovaly jako standard pro webové obrázky.

Existuje také formát: PNG, který je podporován i prohlížeči při přidávání obrázků a je dodáván ve dvou variantách: PNG-8 A PNG-24. Popularita formátu PNG je však mnohem nižší než u formátů GIF a JPEG.

Obvykle se v kořenovém adresáři vytvoří samostatná složka pro obrázky (obrázky) a do ní se umístí všechny obrázky pro web. Někdy existuje několik takových složek (pokud to struktura webu vyžaduje nebo je pro vás snazší se orientovat). Tato složka se nejčastěji nazývá: img nebo obrázky (obrázky). Do kódu webové stránky napište úplnou cestu ke grafickému souboru (kde se obrázek nachází) a také název tohoto souboru (obrázku), který chcete vložit do html dokumentu.

Píšeme kód pro vložení obrázku na webovou stránku

Chcete-li vložit obrázky do dokumentu HTML, použijte konstrukci uvedenou v Výpis 8.1. Tento kód se vloží na požadované místo na webové stránce (kde chcete vidět obrázek).

Na naší we-stránce věnované autům jsem připravil a vložil dva obrázky. Kód pro vložení prvního obrázku můžete vidět ve výpisu 8.1.

Výpis 8.1.

Takto bude vypadat první vložený obrázek na webové stránce webu:

A nyní se podrobněji vyjádřím k tomu, co je napsáno Výpis 8.1.

Samotný obrázek se „vloží“ pomocí značky: img src. Celý záznam vypadá takto: img src="img/mers1.jpg", Kde "img/mers1.jpg"– znamená, že náš obrázek je ve složce: img a název grafického souboru (obrázek): mers1.jpg.

V zásadě to pro vložení obrázku na webovou stránku již stačí, zbývající parametry jsou volitelné, přesto doporučuji je vždy registrovat, jinak může být obraz geometricky zkreslený.

Podívejme se na další možnosti:

border="0"– označuje, že kolem obrázku není žádný rámeček, zkuste změnit 0 na jiné číslo, například na 1 , - odpovídá tloušťce rámu kolem obrázku v 1 pixel, 2 – odpovídá tloušťce rámečku kolem obrazu dvou pixelů atd.

Důležité! Pokud plánujete z obrázku vytvořit odkaz, nezapomeňte uvést hodnotu: border="0".

width="400"– označuje, že šířka obrázku je: 400 pixelů(uveďte skutečné číslo pro šířku vašich obrázků).

height="209"- označuje, že výška obrázku je: 209 pixelů(uveďte skutečné číslo pro výšku vašich obrázků).

Pokud neuvedete parametry: šířka A výška, pak může obraz získat geometrické deformace.

hspace="20"– označuje odsazení textu kolem obrázku o velikosti 20 pixelů.

align="left"– toto je značka, která je vám již známá…. Správně, znamená to zarovnání doleva, může mít také význam: právo- pravé zarovnání.

alt="Čelní pohled na auto" !}– zde se píše alternativní text, který se zobrazí po najetí myší na obrázek.

Úplně stejným způsobem „vložíme“ na webovou stránku druhý obrázek, jen s tím rozdílem, že bude zarovnán doprava.

Komentáře k tomuto článku (lekci):

Prosím, řekněte mi, kde přesně mám vytvořit složku img?

Složka img je jen konvenční název, můžete ji nazvat, jak chcete, pokud tomu později rozumíte. Můžete jej vytvořit kdekoli, pro jednoduchost si jej vytvořte v kořenovém adresáři a vložte tam všechny obrázky.

Jde o to, že se nezobrazuje obrázek, ale pouze nápis. Co by se mohlo stát? Děkuju.

Podívejte se blíže na výpis 8.1 výše. Vezměte si to všechno pro sebe. V kořenovém adresáři (kde jsou umístěny všechny HTML soubory vašeho webu) vytvořte složku img. Do této složky umístěte všechny své obrázky. Ve výpisu změňte mers1.jpg na název vašeho souboru. Změňte také hodnoty šířky a výšky na skutečné rozměry vašeho souboru. Hodně štěstí.

Moc děkuji, vše klaplo.

Dobrý den, mám stejnou situaci jako předchozí řečník: píšu kód jako vy, měním pouze název souboru: místo mers.1/jpeg vložím odkaz Mercedes/jpeg Na stránce se objeví pouze okno nápis nahoře „Přední pohled na auto“ a není tam žádný obrázek Podle mého názoru prohlížeč nemůže najít cestu k fotce nebo není správně napsána ZDE JE MŮJ KÓD: b

Podívejte se pozorně na svůj img/mercedes/jpeg kód. Chápete správně, prohlížeč nenajde cestu ke grafickému souboru. 2. Název souboru je nesprávný, podívejte se, jak mám mers1.jpg

No kód jsem zkopíroval a vložil, mám ovál bez obrázku, v oválu je nahoře odkaz!

Dobrý den, problém je stejný, na stejném místě jako dokumenty webu jsem vytvořil složku s názvem img, v této složce jsou uloženy obrázky s názvem 1.jpg, píšu vše jako ve vašem příkladu.

Pokud jste si všimli, můj obrázek je ve složce img

Velmi užitečný článek pro začínající webmastery. Jediná výhrada k atributu "alt". Ve vztahu k obrázku článek poskytuje následující výklad: "alt="Čelní pohled na auto" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

zde je můj kód PROČ JE OBRÁZEK ​​DANÝ NA STRANU, KDYŽ JE ÚKOL PRO NĚJ STŘED?

A když vezmu obrázek z cizího webu, nebude to porušení autorských práv?

Vysvětlete, proč jsou při nahrávání dokumentu HTML na server v rámečku místo obrázků prázdná místa. I když před displejem byly snímky takové, jaké mají být.

Dmitrij, zázraky se nedějí, někde jsi udělal chybu, zkontrolujte všechny cesty k obrázkům, tzn. jak jsou obrázky zapsány v kódu.

Toto je můj kód, na stránce je odhaleno všechno kromě obrázku, zkouším to celý den všemi možnými způsoby, ale nic. prosím, řekněte mi, co mám dělat

AndreyK, prosím, kontaktujte mě v mém dopise, nemohu žádným způsobem vložit obrázek, zadávám vše správně, ale nic, zobrazuje se pouze rámeček a nápis

Elviro, četl jsem tvůj dopis, stejně jako všechny ostatní komentáře a dopisy. Ale kde mám odpovědět... na dědovu vesnici???

Nevím, proč jsou všichni tak naštvaní!? Jen je potřeba kódy nekopírovat a pak vkládat, ale napsat si je sami a vše bude fungovat...zde je text mého obrázku

Zkopíroval jsem váš výpis, vložil jsem své hodnoty - je tam obrázek, pak zadám to samé níže (ručně) není žádný obrázek - jaký zázrak?

AndreyK prosím řekněte mi, kde je chyba? Bez ohledu na to, kolikrát to zkouším, nefunguje to ((

Andrey, řekni mi, proč nevidím obrázek. Můj kód: Je tam nápis, ale žádný obrázek. moje adresa: [e-mail chráněný] Děkuju.

Taky jsem dlouho trpěl, ale šlo to! Složka imj musí být otevřena v dokumentu HTML.

Určitě vyzkouším, děkuji

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Taky jsem dlouho trpěl, ukázalo se, že složka s obrázky by měla být na stejném místě jako index.html, děkuji Eleno

Andrey vkládám:

Andrey vkládám: a v dokumentu nemám obrázek, jen nápis Moje adresa: [e-mail chráněný]

můj kód...také žádný obrázek. Složka img je ve stejné složce jako index... prosím o pomoc. [e-mail chráněný] Děkuju!

No já nevím. Četl jsem všechny komentáře. Zkoušel jsem všechno. Své informace jsem zkopíroval a vložil. Nic nefunguje. Složka s obrázky (img) se nachází na stejném místě jako index.html. Ale není tam žádný obrázek. Místo toho je tam červený křížek a nápis pracuji v prohlížeči IE. Zde je to, co jsem zadal:

Podíval jsem se na HTML kód stránky místo fotografie v lekci: Kód na stránce se liší od kódu ve výpisu. Proč? a mimochodem, na stránce je podtržený kód „mers1.jpg“. Kopírování s podtržením se nezdařilo. Zkusil jsem to tak vložit. Stále žádný obrázek. Co se děje?

Ptáme se sami sebe, odpovídáme si. Trpěl jsem dlouho a obrázek nebyl vložen. Vyšlo to: 1, místo značky src jsem měl srk 2. Při skládání cesty k obrázku jsem se zmátl. Složku jsem přejmenoval na IMG a vše fungovalo.

Lásko, ale teď si to budeš pamatovat do konce života:) Dělám si srandu, samozřejmě, neurážej se. Ale vážně, když člověk neopustí zpáteční adresu, tak je pro mě téměř nemožné mu pomoci.

Dobrý den, řekněte mi, jak umístit jeden obrázek nahoře, druhý dole vlevo a třetí vpravo dole))))

..........jaká je moje chyba chybějícího obrázku?

Vše v kódu je správně, pokud není nic pokazeno, vše by mělo fungovat. Ale napište název souboru (obrázek) anglickými písmeny. Mnoho serverů nepřijímá latinku.

Ale tady je to divné... zatímco jsem složku nazýval různými jmény, obrázek se nechtěl zobrazit, i když cesta byla napsána správně. Jakmile jsem zavolal IMG, okamžitě se objevila. v čem je háček?

Marino, žádný trik ani provokace v tom není :). V kódu výpisu 8.1. je indikováno, že tento obrázek je ve složce: img. Pokud změníte název složky pro obrázky na vašem hostiteli, změňte jej ve výpisu, to je celý trik.

Zkouším vložit obrázek!!! Všechno si zapisuji pomocí poznámkového bloku, dělám vše správně, možná nemá cenu používat poznámkový blok?

A vše otevírám ve Firefoxu nejnovější Mozilla))

Cesta k mému obrázku je C:Documents and SettingsdenisDesktopkoffevinogradwwwImg a samotný obrázek se nazývá gif, také název obsahuje 1.gif...dělám to v poznámkovém bloku

Udělal jsem to a nevychází celá cesta, mozilla nevidí fotku průzkumníka a zvýrazní ji červeným křížkem

Denisi, přejmenuj složku Img na img, tzn. vše velkými písmeny a přejmenujte k němu i cestu. Mnoho serverů správně nezobrazuje velká písmena.

Stále mám stejnou otázku: proč ne obrázky, ale pouze nápis. Vytvořil jsem samostatnou složku pro web: obsahuje webovou stránku a výkres. Vloženo: NÁPOVĚDA CO JE MÁ CHYBA MAIL: [e-mail chráněný]

Jak udělat obrázek, aby se dal zvětšit nebo zmenšit?

Z nějakého důvodu se mi obrázek také nevycentruje. V čem je háček?.. Kód je takto:

26.06.2015

Ahoj všichni!
Pokračujeme v pilném studiu základů HTML.
V této lekci vám řeknu, jak vložit obrázek do HTML-dokument, jak udělat obrázek jako pozadí, velikost obrázku, obtékání textu kolem obrázku, jak obrázek zarovnat. Všechny uvedené možnosti podpořím příklady a výsledky.
Obrázky na webových stránkách tedy mohou být buď pozadí, nebo běžné. Jaký je rozdíl mezi obrázkem na pozadí a běžným obrázkem?

Obrázek na pozadí umístěn jako pozadí, na které můžete vkládat další obrázky, text, tabulky atd.

Normální obrázek odtlačí ostatní prvky stránky (jiné obrázky, text, tabulky atd.). Na příkladu pak vše uvidíte a pochopíte.
Pro webové stránky se doporučuje používat obrázkové formáty JPEG (JPG), GIF a PNG.

○ Jak udělat obrázek jako pozadíHTML

Chcete-li vytvořit obrázek jako pozadí pro značku musíte zadat atribut „pozadí“:

Nyní se podívejme na celý příklad. Vložte soubor obrázku „fon.jpg“ vedle souboru HTML.

a vložte tento kód do souboru HTML:

Jpg">

Výsledek bude takový:

Pozor

Špatný název:

Správný název:

○ Jak vložit obrázek doHTML

Chcete-li vložit obrázek do dokumentu HTML, použijte značku s parametrem „src“, který určuje cestu nebo adresu k obrázku.

Nyní se podívejme na celý příklad. Vložte soubor obrázku „kartinka.jpg“ vedle souboru HTML a zapište tento kód do souboru HTML:

Dobrý den, toto je moje první stránka na webu.

Výsledek bude takový:

Pozor: Název obrázku musí být napsán latinkou, jinak se obrázek nezobrazí.

Špatný název:

Správný název:

Myslím, že jste až do tohoto bodu všemu rozuměl. Nyní se pokusíme spojit oba příklady dohromady. Vytvoříme pozadí pro webovou stránku, vložíme obrázek a text.

Jpg">

○ Jak vložit obrázek, pokud je ve složce "img"nebo"obrázky"?

Pokud je obrázek ve složce „img“ nebo „images“, musíte zadat cestu ze souboru HTML do složky „img“ nebo „images“ a poté stačí zadat název obrázku s příponou. Bude to vypadat takto:

Pokud je obrázek na jiném webu nebo blogu, musíte uvést adresu webu a v případě potřeby složku, kde se obrázek nachází. Samozřejmě musíte uvést název obrázku s jeho příponou.

Předchozí příspěvek
Další záznam

Vše, co se o tomto muži ví, je
že nebyl ve vězení, ale proč nebyl ve vězení, není známo.
Mark Twain.

Toto je lekce o jak vložit obrázek do HTML, jak to navrhnout, jak obtékat text kolem obrázku atd. Koneckonců, je známo, že obrázky činí web atraktivnějším a liší se od jiných zdrojů, takže možnost používat značku a její atributy je na moderním internetu velmi užitečná. Ale hlavní věcí je zde smysl pro proporce!

Přebytek grafiky způsobí, že HTML stránka bude těžší, a tudíž se prodlouží doba jejího načítání. Přítomnost velkého množství obrázků navíc odvede pozornost návštěvníků od hlavního obsahu webu (pokud ovšem není hlavním obsahem webu grafika). Udržujte ho tedy s mírou a používejte ho pouze tam, kde je to potřeba. A budete šťastní!

V lekci o jsem již mluvil o tom, jak můžete použít obrázky jako pozadí dokumentu HTML. Nyní si promluvme o tom, jak se grafika používá v „horní vrstvě“ html stránky.

§ 1. Jak vložit obrázek

Chcete-li vložit obrázky do HTML, použijte značku IMG S povinné atribut SRC. Tento atribut sděluje prohlížeči cestu k souboru obrázku. Tito. pro vložení obrázku s názvem logo.jpg na určité místo na stránce (za předpokladu, že stránka i obrázek jsou umístěny v jedné složce(adresář)) musíte na toto místo vložit následující html kód:

src="logo.jpg">

Pokud se obrázek a stránka nacházejí v jiný adresářů (složek), pak je potřeba zadat cestu k obrázku poměrně stránky. Pokud je například html stránka umístěna v adresáři (složce) webu, ve stejném adresáři (složce) je podadresář (složka) obrázky, ve kterém je umístěn náš obrázek logo.jpg, pak pro vložení je třeba napište takto:

images/logo.jpg">

Nebo se nemusíte bát a upozorňovat úplná adresa obrázku. Například takto:

http://www..png">

V druhém případě prohlížeč zobrazí kód takto:

Poznámka. Pokud je obrázek umístěn na vašem počítači, ale chcete jej vložit na internetovou stránku, tak z toho nic nebude. Chcete-li to provést, musíte nejprve přesunout obrázek na nějaké místo na internetu(Například ). A v kódu stránky uveďte celou adresu až do tohoto bodu s obrázkem.

Kromě povinného atributu SRC u značky IMG Existuje několik dalších volitelných atributů. Pojďme se na ně podívat blíže.

§ 2. Určení velikosti obrázku

Začněme atributy, které umožňují nastavení rozměry obrázku(přesněji vymezit prostor pro tyto rozměry na stránkách). Tady jsou:

• šířka- šířka obrázku v pixelech nebo procentech;


• výška- výška obrázku v pixelech nebo procentech.

Pokud jsou tyto atributy použity, nejprve přidělí prostor pro grafiku, připraví rozvržení dokumentu, zobrazí text a teprve poté načte obrázek. Zároveň umístí obrázek do obdélníku o zvolené velikosti, i když je skutečná šířka a výška obrázku větší (komprimovat) nebo menší (roztáhnout). V případě, že tyto atributy nejsou použity, prohlížeč načte obrázek okamžitě a zobrazení textu a dalších prvků po něm bude zpožděno.

Šířku a výšku obrázků lze zadat jak v pixelech (velikost obrázku bude konstantní bez ohledu na rozlišení obrazovky), tak v procentech (velikost obrázku bude záviset na rozlišení obrazovky uživatele). Například:

width="50" height="20">

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

§ 3. Alternativní text

Pokud uživatel v nastavení prohlížeče zakázal zobrazování obrázků, tak se místo obrázku může zobrazit alternativní text, který by vysvětloval, jaká grafika tam má být. Toho je dosaženo použitím atributu ALT:

Prohlížeč si v tomto případě vyhradí místo na stránce pro obrázek, ale místo obrázku samotného zobrazí text, který napíšete do atributu value ALT:

Opakuji, stane se to, pokud uživatel zakázal zobrazování grafiky. Pokud ne, obrázek skryje alternativní text.

§ 4. Zarovnání obrázku

Pomocí atributu, který již znáte zarovnat můžete ovládat zarovnání obrázků vzhledem k ostatním prvkům html stránky. Při atributu zarovnat Existuje několik významů, ale nás v tuto chvíli nejvíce zajímají dva:

• vlevo- obrázek je umístěn na levém okraji stránky a text obtéká obrázek vpravo;


• právo- obrázek je umístěn na pravém okraji stránky a text a další prvky obtékají obrázek vlevo.

Například HTML kód

prohlížeč se zobrazí takto

A tento HTML kód:

bude vypadat takto:

Chcete-li zabránit obtékání textu kolem obrázku, můžete použít značku BR(známé z předchozí části o). Na štítku BR existuje atribut jasný, který může nabývat tří hodnot:

• vlevo- zastavit obtékání textu kolem obrázků zarovnaných doleva;


• právo- zastavit obtékání textu kolem obrázků zarovnaných vpravo;


• vše- zastavit obtékání textu kolem obrázků zarovnaných doleva i doprava.

HTML obrázky si mezi tvůrci webových stránek již dlouho získaly zaslouženou oblibu. Aktivně se využívají v designu webových stránek, k vizuálnímu doplnění textových informací, k návrhu odkazů a bůhví čeho ještě.

Důležitou součástí každého obrázku je jeho velikost (objem, váha) v kilobajtech, protože čím je větší, tím déle se HTML stránka načítá. Na internetu proto existují tři nejrozšířenější formáty, které obsahují optimální poměr velikosti a kvality obrázku – jde o GIF, JPG (JPEG) a PNG.

Štítek nebo jak vložit obrázek do HTML?

Chcete-li vložit obrázek na stránku HTML, použijte značku . Toto je nejčastější inline (inline, úroveň řádku) prvek, to znamená, že nevytváří konce řádků před a za sebou na začátek. Ale nemůže mít obsah, protože nemá uzavírací značku a je prázdný.

Na štítku jsou dva povinný atribut je src, který určuje cestu (URL) k obrázku a alt, který zobrazuje alternativní text, když je prohlížeč zakázán pro zobrazování obrázků. Pokud je nepravděpodobné, že zapomenete zadat src, protože bez něj se obrázek jednoduše nenačte, pak i zkušení webmasteři velmi často zapomínají na alt.

Atribut src používá přesně stejné hodnoty adresy jako atribut href značky , vedou pouze k obrázkům. Samozřejmě můžete zadat absolutní i relativní adresy.

Příklad vkládání obrázků do HTML stránky

To jsou různí ptáci.

Výsledek v prohlížeči

Změna velikosti obrázků v HTML

Ve výchozím nastavení všechny prohlížeče zobrazují obrázky v jejich přirozené velikosti. Ale pomocí atributů width a height tagu můžete změnit jejich výšku a šířku. Hodnoty jsou uvedeny v číslech, která udávají rozměry v pixelech (není třeba na konec čísel dávat písmena px) nebo procentech, v takovém případě je třeba na konec umístit znak %.

Příklad změny velikosti obrázků

Výsledek v prohlížeči

Neměli byste zneužívat změnu velikosti, protože když obrázky vizuálně zmenšíte, jejich objem v kilobajtech se nezmenší, a proto se načítají stejně dlouho. A když obrázky zvětšíte, může se objevit rozmazání a další zkreslení.

Nejlepší je však vždy určit rozměry obrázků, i když je neměníte. Prohlížeče v tomto případě nebudou čekat na jejich úplné načtení, ale přidělí jim prostor a přistoupí k dalšímu načítání stránky a obrázky se načtou až na konci. To umožňuje uživatelům nesedět ve zdlouhavém čekání a začít stránky používat rychleji. Kromě toho, pokud prohlížeče okamžitě znají rozměry, pak se při načítání stránky nebudou muset přizpůsobovat obrázkům, které se objevují na cestě, což pomůže vyhnout se zbytečným skokům a cukání prvků HTML, které je obklopují.

Zarovnání obrázků

Ve starších verzích HTML k zarovnání obrázků u značky byl vám již známý atribut align, ale v moderním HTML se nevyskytuje, takže použijeme také styl, který je vám již známý a doufám, že se stal nativním.

style="float:left" - posune obrázek na levou stranu rámečku, ve kterém se obrázek nachází, přičemž veškerý text bude obtékat doprava.

style="float:right" - přitlačí obrázek na pravou stranu bloku a text kolem něj obtéká doleva.

Příklad zarovnání obrázku doleva.

První odstavec.

Text před obrázkem.

Po obrázku.

Poslední odstavec.

Výsledek v prohlížeči

style="clear:left" - přeruší tok obrázků zarovnaných doleva.

style="clear:right" - přeruší tok obrázků zarovnaných vpravo.

style="clear:both" - přeruší tok obrázků zarovnaných na obě strany.

Příklad přerušení toku obrazu

První odstavec.

Text před obrázkem.

Po obrázku.

Poslední odstavec.

Výsledek v prohlížeči

Text popisku pro obrázky v HTML

Stejně jako mnoho jiných značek HTML, Existuje atribut title, který zobrazí textovou nápovědu, když najedete myší na obrázek.

title="Jakýkoli text."!}

Obrázky na pozadí

Obrázky jako pozadí se v HTML používají neméně často než pouhá změna barvy pozadí, kterou jsme již probrali. A to je celkem logické, protože pomocí obrázků můžete vytvořit nejednotné a barevnější pozadí.

Obvykle se jako vzorek pro pozadí používají obrázky, které mají malou velikost a objem (v kilobajtech), a to vše proto, že prohlížeče zpracovávají obrázky na pozadí jinak než běžné obrázky. Vezmou tento malý obrázek a zakryjí ho jako cihly celou částí stránky HTML nebo celou.

V předchozích verzích HTML měly některé značky speciální atribut pozadí, který jim umožňoval mít obrázek na pozadí. Faktem však je, že pouze některé a ne všechny, například tag bloku