Vse za Joomlo
Izdelava spletnih strani - Joomla CMS sistem.
Izobraževanja in delavnice. Vodiči in nasveti. Joomla podpora.

HTML

Dobrodošli v svet HTML! V tem izobraževanju bomo obravnavali osnove HTML-ja, enega izmed temeljnih gradnikov za spletno razvoj. Skozi različne sklope se boste naučili osnovnih HTML konceptov in elementov ter videli primere, kako jih uporabiti. Na koncu boste znali ustvariti osnovno spletno stran, ki bo vsebovala besedilo, slike, povezave in še več.

1. Kaj je HTML?

HTML (HyperText Markup Language) je osnovni jezik za ustvarjanje spletnih strani. S pomočjo HTML-ja lahko strukturiramo vsebino na strani, kot so besedilo, slike, gumbi in povezave.

HTML je sestavljen iz elementov, ki so označeni z oznakami (ang. tags). Vsaka oznaka ima svojo specifično funkcijo. Elementi so običajno napisani z začetno in končno oznako.

Primer osnovnega HTML elementa:

<p>Tukaj je neko besedilo v odstavku.</p>

V zgornjem primeru je oznaka <p> začetek elementa odstavka, medtem ko </p> pomeni konec elementa.

2. Osnovna struktura HTML dokumenta

Vsak HTML dokument se mora začeti z osnovno strukturo. Ta struktura pove spletnemu brskalniku, kako interpretirati HTML kodo.

Osnovna struktura HTML dokumenta:

<!DOCTYPE html>
<html>
<head>
    <title>Moja prva spletna stran</title>
</head>
<body>
    <h1>Dobrodošli na moji spletni strani!</h1>
    <p>To je moja prva spletna stran, narejena s pomočjo HTML-ja.</p>
</body>
</html>
 

Poglejmo ključne dele te kode:

  • <!DOCTYPE html>: Ta vrstica pove spletnemu brskalniku, da uporabljamo najnovejšo različico HTML-ja.
  • <html>: Element <html> je korenski element, ki zajema celoten HTML dokument.
  • <head>: Ta del vsebuje informacije o dokumentu, kot je naslov, povezave na zunanje datoteke (CSS, JavaScript itd.).
  • <title>: Naslov dokumenta, ki se pojavi v zavihku brskalnika.
  • <body>: Tukaj je vsebina strani, ki jo uporabniki vidijo.

3. Naslovi in odstavki

Naslovi in odstavki so ključni za organiziranje besedila na spletni strani. Naslovi se uporabljajo za označevanje naslovov sekcij, odstavki pa za ločevanje besedila.

Primer naslova in odstavka:

<h1>Glavni naslov</h1>
<p>To je odstavek z neko vsebino.</p>
<h2>Podnaslov</h2>
<p>To je drugi odstavek.</p>

V HTML-ju imamo šest različnih stopenj naslovov, od <h1> do <h6>. <h1> je največji naslov in se uporablja za glavne naslove, medtem ko se <h6> uporablja za manj pomembne naslove.

4. Seznami

Seznami so zelo uporabni za prikazovanje elementov v urejeni ali neurejeni obliki.

Neurejen seznam:

Neurejeni seznami uporabljajo oznake (kroge, kvadrate) za označevanje točk.

<ul>
    <li>Prva točka</li>
    <li>Druga točka</li>
    <li>Tretja točka</li>
</ul>

Urejen seznam:

Urejeni seznami uporabljajo številke za označevanje vsake točke.

<ol>
    <li>Prva točka</li>
    <li>Druga točka</li>
    <li>Tretja točka</li>
</ol>

5. Povezave

Povezave ali hiperpovezave omogočajo uporabnikom navigacijo med različnimi spletnimi stranmi ali deli iste strani.

Primer hiperpovezave:

<a href="https://www.example.com">Obiščite Example.com</a>

  • <a>: Oznaka za povezavo.
  • href: Lastnost, ki določa URL povezave.

6. Slike

