Ahoj, dnes si ukážeme, jak pracovat s odkazy a obrázky při tvorbě vašeho webu
Minulý díl je zde: HTML pro úplné začátečníky #1
Otevřete si soubor „index.html“, který jsme si minule vytvořili, budeme v něm dnes pokračovat, popřípadě vytvořte nový :).
Odkaz
První si ukážeme jak vytvořit jednoduchý odkaz. Odkaz vkládáme mezi tagy <body> a </body>, a to za použití tagu <a href=“programujeme.4fan.cz“> a </a>.
Parametr href určuje cílový web, na který náš odkaz povede, musí být v uvozovkách.
Mezi tag <a…> a </a> poté můžeme vložit text odkazu.
Ve finále by náš odkaz měl vypadat nějak takhle:
<a href=“http://programujeme.4fan.cz“> Přidej se k nám! </a>
Obrázek
Žádný web by se přece neobešel bez obrázků, co myslíte? Vložit obrázek na váš web je velmi jednoduché, stačí jej mít kam umístit
Pokud máte na webu nějaký obrázek, můžete použít jeho url adresu, pokud ne, můžete využít ten náš
Pro vložení obrázku na váš web stačí použít tag <img src=“http://www.programujeme.4fan.cz/wp-content/uploads/2014/09/htmlprozacatecniky.png“>.
Jak jste si nejsípě všimli, parametr src má podobnou funkci jako href u odkazu, tedy, odkazuje na adresu obrázku.
A co takhle obojí?
Ano, jistě jste již viděli „obrázkové odkazy“. Pokud taky jeden chcete, máte štěstí, není to nic složitého!
Stačí místo textu (a nebo k textu) odkazu vložit obrázek!
<a href=“http://programujeme.4fan.cz“> <img src=“http://www.programujeme.4fan.cz/wp-content/uploads/2014/09/htmlprozacatecniky.png“> </a>
nebo
<a href=“http://programujeme.4fan.cz“> Přidej se k nám! <img src=“http://www.programujeme.4fan.cz/wp-content/uploads/2014/09/htmlprozacatecniky.png“> </a>
Ale co přehlednost?
Jistě jste si všimli, že naše „webovka“ nyní vypadá příšerně. Tomu se ale budeme věnovat v následujících kapitolách. Prozatím bych vám doporučil využít tag <br>, který zalamuje řádky, aby byl váš web alespoň trochu přehlednější!
Zde je obsah našeho nynějšího souboru „index.html“. Opět jej stačí přetáhnout do okna prohlížeče abychom viděli naše výsledky.
<html>
<head>
hlavička
<title>Titulek</title>
</head>
<body>
<br>
A zde bude váš obsah
<br>
<a href=“http://programujeme.4fan.cz“> Přidej se k nám! <img src=“http://www.programujeme.4fan.cz/wp-
content/uploads/2014/09/htmlprozacatecniky.png“> </a>
</body>
</html>
Nebo si jej můžete stáhnout zde index