Základy HTML - zobrazování obrázků

• Smět 18, 2024

Jakmile máte text svého webu zveřejněn a naformátován podle vašich představ, je čas okořenit stránku několika obrázky. Obrázky nejen mohou na vaše stránky přidat barvu a život, ale také je můžete použít k vytváření textových efektů, které by bylo obtížné nebo nemožné dělat s běžným textem a formátováním. Například vaše volba písma bude obvykle omezena na malý počet písem, o kterých si můžete být jisti, že jsou nainstalovaná v počítačích návštěvníků, protože pokud nemají nainstalované písmo, nemohou ho na vašem webu vidět! Kdykoli zveřejníte text v nedostupném písmu, počítače návštěvníků jej vykreslí v jakémkoli dostupném písmu, které je ve stylu nejblíže, což může často zničit design vašeho webu.

Na druhou stranu, pokud používáte program pro úpravu obrázků k zachycení textu ve fantazijním písmu a zveřejnění jako GIF nebo JPEG na vašem webu, každý návštěvník ho uvidí přesně podle vašich představ - protože nyní je to spíše obrázek textu než text sám. To vám může osvobodit použití fantastických písem v záhlaví a jejich seskupení neobvyklým způsobem.

Základní značka používaná k zobrazení obrázků je následující:



Výše uvedený kód bude v HTML fungovat dokonale. Pokud používáte XHTML nebo chcete mít jistotu, že váš web je připraven na XHTML, měli byste přidat lomítko pro uzavření značky, protože v XHTML nemůžete použít otevřené tagy:



'Src' je zkratka pro zdroj a vy ji použijete ke specifikaci cesty souboru k vašemu obrázku - jinými slovy, řekněte prohlížeči, kde se obrázek nachází na vašem webu. Pokud obrázky uložíte ve stejné složce jako vaše webové stránky, nemusíte složku uvádět v textu „src“ - stačí zadat název souboru obrázku.

Jakmile určíte zdroj obrázku, můžete tento základní rámec vylepšit pomocí různých volitelných atributů, abyste z vašich snímků získali maximum. Jeden atribut, který byste měli téměř vždy použít, je atribut „alt“. To vám umožní určit, jaký text by se měl prohlížeč zobrazit, pokud z nějakého důvodu není schopen zobrazit váš obrázek. Text „alt“ je připraven takto:



Další užitečnou sadou atributů jsou značky „šířka“ a „výška“. Umožňují zobrazit obrázky v jiné velikosti, než je skutečná velikost. Můžete je použít k vyladění obrazu tak, aby dokonale zapadal do celkového designu vaší stránky. Obecně je však vhodnější změnit skutečnou velikost obrázku pomocí programů pro úpravu obrázků a poté obrázek zveřejnit online, a to ze dvou důvodů. Za prvé, software pro úpravu obrázků vám téměř vždy poskytne lépe vypadající výsledek, než vyladění velikosti ručně. Zadruhé, změnou značek „šířka“ a „výška“ se nemění skutečná velikost souboru obrázku, takže pokud máte obrovský obrázek, který se zobrazuje jako miniatura, načte se obrázek stejně dlouho a bude se žvýkat stejně jako velká šířka pásma, jako byste ji zobrazovali v plné velikosti.

Při určování velikosti obrázku můžete uvést výšku, šířku nebo obojí. Velikosti jsou určeny pixelem, jak vidíte níže:



Můžete také 'zarovnat' obrázky tak, aby je hladce pracovalo s tokem textu. Pokud zvolíte zarovnání doleva, text začne vpravo od obrázku. Pokud zvolíte správné zarovnání, obrázek se zobrazí na pravé straně stránky a váš text se dostane na levou stranu obrázku a poté se rozbije na nový řádek.

Zarovnání obrázku je nastaveno takto:



Rovněž můžete nastavit zarovnání na „horní“, „spodní“ nebo „střední“, aby se obrazový řádek zarovnal s horním nebo dolním okrajem textového řádku. Pokud nezadáte zarovnání, bude výchozí obrázek „dole“.

Jako vedlejší poznámku můžete do značek obrázků zahrnout atributy obrázků (src, zarovnat, alt atd.) V jakémkoli pořadí. Moje osobní preference je nejprve uvést atribut 'src', protože to je nejzákladnější atribut a musí být součástí každé značky obrázku, ale můžete použít libovolnou posloupnost, která se vám zdá nejpřirozenější.

Video Návody: HTML 07: Obrázky, rozmery obrázkov, obrázky v linkoch, hotlinking (Smět 2024).