Základy HTML a CSS pre úplných začiatočníkov

Úvod > Tipy a triky > Tvorba webstránok > Základy HTML a CSS pre úplných začiatočníkov

Úvod

HTML a CSS sú základom každej webstránky. HTML (HyperText Markup Language) tvorí štruktúru stránky, zatiaľ čo CSS (Cascading Style Sheets) sa stará o vizuálny vzhľad – farby, fonty, rozloženie. Tento článok je určený pre úplných začiatočníkov a ukáže ti, ako vytvoriť jednoduchú a peknú webstránku od základov.

1. HTML – štruktúra stránky

HTML je jazyk, ktorý vytvára obsah webstránky. Stránka sa skladá z tagov, ktoré označujú rôzne prvky.

Základná štruktúra HTML:

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja prvá webstránka</title>
</head>
<body>
    <h1>Vitaj na mojej stránke</h1>
    <p>Toto je môj prvý web.</p>
    <img src="obrazok.jpg" alt="Ukážkový obrázok">
</body>
</html>

  • <h1> – hlavný nadpis

  • <p> – odsek textu

  • <img> – obrázok s atribútom src a popisom alt

2. CSS – vzhľad stránky

CSS určuje, ako bude stránka vyzerať: farby, fonty, veľkosti a rozloženie. CSS môžeš pridať inline, v hlavičke alebo ako externý súbor.

Príklad základného CSS vloženého do hlavičky:

 
<style>
body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        color: #333333;
        margin: 20px;
}
h1 {
        color: #2e7d32;
}
p {
        font-size: 16px;
}
img {
        max-width: 100%;
        height: auto;
}
</style>

  • font-family – typ písma

  • background-color – farba pozadia

  • color – farba textu

  • max-width a height: auto – zabezpečí, že obrázky sa prispôsobia veľkosti obrazovky

3. Základné tipy pre začiatočníkov

  1. Udržuj čistú štruktúru: Každý tag uzatváraj a vkladaj prvky logicky.

  2. Používaj komentáre:

    <!-- Toto je komentár -->

  3. Testuj stránku v prehliadači: Po každej úprave otvor HTML súbor v prehliadači a skontroluj výsledok.

  4. Experimentuj: Skúšaj meniť farby, fonty a pridávať nové prvky, aby si lepšie pochopil, ako CSS a HTML spolupracujú.

4. Ďalšie kroky

Po zvládnutí základov HTML a CSS môžeš skúsiť:

  • Rozloženie pomocou Flexbox alebo Grid

  • Pridanie tlačidiel a odkazov

  • Pridanie interaktívnych prvkov s JavaScriptom

Záver

HTML a CSS sú stavebnými kameňmi každej webstránky. Aj keď sa spočiatku zdajú zložité, pravidelným cvičením a experimentovaním sa rýchlo naučíš vytvárať jednoduché a vizuálne pekné webstránky. Tento základ ti umožní pokračovať v tvorbe pokročilejších webov, využívať CMS alebo pridávať interaktivitu.

Aktualizovaný:

Iné Články

a 19 ďaľších ...