HTML
Z MiS
Obsah |
Co je to HTML?
Podrobnější materiály: http://www.tvorba-webu.cz/html/
- Jazyk HTML slouží k popisu obsahu webových stránek. Kód stránky se ukládá do souboru s příponou .html a umisťuje na webový server.
- Soubory HTML jdou také zobrazit v počítači přímo dvojím klikem na soubor. Stránka se otevře v prohlížeči.
- Webové stránky jsou textové soubory, doplněné o formátování pomocí značek jazyka HTML.
- Pojmy:
- tag (značka): otvírací, zavírací
- element
- entita
- atribut
- Jak se jazyk HTML vyvíjel?
Elementy jazyka HTML
Podrobnější materiály: http://www.tvorba-webu.cz/html/
Základní elementy
-
h1,h2,... -
p, (br) -
hr -
imga jeho atributy-
src... cesta k obrázku -
width... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti) -
alt... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit (vhodné i kvůli čtečkám webu pro zrakově handicapované)
-
-
a... hypertextový odkaz-
href... URL adresa odkazu
-
Příklad:
<h1>Jižní Amerika</h1>
<p>Jižní Amerika je zajímavý
<a href="http://cs.wikipedia.org/wiki/Kontinent">kontinent</a>.
</p>
<p>
<img src="amerika.jpg" alt="Jižní Amerika" />
</p>
Tabulky a seznamy
- Tabulky
-
table... ohraničení celé tabulky, -
tr... řádek tabulky -
td... buňka tabulky v řádku. -
th... buňka tabulky, která je součástí hlavičky tabulky (bude zvýrazněná).
Příklad:
<table border="1"> <tr><th>Id</th><th>Jméno</th><th>Počet bodů</th></tr> <tr><th>1</th><td>František Novák</td><td>15</td></tr> <table>
Výsledek (v prohlížeči):
| Id | Jméno | Počet bodů |
|---|---|---|
| 1 | František Novák | 15 |
- Seznamy s odrážkami/číslované
- Element
ulresp.ol-
ul... seznam s odrážkami -
ol... číslovaný seznam
-
- Začátek seznamu označuje otvírací značka (
<ul>), konec zavírací značka (</ul>). - Element
li... jedna položka seznamu- zobrazí se buď s odrážkou (když je uvnitř elementu
ul) - nebo číslem (když je uvnitř elementu
ol).
- zobrazí se buď s odrážkou (když je uvnitř elementu
Příklad:
<ul> <li>Úkol první: zapište text</li> <li>Úkol druhý: <ol> <li>Přeložte program</li> <li>Spusťte ho!</li> </ol> </li> <li>Úkol třetí: Odešlete výsledky</li> </ul>
Výsledek (v prohlížeči):
- Úkol první: zapište text
- Úkol druhý:
- Přeložte program
- Spusťte ho!
- Úkol třetí: Odešlete výsledky
Hlavička dokumentu
Správně napsaný soubor HTML by měl kromě samotného textu mít i hlavičku s doplňujícími informacemi.
-
<!DOCTYPE html>- Tímto uvádíme, že píšeme dokument HTML verze 5.
- Může být dále uvedeno DTD dokumentu, podle kterého ho lze validovat, některé validátory jeho uvedení vyžadují. Norma však nikoli.
- Více viz JakPsátWeb.cz → Doctype deklarace.
-
html- Celá stránka by měla být zahrnuta do jednoho elementu HTML. Mimo jiné kvůli kompatibilitě s jazykem XML.
-
head- Hlavička stránky. Informace zde uvedené popisují blíže stránku, ale na stránce se nezobrazují.
- Příklady informací: způsob kódování národních znaků, titulek stránky, odkaz na soubor s kaskádovými styly, popis stránky, klíčová slova,...
- Více o položkách v hlavičce stránky.
-
body- Zde píšeme samotný obsah stránky, který se má zobrazit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="description" content="Web nejlepší cestovní kanceláře v ČR" />
<title>Cestovní kancelář Leť-tam!</title>
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>
<body>
... Zobrazitelný text stránky...
</body>
</html>
Vzhled dokumentu
Všimněte si, že stále popisujeme jen strukturu dokumentu (co je nadpis, co je tabulka, odkaz,...), nikoli vzhled (jak má nadpis vypadat?).
Grafický vzhled popisujeme pomocí kaskádových stylů!
Testování a publikování stránek
- Testování webových stránek (při vývoji stránky)
- Publikování hotové stránky
Praktické
- Užitečné nástroje
- PSPad... editor pro tvorbu stránek.
- Geany, Notepad++... alternativní editory, pokud vám nevyhovuje PSPad.
- TopStyle Lite... tvorba CSS stylů.
- Časté chyby
Cvičení
Související stránky
Podrobnější zdroje
- GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz>.
