Základy HTML a CSS pro laiky

Redakce NETzin.cz 19. 6. 2025     Rubrika:  Web    Štítky: CSS, HTML, tvorba webu

V dnešní digitální době není na škodu rozumět základům tvorby webových stránek. I když se tím nechcete živit, základní znalost HTML a CSS vám může pomoci třeba při úpravě webu, blogu nebo při komunikaci s programátorem. V tomto článku si jednoduše a srozumitelně vysvětlíme, co jsou HTML a CSS a jak spolu fungují.

Co je to HTML?

HTML je zkratka pro HyperText Markup Language, což znamená jazyk pro tvorbu struktury webových stránek. Pomocí HTML řekneme prohlížeči, co má být nadpis, co je odstavec, obrázek, odkaz nebo seznam.

Příklad jednoduchého HTML kódu:


<h1>Vítejte na mém webu</h1>
<p>Toto je úvodní odstavec.</p>
<a href="https://www.example.com">Klikněte zde</a>


<h1> je hlavní nadpis.
<p> značí odstavec (paragraph).
<a> je odkaz (anchor).

Co je to CSS?

CSS znamená Cascading Style Sheets – tedy kaskádové styly. Pomocí CSS říkáme, jak má web vypadat – jaké budou barvy, písmo, rozložení, velikosti a další vizuální vlastnosti.

Příklad jednoduchého CSS:


h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
}


Tento kód způsobí, že všechny hlavní nadpisy <h1> budou modré a větší a všechny odstavce <p> budou šedé.

Jak HTML a CSS spolupracují?

HTML tvoří kostru stránky a CSS jí dává vzhled. Je to jako stavba domu – HTML je jako cihly a zdi, zatímco CSS je barva, nábytek a výzdoba.

CSS můžeme do HTML připojit několika způsoby. Nejčastější je propojení externího CSS souboru:


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


Jak začít?

K tvorbě jednoduché webové stránky vám stačí obyčejný textový editor (např. Poznámkový blok) a webový prohlížeč (např. Chrome, Firefox).

Zkuste si vytvořit soubor index.html a do něj vložte tento kód:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Můj první web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Ahoj světe!</h1>
  <p>Učím se HTML a CSS.</p>
</body>
</html>


A vedle něj vytvořte soubor style.css:


body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: darkgreen;
}

p {
  color: #333;
}


Pak stačí otevřít index.html v prohlížeči – a uvidíte svůj první web!

Shrnutí

• HTML vytváří obsah a strukturu webu.
• CSS určuje, jak bude web vypadat.
• I bez znalosti programování si můžete vytvořit jednoduchý web.
• Začněte zkoušením, kopírováním příkladů a postupným zkoumáním nových možností.