HTML Vadnica

HTML je osnovni jezik za gradnjo spletnih strani. Ime pomeni HyperText Markup Language. Z njim določimo, kaj je na strani naslov, odstavek, slika, seznam ali povezava. Brskalnik te elemente prepozna in jih pravilno prikaže. HTML je temelj, na katerega nato dodamo CSS (za izgled) in JavaScript (za interaktivnost). S HTML-jem lahko zgradimo preproste statične strani ali bolj dinamične strani, prilagojene sodobnim uporabnikom.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Interaktivna HTML vadnica</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<h1>Dobrodošli v interaktivni HTML vadnici</h1>

<!-- Navigacijski meni -->
<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>

<!-- Seznam (urejen in neurejen) -->
<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>

<!-- Tabela -->
<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>George Orwell</td>
                <td>1984</td>
                <td>1949</td>
                <td>978-0451524935</td>
            </tr>
            <tr>
                <td>J.K. Rowling</td>
                <td>Harry Potter in Kamen modrosti</td>
                <td>1997</td>
                <td>978-0747532699</td>
            </tr>
            <tr>
                <td>Harper Lee</td>
                <td>To Kill a Mockingbird</td>
                <td>1960</td>
                <td>978-0061120084</td>
            </tr>
        </tbody>
    </table>
</section>

<hr>

<!-- Obrazec -->
<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">E‑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="Ž">Ž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>

<hr>

<footer>
    <p>&copy; 2025 Interaktivna HTML Vadnica.</p>
</footer>
</body>
</html>

REZULTAT

HTML dokument je preprosto besedilna datoteka, ki jo lahko ustvarimo z osnovnim urejevalnikom besedil (na primer Beležnico), vendar so za bolj profesionalno delo na voljo naprednejša orodja in urejevalniki kode, kot je na primer PHPStorm, Sublime Text ali Visual Studio Code. Ko so datoteke zapisane in shranjene, jih lahko odpremo s spletnim brskalnikom, ki bo prebral HTML dokument in prikazal oblikovan rezultat. S pomočjo HTML-ja se lahko naučimo osnov spletnega razvoja, obenem pa nudi priložnosti za kreativnost. Glavne značilnosti HTML-ja so njegova preprostost ter razširljivost, saj omogoča povezovanje z različnimi orodji in jezikovnimi knjižnicami. Čeprav so osnovne strani lahko zelo enostavne, pa HTML omogoča tudi kompleksne postavitve in strukture, ki tvorijo hrbtenico danes najbolj naprednih spletnih strani.

Kaj je HTML?

Oznaka <html> je jedro HTML dokumenta. Je zabojnik vseh ostalih HTML elementov, razen oznake <!DOCTYPE>. Opomba: Znotraj oznake <html> moramo vedno vključiti atribut lang, če želimo prijaviti jezik. Ta oznaka je namenjena pomoči iskalnikom in brskalnikom.

Kako pišemo elemente v HTML dokument?

<h1>vsebina naslova</h1>
<p>vsebina odstavka</p>
<imeElementa>vsebina dokumenta</imeElementa>
Oznake, ki se ne zaprejo: <br>, <hr>, <img>, <input>, <param>, <source> itd.

HTML pomeni Hyper Text Markup Language, in:

Je standardni jezik za ustvarjanje spletnih strani.
Opisuje strukture spletne strani.
Je sestavljen iz vrste elementov.
Sporoča brskalniku, kako prikazati vsebino.
Označuje dele vsebine, kot je to naslov, odstavek itd.

ELEMENT	OPIS	PRIMER
<!DOCTYPE html>	Definira dokument kot HTML5.	GLEJ PRIMER
<html>	Je korenski element HTML strani.	GLEJ PRIMER
<head>	Vsebuje meta informacije o dokumentu.	GLEJ PRIMER
<title>	Določa naslov HTML dokumenta.	GLEJ PRIMER
<body>	Vsebuje vidno vsebino strani.	GLEJ PRIMER
<h1> <h2> <h3> <h4> <h5> <h6>	Določa velikost naslova.	GLEJ PRIMER
<p>	Določa odstavek.	GLEJ PRIMER
</body>	Vsebino zaključimo.	GLEJ PRIMER
</html>	Zaključimo naš HTML dokument.	GLEJ PRIMER

Orodje za delo s HTML

Za ustvarjanje in urejanje HTML datotek imamo na voljo različna orodja, ki ustrezajo tako začetnikom kot tudi naprednejšim uporabnikom. Ne glede na izbrano orodje je ključno, da se počutimo udobno pri delu in imamo ustrezno funkcionalnost za hiter razvoj spletnih strani. Tukaj so nekatera najpogostejša orodja za delo s HTML:

Beležnica	HTML dokument lahko napišemo v beležnico, ki je del vsakega operacijskega sistema.	GLEJ PRIMER
PHPStorm	Urejevalnik dejansko dobi našo kodo in globoko razume njeno strukturo ter odpira vse funkcije jezika PHP za sodobne in starejše projekte. Zagotavlja najboljše dokončanje kode, preoblikovanje, preprečevanje napak in še več.	GLEJ PRIMER
VS Code	Presezimo označevanje sintakse in samo dokončanje z IntelliSense, ki zagotavlja pametna dokončanja na podlagi vrst spremenljivk, definicij funkcij in uvoženih modulov.	GLEJ PRIMER