HTML Vadnica

HTML je osnovni gradnik vsake spletne strani. Kratica pomeni HyperText Markup Language. Z njim določimo strukturo vsebine: kaj je naslov, kje stoji odstavek in kje se nahaja slika. Brskalnik te elemente prebere in jih vizualno izriše uporabniku. HTML predstavlja temelje, na katere nato dodamo CSS za vizualno oblikovanje in JavaScript za interaktivnost. Skupaj tvorijo nerazdružljivo trojico sodobnega spleta.

PRIMER

<!DOCTYPE html>
    <html lang="sl">
    <head>
        <meta charset="UTF-8">
        <title>Interaktivna HTML vadnica</title>
        <viewport content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    <body>
    <h1>Dobrodošli v interaktivni HTML vadnici</h1>
    
    <nav>
        <p><strong>Skok na razdelek:</strong></p>
        <ul>
            <li><a href="#seznam">Seznam</a></li>
            <li><a href="#tabela">Tabela</a></li>
            <li><a href="#obrazec">Obrazec</a></li>
        </ul>
    </nav>
    
    <hr>
    
    <section id="seznam">
        <h2>Seznam</h2>
    
        <h3>Urejen (ordered) seznam</h3>
        <ol>
            <li>Prvi korak: odpri brskalnik</li>
            <li>Drugi korak: vpiši URL</li>
            <li>Tretji korak: uživaj v vsebini</li>
        </ol>
    
        <h3>Neurejen (unordered) seznam</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </section>
    
    <hr>
    
    <section id="tabela">
        <h2>Tabela podatkov</h2>
    
        <table border="1" cellpadding="5">
            <caption>Primer tabele z informacijami o knjigah</caption>
            <thead>
                <tr>
                    <th>Avtor</th>
                    <th>Knjiga</th>
                    <th>Leto izdaje</th>
                    <th>ISBN</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ime avtorja</td>
                    <td>Naslov knjige</td>
                    <td>Leto izdaje</td>
                    <td>ISBN koda</td>
                </tr>
                <tr>
                    <td>Ime avtorja</td>
                    <td>Naslov knjige</td>
                    <td>Leto izdaje</td>
                    <td>ISBN koda</td>
                </tr>
                <tr>
                    <td>Ime avtorja</td>
                    <td>Naslov knjige</td>
                    <td>Leto izdaje</td>
                    <td>ISBN koda</td>
                </tr>
            </tbody>
        </table>
    </section>
    
    <hr>
    
    <section id="obrazec">
        <h2>Kontaktni obrazec</h2>
    
        <form action="#" method="post">
            <fieldset>
                <legend>Podatki o uporabniku</legend>
    
                <label for="ime">Ime:</label><br>
                <input type="text" id="ime" name="ime" required><br><br>
    
                <label for="email">Naslov:</label><br>
                <input type="email" id="email" name="email" required><br><br>
    
                <label for="spol">Spol:</label><br>
                <select id="spol" name="spol">
                    <option value="">Izberite¦</option>
                    <option value="m">Moški</option>
                    <option value="z">Ženska</option>
                    <option value="drugo">Drugo</option>
                </select><br><br>
    
                <label>Interesi (označite več):</label><br>
                <input type="checkbox" id="html" name="interesi" value="HTML">
                <label for="html">HTML</label><br>
                <input type="checkbox" id="css" name="interesi" value="CSS">
                <label for="css">CSS</label><br>
                <input type="checkbox" id="js" name="interesi" value="JS">
                <label for="js">JavaScript</label><br><br>
    
                <label for="sporocilo">Sporočilo:</label><br>
                <textarea id="sporocilo" name="sporocilo" rows="4" cols="40"></textarea><br><br>
    
                <button type="submit">Pošlji</button>
                <button type="reset">Ponastavi</button>
            </fieldset>
        </form>
    </section>

REZULTAT

Kaj natančno je HTML?

HTML ni programski jezik v klasičnem pomenu (kot sta PHP ali JavaScript), temveč označevalni jezik. Sestavljen je iz vrste elementov, ki brskalniku sporočajo, kako naj prikaže vsebino.

Glavne značilnosti HTML-ja:

Je standardni svetovni jezik za ustvarjanje spletnih vsebin.
Opisuje logično strukturo spletne strani.
Omogoča vstavljanje multimedije (slike, video, zvok).
Je preprost za učenje, a izjemno razširljiv za kompleksne projekte.

Kako pišemo HTML elemente?

Večina HTML elementov ima začetno in končno značko, med katerima se nahaja vsebina. Posebna pozornost gre krovnemu elementu <html>, ki mora vedno vsebovati atribut lang za definicijo jezika strani.

Primeri zapisa:

<h1>To je glavni naslov</h1>
<p>To je vsebina odstavka.</p>
<značka>vsebina</značka>
Samozapiralne značke: Nekateri elementi ne potrebujejo končne značke (npr. <br>, <hr>, <img>, <input>).

Katera orodja potrebujete?

Ne potrebujete drage opreme. Začnite s tem, kar imate, in napredujte, ko boste potrebovali več funkcij. Tukaj je pregled najboljših orodij za začetnike in napredne uporabnike.

