Nastavení CSS a HTML pro váš web: Návod

Preslav Dobrev2022-10-28 · 4 min read

Tvorba webových stránek je prvním krokem k tomu, jak začít s vývojem webu. Jednou z prvních věcí, kterou se musí nadšenci do vývoje webu naučit, je jak nastavit CSS a HTML pro webové stránky. Nastavením základní úvodní stránky se začátečník může připravit na základy designu webu, zdokonalit své dovednosti v oblasti vývoje webu a naučit se spolupracovat s vývojáři.

Tento návod vás provede základy nastavení souborů HTML a CSS pro váš web. Začněme!

Požadavky

Základní znalost HTML a CSS.

Krok 1 – Počáteční nastavení

Nejprve vytvoříme nový adresář projektu a pojmenujeme ho demo-projekt :

mkdir demo-project

1	mkdir demo-project

Dále se přesuňte do aktuálního adresáře pomocí cd příkazu:

cd demo-project

1	cd demo-project

Do složky projektu přidejme následující soubory, které budeme potřebovat ke spuštění našeho základního webu:

index.html : Tento soubor bude obsahovat veškerý HTML kód.
styles.css : Zde budeme uchovávat všechny CSS soubory pro stylování našeho webu.
images : Všechny potřebné obrázky musí být uloženy v této složce.

Nyní, když jsme vytvořili adresář projektu a přidali potřebné soubory, pojďme se posunout dál a v dalším kroku přidat HTML obsah do našeho index.html v dalším kroku.

Krok 2 – Přidání HTML obsahu do index.html souboru

Do souboru index.html , který jsme vytvořili v předchozím kroku, přidáme úvodní HTML kódy. Tyto základní řádky HTML budou sloužit jako instrukce pro prohlížeč, ale nebudou se zobrazovat na webové stránce.

Přidejte do svého souboru index.html následující blok kódu:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Vítejte v CloudSigma!</title>

</head>

<body>

</body>

</html>

Poznámka: Ujistěte se, že soubor index.html je před přidáním těchto bloků kódu prázdný. Zvažte také změnu názvu, jak je zvýrazněno v sekci <title> .

Pojďme si vysvětlit použité pojmy:

<!DOCTYPE html> : Jedná se o deklaraci, která informuje prohlížeč o typu HTML použitém v dokumentu HTML.
- Vzhledem k tomu, že je k dispozici více verzí standardů HTML, specifikace DOCTYPE usnadňuje prohlížečům bezproblémovou identifikaci verze HTML. V této příručce například používáme nejnovější verzi HTML5.
<html> : Tento tag informuje prohlížeč, že s obsahem uvnitř se musí zacházet jako s HTML. Při otevření souboru <html> se ujistěte, že jej zavřete pomocí tagu </html> . Tento tag podporuje atributy lang a můžete v něm specifikovat jazyk webové stránky. V našem návodu jsme nastavili jazyk na angličtinu pomocí en jazykového tagu.
- Navštivte IANA Language Subtag Registry a podívejte se na další jazyky, které jsou k dispozici.
<head> : Tím se v dokumentu HTML vytvoří sekce, která obsahuje informace o webové stránce. Neobsahuje však žádné podrobnosti o obsahu a prohlížeč zde v sekci head žádné informace nezobrazuje.
<meta charset="utf-8"> : Určuje znakovou sadu dokumentu. Musí být ve formátu Unicode, tj. UTF-8, který podporuje většinu uznávaných psaných jazyků.
<title> : Tag <title> informuje prohlížeč o názvu webové stránky. Název se zobrazuje na kartě prohlížeče, když je web uveden ve výsledcích vyhledávání.
<link rel="stylesheet" href="css/styles.css"> : Informuje prohlížeč, aby identifikoval stylopis obsahující styly CSS.
<body> : Tento tag obsahuje hlavní obsah webové stránky. Při použití tagu <body> se ujistěte, že jej zavřete pomocí </body> tagu.

Krok 3 – Stylování pomocí CSS

V souboru styles.css soubor, přidejte stylování podle potřeb vašeho projektu. V tomto příkladu přidejte následující řádky kódu do vašeho styles.css souboru:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Konečně jsme vytvořili základní HTML a CSS soubory, které budeme potřebovat ke spuštění našeho webu. Navíc můžete přidat obrázky a uložit je do složky images. Soubor uložte a zavřete. Poté otevřete index.html soubor ve svém oblíbeném webovém prohlížeči a na obrazovce uvidíte základní stránku.

Závěr

V tomto úvodním návodu jsme se naučili základy nastavení HTML a CSS a vytvořili základní webovou stránku. Nyní je čas vytvořit nové stránky, vyladit je, přidat obsah a vše propojit z navigačního panelu. V dalším kroku zkuste přidat více obsahu do index.html souboru a nastylovat jej pomocí CSS.

Kromě toho existují další návody na HTML a CSS, které najdete na našem blogu:

Příjemné programování!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativní designér ve společnosti CloudSigma, který se zaměřuje na konzistentní firemní identitu prostřednictvím tradičních i inovativních marketingových kanálů. Je zdatný v propojování umělecké vize se strategickým marketingem za účelem vytváření působivých příběhů značky.