HTML
HyperText Markup Language

Lukáš Bařinka

HTML is the language for describing
the structure of Web pages.: W3C

Obsah

Účel jazyka HTML
Historie, vývoj
Syntaxe a struktura HTML dokumentu
Základní typy elementů a atributů
Složené typy elementů
Obrázky
Tabulka
Poznámky a doporučená literatura

Účel HTML

Co je to HTML

HTML = HyperText Markup Language

Značkovací jazyk pro publikování na webu
HTML (do verze 4 včetně) je aplikací SGML
Umožňuje
- strukturovat dokument oddělit strukturu a prezentaci/vzhled
- vkládání odkazů, grafiky a multimédií do webové stránky
- odesílání dat pomocí formulářů
- použití skriptovacích jazyků např. ECMAScript / JavaScript

Historie

Verze 0.9 [1991] Tim Berners-Lee: Nepodporuje grafický režim
Verze 2.0 [1995] Internet Engineering Task Force: Odpovídá syntaxi SGML; Interaktivní formuláře; Podpora grafiky

Verze 3.2 [I/1997] W3C: HTML 3.0 nepřijato vinou složitosti; Tabulky; Zarovnávání textu, elementy vzhledu
Verze 4.0 [XII/1997]: Rozšíření tabulek, formulářů; Rámy (frames); Zavržení některých elementů vzhledu
Verze 4.01 [XII/1999]: Oprava chyb

Verze 5 [2008-2014/Living Standard] WHATWG: Základem jsou Web Applications 1.0 a Web Forms 2.0; Rozšíření podpory multimédií (video, audio, canvas, SVG); Více sémantických prvků

WHATWG = Web Hypertext Application Technology Working Group (2004)

Syntaxe a struktura

Struktura dokumentu

Deklarace typu dokumentu
Kořenový element html a v něm elementy
1. head - hlavička dokumentu (metadata)
2. body - tělo dokumentu (data/obsah)
Volitelné komentáře

Ukázka jednoduchého dokumentu


							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
							  "http://www.w3.org/TR/html4/strict.dtd">
							<HTML>
							  <HEAD>
							    <TITLE>My first HTML document</TITLE>
							    <LINK href="special.css" rel="stylesheet" type="text/css">
							  </HEAD>
							  <BODY>
							    <P class="special">Hello world! &lt;&ring;))))&gt;&lt;
							    <!-- Add more content here -->
							  </BODY>
							</HTML>

W3C: Introduction to SGML

Hello world!  <˚))))><

Element vs Značka (tag)

Element: je část dokumentu
Značka: ohraničuje (obvykle) element

Elementy je možné do sebe vnořovat tvoří stromovou strukturu
Značky se nesmí křížit: <a><b></a></b>
Element může existovat i bez otevírací/uzavírací značky ne v XHTML

Vztahy jazyků

HTML vs XHTML

Well-formed zápis dokumentu Správné vnořování elementů (nesting)
Jména elementů a atributů malými písmeny
Povinná ukončovací značka neprázdných elementů
Hodnoty atributů v uvozovkách/apostrofech
Každý atribut musí mít hodnotu (nepodpora minimalizace) <dl compact="compact">
Ukončení prázdných elementů <hr />, <br />, <img ... />
Normalizace bílých znaků v hodnotách atributů Odstranění okrajových bílých znaků, náhrada sekvence za mezeru
Zápis obsahu elementů scipt/style v <![CDATA[...]]>

Základní typy

Rozdělení elementů

Blokové elementy (block-level) mohou obsahovat blokové nebo řádkové elementy nebo text, obvykle začínají na novém řádku (řadí se pod sebe)
Řádkové elementy (inline/text-level) mohou obsahovat pouze řádkové elementy nebo text, obvykle nezačínají na novém řádku (řadí se vedle sebe)
Hybridní elementy (blokové či řádkové) podle kontextu (`INS, DEL`)

Způsob zobrazení elementů (blokové/řádkové) je možné pomocí CSS měnit, ovšem jejich podstatu to nezmění!

Definice (technická) typů elementů


						<!ENTITY % flow "%block; | %inline;">

						<!ENTITY % block
						  "P | %heading; | %list; | %preformatted; |
						   DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM |
						   HR | TABLE | FIELDSET | ADDRESS">

						<!ENTITY % inline
						  "#PCDATA | %fontstyle; | %phrase; |
						   %special; | %formctrl;">

