HTML – HyperText Markup Language
- slouží k vytváření webových stránek (webový obsah)
- vytváří pomocí textu obsah webu včetně grafických prvků
- tento obsah je zobrazen pomocí webových prohlížečů
Na zobrazení html potřebujeme webový prohlížeč:
- Chrome
- Mozilla Firefox
- IExplorer
- Opera
- Safari
Pro správné zobrazení webu je potřebná optimalizace (přizpůsobení) pro jednotlivá zařízení a jejich webové prohlížeče.
Při optimalizaci je potřeba brát ohledy na:
- typ prohlížeče a jeho verzi
- rozlišení webové stránky a co je zařízení schopné zobrazit
- pluginy
- skripty a styly (html5, javascript, jquery a css)
Problematické zobrazení webu mohou způsobovat:
- aplikace – flash, unity
- multimedia – videa, zvuky
- statické nastavení velikosti webu
- vnořené rámce
- velké obrázky (nezmenšené, neoptimalizované)
I tyto prvky je potřeba zohlednit při optimalizaci, např. vytvořit různé verze webu pro mobilní zařízení
Zdroje informací o html:
V čem psát html:
- poznámkový blok
- Brackets
- Dreamweaver
- Frontpage
- Chrome
- v jakémkoliv textovém editoru
Jak začít:
uložit soubor s koncovkou .html nebo .htm
struktura webové stránky:
- typ dokumentu
<!DOCTYPE html> - informace o dokumentu, nastavení v „hlavě“ dokumentu
<head></head> - obsah webu se zobrazí v jeho „těle“
<body></body>
obsah „hlavy dokumentu“ <head>
- – nastavení sady znaků
<meta charset=“UTF-8″>
české znaky můžeme nastavit pomocí sad UTF-8, Windows-1250 nebo iso-8859-2 - Název webu
<title></title>
– název webu na liště (ne uvnitř textu!)
– název webu při vyhledávání
– klíčová slova pro vyhledávání
obsah „těla dokumentu“ <body>
Samotný text je upravován značkami, tagy.
TAGY:
– nepárové – vkládají nový obsah (externí obsah), jaká sada znaků, vkládání obrázků, zalomení řádku
– párové – upravují existující obsah
Tagy upravující text
úprava stylu:
- <b></b> – bold textu
- <i></i> – italika
- <u></u> – podtržení (underlined)
- <span></span> – vybere část textu a upraví podle nastaveného stylu
- <span style=“color:red“></span>
můžeme nastavovat např. barvu, font, velikost, styl textu
úprava struktury
- <p></p> – zalomení odstavců
– paragraf
– vždycky mezera mezi paragrafem a jiným obsahem, vždy má kolem sebe okraj
– jde mu také nastavit styl - <br> – zalomení řádku
– break
– zalamuje bez mezery mezi obsahem a textem - <h1></h1> – nadpis (header)
… až
<h6></h6>
– nadpisům jde nastavit styl - <img> – obrázek
<img src=“sem se napíše umístění obrázku“> - <a></a> – odkaz
<a href=“sem se napíše kam odkazujeme(adresa“> Co je odkaz (text, obrázek, banner) </a>