Nastavenie CSS a HTML pre vašu webovú stránku: Návod

Preslav Dobrev2022-10-28 · 4 min read

Nastavenie CSS a HTML pre vašu webovú stránku: Návod

Tvorba webových stránok je prvým krokom pri začatí s vývojom webu. Jednou z prvých vecí, ktoré sa musia nadšenci vývoja webu naučiť, je ako nastaviť CSS a HTML pre webovú stránku. Nastavením základnej úvodnej stránky sa začiatočník môže pripraviť na základy dizajnu webových stránok, zdokonaliť svoje zručnosti v oblasti vývoja webu a naučiť sa spolupracovať s vývojármi.

Tento návod vás prevedie základmi nastavenia súborov HTML a CSS pre vašu webovú stránku. Začnime!

Požiadavky

Základné porozumenie HTML a CSS.

Krok 1 - Počiatočné nastavenie

Na začiatku vytvoríme nový adresár projektu a pomenujeme ho demo-projekt :

mkdir demo-project

1	mkdir demo-project

Ďalej sa presuňte do aktuálneho adresára pomocou cd príkazu:

cd demo-project

1	cd demo-project

Do priečinka projektu pridajme nasledujúce súbory, ktoré budeme potrebovať na spustenie našej základnej webovej stránky:

index.html : Tento súbor bude obsahovať všetky HTML kódy.
styles.css : Sem uložíme všetky CSS súbory na štýlovanie našej webovej stránky.
images : Všetky potrebné obrázky musia byť uložené v tomto priečinku.

Teraz, keď sme vytvorili náš adresár projektu a pridali potrebné súbory, poďme ďalej a pridajme HTML obsah do nášho index.html v nasledujúcom kroku.

Krok 2 - Pridanie HTML obsahu do súboru index.html File

Do súboru index.html , ktorý sme vytvorili v predchádzajúcom kroku, pridáme úvodné HTML kódy. Tieto základné HTML riadky budú slúžiť ako inštrukcie pre prehliadač, ale nebudú sa zobrazovať na webovej stránke.

Pridajte nasledujúci blok kódu do svojho súboru index.html :

<!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>Vitajte v CloudSigma!</title>

</head>

<body>

</body>

</html>

Poznámka: Uistite sa, že súbor index.html je prázdny predtým, ako pridáte tieto bloky kódov. Taktiež zvážte zmenu názvu, ako je zvýraznené v sekcii <title> .

Poďme si vysvetliť použité výrazy:

<!DOCTYPE html> : Je to deklarácia, ktorá informuje prehliadač o type HTML použitom v HTML dokumente.
- Keďže je k dispozícii viacero verzií štandardov HTML, špecifikovanie DOCTYPE uľahčuje prehliadačom bez námahy identifikovať verziu HTML. Napríklad v tejto príručke používame najnovšiu verziu HTML5.
<html> : Tento tag informuje prehliadač, že s obsahom vo vnútri sa musí zaobchádzať ako s HTML. Pri otvorení <html> súboru sa uistite, že ho zatvoríte pomocou tagu </html> . Tento tag podporuje atribúty lang , pomocou ktorých môžete špecifikovať jazyk webovej stránky. V našom návode sme nastavili jazyk na angličtinu pomocou jazykového tagu en .
- Navštívte IANA Language Subtag Registry, kde si môžete pozrieť ďalšie dostupné jazyky.
<head> : Toto vytvára sekciu v HTML dokumente a obsahuje informácie o webovej stránke. Neobsahuje však žiadne podrobnosti o obsahu a prehliadač tu v sekcii head nezobrazuje žiadne informácie.
<meta charset="utf-8"> : Špecifikuje znakovú sadu dokumentu. Musí byť vo formáte Unicode, t. j. UTF-8, ktorý podporuje väčšinu uznávaných písaných jazykov.
<title> : Tag <title> informuje prehliadač o názve webovej stránky. Názov sa zobrazuje na karte prehliadača a vtedy, keď je webová stránka uvedená vo výsledkoch vyhľadávania.
<link rel="stylesheet" href="css/styles.css"> : Informuje prehliadač, aby identifikoval štýl obsahujúci CSS štýly.
<body> : Tento tag obsahuje hlavný obsah webovej stránky. Pri použití tagu <body> sa uistite, že ho zatvoríte pomocou tagu </body> .

Krok 3 - Štýlovanie pomocou CSS

V súbore styles.css súbor, pridajte štýly podľa potrieb vášho projektu. V tomto príklade pridajte nasledujúce riadky kódu do vášho styles.css súbor:

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čne sme vytvorili základné HTML a CSS súbory, ktoré budeme potrebovať na spustenie našej webovej stránky. Okrem toho môžete pridať obrázky a uložiť ich do priečinka images. Súbor uložte a zatvorte. Potom otvorte index.html súbor vo vašom obľúbenom webovom prehliadači a na obrazovke uvidíte základnú stránku.

Conclusion

V tomto úvodnom návode sme sa naučili základy nastavenia HTML a CSS a vytvorili sme základnú webovú stránku. Teraz je čas vytvoriť nové stránky, vyladiť ich, pridať obsah a všetko prepojiť z navigačného panela. V ďalšom kroku skúste pridať viac obsahu do index.html súboru a naštýlovať ho pomocou CSS.

Okrem toho existujú ďalšie návody na HTML a CSS, ktoré nájdete na našom blogu:

Príjemnú prácu s počítačom!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreatívny dizajnér v spoločnosti CloudSigma, ktorý sa zameriava na konzistentnú firemnú identitu prostredníctvom tradičných a inovatívnych marketingových kanálov. Dokáže brilantne spájať umeleckú víziu so strategickým marketingom, čím vytvára pôsobivé príbehy značky.