Dnes je Čtvrtek, 23. Únor 2012 a svátek má Svatopluk, zítra Matěj.

Články

Tutoriály, programování a design, novinky, zajímavosti ...

8. Díl - Tvorba webových stránek

Úvod

Tentokrát propojíme HTML a CSS a pohrajeme si s formátem textu. :-)

Propojení HTML a CSS

Je to jednoduché, jenom do hlavičky vložíme link-tag s odkazem na soubor prvni.css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="application/xhtml; charset=utf-8" />
        <meta http-equiv="content-language" content="cs" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="robots" content="index, follow" />
        <link rel="stylesheet" href="prvni.css" type="text/css" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

Začínáme s CSS

Soubor si uložíme třeba jako 1.html ale nezavřeme ho a vytvoříme hned další, tentokrát klikněte na Cascading Style Sheet:

Nyní by jste měli mít v liště dva soubory, 1.html, prvni.css

Teď máte HTML soubor propojený s CSS a můžeme pokračovat.

Klikneme na záložku 1.html a budeme psát obsah webu mezi tagy body - těla stránky.

<body>

</body>

Zkusíme třeba změnit styl odkazu.

<a href="http://www.kubiro.cz">www.kubiro.cz</a>

Nyní uložíme a prohlédneme v prohlížeči.

Je to zatím nic moc, takže to teď pomocí CSS vylepšíme.

Odkazy a různé objekty v html se dají pojmenovat dvěma způsoby:

- class (třída) - tento typ se dá používat v jedné stránce vicekrát

- id (identifikátor) - tento typ se dá používat v jedné stránce pouze jednou, takže tento typ určitě nedoporučuji používat

Pokud použijeme class, musíme v css před název vložit tečku ".", u identifikátoru (id) používáme mřížku "#".

Do tagu a vložíme ještě class="odkaz".

<a href="http://www.kubiro.cz" class="odkaz">www.kubiro.cz</a>

Nyní jsme vytvořili třídu (class) s názvem odkaz a přepneme se v záložce na prvni.css

Teď do CSS napíšeme tento kód:

a.odkaz
{
    
}

Cokoliv teď napíšu mezi složené závorky (blok) { a } tak změní styl odkazu v HTML.

Zkusíme tam dopsat jinou velikost, například:

font-size: 16pt;

Pokaždé musíme na konci řádku, který je mezi { a } napsat středník ;

Nyní web vypadá takhle.

Barva

Teď by to chtělo změnit barvu:

color: #000000; /* černá barva */

Napsal jsem barvu v šestnáctkové soustavě, časem pochopíte proč. Za barvou sem dal ještě komentář.

Komentář může být i víceřádkové

/*
tohle 
je 
víceřádkový
komentář
*/

Vše co je v komentáři nemá vliv na samotný kód.

Vraťme se ale k barvě, nyní to vypadá takhle.

Hover

Teď budeme chtít, aby se odkaz změnil na červenou po najetí, k tomu se používá :hover.

a.odkaz:hover
{
    font-size: 16pt;
    color: #FF0000; /* červená barva */
}

Takže nyní bude celý CSS kód vypadat takto:

a.odkaz
{
    font-size: 16pt;
    color: #000000; /* černá barva */
}
a.odkaz:hover
{
    font-size: 16pt;
    color: #FF0000; /* červená barva */
}

A v prohlížeči takto.

Outline

Možná jste si všimli před kliknutím nebo po kliknutí tohoto škaredého rámečku

Tomu se říká outline (venkovní linka, rámeček ...)

Toho se toho zbavíme připsáním do obou bloků mezi { a } tímto kódem:

outline: none;

Takže náš konečný CSS kód vypadá takto

a.odkaz
{
    font-size: 16pt;
    color: #000000; /* černá barva */
    outline: none;
}
a.odkaz:hover
{
    font-size: 16pt;
    color: #FF0000; /* červená barva */
    outline: none;
}

A konečná stránka a bez outline - zde.

Seznam všech používaných příkazů v CSS časem sepíšu do samostatného článku a dám sem odkaz.

V příštím (už devátem) díle se naučíme důležitý tag - div.

Dát hlas!