Základy HTML a CSS pro laiky
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í.
Autor: Redakce NETzin.cz
Podobné články
24. 5. 2025 20 tipů pro zajímavé použití kaskádových stylů (CSS) a HTML HTML a CSS nejsou jen nudné nástroje pro strukturování a barvení textu na webových stránkách. Ve správných rukou dokážou tvořit zázraky – animace, interaktivní prvky i malé triky, které […] Posted in Web
22. 5. 2025 Jak funguje webový responzivní design a proč je nutný V digitálním světě, kde uživatelé přistupují na web z nepřeberného množství zařízení – od stolních počítačů přes tablety až po chytré telefony – je responzivní design klíčovým prvkem […] Posted in Web
7. 5. 2025 Hover efekt v HTML: Jak přidat interaktivitu pomocí CSS Při vytváření webových stránek je důležité myslet nejen na obsah, ale i na to, jak se stránka chová při interakci s uživatelem. Jedním z nejjednodušších a zároveň velmi efektivních […] Posted in Web
2. 5. 2024 Zářící svět kaskádových stylů: Umění vizuálního designu webových stránek Kaskádové styly jsou klíčovým nástrojem pro designéry a vývojáře webu, umožňující jim přizpůsobit vzhled a formátování webových stránek. Díky nim mohou vytvářet atraktivní, přehledné a […] Posted in Web
27. 4. 2024 Základy webového světa: Poznejte podstatu HTML HTML (HyperText Markup Language) je základní stavební kámen webu. Jedná se o značkovací jazyk používaný k vytváření webových stránek a webových aplikací. Jeho podstata spočívá v tom, že […] Posted in Web
7. 10. 2025 Perfektní landing page: Psychologie, layout a pět chyb, které vás stojí konverze Landing page je virtuální prodejce, který má jen pár vteřin na to, aby vás přesvědčil. Pokud selže, návštěvník zavře okno a už se nikdy nevrátí. Ať už nabízíte kurz, software nebo fyzický […] Posted in Web, Marketing, Výběr redakce
28. 8. 2025 Od nuly k webu: Jak vytvořit vlastní web s pomocí HTML, CSS a umělé inteligence Tvořit webové stránky od nuly může působit náročně, ale dnes existuje způsob, jak celý proces zjednodušit a výrazně urychlit. Kombinace tradičních webových technologií – především HTML a […] Posted in Web
18. 5. 2025 Bez kvalitního webu to nejde: Proč je web srdcem online podnikání Webové stránky tvoří základní kámen online marketingu. Jsou cílem většiny digitálních kampaní, výchozím bodem pro zákazníky a zároveň obrazem samotné firmy. Pokud je web špatně navržený […] Posted in Podnikání, Web
22. 9. 2017 Inspirujte se nejlepšími trendy ve webdesignu: 8 tipů pro tvorbu atraktivních stránek Moderní webová prezentace kombinuje hezký design, spolehlivou funkčnost a zajímavý obsah. Dokáže „chytit a nepustit“ pozornost návštěvníka během několika vteřin. Je praktická, ale ne […] Posted in Web
7. 3. 2010 Technické SEO HTML a struktura značek na webové stránce.
Je označována jako SEO - optimalizace pro vyhledávače pomocí úprav ve zdrojovém kódu stránek.
Nazval jsem toto SEO technickým, protože nevím, […] Posted in Podnikání, Web
