Alíkovina

Šipínova miniškola HTML

vydáno  •  Internet

Při projíždění dotazů v poradně na téma HTML jsem narazil na odkaz na Alíkovu miniškolu HTML. Měla více dílů a dívala se na HTML jinak než já. Proto je zde tento článek.

Ukázka HTML kódu, © šipín

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 ]:-).
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

Autor: (13 let)
» přejít do diskuse

Diskuse k článku  (8)

Příspěvek z 29. listopadu v 18:20.
Pralinka2 v něm napsal:

No ještě jeden podobný článek od jiného autora už je napsaný a v dohledné době asi bude zařazen k vydání.

Příspěvek z 29. listopadu v 18:13.
ultron01 v něm napsal:

Plánuju napsat do Alíkovin podobný článek, ale ten bude na pokračování.

Příspěvek z 18. listopadu ve 21:29.
Julian v něm napsala:

Super, sice HTML asi nebudu nikdy rozumět, ale kdybych byla víc počítačově nadaná, tak bych tomu určitě porozuměla. :-D