Menu

HTML Začátky 1

1. 10. 2019 - Daniel Bulant - HTML Tutoriály

HTML alias hypertext markup language je jednoduchý jazyk na programování vzhledu webu.

Celé HTML je postavené nad tzv. Tagy. Tagy mají jednoduchou podobu:

Takový tag proto může vypadat například takto:

<nazev argument=1>

Takto vypadá „jednoduchý tag“. Složený má ještě koncovku:

Složený tag může mít proto takovouto podobu:

<nazev> nejaky text uvnitr </nazev>

Tím jsme si vysvětlily ale jen XML formát (základní), ale pro webovky nám ještě něco chybí:

HTML Tagy

HTML je definice XML tagů pro webové stránky. Základní tag, ve kterém je celá webová stránka je složený tag html.

<html>

<html>

V něm jsou dva tagy, head (hlavička) a body (tělo). Hlavička obsahuje všechny data na „pozadí“, mezi které patří například titulek a styly.

<html>
 <head>

 </head>
</html>

Hlavička – head

Titulek se označuje anglicky title. Titulek se poté zobrazí v názvu záložky.

<html>
 <head>
  <title>Název stránky</title>
 </head>
</html>

Další důležitou součástí je druhý zmiňovaný tag – body. V tomto tagu již jsou všechny „viditelné tagy“, které už ukazují jak se daný text zobrazí.

UTF-8

A pokud si zkoušíte udělat vlastní stránku, nejspíše narazíte na něco takového:

 Název stránky

Proč? Je to úplně jednoduché – prohlížeč neví že používáte češtinu (ne-anglické znaky). Proto musíme „přepnout“ prohlížeč do UTF-8 který již češtinu podporuje:

<meta charset="UTF-8">

Tento tag se umisťuje do hlavičky „head“, takže náš kód vypadá takto:

 <html>
 <head>
  <title>Název stránky</title>
  <meta charset="UTF-8">
 </head>
 <body>
 </body>
</html>

Tělo – body

Začněme například titulky. Ty začínají písmenem h za kterým je číslo. Číslo udává pořadí – jednička je hlavní titulek, dvojka je podtitulek atd.

Používají se například takto:

<html>
 <head>
  <title>Název stránky</title>
  <meta charset="UTF-8">
 </head>
 <body>
  <h1>Hlavní titulek stránky</h1>
  <h2>Podtitulek</h2>
 </body>
</html>

Komentáře

Než se pustíme do dalších tagů, je dobré si svůj kód okomentovat, aby jste případně později poznali co co dělá a podobně. V HTML (a XML obecně) se komentáře zapisují následovně:

<!-- komentář -->

Tímto si můžete například označit co dělá meta tag:

<html>
 <head>
  <title>Název stránky</title>
  <meta charset="UTF-8"><!-- přepne jazyk do češtiny -->
 </head>
 <body>
  <h1>Hlavní titulek stránky</h1>
  <h2>Podtitulek</h2>
 </body>
</html>

práce s textem

paragraf – p

Tag P je používán pro označení paragrafu. Zařizuje větší mezeru před a za ním a zlepšuje uspořádání.

<p>paragraf</p>

Další

Teď jen rychle schrnu další užitečné tagy na úpravu textu. Další tagy budou v příštím díle.

bZvýší tloušťku textu<b>tlustý</b> text
iItalické (šikmé) písmo<i>italický</i> text
smallMalé písmo<small>malé</small> pismo
uPodtržení`<u>podtržený</u> text

Napsat komentář