W3C: HTML4 (DTD) / WHATWG: Content models

Seskupovací elementy (Grouping)

Nenesou žádný význam!
Pomáhají pouze strukturovat dokument seskupovat elementy, které k sobě logicky patří
Blokový element: div
Řádkový element: span

Blokové typy elementů

Nadpis: h1, h2, h3, h4, h5, h6
Odstavec textu: p, blockquote
Formulář: form, fieldset
Seznamy: ol, ul, dl
Tabulka: table
Formátovaný text: pre
Kontaktní informace: address autor, osoba zodpovědná za obsah
Horizontální oddělovač: hr

Řádkové typy elementů

Důležitý text, uvozený text: em, strong, q
Definice, citace, zkratka, akronym: dfn, cite, abbr, acronym
Vstup/výstup, proměnná programu: kbd, samp, var, code
Formulářové prvky: input, select, textarea, label, button
Odkazy: a, map
Objekt: img, object
Řádkový zlom, směr textu, index: br, bdo, sub, sup
Styl: tt, i, b, big, small nepoužívat

Seskupování Vs Oddělování

Struktura obsahu (Outline)

Typy atributů

HTML4 atributy (Generic Attributes)
- %coreattrs - id, class, style, title
- %i18n - lang, dir
- %events - onclick, on...
HTML5 atributy

Složené elementy

Odkaz (Anchor)

Základní element (a) hypertextu propojující zdroj a cíl
- Cíl je specifikován pomocí URI hodnotou atributu typu href
- Cílem může být libovolný zdroj
- Cílem může být i část (fragment) dokumentu identifikován pomocí:
  - atributu typu name elementu typu a nebo
  - atributu typu id libovolného typu elementu
  - hodnoty atributů typu id a name jsou case-sensitive a sdílí společný prostor unikátních hodnot
V hlavičce dokumentu je možné odkazovat se na další zdroje pomocí elementu typu link nezobrazují se v obsahu dokumentu
Atributy typu rel a ~~rev~~ je možné definovat roli zdrojů
Další cíle mohou specifikovat elementy typu img/object, form, …

Kotva pomocí atributu typu name


							<H1>Table of Contents</H1>
							<P><A href="#section1">Introduction</A><BR>
							<A href="#section2">Some background</A><BR>
							<A href="#section2.1">On a more personal note</A><BR>
							  ...the rest of the table of contents...
							  ...the document body...
							<H2><A name="section1">Introduction</A></H2>
							  ...section 1...
							<H2><A name="section2">Some background</A></H2>
							  ...section 2...
							<H3><A name="section2.1">On a more personal note</A></H3>
							  ...section 2.1...

W3C: HTML 4.01 - Links

Kotva pomocí atributu typu id


							<H1>Table of Contents</H1>
							<P><A href="#section1">Introduction</A><BR>
							<A href="#section2">Some background</A><BR>
							<A href="#section2.1">On a more personal note</A><BR>
							  ...the rest of the table of contents...
							  ...the document body...
							<H2 id="section1">Introduction</H2>
							  ...section 1...
							<H2 id="section2">Some background</H2>
							  ...section 2...
							<H3 id="section2.1">On a more personal note</H3>
							  ...section 2.1...

W3C: HTML 4.01 - Links

Některé další typy atributů elementu typu `a`

hreflang = langcode jazyk cílového dokumentu
rel = link-types vztah dokumetu k cíli
type = content-type mime-typ cíle
title = popis cíle (tooltip) nebo pojmenování alternativního stylu (link)
download = jméno cílového souboru stažení místo zobrazení

Seznamy

Neseřazený seznam nemá pořadí prvků: ul = Unordered list (prvky k zobrazení); menu = Unordered list/Toolbar (prvky akce); li = List item (položka)
Seřazený seznam má pořadí prvků: ol = Ordered list; li = List item (položka)
Definiční seznam klíč—hodnota (name—value): dl = Definition list; dt = Definition term (pojem/klíč); dd = Definition description (vysvětlení/hodnota)

Definiční seznam


							<DL>
							  <DT>Hacker
							  <DD>a clever programmer
							  <DT>Nerd
							  <DD>technically bright but socially inept person
							</DL>

W3C: HTML 4.01 - Definition lists

