Úvod
Ak chceš vytvoriť vlastnú webstránku, musíš ovládať HTML a CSS. HTML definuje štruktúru stránky, CSS jej vzhľad. V tomto článku sa naučíš základné tagy a štýly, ktoré ti pomôžu vytvoriť moderný web.
1. 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á strá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>
2. Základné CSS pre vzhľad stránky
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f8f8f8; }
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
padding: 0 20px;
}
3. Flexbox pre rozloženie obsahu
.container { display: flex; flex-wrap: wrap; }
.box {
flex: 1 1 200px; /* flexibilná šírka, min 200px */
margin: 10px;
padding: 20px;
background-color: #e0f7fa;
}
4. Responzívne úpravy s media queries
@media (max-width: 768px) { .container { flex-direction: column; /* na mobiloch stĺpcové usporiadanie */ } .box { margin: 5px 0; } } Záver
S týmito základmi HTML a CSS môžeš vytvoriť svoju prvú modernú webstránku, ktorá je čistá, flexibilná a responzívna. Flexbox, media queries a základné štýly sú základom, od ktorého sa dá ďalej rozvíjať.