Close Menu
    Novinky
    Programovanie a vývoj softvéru

    Nauč sa HTML od základov – 8-dielny kurz pre začiatočníkov

    3 minúty čítania270 Zobrazení

    HTML (Hypertext Markup Language) je základný jazyk pre tvorbu webových stránok. Tento seriál vás prevedie od úplných základov HTML až po pokročilejšie techniky. Každý diel sa zameriava na konkrétne koncepty a praktické ukážky. Tu je rozdelenie nášho seriálu:

    1. diel: Úvod do HTML a základná štruktúra

    Obsah:

    • Čo je HTML a ako funguje?
    • Vysvetlenie HTML ako značkovacieho jazyka pre web.
    • Základná štruktúra HTML dokumentu (hlavička, telo, nadpisy, odstavce).
    • Vytvorenie prvého jednoduchého HTML dokumentu a jeho zobrazenie v prehliadači.

    Praktická časť:

    • Napíšte prvý HTML dokument s nadpisom a odstavcom.
    <!DOCTYPE html>
<html>
  <head>
    <title>Moja prvá HTML stránka</title>
  </head>
  <body>
    <h1>Vitajte na mojej stránke!</h1>
    <p>Toto je môj prvý HTML dokument.</p>
  </body>
</html>

    2. diel: Práca s textom a základné formátovanie

    Obsah:

    • Ako používať základné značky na formátovanie textu.
    • Značky pre odstavce (<p>), nadpisy (<h1> až <h6>), a riadkové formátovanie (<b>, <i>, <u>).
    • Vytvorenie zoznamov: nečíslované (<ul>) a číslované zoznamy (<ol>).
    • Odkazy a ich vytváranie pomocou <a> značky.

    Praktická časť:

    • Vytvorte stránku so zoznamami a odkazmi, ktoré vedú na iné stránky.

    3. diel: Obrázky a médiá

    Obsah:

    • Ako pridať obrázky na stránku pomocou <img>.
    • Vysvetlenie atribútov obrázkov (src, alt, width, height).
    • Vkladanie videí a zvukov do HTML pomocou <video> a <audio>.

    Praktická časť:

    • Vytvorte stránku s obrázkami a vložte do nej video alebo zvukový súbor.
    <img src="obrazok.jpg" alt="Popis obrázku" width="300">
<video controls>
  <source src="video.mp4" type="video/mp4">
  Váš prehliadač nepodporuje video tag.
</video>

    4. diel: Odkazy a navigácia

    Obsah:

    • Práca s odkazmi (<a>) a vytváranie navigačných prvkov.
    • Odkazy na externé a interné stránky.
    • Záložky (ankorové odkazy) pre navigáciu na konkrétne časti stránky.

    Praktická časť:

    • Vytvorte navigačné menu s odkazmi na rôzne sekcie stránky.

    5. diel: Tvorba tabuliek

    Obsah:

    • Ako vytvoriť tabuľky pomocou značiek <table>, <tr>, <td>, <th>.
    • Atribúty pre štýlovanie tabuliek (šírka, výška, okraje).
    • Používanie zlučovania buniek pomocou colspan a rowspan.

    Praktická časť:

    • Vytvorte tabuľku s rôznymi údajmi a prispôsobte jej vzhľad pomocou atribútov.
    <table border="1">
  <tr>
    <th>Meno</th>
    <th>Vek</th>
  </tr>
  <tr>
    <td>Janko</td>
    <td>25</td>
  </tr>
</table>

    6. diel: Formuláre a vstupné polia

    Obsah:

    • Vytváranie formulárov pomocou <form>.
    • Vysvetlenie rôznych typov vstupných polí (<input>, <textarea>, <select>).
    • Tlačidlá na odoslanie dát (<button>).
    • Ako používať atribúty ako name, value, a placeholder.

    Praktická časť:

    • Vytvorte formulár pre registráciu používateľa s menom, e-mailom a heslom.
    <form action="/submit.php" method="POST">
  Meno: <input type="text" name="meno"><br>
  E-mail: <input type="email" name="email"><br>
  Heslo: <input type="password" name="heslo"><br>
  <input type="submit" value="Odoslať">
</form>

    7. diel: HTML5 a nové prvky

    Obsah:

    • Nové prvky v HTML5, ako sú <article>, <section>, <header>, <footer>, <nav>, a <aside>.
    • Používanie semantických značiek pre lepšiu štruktúru stránok.
    • Zlepšenie prístupnosti webových stránok pre používateľov a vyhľadávače.

    Praktická časť:

    • Vytvorte stránku s použitím semantických prvkov, ako sú <header>, <footer>, a <article>.
    <header>
  <h1>Nadpis stránky</h1>
</header>
<article>
  <h2>Článok 1</h2>
  <p>Obsah článku.</p>
</article>
<footer>
  <p>Autorské práva © 2024</p>
</footer>

    8. diel: Základy CSS pre HTML

    Obsah:

    • Základné použitie CSS (Cascading Style Sheets) na úpravu vzhľadu HTML elementov.
    • Interné, externé a inline štýly.
    • Základy syntaxe CSS: farby, veľkosti písma, okraje, pozadie.

    Praktická časť:

    • Vytvorte základný CSS súbor a aplikujte štýly na HTML stránku.
    <style>
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  h1 {
    color: blue;
  }
</style>

    Záver seriálu

    Po absolvovaní tohto 8-dielneho seriálu budete schopní vytvárať jednoduché, ale aj komplexnejšie webové stránky v HTML. Následne môžete pokračovať v rozširovaní svojich vedomostí, napríklad učením sa CSS a JavaScriptu, ktoré umožnia ešte väčšiu interaktivitu a vizuálnu atraktivitu webových stránok.

    Zdieľať

    Podobné témy