Úvodní přednáška

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: 2023-09-22 12:11:29 UTC

Copyright © 2000–2023 Jiří Kosek

Informace o kurzu

Základní informace

Vše důležité naleznete na adrese http://4iz268.github.io/

Náplň kurzu

Přednášky

  • přehled technologií používaných na webu

  • principy jednotlivých technologií a možnosti jejich vzájemného kombinování

  • program přednášek

  • zaměřeno zejména na „frontendové“ technologie

  • na předmět navazuje kurz 4IZ278 – Webové aplikace

Náplň kurzu

Cvičení

  • praktické zvládnutí nejpoužívanějších technologí:

    • HTML

    • kaskádové styly (CSS)

    • JavaScript

Zakončení předmětu

  1. vytvoření HTML stránky a aplikace v JavaScriptu

    • hodnotí cvičící

    • max. 50 bodů

    • přesné požadavky se dozvíte na cvičení

  2. test – termíny budou včas zveřejněny

    • hodnotí přednášející

    • max. 40 bodů

    • obsah testu: látka z přednášek a povinné četby

  3. aktivita na cvičení

    • max. 10 bodů

  4. každý dílčí požadavek je nutné splnit alespoň na 50 % bodů

Literatura

On-line zdroje informací

Varování

Nevěřte všemu, co se píše na internetu ;–)

Služba World-Wide Web

Vznik

Služba WWW vznikla na půdě CERNu v letech 1989-90 pod vedením Tima Berners-Leeho. Měla sloužit jako infrastruktura pro sdílení výsledků vědeckých výzkumů.

Je založena na třech technologiích

  • jazyk HTML

  • protokol HTTP

  • adresování objektů pomocí URL adres

Obrázek 1. Základní princip služby WWW

HTML

Hypertext Markup Language

  • značkovací jazyk pro popis struktury webových stránek

  • nezávislý na platformě

HTTP

Hypertext Transfer Protocol

  • protokol pro přenos stránek mezi webovým serverem a prohlížečem

  • jednoduchý aplikační protokol vystavený nad protokolem TCP

  • bezstavový protokol modelu požadavek/odpověď – přináší problémy pro webové aplikace

URL

Uniform Resource Locator

URL je adresa, která jednoznačně identifikuje nějaký zdroj v Internetu.

URL nejsou omezena jen na službu WWW, ale pokrývají celé spektrum služeb (WWW, FTP, e-mail, telnet, ...).

http://www.kosek.cz/vyuka/izi228/programpr.html

Proč se učit webové technologie?

Protože jsou všude a rychle se množí.

  • webové stránky a aplikace

  • pro mnoho platforem lze psát „nativní“ aplikace pomocí webových technologií

  • elektronické knihy (EPUB) jsou jen zabalené HTML+CSS

  • mnoho tištěných knih se dnes generuje přímo pomocí HTML+CSS

  • …

Historie a vývoj HTML

HTML 2.0

  • první formální specifikace

  • základní formátování a strukturování dokumentu, obrázky, formuláře

HTML 3.0

  • 1995

  • ambiciózní návrh

  • matematické vzorce, tabulky, obtékání obrázků, styly dokumentů

  • HTML 3.0 nebylo nikdy přijato jako standard, protože bylo příliš složité a žádná firma nebyla schopna naprogramovat jeho podporu ve svém prohlížeči

HTML 3.2

  • 1996

  • výrobci prohlížečů přidávají nestandardní rozšíření HTML

  • konsorcium W3C proto vybírá společnou podmnožinu rozšíření a schvaluje HTML 3.2

  • především lepší možnosti formátování dokumentu

HTML 4.0

  • 1997

  • velký skok vpřed

  • podpora kaskádových stylů

  • skripty vložené do stránky

  • multimediální objekty

  • rozšířené možnosti tabulek

  • i18n (podpora více jazyků, tok textu zleva doprava)

  • rozšíření formulářů

  • rámy

  • některé z funkcí HTML 4.0 nepodporují prohlížeče dodnes