Definiční seznam (strukturovaný)


							<dl>
							  <div>
							    <dt> Last modified time </dt>
							    <dd> 2004-12-23T23:33Z </dd>
							  </div>
							  <div>
							    <dt> Recommended update interval </dt>
							    <dd> 60s </dd>
							  </div>
							  <div>
							    <dt> Authors </dt>
							    <dt> Editors </dt>
							    <dd> Robert Rothman </dd>
							    <dd> Daniel Jackson </dd>
							  </div>
							</dl>

WHATWG: Definition list

(Ne)seřazený seznam


							<UL>
							  <LI> ... first list item...
							  <LI> ... second list item...
							  ...
							</UL>

							<ol start="10">
							  <li> ... first list item...
							  <li value="15"> ... second list item...
							  ...
							</ol>

							<menu>
							  <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
							  <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
							  <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
							</menu>

W3C: HTML 4.01 List, WHATWG: Menu

Obrázky

Obrázky pomocí `img`

Důvody použití obrázků:
- Obsah (content) Popis obrázku v alt
- Odkaz (link) Přístupný text odkazu v alt
- Dekorace (decoration) Prázdný alt=""
- Text Text z obrázku v alt
Element typu img prázdný element
- Atribut (povinný) typu src určuje zdroj obrázku (soubor)
- Atribut (povinný) typu alt určuje alternativní zobrazení (text)

Ukázka použití obrázku


							<div class="figure">
							  <img src="images/dinosaur.jpg"
							       alt="The head and torso of a dinosaur skeleton;
							            it has a large head with long sharp teeth"
							       width="400"
							       height="341">

							  <p class="figcaption">A T-Rex on display in the … Museum.</p>
							</div>


							<figure>
							  <img src="images/dinosaur.jpg"
							       alt="The head and torso of a dinosaur skeleton;
							            it has a large head with long sharp teeth"
							       width="400"
							       height="341">

							  <figcaption>A T-Rex on display in the … Museum.</figcaption>
							</figure>

MDN: Images in HTML

Množina zdrojů obrázku

Atribut typu srcset (elementu typu img)
Hotnoty (zdroje) oddělené čárkou ,
- URL povinně
- celé_číslow volitelně, určuje šířku a nebo
- desetinné_číslox volitelně, hustotu pixelů (pixel density)


							<img src="image-small.png"
							     srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
							     alt="Image description">

							<img src="image-defaultdpi.png"
							     srcset="image-hidpi.png 2x, image-higherdpi.png 4x"
							     alt="Image description">

tutsplus: html5 picture for responsive images

Obrázky pomocí `picture`

Potomky jsou
- Volitelně elementy typu source se srcset
- Povinně elementem typu img bez srcset


							<picture>
							  <source type="image/svg+xml" srcset="pyramid.svg">
							  <source type="image/webp" srcset="pyramid.webp">
							  <img src="pyramid.png" alt="regular pyramid built from …">
							</picture>

MDN: Responsive images

Art direction


							<picture>
							  <source
							    media="(orientation: landscape)"
							    srcset="image-small.png 320w,
							            image-medium.png 800w,
							            image-large.png 1200w"
							    sizes="(min-width: 60rem) 80vw,
							           (min-width: 40rem) 90vw,
							           100vw">
							  <source
							    media="(orientation: portrait)"
							    srcset="image-small-portrait.png 160w,
							            image-medium-portrait.png 400w,
							            image-large-portrait.png 600w"
							    sizes="(min-width: 60rem) 80vw,
							           (min-width: 40rem) 90vw,
							           100vw">
							  <img src="image-small.png" alt="Image description">
							</picture>

MDN: Responsive images

Obrázky pomocí `object`

Vnořování objektů pro určení kaskády zdrojů (obrázků/aplikací)
Atributy
- data — adresa zdroje (URL)
- type — MIME-Type zdroje
Nejvnořenějším obsahem by měl být případně alternativní text


							<object type="image/svg+xml" data="images/object.svg">
							  <img src="images/object.png" alt="…">
							</object>

Tabulka

Základní koncept tabulky

Tabulka logicky strukturuje data do řádků/sloupců

Tabulka table data člení na řádky
Řádky tr jsou členěny na buňky
Buňky mohou být buď záhlaví th nebo data td
- Data mohou zaujímat více sloupců colspan nebo řádků rowspan
Krátký popis tabulky je v elementu typu caption
- První potomek elementu typu table
- Maximálně jeden výskyt v tabulce
Dlouhý popis tabulky je v jeho atributu typu summary

