Preden lahko začnemo pisati v HTML datoteko, moramo ustvariti novo datoteko in jo poimenujemo s končnico “.html” (npr. spletna.html).

Slika 1: Datoteka HTML (avtor: Tia Vrhovec, licenca: CC0).

Datoteko nato najdemo na našem računalniku in jo odpremo.

V HTML-ju se značke pojavljajo v parih, kot npr. <html> in </html>. Prva oznaka je začetna značka in z njo vedno odpremo (<html>), zapremo pa z značko (</html>).

Z značko <!DOCTYPE> določimo vrsto dokumenta HTML
Z znančko <html> dokument odpremo, zapremo pa z značko </html>
Z značko <head> predstavimo njegovo glavo, to je del ki ga uporabnik ne vidi, zapremo pa z značko </head>
Z značko <title> označimo naslov strani, ki se nahaja znotraj značke head, zapremo pa z značko </title>
Znotraj začetne značke <body> pišemo vse besedilo, ki ga bomo napisali in končamo z značko </body>
Z značko <p> pišemo odstavke besedila, zaključimo pa z značko </p>
Z značkami <h1>, <h2>, <h3>, <h4>, <h5> in <h6> označujemo naslove besedila, številke predstavljajo nivoje naslovov, tudi naslove zaključimo z značkami </h1>, </h2>, </h3>, </h4>, </h5> in </h6>
Z značko <img> vstavljamo slike v besedilo

Znotraj značke head moramo napisati naslednjo značko, da bodo lahko na naši spletni strani vidni šumniki.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Izdelava spletne strani</title>
    </head>

    <body>
        <h1>Naslov 1</h1>
        <p>Tukaj pišemo besedilo</p>

        <h2>Naslov 1.1</h2>
        <p>Tukaj pišemo besedilo</p>

    </body>
</html>

Naslov 1

Tukaj pišemo besedilo

Naslov 1.1

Tukaj pišemo besedilo

Vstavljanje slike na spletno stran

Ločimo dve osnovni vrsti oznak. Oznake, ki nastopajo v parih smo jih že spoznali (<p> </p>) in samostojne oznake, ki imajo začetni del brez vsebine. Slike na našo spletno stran vključimo z oznako img. Oznaka je prazna, vsebuje samo atribute in nima zaključne oznake.

Oznaka ima dva zahtevana atributa, to sta src in alt.

Atribut src določa pot do naše slike, brskalniku pove kje se slika nahaja. Slika mora vedno ostati shranjena na istem mestu, sicer obiskovalci ne bodo videli več slike na spletni strani. Priporočljivo je, da se slika nahaja v isti mapi kot spletna stran in lahko za vrednost napišemo ime datoteke, drugače pa moramo napisati pot do naše slike.

Atribut alt nam zagotavlja, da opišemo sliko. Če je uporabnik iz nekega razloga ne more videti (počasna povezava, napaka v atributu src, itd.)

Z atributi width (širina) in height (višina) lahko določimo velikost slike v pikslih ali pa procentih.

<img src="URL" alt="Opis slike" width="400" height="600">

<img src="URL" alt="Opis slike" width="40%" height="60%">

Vstavljanje povezave na spletno stran

Oznaka <a> določa hiperpovezavo, njen najpomembnejši atribut je href, ki označuje cilj povezave. Besedilo povezave je del, ki bo bralcu viden. S klikom na besedilo povezave bo brskalnik poslan na določen naslov URL.

Ta datoteka, ki se bo odprla je lahko druga spletna stran, slika, film, različne vrste dokumentov (DOC, PDF, itd.), itd.

Za več podrobnosti obiščite <a href="https://www.w3schools.com/html/html_links.asp">spletno stran</a>.

Za več podrobnosti obiščite spletno stran.

Za ponovitev rešite kviz, ki ga najdete v meniju pod ponovitev.