HTML 4.01

  • prosinec 1999

  • opravy drobných chyb ve specifikaci HTML 4.0

XHTML

Extensible Hypertext Markup Language

  • HTML 4.01 se striktnější syntaxí XML

  • XHTML dokumenty lze psát tak, aby jim rozuměly i prohlížeče bez podpory XML

  • snahou bylo opustit „tag-soup“ syntaxi spojenou s HTML a vynutit psaní syntakticky zcela korektního kódu

  • striktnější syntaxe byla motivována možností psát jednodušší parsery použitelné na málo výkonných zařízení (např. mobily v dané době)

  • XHTML bohužel nepřineslo nic nového z funkčního hlediska a tak se příliš neujalo

XHTML vs. HTML

Příklad 1. Ukázka HTML stránky
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="cs">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Pokusná stránka</title>
</head>
<body>
<h1>Pokusná stránka</h1>
<p>K obědu si dám:
<ul>
<li>klobásu
<li>pivo
<li>müsli
</ul>
<p align=right>Váš<br>Otesánek
</body>
</html>

XHTML vs. HTML

Příklad 2. Ukázka XHTML stránky
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="cs" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Pokusná stránka</title>
</head>
<body>
<h1>Pokusná stránka</h1>
<p>K obědu si dám:</p>
<ul>
<li>klobásu</li>
<li>pivo</li>
<li>müsli</li>
</ul>
<p align="right">Váš<br/>Otesánek</p>
</body>
</html>

HTML5

  • webové aplikace mají stále větší požadavky na interaktivitu

    • lze to vyřešit použitím proprietárních technologií jako je Flash nebo kombinací HTML + DOM + JavaScript + CSS

    • specifikace HTML + DOM + JavaScript + CSS a jejich vzájemná interakce nebyla dlouhou dobu přesně definována

    • některé věci nebyly specifikovány vůbec (XHR)

    • bylo obtížné psát aplikace, které fungují ve všech prohlížečích

  • HTML5 upřesňuje definici HTML a DOM tak, aby byla jednoznačná a odpovídala skutečnému chování prohlížečů

  • přidává do jazyka některá rozšíření prohlížečů, která jsou užitečná

  • přidává některé další nové užitečné funkce (validace formulářů, canvas, příma podpora multimédií, …)

  • rozdělení HTML a XHTML byla chyba a příliš revoluční krok, nadále bude jen jeden jazyk se dvěma alternativními syntaxemi

HTML5

HTML5 je doporučení W3C od října 2014 a dnes nemá cenu používat jiné verze jazyka

Příklad 3. Ukázka HTML5 stránky
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset=utf-8>
    <title>Pokusná stránka v HTML5</title>
  </head>
  <body>
    <h1>Nadpis</h1>
    <p>Odstavec…</p>
  </body>
</html>

Syntaxe HTML

Elementy a tagy

Jednotlivé části HTML stránky se označují pomocí elementů. Každý element se skládá z počátečního tagu, obsahu elementu a ukončovacího tagu. Malý příklad: 

<p>Pokusný odstavec a zároveň element.</p>

Ukázka obsahuje jeden element, počáteční tag <p> a ukončovací tag </p>.

Některé elementy (například <br> a <hr>) nemusí mít ukončovací tag: 

<p>Jedna řádka<br>
druhá řádka</p>

Atributy

Elementy se obvykle používají pro vyznačení struktury dokumentu. Pokud potřebujeme nějak podrobněji vymezit význam elementu, použijeme k tomu atribut. Atribut se zapisuje za počáteční tag. 

Odkazy vás rázem přenesou úplně
<a href="nekam.html">jinam</a>

Atribut má vždy nějakou hodnotu, která se mu přiřazuje. Pokud hodnota obsahuje pouze písmena, číslice, pomlčku a tečku, nemusí se hodnota atributu uzavírat do uvozovek. V opačném případě musíme hodnotu atributu uzavřít do uvozovek nebo do apostrofů. U jednoho tagu můžeme samozřejmě použít více atributů.