Slike so nepogrešljiv del spletnih strani. Za vstavljanje slik uporabljamo oznako <img>, ki je samozapirajoča.

Primer slike:

<img src="/slika.jpg" alt="Opis slike">

  • src: Določa pot do slike.
  • alt: Opis slike, ki se prikaže, če slike ni mogoče naložiti.

7. Tabele

Tabele so koristne za prikazovanje podatkov v strukturirani obliki.

Primer tabele:

<table>
    <tr>
        <th>Ime</th>
        <th>Starost</th>
    </tr>
    <tr>
        <td>Janez</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Marija</td>
        <td>30</td>
    </tr>
</table>

  • <table>: Označuje začetek tabele.
  • <tr>: Označuje vrstico v tabeli.
  • <th>: Označuje glavo stolpca.
  • <td>: Označuje celico s podatki.

8. Obrazci

Obrazci omogočajo uporabnikom vnos podatkov, ki se nato pošljejo na strežnik.

Primer obrazca:

<form action="/submit" method="post">
    <label for="ime">Ime:</label>
    <input type="text" id="ime" name="ime">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <input type="submit" value="Pošlji">
</form>

  • <form>: Začetek obrazca. Lastnost action določa, kam se bodo podatki poslali, method pa določa način pošiljanja (GET ali POST).
  • <input>: Polja za vnos podatkov. Različne vrednosti za type določajo različna polja (npr. besedilo, email, geslo).

9. Semantični elementi

HTML5 je predstavil številne semantične elemente, ki izboljšajo strukturo dokumenta in njegovo dostopnost. Nekateri izmed teh elementov so:

  • <header>: Uporablja se za glavo dokumenta ali sekcije.
  • <nav>: Vsebuje navigacijske povezave.
  • <section>: Določa posamezne sekcije vsebine.
  • <article>: Predstavlja samostojno vsebinsko enoto.
  • <footer>: Označuje nogo dokumenta ali sekcije.

Primer semantičnih elementov:

 

<header>
    <h1>Naslov spletne strani</h1>
    <nav>
        <a href="#home">Domov</a>
        <a href="#about">O nas</a>
    </nav>
</header>

 

<section>
    <article>
        <h2>Članek 1</h2>
        <p>Vsebina prvega članka.</p>
    </article>
    <article>
        <h2>Članek 2</h2>
        <p>Vsebina drugega članka.</p>
    </article>
</section>

 

<footer>
    <p>Avtorske pravice © 2024</p>
</footer>

 

10. Komentarji v HTML-ju

Komentarji so koristni za dodajanje opomb ali pojasnil v kodo, ki pa se ne prikažejo na spletni strani.

Primer komentarja:

<!-- To je komentar in ne bo viden na strani -->

11. Uporaba CSS za oblikovanje HTML-ja

HTML se uporablja za strukturo vsebine, CSS (Cascading Style Sheets) pa za oblikovanje. Če želite v HTML-ju uporabiti CSS, lahko to storite na več načinov:

  • Vstavljeno oblikovanje: CSS znotraj HTML elementa.

Primer:

<p style="color: blue;">To je modro besedilo.</p>

  • Zunanji slogovni list: Ločeno datoteko .css povežemo z HTML-jem.

Primer povezave zunanjega CSS:

<head>
    <link rel="stylesheet" href="/styles.css">
</head>

12. Povzetek

S tem izobraževanjem ste spoznali osnovne koncepte HTML-ja, ki vključujejo:

  • Osnovno strukturo HTML dokumenta.
  • Uporabo naslovov, odstavkov, seznamov in tabel.
  • Vstavljanje slik in povezav.
  • Ustvarjanje obrazcev za vnos podatkov.
  • Semantične elemente, ki izboljšajo strukturo spletne strani.
  • Komentarje in uporabo CSS za oblikovanje.

S temi osnovnimi znanji lahko zdaj začnete ustvarjati svoje prve spletne strani in nadaljujete učenje naprednejših tehnik oblikovanja in razvoja spletnih aplikacij.