Jak vložit obrázek do HTML bez problémů

Chcete-li vytvořit webové stránky a dokonce i celé stránky, jako jeje známo, že se používá speciální jazyk pro značení HTML (Hypertext Markup Language), ale bez fotografií a různých obrázků by každý web byl jen strukturovaný a nudný text. To je důvod, proč přidat obrázky na web používá speciální kód, který je velmi jednoduché k použití a umožňuje vložit obrázek do HTML na určité místo na stránce, a použít jej jako pozadí.

Kde začít?

Abyste mohli napsat kód, musíte se rozhodnout,v jakém programu to uděláte. Nyní je spousta z nich, jeden z nejslavnějších je NotePad ++. Má řadu funkcí, velmi užitečné při psaní kódu, umožňuje identifikovat chyby a nezaměňovat je ve značkách. Nicméně, pokud nemáte příležitost uchýlit se k pomoci specializovaných programů, můžete použít jednoduchý poznámkový blok, kód se z tohoto nezmění.

Která značka budeme potřebovat?

Po rozhodnutí s programem napsat kód,musíte pochopit, co psát, jak vložit obrázek do HTML v poznámkovém bloku nebo jiném programu. Měli byste začít s tagem . Jedná se o tuto značku, která deklaruje obrázek v dokumentu HTML, je jednoduchá a nevyžaduje uzavření.

A co dál?

Oznámili jsme v kódu, který budeme používatobraz, ale ještě jsme jej neuvedli. Tak jak vložíte obrázek do HTML? K tomu potřebujeme atribut src, který se používá s naší značkou. Tento atribut určuje umístění našeho obrazu bez ohledu na to, zda se nachází na nějakém webu nebo na našem počítači.

• Pokud se obrázek nachází na webu třetí strany, náš kód bude vypadat takto:

• V případě nalezení obrázku ve stejném adresáři jako náš HTML soubor bude vypadat takto:

Alternativní text

Značka má ještě jeden atribut - alt.Použijte jej, aby prohlížeč viděl popis obrázku, pokud z nějakého důvodu nelze stáhnout samotný snímek. Jeho přítomnost je také žádoucí, aby lidé se zrakovým postižením mohli vědět, jaký typ obrazu je na webu přítomen, protože text, který je ve smyslu tohoto atributu, je ohlášen programy čtečky obrazovky. Výsledný kód s atributy src a alt bude vypadat takto:

Tipy na nástroje

Mimo jiné má tag ještě jednunázev atributu. Vzhledem k tomuto atributu, když umístíte kurzor myši nad obrázek, v popisu nástroje se zobrazí alternativní text. Tato funkce je však podporována pouze aplikací Internet Explorer, takže tyto výzvy se objeví v jiných prohlížečích, vyžadují se speciální pluginy. Tipy nástrojů se používají ve spojení s atributem alt, jsou volitelné, ale pokud je použijete, kód bude vypadat takto:

Velikost obrazu

Jak vložit obrázek do textu s HTML, mypřišel na to. Ale co kdybychom chtěli udělat obrázek trochu větší nebo menší? Chcete-li to provést, má HTML speciální atributy: šířka (šířka) a výška (výška). Hodnoty těchto atributů mohou být v procentech nebo v pixelech. Pokud nastavíte šířku v pixelech a výšku v procentech, pak bude kód vypadat takto:

Pokud zadáte pouze jeden z atributů velikosti, pakDruhá bude vypočtena automaticky, ale aby se sledoval poměr stran obrazu. Při zadávání obou parametrů je důležité si uvědomit, že pokud velikost překročí původní hodnoty, obraz se natáhne a pokud jsou velikosti menší, zmenší se.

Obrázek jako pozadí

A co když chceme použít obrázek, který není v souborutext a vložit obrázek na pozadí v HTML, jak to udělat? Chcete-li to provést, potřebujeme značku , bez níž žádný dokument HTML nebude moci být vynechán. Obsahuje veškerý viditelný obsah dokumentu a jeho atributy mohou určit velikost, barvu písma včetně pozadí. Vložení obrázku do HTML jako obrázku na pozadí je velmi jednoduché, proto budeme muset použít atribut pozadí. Tento kód vypadá takto:

...

Při vytváření pozadí webové stránky je lepšípoužijte takové obrazy, s nimiž můžete dosáhnout zajímavých vizuálních efektů, ale které by nenarušovaly normální vnímání textu. Měli byste však mít na paměti, že možná budete muset změnit velikost a barvu písma, abyste je mohli lépe číst.

Zalomit text s textem

Někdy je nutné, aby byl obrázek vedletext, který by ji ohýbal tak či onak. Pokud však vložíte obrázek přímo do řádku, pak bude graficky vypadat ošklivě, text bude nepřesně přeložen. Takže jak vložíte obrázek do HTML tak, aby obraz bezproblémově zapadl do návrhu stránky? Chcete-li to provést, potřebujeme atribut zarovnání značky . Tento atribut může mít dvě hodnoty: vlevo a vpravo.

Pokud použijete hodnotu vlevo, bude obrázek umístěn nalevo od textu a pokud použijete příslušný atribut vpravo. Tento kód vypadá takto:

nebo

Pokud chceme, aby byl text umístěn mezi dvěma obrázky, kód bude vypadat takto:

A po tomto kódu bude umístěn text, který by měl být uzavřen mezi těmito dvěma obrázky.

Obrázky vám umožní diverzifikovat místo, udělatjeho světlejší, atraktivnější a nezapomenutelnější, ale nezapomeňte, že příliš mnoho obrazů zpomalí načítání webu a odvrátí pozornost od textu.