Atributy se mohou používat pouze u počátečních tagů, nikoliv u ukončovacích.

Znakové entity

V HTML mají znaky '<' a '>' speciální význam. Pokud je potřebujeme zapsat do stránky, musíme použít tzv. znakovou entitu. Znaková entita má tvar &název_entity;.

Tabulka 1. Nejpoužívanější znakové entity
Znak Entita
< &lt;
> &gt;
& &amp;
" &quot;
© &copy;
nedělitelná mezera &nbsp;

Formální syntaxe

  • až do verze HTML4.01 je syntaxe založena na SGML

    • prohlížeče nicméně pro čtení nepoužívají parser SGML

    • každá verze je formálně definována pomocí DTD – to vyjmenovává jaké elementy/atributy jsou v dokumentu použitelné

    • odkaz na příslušnou verzi DTD se dělá pomocí deklarace typu dokumentu (!DOCTYPE)

  • XHTML – syntaxe je založena na XML

  • HTML5 – syntaxe vychází z HTML4 a toho, jak prohlížeče reálně kód načítají

    • HTML5 stránky lze zapisovat i pomocí XML syntaxe podobně jako XHTML (tzv. XHTML5)

<!DOCTYPE>

  • HTML 4.01 definuje tři DTD:

    Transitional

    DTD obsahuje všechny elementy a atributy HTML kromě těch, které se používají pro rozdělení okna prohlížeče na rámy. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Strict

    DTD je již striktnější než Transitional. Neobsahuje žádné elementy a atributy, které slouží pro definici vizuálního vzhledu dokumentu (např. elementy font, center a atributy jako align a color). 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
    Frameset

    DTD se používá na stránkách, které rozdělují okno prohlížeče do několika rámů pomocí elementu frameset. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

HTML5 a <!DOCTYPE>

  • HTML5 nepoužívá DTD, nabízí jednu sadu elementů/atributů

    <!DOCTYPE HTML>

    !DOCTYPE se používá zejména pro přepnutí do zobrazovacího režimu respektujícího standard CSS

  • !DOCTYPE by na stránkách nemělo chybět. Identifikuje použitou verzi HTML, přepíná prohlížeč do správného vykreslovacího režimu CSS a umožňuje automaticky zkontrolovat syntaxi stránky pomocí validátoru.

Kontrola syntaxe

Existuje několik specializovaných programů a služeb, které umožňují zkontrolovat správnou syntaxi HTML stránky.

On-line validační služby:

W3C HTML Validation Service

Tato služba je provozována konsorciem W3C. Pro validaci používá starší technologie, pro validaci HTML5 používá validator.nu.

Validator.nu

Nově vyvíjený validátor, zaměřený zejména na podporu HTML5 a lepší chybová hlášení.

Význam a použití elementů HTML

  • na cvičení a v literatuře

Proces načtení a zobrazení stránky

Od kliknutí na odkaz až po zobrazenou stránku

  • stažení HTML stránky

    • z URL se získá doménové jméno, to se pomocí DNS převede na IP adresu

    • na zjištěné IP adrese na naváže TCP spojení a pošle se požadavek HTTP

    • server pomocí protokolu HTTP vrátí obsah HTML stránky

  • zpracování HTML stránky

    • načítaný HTML kód se parsuje

    • průběžně se buduje objektový model elementů na stránce (DOM)

    • obsahuje-li stránka odkazy na další důležité objekty (obrázky, CSS, JS), tak se také začnou stahovat a zpracovávat

  • vykreslení HTML stránky

    • z načteného CSS se vybuduje rovněž objektový model (CSSOM)

    • DOM (co se má zobrazit) a CSSOM (jak se to má zobrazit) se zkombinují a vykreslí

  • interaktivita

    • stránka může obsahovat i programový kód (JavaScript), který zajišťuje interakci s uživatelem

    • tím, kdy a jak se tak děje, si prozatím nebudeme kazit den 😊

Další zdroje informací

Povinná četba

Doporučená četba