HTML pro úplné začátečníky #2 – Vkládání odkazů a obrázků

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> 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

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>