Orodje	Za koga?	Glavna prednost	Cena
Beležnica (Notepad)	Za popolne začetnike, ki želijo razumeti osnove brez odvečnih funkcij.	Povsod na voljo, ničesar ne nameščati. Uči vas, da je HTML samo besedilo.	Brezplačno
Notepad++	Za začetnike, ki želijo malo več (barve, več datotek hkrati).	Lahek, hiter, odprtokoden. Ima barvno kodiranje sintakse.	Brezplačno
Visual Studio Code (VS Code)	Za tiste, ki resno začnejo z razvojem in želijo moderno orodje.	Neomejeno število dodatkov (extensions), odlično samopopolnjevanje kode, brezplačen.	Brezplačno
Sublime Text	Za tiste, ki želijo izjemno hitrost in eleganten dizajn.	Zelo hiter, minimalističen, podpira ogromno formatov.	Brezplačen (demo)
PhpStorm	Za profesionalce in tiste, ki razvijajo kompleksne spletne aplikacije (PHP, JS, Baze).	Vse v enem: debugiranje, baze podatkov, Git, napredno refaktoriranje.	30 dni brezplačno

Moj nasvet: Začnite z Beležnico ali Notepad++, da razumete osnove. Ko boste začeli pisati več kode, preidite na VS Code. Če boste delali s PHP in bazami, je PhpStorm najboljša naložba.

HTML elementi

HTML elemente definiramo z začetno oznako, nekaj vsebine in zaključimo s končno oznako. Preden začnemo z opisi elementov, moramo definirati še dve pomembni oznaki, head in body. Če gremo za uporabo posebnih znakov (kot so š, č ali ž (slovenske črke)), moramo dodati UTF-8, ki jih podpira. Oznaka Title opisuje naslov spletne strani, ki se prikaže v zavihku spletne strani. Ko želimo prikazati vsebino na spletni strani, uporabimo body element, saj je vsa vsebina, ki je prikazana na spletni strani, definirana med <body></body> oznako. Za vsebino spletne strani najpogosteje uporabljamo odstavek <p></p>, in naslov <h1>, <h2>, <h3>, <h4>, <h5> in <h6>. To so oznake, ki označujejo naslov dokumenta na spletni strani in so definirani od <h1> do <h6>.

Ta tabela vam omogoča hiter pregled vseh osnovnih HTML elementov, njihovih kategorij in uporabe.

Element	Kategorija	Opis (To je to)	Primer kode
`<!DOCTYPE html>`	Struktura	Deklaracija tipa dokumenta. Obvezna na začetku.	`<!DOCTYPE html>`
`<html>`	Struktura	Koren element celotne strani.	`<html lang="sl"> ... </html>`
`<head>`	Struktura	Vsebuje metapodatke, naslov in povezave do CSS/JS.	`<head> ... </head>`
`<title>`	Metapodatki	Naslov strani, ki se prikaže v zavihku brskalnika.	`<title>Moja stran</title>`
`<meta charset="UTF-8">`	Metapodatki	Določi kodiranje znakov (podpira slovenske črke).	`<meta charset="UTF-8">`
`<meta name="viewport">`	Metapodatki	Omogoča responsiven dizajn na mobilnih napravah.	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
`<body>`	Struktura	Vse vidna vsebina strani je znotraj tega elementa.	`<body> ... </body>`
`<h1> ... </h1>`	Naslovi	Glavni naslov (najpomembnejši). Uporabi samo enkrat na strani.	`<h1>Glavni naslov</h1>`
`<h2> ... </h2>`	Naslovi	Podnaslov (druga raven pomembnosti).	`<h2>Podnaslov</h2>`
`<h3> ... </h6>`	Naslovi	Nadaljnje ravni naslovov (od h3 do h6).	`<h3>Manjši naslov</h3>`
`<p> ... </p>`	Besedilo	Odstavek besedila. Osnovna enota vsebine.	`<p>To je odstavek.</p>`
`<img>`	Mediji	Vstavi sliko. Nima zaključne oznake.	`<img src="slika.jpg" alt="Opis">`
`<a>`	Povezave	Ustvari hiperpovezavo do druge strani ali mesta.	`<a href="https://vadnica.org">Povezava</a>`
`<iframe>`	Vdelava	Vdelava druge spletne strani ali vsebine v tvojo.	`<iframe src="https://example.com"></iframe>`

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>HTML elementi</title>
    <meta name="description" content="Kratek, čist primer osnovnih HTML elementov: head, meta, naslovi, slika, povezave, iframe.">
    <meta name="keywords" content="HTML, meta, naslovi, slike, povezave, iframe, primer">
    <viewport content="width=device-width, initial-scale=1">
</head>

<body>
    <h1>HTML elementi</h1>
    <h2>1) Naslovi in struktura</h2>
    <p>Naslovi (h1 do h6) pomagajo strukturirati vsebino dokumenta.</p>
    <h3>Podnaslov (h3)</h3>
    <p>To je kratek odstavek pod podnaslovom.</p>
    
    <hr>
    
    <h2>2) Slika (img)</h2>
    <p>Primer slike z opisnim alt besedilom:</p>
    <img src="icons/smiley-1.svg" alt="Preprosta SVG ilustracija" width="256" height="256">
    
    <hr>
    
    <h2 id="povezave">3) Povezave (a)</h2>
    <ul>
        <li>Absolutna povezava:
            <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">example.com</a>
        </li>
        
        <li>Relativna povezava (na to sliko):
            <a href="icons/smiley-1.svg" target="_blank" rel="noopener noreferrer">odpri smesko1.svg</a>
      </li>
    </ul>
    
    <hr>
    
    <h2>4) Povzetek</h2>
    <p>V tem dokumentu so prikazani: metapodatki v <head>, naslovi, slika, povezave in iframe.</p>
</body>
</html>

REZULTAT

HTML Vadnica

Kaj natančno je HTML?

Kako pišemo HTML elemente?

Katera orodja potrebujete?

HTML elementi

Vadnica.org

Povezave

Podpora