Poďme spolu tvoriť web!

Dominik Šelmeci 11.01.2016

V tomto článku si ukážeme, ako sa tvorí webová stránka. Teóriu v nej budeme na začiatok maximálne obchádzať a ukážem vám čo najviac príkladov.

Čo na to budeme potrebovať?

  • editor - môžete použiť klasický textový editor, alebo napríklad Notepad++
  • vytvorte si prázdny súbor s názvom moj_web.html
  • otvorte si tento súbor v prehliadači dvojitým kliknutím naň, alebo pravým tlačidlom -> otvoriť v programe

Základná kostra HTML

Keď začínate s HTML odporúčam vám rozdeliť si editor na jednu polovicu obrazovky a prehliadač na druhú polovicu obrazovky. Môže to vyzerať napríklad takto:

Na tvorbu webu sa používa značkovací jazyk HTML. Nižšie si skopírujte kód do vášho súboru. Následne obnovte stránku v prehliadači tlačidlom F5.

<!DOCTYPE html>
<html>
    <head>
        <title>Blog ako tvoriť web</title>
        <meta charset="utf-8">
    </head>

    <body>
        <h1>Môj blog</h1>
        <h2>Rob, čo môžeš, s tým, čo máš, tam, kde si.</h2>

        <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>
    </body>
</html>

Vidíme že v HTML dokumente sú dve hlavné sekcie. Priestor medzi head a head obsahuje informácie o dokumente. Tie sa nám v prehliadači nezobrazia. Priestor medzi <body> a </body> sa zobrazí v prehliadači.

Skúsme pridať základnú navigáciu medzi nadpis <h2> a odstavec <p>. Pridajte si pokojne aj viac odstavcov <p> a viacej textu aby na stránke bolo niečo vidieť :).

        <h2>Rob, čo môžeš, s tým, čo máš, tam, kde si.</h2>

        <aside>
            <nav>
                <a href="#">Úvod</a>
                <a href="#">O mne</a>
                <a href="#">Referencie</a>
                <a href="https://www.google.sk">Google</a>
            </nav>
        </aside>

        <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>

HTML je pomerne jednoduchý jazyk zložený zo značiek. Osobne písanie HTML kódu prirovnávam k stavaniu si z lega. HTML predstavuje jednotlivé kocky lega.

CSS kaskádové štýly

Naša stránka vyzerá trocha pochmúrne, čo poviete? Mohli by sme ju troška skrášliť. Použijeme na to CSS alebo inak kaskádovité štýly. Pridáme krajšie písmo z Google Fonts. Vložíme ho do hlavičky do sekcie <head> pod <meta charset="utf-8">.

<link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Teraz potrebujeme naše písmo aplikovať na celý dokument. Písmo si aj trocha zväčšíme a zmeníme farbu plochy. Docielime to pomocou CSS, ktoré budeme písať do značky <style></style>. Doplníme ju pod našu definíciu písma.

        <link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

        <style>
            body {
                font-family: 'Poiret One', cursive;
                font-size: 125%;
                background-color: #D4FFF8;
            }
            h1, h2 { text-align: center; }
            h1 {
                text-align: center;
                color: #39690E;
                text-shadow: 2px 2px 2px #7FF368;
            }
        </style>
    </head>

Štýl sme aplikovali na celý dokument, lebo sme použili označenie body {}. Zväčšili sme písmo o 25%, nastavili typ písma Poiret One a zmenili sme farbu pozadia celej stránky na svetlo modrú (#D4FFF8). Taktiež sme nadpis <h1> a podnadpis <h2> zarovnali na stred. Hlavnému nadpisu sme zmenili farbu písma a doplnili tieň pre efekt.

Vyskúšajme teraz z nášho menu spraviť bočný panel. Docielime to opäť s pomocou CSS štýlov. Musíme na začiatok všetky naše odstavce vložiť do jednej značky <div> a pridíme jej aj vlastnú triedu (cháp označenie). Doplnil som aj viacej textu ako som vám vyššie radil.

    <div class="obsah-clanku">
        <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>

        <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>
    </div>

 A následne do značky <style> doplníme potrebné štýly:

        aside {
            width: 16%;
            float: left;
            margin-top: 1em;
            padding: 0 2%;
        }
        nav a {
            display: block;
font-weight: bold; } .obsah-clanku { width: 76%; float: left; padding: 0 2%; }

Naše menu sme zarovnali vľavo a zmenšili ho. Zároveň sme pomocou display:block; zabezpečili aby položky boli pod sebou. Text sme umiestnili na pravo od bočného panelu.

Javascript

S pomocou javascriptu môžeme meniť jednotlivé CSS štýly alebo reagovať na používateľove akcie (kliknutie myšou, písanie,...). Vytvoríme tlačidlo a po kliku naň zmeníme farbu písma. Použijeme na to známu knižnicu jQuery. Vložte do hlavičky pod definíciu nášho písma <link:

    <link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Teraz si niekde napríklad medzi vaše odstavce, alebo kdekoľvek do textu vytvorte nasledovné tlačidlo:

<button>Magické tlačítko</button>

S pomocou javascriptu a knižnice jQuery teraz napíšeme funkciu. Javascript sa píše do značiek <script></script>. Umiestnite tento kód nad ukončovaciu značku </body>.

<script>
    $('button').click(function() {
        alert('Farba textu očerveň!');
        $('p').css('color', 'red');
    });
</script>

Keď stlačíme tlačidlo, objaví sa nám hláška "Farba textu očerveň!". Po kliku na OK, sa nám zmení farba vo všekých paragrafoch na červenú. Môžete experimentovať a zameniť "red" za hocijakú inú farbu (blue, white, green...).

A máte to za sebou :). Napísali ste svoj prvý kód, kde sme si naraz odskúšali použiť tri technológie HTML, CSS a Javascript. Na kontrolu uvádzam celý kód nižšie.

<!DOCTYPE html>
<html>
    <head>
        <title>Blog ako tvoriť web</title>
        <meta charset="utf-8">
        <link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

        <style>
            body {
                font-family: 'Poiret One', cursive;
                font-size: 125%;
                background-color: #D4FFF8;
            }
            h1, h2 { text-align: center; }
            h1 {
                text-align: center;
                color: #39690E;
                text-shadow: 2px 2px 2px #7FF368;
            }
            aside {
                width: 16%;
                float: left;
                margin-top: 1em;
                padding: 0 2%;
            }
            nav a {
                display: block;
                font-weight: bold;
            }
            .obsah-clanku {
                width: 76%;
                float: left;
                padding: 0 2%;
            }
        </style>
    </head>

    <body>
        <h1>Môj blog</h1>
        <h2>Rob, čo môžeš, s tým, čo máš, tam, kde si.</h2>

        <aside>
            <nav>
                <a href="#">Úvod</a>
                <a href="#">O mne</a>
                <a href="#">Referencie</a>
                <a href="https://www.google.sk">Google</a>
            </nav>
        </aside>

        <div class="obsah-clanku">
            <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>

            <button>Magické tlačítko</button>

            <p>Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu. Toto je stránka o mojom blogu, kde vás naučím základy HTML, CSS a Javascriptu.</p>
        </div>

        <script>
            $('button').click(function() {
                alert('Farba textu očerveň!');
                $('p').css('color', 'red');
            });
        </script>
    </body>
</html>

V ďalšom článku si podrobnejšie rozoberieme HTML.