HTML

Co je HTML?

  • Značkovací jazyk – používá se pro formátování textu a objektů (např. obrázků), které se zobrazují ve webových prohlížečích (obecně pro webové stránky).
  • Otevřený standard vyvinutý W3C (World Wide Web Consortium).
  • Statický jazyk – slouží pouze pro zobrazení.
    Naopak, mezi dynamické technologie patří JavaScript – běží v prohlížeči a PHP, ASP.NET – běží na serveru. Statické HTML je jejich výstupem.
  • Jazyk rozhraní Webu.

Soubor s příponou *.html nebo *.htm.

Výhody HTML

  • Je nenáročné – HTML soubory jsou velmi malé (prostý text). Proto se přenáší rychle po síti.
  • Snadná syntaxe – má jednoduchou strukturu, lze jej snadno pochopit.
  • Otevřený standard – HTML je velmi rozšířené. Funguje na všech platformách, ve všech webových prohlížečích a na všech webových serverech.

Nástroje pro HTML a CSS

Návrh

Zdrojový kód HTML dokumentu lze upravovat v libovolném textovém prohlížeči. Existují však nástroje pro úpravu, které nám zjednodušují práci a zpřehlední kód pomocí barevného odlišení a jiných prostředků.

Existují editory textové a grafické. Máme na výběr profesionální placené i bezplatné.

  • Příklady textových editorů: Notepad++, PSPad, NetBeans.
  • Příklady grafických editorů: Adobe Creative Suite Design Premium, Adobe DreamWaver, Flux (pro Mac OSX), Kompozer.

Pro grafické editory se používá zkratka WYSIWYG – What You See Is What You Get (co vidíš, to dostaneš).

Zobrazení

Pro zobrazení HTML dokumentů nám slouží webové prohlížeče. Mezi nejznámější patří např. Google Chrome, Mozilla Firefox, Microsoft Internet Explorer a Opera.

Základní syntaxe HTML

Syntaxe je velmi podobná jazyku XML.

HTML soubor je obyčejný text obalený tzv. tagy (značky), které jsou uzavřeny v ostrých závorkách.

Existují párové (mají počátek a konec) a nepárové – nemají uzavírací značku.

  • Příklad párového tagu:
    <head> obsah hlavičky </head> (Hlavička HTML dokumentu.)
    Příklad nepárového tagu:
    <br> (Řádkový zlom.)

Atributy tagů nám umožňují určit prvkům vlastnosti, které jsou jiné než výchozí.

<tag atributa=“hodnota“> obsah prvku </tag>

Jedním ze základních principů HTML je uzavírání jednoho tagu do druhého. To provádíme následujícím způsobem (obalíme vnitřní tag):
<vnejsi><vnitrni> Obsah vnitřního </vnitrni></vnejsi>

Struktura HTML

Každý HTML dokument musí obsahovat:

  • Doctype deklaraci – deklarace typu dokumentu (DTD)
  • <html>
  • <head> – hlavičku dokumentu – nezobrazuje se na stránce, obsahuje informace pro vyhledávače a prohlížeče jako např. titulek stránky, kódování, skripty, styly.
  • <body> – tělo dokumentu, které obsahuje text, nadpisy, odkazy, formuláře, obrázky, seznamy, formátování textu, tabulky a další.

Výsledná základní struktura vypadá následovně:

<!DOCTYPE html>
<html>
<head>
<title>Titulek stránky</title>
</head>

<body>

<h1>Nadpis první úrovně</h1>
<p>Odstavec textu.</p>

</body>
</html>

Základní tagy

  • Nadpisy (1. – 6. úroveň): <h1>Největší</h1> … <h6>Nejmenší</h6>
  • Pro formátování textu: <b>tučné</b> <i>kurzíva</i>
  • Odkaz: <a href=“URL“>Zobrazovaný text</a>
  • Odstavec: <p>Obsah</p>
  • Obrázek: <img src=“cesta k obrázku“ alt=“alternativní popisek“>
  • Span: <span></span> (Obaluje část textu).

 

CSS

Kaskádové styly, Cascading Style Sheets je jazyk, který slouží k přidělování vlastností objektům webových stránek. Určujeme pomocí něj rozložení, barvy a písma. Umožňuje nám přizpůsobení různým rozměrům zobrazení (PC, mobilní zařízení).

Zjednodušuje nám údržbu stránek – umožňuje sdílení jednoho stylu více pro více podstránek. Díky tomu se jedna změna projeví na všech stránkách, které soubor načítají.

Stejně jako HTML je CSS standard vyvinutý organizací World Wide Web Consortium (W3C).

Je otevřený a podporován webovými prohlížeči na všech platformách.

Soubor má příponu *.css.

Propojení s HTML

Máme 3 možnosti použití HTML:

  • Propojení se souborem *.css (umístíme do hlavičky):
    <link rel=“stylesheet“ href=“cesta k souboru“>
  • Vlastnosti určíme konkrétnímu prvku pomocí atributy HTML tagu:
    <span style=“font-weight: bold;“>Tučný text</span>
  • Nebo vložením CSS kódu do párového tagu <style>CSS styly</style> v hlavičce.

Syntaxe

Syntaxe CSS je velmi jednoduchá.

Příklad syntaxe:

h1 {color: blue; font-size: 12px;}

  • „h1“ je tzv. selektor – vybíráme jím HTML prvek nebo třídu prvků, kterým chceme přidělit vlastnosti. V tomto případě vybíráme nadpis první úrovně.
  • Následuje první složená závorka – začátek deklarací pro selektor. „{„
  • V příkladu následují dvě deklarace oddělené středníkem.
    • První určuje barvu nadpisu (color).
    • Druhá určuje velikost písma (font-size).
  • Jednotlivé deklarace se skládají z vlastnosti, následuje dvojtečka a hodnoty.
  • Deklarace pro selektor jsou uzavřeny druhou složenou závorkou. „}“