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

Chcete-li vytvořit webové stránky a dokonce i celé stránky, je známo, že je použit 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 snadné použití a umožňuje obojí vložit obrázek do HTML v

Kde začít?

Chcete-li napsat kód, musíte se rozhodnout, který program to udělá. 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?

Poté, definoval program pro psaní kódu, musíte pochopit, že psát, jak vložit obrázek do HTML v poznámkovém bloku nebo jakýkoli jiný program. Začněte s tag />. Jedná se o tuto značku, která deklaruje obrázek v dokumentu HTML, je jednoduchá a nevyžaduje uzavření.

A co dál?

V kodexu jsme oznámili, že budeme používat tento obrázek, 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 existuje 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é je to značka existuje jeden atribut titulu. 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 pomocí HTML, jsme jej vyřešili. 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:

Zadáte-li pouze jeden z atributů velikosti, druhá bude vypočítána automaticky, ale v zájmu zachování poměru stran. Když se ukázal oba parametry, je důležité mít na paměti, že v případě, že rozměry jsou větší než původní, je obraz roztažen a v případě, že velikost bude menší - bude zmenšovat.

Obrázek jako pozadí

A co když chceme použít obrázek ne v textu, ale vložit obrázek do pozadí v HTML, jak to udělat? K tomu potřebujeme značku , bez kterého neexistuje žádný dokument HTML. 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 tvorbě webové stránky pozadí je lepší používat tyto obrazy, se kterými můžete dosáhnout zajímavých vizuálních efektů, ale to by nebylo v rozporu s normální vnímat text. 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 se obrázek nacházel vedle textu, který by ji ohýbal jedním způsobem. 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? K tomu 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žňují diverzifikovat místo, učinit to světlejší, atraktivnější a nezapomenutelnější, ale nezapomeňte, že příliš mnoho obrázků zpomalí načítání stránek a odvrátí od textu.