Jednoduchá tabulka


							<TABLE summary="This table gives some statistics
							                about fruit flies: average height
							                and weight, and percentage with
							                red eyes.">
							  <CAPTION>A test table with merged cells</CAPTION>
							  <TR><TH rowspan="2"><TH colspan="2">Average
							      <TH rowspan="2">Red<BR>eyes
							  <TR><TH>height<TH>weight
							  <TR><TH>Males<TD>1.9<TD>0.003<TD>40%
							  <TR><TH>Females<TD>1.7<TD>0.002<TD>43%
							</TABLE>

W3C: HTML 4.01 Tables

A test table with merged cells
	Average		Red eyes
	height	weight	Red eyes
Males	1.9	0.003	40%
Females	1.7	0.002	43%

Vyšší struktura

Řádky tabulky je možné seskupit do částí

thead Záhlaví tabulky: Obsahuje informaci o sloupcích
tfoot Zápatí tabulky: Obsahuje informaci o sloupcích; Neobsahuje agregační data!
tbody Část tabulky: Obsahuje řádky dat tabulky

Skupiny řádků


							<table>
							  <thead><tr> header information </thead>
							  <tfoot><tr> footer information </tfoot>
							  <tbody><tr> first row of block one data
							         <tr> second row of block one data
							  </tbody>
							  <tbody><tr> first row of block two data
							         <tr> second row of block two data
							         <tr> third row of block two data
							  </tbody>
							</table>

W3C: HTML 4.01 Tables - Row groups

Horizontální struktura

Tabulku lze horizontálně členit na sloupce,
resp. jejich skupiny

Skupina sloupců se určuje elementem typu colgroup
- Lze vynechat (implicitní skupina)
- Množství sloupců ve skupině (implicitně 1) lze určit:
  - atributem typu span nebo
  - obsahem elementu colgroup (obsahuje jednotlivé elementy col)
Jednotlivé sloupce určuje element typu col
- Umožnuje sdílení atributů sloupců
- Nemění strukturu tabulky

Příklad členění po sloupcích


							<colgroup span="40" width="20"></colgroup>

							<colgroup>
							  <col width="20">
							  <col width="20">
							  ...a total of forty col elements...
							</colgroup>

							<colgroup width="20">
							  <col span="39">
							  <col id="format-me-specially">
							</colgroup>

							<table>
							  <colgroup span="10" width="50">
							  <colgroup span="5" width="0*">
							  <thead>
							    <tr><td> ...
							</table>

W3C: HTML 4.01 Tables - Column groups + HTML 4.01: Ukázka tabulky se skupinami sloupců i řádků

Doporučení

Dobrý návrh tabulky je klíčový pro
lepší čitelnost a použitelnost

WHATWG: Table layout techniques

rámečky řádků/sloupců a barva pozadí složitých tabulek
použití neproporcionálního (monospaced) písma u velkého objemu čísel
použití směru záhlaví řádků (<th scope="row/rowgroup">) a sloupců (<th scope="col/colgroup">) a příslušnosti buňky k nim (<td headers="id-col id-row">)

Přístupnost tabulky

Keep it simple Rozdělit vnořené tabulky
Table separation Neměnit nadpisy/téma tabulky
Data separation Nepoužívat vnitřní členění buněk
Alignment Text doleva, čísla doprava
Styling header cells Používat th a vizuálně odlišně od td
Zebra tables Pozadí řádků a aktuálního řádku/sloupce
Flexibility Pamatovat na malé obrazovky
Tables for Layout Nepoužívat, nebo s role="presentation"

WAI: Tables - Tips and tricks

Poznámky a odkazy

Internacionalizace dokumentů

Internationalization Best Practices: Specifying Language in XHTML & HTML Content

3 různé problémy:

Jazyk (language)
Kódování (encoding) z HTTP hlavičky, resp. ISO-8859-1 nebo z meta elementu
Směr psaní textu (text direction)


							<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
							<meta charset="utf-8"/>

Zdroje Kontrola internacionalizaceSeznam jazyků

Určení jazyka

Atributem typu lang nebo xml:lang
Atributem typu hreflang elementu typu anapř. pro CSS selektory
Hlavičkou (HTTP/meta) Content-Language

Problém s elementem typu title

HTML HyperText Markup Language