Základní struktura HTML webové stránky
Pár otázek na začátek:
Jak se tvoří webové stránky?
Webové stránky se tvoří s pomocí HTML, CSS a JavaScriptu, ale zde vás naučím jen základy HTML a CSS.
Co je HTML?
HTML je zkratka pro HyperText Markup Language, i když pro nezasvěcené to může znamenat i HaTMatiLka ![]:-)](http://o00o.cz/2017/smajliky/alik/cert.png)
.
Co je CSS?
Pomocí CSS se upravují barvy, rámečky, pozadí atd.
Jak vypadá HTML kód?
Ukázka je na hlavním obrázku u článku. V prohlížeči na počítači si můžete zobrazit kód libovolné stránky (třeba i této) stisknutím klávesové zkratky Ctrl+U.
Naučíš mě ho tvořit?
Ano, hned jdeme na to
Tvorba webové stránky s pomocí HTML:
Přípravné práce:
Než začnete tvořit webovou stránku, musíte si rozmyslet, co tam bude, kde a jak.
Doporučuji utvořit mapu vašich webových stránek, kde bude znázorněno, z jaké stránky na jakou bude odkaz.
Samotná tvorba webové stránky
Začněte kostrou, kterou si tady odsud opíšete, a pak můžeme jít dále!
Ta kostra je zde:
<!DOCTYPE html>
<html>
<head>
<title>Název stránky</title>
</head>
<body>
Obsah stránek
</body>
Poznámka: tag obsahující / je tag ukončující.
O tagu <title> si něco řekneme v příštím článku.
Pak můžeme přidat CSS styl, který vložíme takto:
A to buď interním vstupem:
<title>Název stránky</title>
<style>
Váš CSS styl
</style>
A nebo externím:
<link rel="stylesheet" href=" (adresa stylů CSS) " type="text/css">
Jak se tvoří CSS, to vás naučím později.
Teď se zaměříme na základy HTML, kterými jsou tagy <h1> a <p>.
Tag <h1> vytvoří nadpis 1. úrovně a tag <p> vytvoří odstavec.
Příklad:
<body>
<h1>Můj krásný nadpis</h1>
<p>Nějaký text...</p>
</body>
Tag <h1> má více úrovní, přesněji <h1> - <h6>.
Víte, jak se v HTML dělá tučné písmo?
Jednoduše, pomocí tagu <b>! A kurzíva pomocí tagu <i>, a písmo škrtnete pomocí tagu <s>.
Ukázka:
<b>toto bude tučně</b>
<i>toto bude kurzívou</i>
<s>toto bude škrtnuté</s>
A nakonec si uděláme seznamy:
Seznamů jsou 2 druhy: číslovaný a nečíslovaný.
Zde je kostra číslovaného seznamu:
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
Nečíslovaný seznam by vypadal skoro stejně, akorát bychom vyměnili <ol> a </ol> za <ul> a </ul>. Mezi tagy <li> a </li> pak budete vkládat obsah seznamu.
Děkuji, že jste tento článek dočetli až do konce, a doufám, že se vám líbil
Pokud budete vědět něco víc, pište do diskuze a podívejte se na mou nástěnku o programování: www.alik.cz/n/programovani-s-sipinem
