Tvorba webových stránek a HTML 5. Martin Trnečka

Informaˇ

cn´ı syst´

emy

Tvorba webov´ych str´anek a HTML 5

Martin Trneˇcka

Katedra informatiky Univerzita Palack´eho v Olomouci

Webov´

e str´

anky

Internet - fenom´en, kter´y nen´ı tˇreba pˇredstavovat.

Webov´a str´anka (www str´anka, internetov´a str´anka, html str´anka).

Produkt cel´e ˇrady technologi´ı: HTML, CSS, JavaScript, PHP, MySQL, ASP,

Ruby on Rails, . . . .

Nen´ı moˇzn´e uspokojivˇe prezentovat vˇsechny technologie.

Zamˇeˇr´ıme se na volnˇe dostupn´e ˇreˇsen´ı (ne pˇr´ıliˇs vhodn´e pro enormn´ı IS).

Velice popul´arn´ı u menˇs´ıch a stˇredn´ıch IS (ale i velk´e IS).

V´ybˇer technologi´ı:strategick´e rozhodnut´ı podl´ehaj´ıc´ı cel´e ˇradˇe aspekt˚u.

Opakov´

an´ı z KMI/POS

Hypertext Transfer Protocol (HTTP) zajiˇst’uje komunikaci mezi serverem a

klientem na principu request˚u (HTTP 1.1, novˇe HTTP/2).

Z´akladn´ı protokol (aplikaˇcn´ı vrstva TCP/IP) na kter´em je vystavˇen Internet.

Dvˇe z´akladn´ı metody: GET a POST.

GET:

Poˇzadavek pomoc´ı URL requestu

Z˚ust´av´a v historii prohl´ıˇzeˇce Omezen´ı d´elky (2048 znak˚u) Nevhodn´y pro pˇrenos citliv´ych dat

POST:

Nez˚ust´av´a v historii prohl´ıˇzeˇce ˇ

Z´adn´e omezen´ı d´elky. Nelze cachovat.

HyperText Markup Language (HTML)

Znaˇckovac´ı jazyk!

Kl´ıˇcov´y prvek kaˇzd´e webov´e str´anky (*.html).

Slouˇz´ı pro definici v´yznamu (s´emantiky) obsahu webov´e str´anky.

Poˇc´atky z roku 1990, nejnovˇejˇs´ı HTML 5.

Standard jazyka, konsorcium W3C,http://www.w3.org/

Interpretovateln´y vˇsemi

”bˇeˇzn´ymi“ webov´ymi prohl´ıˇzeˇci (Chrome, Firefox,

Internet Explorer (IE), Opera, Safari, . . . ) - jsou zde jist´e probl´emy (v´ıce pozdˇeji).

”HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. This document describes the set of guiding principles used by the HTML Working Group for the development of HTML5. The principles offer guidance for the design of HTML in the areas of compatibility, utility and interoperability.“

Historie v´

yvoje HTML I.

1980 - Syst´em ENQUIRE pro CERN (Tim Berners-Lee).

1989 - 1990 - pˇredstavena prvn´ı verze HTML + browser (vznik www). 1991 - prvn´ı dokumentace.

1993 - prvn´ı poˇzadavky na standardizaci.

1994 - zaloˇzena prvn´ı pracovn´ı skupina.

1995 - HTML 2.0

1996 - HTML pˇrech´az´ı pod World Wide Web Consortium (W3C).

1997 - HTML 3.2, brzy na to HTML 4.0 (uvedeno nˇekolik standard˚u a DHTML)

1999 - HTML 4.01, v roce 2000 separ´atn´ı vˇetev v´yvoje XHTML.

2004 - zaˇc´atek v´yvoje HTML 5

Historie v´

yvoje HTML II.

2011 - rozˇs´ıˇren´ı skupiny W3C,

”last call“ pro HTML 5

2012 - prvn´ı pracovn´ı draft HTML 5.1 verze.

2013 - HTML 5 (st´ale nen´ı hotov´e) je

”podporov´ano“ vˇsemi moder. prohl´ıˇzeˇci.

2014 -28. ˇr´ıjen 2014, bod zlomu, HTML 5 z´ısk´av´a status W3C

recommendation, st´av´a se ofici´aln´ım standardem.

2015 - Mezidob´ı, zb´yv´a implementovat zbytek HTML 5 standardu. Pr´ace na

draftu HTML 5.1 (oˇcek´avan´e dokonˇcen´ı je ozn´ameno na konec roku 2016)

http://www.w3.org/html/wg/drafts/html/master/. Oˇcek´avan´y draft HTML 5.2 verze.

Pozn´amka:Historie stoj´ıc´ı za v´yvojem (r)evoluˇcn´ıho HTML 5 je mnohem

rozs´ahlejˇs´ı a sloˇzitˇejˇs´ı. Nen´ı moˇzn´e ji uspokojivˇe shrnout pomoc´ı p´ar odr´aˇzek. Sloˇzit´e

a pomal´e procesy standartizace W3C, vznik HTML living standardu predikuj´ı, ˇze

Tvorba www str´

anek obecnˇ

e

Mnoho rozliˇcn´ych pˇr´ıstup˚u a pohled˚u na www str´anky a jejich tvorbu.

N´aˇs pohled: web je informaˇcn´ı syst´em. D˚usledek:mus´ı plnit sv˚uj ´uˇcel.

Progressive enhancement

Obecn´y princip pˇri tvorbˇe webu.

Zaˇc´ın´ame s HTML a postupnˇe nabalujeme dalˇs´ı technologie.

Obl´ıben´y pˇr´ıstup, ale m´a i sv´e stinn´e str´anky.

Z´akladn´ı stavebn´ı bloky:

Textov´y obsah - informace, data, prezentace.

Odkazy na jin´e soubory - obr´azky, videa, hudba, jin´e HTML soubory.

Znaˇcky - popisuj´ıc´ı a strukturuj´ıc´ı www str´anku.

Tvorba www str´

anek podrobnˇ

eji

Je nutn´e si uvˇedomit:

Tvorba www str´anek = softwarov´y projekt (mnohdy velice rozs´ahl´y).

Znalosti z oblasti softwarov´eho inˇzen´yrstv´ı (principy v´yvoje software, anal´yza,

wire frame, GUI a dalˇs´ı).

Budeme se zab´yvat tvorbou z´akladn´ıch www str´anek (ne vˇsak nutnˇe

jednoduch´ych) a tuto znalost postupnˇe rozˇsiˇrovat.

V praxi velice popul´arn´ı: vyuˇz´ıt jiˇz existuj´ıc´ı technologii Java, .NET, popˇr´ıpadˇe

nˇejak´y framework (Nette, Symphony, Ruby on Rails) a na n´ı vystavˇet web. M´a

sv´e v´yhody, ˇsetˇr´ı ˇcas, ale odstiˇnuje uˇzivatele od z´aklad˚u.

”Program´ator se pak st´av´a uˇzivatelem“ - probl´em posledn´ı doby.

Pouˇz´ıv´an´ı framework˚u je naprosto pˇrirozen´y v´yvoj na rozd´ıl od mnoh´ych

program´ator˚u si touto evoluc´ı projdeme.

Pˇ

r´ıklad (HTML 5 k´

od)

1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="utf-8"/>

5 <title>Blue Flax (Linum lewisii)</title>

6 </head>

7 <body>

8 <article>

9 <h1>The Ephemeral Blue Flax</h1>

10

11 <!−−Blue Flax−−>

12 <p>I am continually<em>amazed</em>at the beautiful, delicate

13 <a href="http://en.wikipedia.org/wiki/Linum_lewisii"rel="external"

14 title="Learn more about Blue Flax">Blue Flax</a>that somehow took hold in my garden. 15 They are awash in color every morning, yet not a single flower remains by the afternoon . They are 16 the very definition of ephemeral.</p>

17

18 <img src="blueflax.jpg"width="300"height="175"alt="Blue Flax (Linum lewisii)"/>

19 </article>

20 </body>

V´

yznam HTML znaˇ

cek

Znaˇcky (nˇekdy t´eˇz HTML entity, ˇci pouze entity popˇr´ıpadˇe tagy) pˇriˇrazuj´ı

v´yznam obsahu (ud´avaj´ı s´emantiku).

S´emantika m´a vliv na celou ˇradu kl´ıˇcov´ych atribut˚u: pˇr´ıstupnost, SEO,

jednoduchost.

Je s´emantika nutn´a? Ano! Anonymita dat.

Znaˇcky HTML neˇr´ıkaj´ı nic o podobˇe (vzhledu) obsahu. Ne vˇzdy tomu tak bylo,

HTML 5 pˇrich´az´ı v tomto ohledu se zcela striktn´ı politikou.

Pˇresto je obsah zobrazen v urˇcit´e podobˇe (podrobnˇeji se k tomu vr´at´ıme na

dalˇs´ıch pˇredn´aˇsk´ach).

Z´akladn´ı dˇelen´ı znaˇcek (semantika):

1 Blokov´e - jejich pouˇzit´ı zp˚usob´ı vytvoˇren´ı bloku. Napˇr. _<div>, _<p>, . . .

Z´

akladn´ı syntaxe HTML I.

Z´akladn´ı dˇelen´ı znaˇcek (syntaxe):

1 P´arov´e -_{<div>Obsah</div>}

2 Nep´arov´e -_{<img src="obrazek.jpg" />}

Pro jednoduchost budeme p´arov´e znaˇcky ps´at pomoc´ı jejich uvozovac´ıho tagu.

Definice (Syntaxe p´

arov´

eho tagu)

<uvozovaci tag[atribut1=”hodnota1”. . . atributn=”hodnotan”] >

obsah tagu

< /ukoncovaci tag>

Pˇ

r´ıklad (Odkaz, p´

arov´

y tag)

1 <a href="http://en.wikipedia.org"rel="external"title="Learn more about Blue Flax">

2 Blue Flax 3 </a>

Z´

akladn´ı syntaxe HTML II.

Definice (Syntaxe nep´

arov´

eho tagu)

<uvozovaci tag[atribut1=”hodnota1”. . . atributn=”hodnotan”] / >

V HTML 5 jiˇz nen´ı znak / na konci nep´arov´eho znaku povinn´y (ani zak´azan´y).

Pˇ

r´ıklad (Obr´

azek, nep´

arov´

y tag)

1 <img src="blueflax.jpg"width="300"height="175"alt="Blue Flax (Linum lewisii)"/>

Z hlediska syntaxe nejsou atributy povinn´e, ale bez nich nemaj´ı nˇekter´e znaˇcky

v´yznam. Rovnˇeˇz nˇekter´e atributy jsou doporuˇcen´e.

Definice (Pr´

azdn´

y element)

<uvozovaci tag[atribut1=”hodnota1”. . . atributn=”hodnotan”] >

Z´

akladn´ı syntaxe HTML III. (atributy)

V HTML 5 zapisovat atributy elementu nˇekolika zp˚usoby

Pˇ

r´ıklad (Z´

apis atribut˚

u)

1 <input type="text"disabled>

2 <input type="text"value=yes>

3 <input type="text"value=’no’>

4 <input type="text"value="yes or no">

Z´apis atribut˚u se ˇr´ıd´ı jednoduch´ymi pravidly:

http://www.w3.org/TR/html5/syntax.html#attributes-0

Glob´aln´ı atributy, spoleˇcn´e vˇsem HTML element˚um:

Vztah potomek rodiˇ

c

Pˇ

r´ıklad

1 <article>

2 <h1>The Ephemeral Blue Flax</h1>

3 <img src="blueflax.jpg"... />

4 <p>... continually <em>amazed</em>... delicate<a...>Blue Flax</a>...</p>

5 </article>

Napˇr.<h1> je potomek <article>. <p>je rodiˇcem prvk˚u <em> a <a>. Elementy

tedy existuj´ı v urˇcit´e hierarchick´e struktuˇre.

Pˇ

r´ıklad (Korektn´ı vs. nekorektn´ı pouˇ

zit´ı znaˇ

cek)

1 <p>... continually <em>amazed</em>...</p>

2 <p>... continually <em>amazed ...</p></em>

Syntaxe HTML (z´

akladn´ı struktura dokumentu) I.

<!DOCTYPE html>, speci´aln´ı znaˇcka pro webov´e prohl´ıˇzeˇce, ud´av´a v jak´em form´atu

(standardu) je dokument zaps´an. Pokud nebude standard dodrˇzen st´av´a se

dokument nevalidn´ı (syntakticky nespr´avn´y)!

Pˇ

r´ıklad (HTML 5

DOCTYPE

)

1 <!DOCTYPE html>

Pˇ

r´ıklad (Zastaral´

e, ale st´

ale funkˇ

cn´ı

DOCTYPE

)

1 <!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.0//EN">

2 <!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

3 <!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01//EN">

4 <!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5 <!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"

6 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

7 <!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.1//EN"

Syntaxe HTML (z´

akladn´ı struktura dokumentu) II.

<html>, uvozen´ı zaˇc´atku html str´anky.

<head>, vymezuje hlaviˇcku html dokumentu.

<body>, vymezen´ı obsahu (tˇela) html str´anky.

Pˇ

r´ıklad

Sekce

<head>

Slouˇz´ı pro nastaven´ı a specifikaci vlastnost´ı html str´anky. Obvykle obsahuje

informace o vkl´adan´ych souborech (CSS, Java Script) a meta tagy.

<title>, nejd˚uleˇzitˇejˇs´ı prvek t´eto sekce, urˇcuje n´azev str´anky, m´a velk´y v´yznam

pˇredevˇs´ım pro SEO. Pouze text bez dalˇs´ıch html znaˇcek.

Definice (Syntaxe meta tagu)

<meta name=”val1”|http-equiv=”val1”content=”val2”/ >

Pˇ

r´ıklad (Bˇ

eˇ

zn´

e meta tagy)

1 <meta charset="utf-8"/>

2 <meta name="description"content="Page description..."/>

3 <meta name="keywords"content="Key words for searching..."/>

4 <meta name="author"content="Martin Trnecka"/>

5 <metahttp−equiv="refresh"content="30">

6 <metahttp−equiv="content-type"content="text/html; charset=UTF-8"><!−−zastarale−−>

Syntaxe HTML I. (Nadpisy)

<h1>, <h2>,<h3>, <h4>, <h5>, <h6>, nadpisy r˚uzn´e ´urovnˇe.

Pˇ

r´ıklad

1 <h1>Velky nadpis</h1>

2 <h6>Nejmensi nadpis</h6>

Praktick´y tip: Aˇckoliv existuje 6 ´urovn´ı v praxi se bˇeˇznˇe pouˇz´ıvaj´ı pouze prvn´ı 4 ´

urovnˇe. S klesaj´ıc´ı ´urovn´ı nadpisu, kles´a i v´yznam nadpisu samotn´eho. V´yskyt

nadpis˚u by mˇel b´yt postupn´y dle d˚uleˇzitosti.

<hgroup>, seskupen´ı nadpis˚u.

Pˇ

r´ıklad

1 <hgroup>

2 <h1>Giraffe Escapes from Zoo</h1>

3 <h2>Animals Worldwide Rejoice</h2>

Syntaxe HTML II. (blokov´

e znaˇ

cky)

<div>, blok (generick´y kontejner bez s´emantick´eho v´yznamu).

<p>, odstavec.

<img />, vloˇzen´ı obr´azku. R˚uzn´e form´aty (JPG, PNG, GIF, . . . ). Atributy: - src- url adresa obr´azku (relativn´ı, absolutn´ı)

- alt- popisek obr´azku (m´a vliv na SEO a v pˇr´ıpadˇe nedostupnosti obr´azku, popˇr´ıpadˇe pro ˇcteˇcky www str´anek)

- height- v´yˇska obr´azku v pixelech.

- width - ˇs´ıˇrka obr´azku v pixelech.

- (border,align- nejsou v HTML 5 podporov´any!)

Pˇ

r´ıklad

1 <img src="smiley.gif"alt="Smiley face"height="42"width="42">

Syntaxe HTML III. (ˇ

r´

adkov´

e znaˇ

cky)

<a>, odkaz. Atributy:

- href, url adresa destinace (relativn´ı, absolutn´ı).

- rel, specifikace vztahu odkazu k aktu´aln´ımu dokumentu (napˇr.nofollow)

- target, kde m´a b´yt odkaz otevˇren (napˇr. blank)

<em>, zd˚uraznˇen´y text.

<strong>, zv´yraznˇen´y text, s´emantick´a d˚uleˇzitost.

<span>, ohraniˇcen´ı celku (ˇr´adkov´e!), bez s´emantick´eho v´yznamu.

<br />, ˇr´adkov´y zlom.

<address>, pro vloˇzen´ı adresy.

<cite>, citace. <pre>, origin´aln´ı mezery.

<i>, <b>,<u> - kurziva, tuˇcn´y text, podtrˇzen´y text (zastaral´e v HTML 4.01), v

HTML 5 maj´ı jin´y v´yznam! (zvuk, tuˇcn´y, stylistika) <del> pˇreˇskrtnut´y obsah,

<ins> podtrˇzen´y obsah (oba nejsou ˇr´adkov´e!), <s>neaktu´aln´ı obsah.

Syntaxe HTML IV.

<code>, zdrojov´y k´od.

<button>, tlaˇc´ıtko.

Pˇ

r´ıklad

1 <button type="button">Click Me!</button>

<canvas>, 2D kresl´ıc´ı pl´atno novinka v HTML 5.

<embed>, kontejner pro vloˇzen´ı extern´ı aplikace (korektnˇe je definov´an aˇz v HTML 5).

Pravidlo: Potomkem ˇr´adkov´eho elementu nesm´ı b´yt element blokov´y! Vyj´ımkou je element pro odkaz.

To zda je element ˇr´adkov´y ˇci blokov´y je obvykle snadno rozpoznateln´e z jeho pouˇzit´ı.

Pozor: Ne vˇsechny znaˇcky (pˇredevˇs´ım z HTML 5) se defaultnˇe zobrazuj´ı stejnˇe ve

Syntaxe HTML V. (formul´

aˇ

re)

<form>, atributy: action,method,enctype

<input>, atribut name pro jm´eno a type pro specifikaci typu (text, hidden,

submit, password,checkbox, date,file, . . . ) nov´e atributy v HTML 5:

autofocus,required, placeholder, readonly, maxlength,pattern, . . .

Pˇ

r´ıklad

1 <form action="demo.php">

2 Your name:<input type="text"name="fname"><br>

3 <input type="tel"name="phone"placeholder="xxx-xxx-xxxx"pattern="\d{3}-\d{3}-\d{4}"/>

4 <input type="submit"value="Submit">

5 </form>

<textarea>, <button>(lze pouˇz´ıt pro odesl´an´ı formul´aˇre)

<select>, <option>, <optgroup> <fieldset>, <label>

Formul´

aˇ

re jeˇ

stˇ

e jednou

Pro formul´aˇre pˇren´aˇsej´ıc´ı soubory je potˇrebamultipart/form-data

Nov´e prvky lze pouˇz´ıt pro z´akladn´ı validaci na stranˇe klienta (validace je

ponech´ana na prohl´ıˇzeˇci).

V pˇr´ıpadˇe pˇr´ıstupu z jin´eho zaˇr´ızen´ı umoˇzˇnuj´ı pohodlnˇejˇs´ı manipulaci

(ˇc´ıseln´e pole = je zobrazena jen numerick´a kl´avesnice).

V´yraznˇe ulehˇcuj´ı tvorbu webov´ych aplikac´ı.

Syntaxe HTML VI. (tabulky)

Tabulky se pouˇz´ıvaj´ı pro zobrazen´ı tabulkov´ych dat. Nebo dat tabulkov´e povahy.

Webov´y pravˇek: vyuˇzit´ı tabulek pro layout (lze i dnes ale m´a to z´asadn´ı d˚usledky

-m´ytus, dnes jiˇz neplat´ı).

Pˇrehled syntaxe: <table> <thead> <tbody> <tfoot> <tr> <th> <td> <colgroup> <col> <caption>

Pˇ

r´ıklad (Tabulka)

1 <table>

2 <caption>TV Schedule</caption>

3 4 <!−−table head−−> 5 <thead> 6 <tr> 7 <th>Time</th> 8 <th>Mon</th> 9 <th>Tue</th> 10 <th>Wed</th> 11 </tr> 12 </thead>

Pˇ

r´ıklad (Tabulka pokraˇ

cov´

an´ı)

6 <td colspan="2">Celebrity Hoedown</td>

7 </tr>

8

9 <tr>

10 <td>9 pm</td>

11 <td>Hardy, Har, Har</td>

12 <td>What’s for Lunch?</td>

13 <td rowspan="2">Movie of the Week</td>

14 </tr>

15

16 <tr>

17 <td>10 pm</td>

18 <td>Healers, Wheelers &amp; Dealers</td>

19 <td>It’s a Crime</td>

20 </tr>

21 </tbody>

Syntaxe HTML VII.

Seznamy:

<ul>, seznam s odr´aˇzkami.

<ol>, ˇc´ıslovan´y seznam. Atributy: - reversed, hodnoty v opaˇcn´em poˇrad´ı.

- start, prvn´ı hodnota seznamu.

- type, typ odr´aˇzek 1, A, a, I, i

<li>, poloˇzka seznamu. Ostatn´ı:

Pˇrehled vˇsech element˚u HTML jazyka je dostupn´y na:

http://www.w3schools.com/tags/

Pozor: Ne vˇsechny znaˇcky jsou podporov´any vˇsemi prohl´ıˇzeˇci. Stejnˇe tak ne vˇsechny

Syntaxe HTML (novinky v HTML 5) I.

Struktur´aln´ı elementy <header>, <nav>, <footer>, <article>,<section> . . .

Pozn´amka:Casto kritizov´ˇ any jako neuˇziteˇcn´e (neopr´avnˇen´e). Novinka oproti

pˇredchoz´ım HTML Restartuj´ı outline webu (nadpisy). V HTML 5 je moˇzn´e m´ıt v´ıce

<h1> element˚u. Velice problematick´e z hlediska s´emantiky - nedoporuˇcuji pouˇz´ıvat.

<header>, vymezen´ı hlaviˇcky sekce (nesouvis´ı s <head>!), v´yznam z´avis´ı na

um´ıstˇen´ı, m˚uˇze obalovat navigaˇcn´ı prvky.

Pˇ

r´ıklad (

<header>

jako souˇ

c´

ast sekce)

1 <article>

2 <header>

3 <h1>Internet Explorer 9</h1>

4 <p><time pubdatedatetime="2011-03-15"></time></p>

5 </header>

6 <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to 7 the public on March 14, 2011 at 21:00 PDT ...</p>

Pˇ

r´ıklad (

<header>

jako souˇ

c´

ast cel´

e str´

anky)

1 <body>

2 <header>

3 <nav>

4 <ul>

5 <li><a href="#gaudi">Barcelona’s Architect</a></li>

6 <li lang="es"><a href="#sagrada-familia">La Sagrada Familia</a></li>

7 <li><a href="#park-guell">Park Guell</a></li>

8 </ul>

9 </nav>

10 </header>

11 </body>

Pˇ

r´ıklad (

<header>

jako banner)

1 <headerrole="banner">

2 ... [ site logo , navigation , etc .] ... 3 </header>

Syntaxe HTML (novinky v HTML 5) II.

<nav>, vymezen´ı navigaˇcn´ıch prvk˚u str´anky ˇci elementu. Ne vˇsechny navigaˇcn´ı prvky

str´anky mus´ı b´yt obaleny touto znaˇckou.

Pˇ

r´ıklad (

<nav>

)

1 <navrole="navigation">

2 <a href="html">HTML</a>

3 <a href="css">CSS</a>

4 <a href="js">JavaScript</a>

Syntaxe HTML (novinky v HTML 5) III.

<footer>, vymezen´ı patiˇcky elementu.

Pˇ

r´ıklad (

<footer>

)

1 <footer>

2 <p>Posted by: Hege Refsnes</p>

3 <p>Contact information:<a href="mailto:someone@example.com">

4 someone@example.com</a>.</p>

Syntaxe (novinky v HTML 5) IV.

<article>, vymezen´ı vˇetˇs´ıho bloku.

Pˇ

r´ıklad (

<article>

)

1 <article>

2 <h1>The Diversity of Papua New Guinea</h1>

3

4 <p>Papua New Guinea is home to more than 800 tribes and languages ...</p>

5 ... [ rest of story content] ...

6 <footer> <!−−thearticle’s footer, not the page’s−−>

7 <p>Leandra Allen is a freelance journalist who earned her degree in anthropology from 8 the University of Copenhagen.</p>

9 <address>

10 You may reach her at <a href="mailto:leandra@therunningwriter.com">

11 leandra@therunningwriter . com</a>. 12 </address>

13 </footer>

Syntaxe HTML (novinky v HTML 5) V.

<section>, vymezen´ı ˇc´asti (vˇetˇs´ıho) bloku article(lze pouˇz´ıt i bez article).

Pˇ

r´ıklad (

<section>

)

1 <section>

2 <h2>Ceremony</h2>

3 <ol>

4 <li>Opening Procession</li>

5 <li>Speech by Valedictorian</li>

6 <li>Speech by Class President</li>

7 </ol> 8 </section> 9 10 <section> 11 <h2>Graduates (alphabetical)</h2> 12 <ol>

13 <li>Molly Carpenter</li>

14 <li>Anastasia Luccio</li>

15 <li>Ebenezar McCoy</li>

16 </ol>

Syntaxe HTML (novinky v HTML 5) VI.

<aside>, obsah mimo hlavni obsah. Obl´ıben´y pro vytvoˇren´ı sidebaru.

Pˇ

r´ıklad (

<aside>

)

1 <p>My family and I visited The Epcot center this summer.</p>

2

3 <asiderole="complementary">

4 <h4>Epcot Center</h4>

5 <p>The Epcot Center is a theme park in Disney World, Florida .</p>

6 </aside>

<main>, definice hlavn´ıho obsahu v r´amci <body>, nerestartuje outline. Na str´ance

mus´ı b´yt pouze jeden element<main>.

Pˇ

r´ıklad (

<main>

)

Syntaxe HTML (novinky v HTML 5) VII.

<meter>, grafick´e zobrazeni ˇc´asti (ne vˇsechny prohl´ıˇzeˇce podporuj´ı - textov´e zobrazen´ı).

Pˇ

r´ıklad (

<meter>

)

1 <p>Miles walked during half−marathon:

2 <metermin="0"max="13.1"value="4.5"title="Miles">4.5</meter></p>

<progress>, progress bar.

Pˇ

r´ıklad (

<progress>

)

1 <p>Please wait while we save your data. Current progress : 2 <progressmax="100"value="0">0% saved</progress></p>

Syntaxe HTML (novinky v HTML 5) VIII.

<figure>, <figcaption>.

<keygen>.

<menu> (redefinov´ano v HTML 5), <menuitem>.

<output>, <time>.

Ukonˇcena podpora:

<frame>, frameset,<noframe>.

<font>, <center>.

<applet>.

´

Data atributy

Novinka (jedno z nejlepˇs´ıch vylepˇsen´ı) v HTML 5. Slouˇz´ı pro uloˇzen´ı lok´aln´ıch dat na

webov´e str´ance ˇci v aplikaci - pokroˇcilejˇs´ı funkcionalita na ´urovni HTML str´anky.

Pˇ

r´ıklad

1 <ul>

2 <li data−animal−type="bird">Owl</li>

3 <li data−animal−type="fish">Salmon</li>

4 <li data−animal−type="spider">Tarantula</li>

5 </ul>

6

7 <p data−obsah="ulozena data">

8 ... 9 </p>

V pˇredchoz´ıch verz´ıch HTML bylo nˇeco podobn´eho moˇzn´e jen v omezen´e m´ıˇre.

Zamyˇslen´ı: Podoba internetu se dramaticky mˇen´ı. Trendem modern´ı doby jsou

ARIA

Accessible Rich Internet Applications (WAI-ARIA) 1.0

Slouˇz´ı pro vylepˇsen´ı pˇr´ıstupnosti a pokroˇcilejˇs´ı definici s´emantiky. Atribut role.

Role:application, banner, complementary, contentinfo, form,

main, navigation, search,. . .

Souˇc´ast´ı HTML 5 standardu (definov´ano samostatn´ym standardem)

http://www.w3.org/TR/html5/dom.html#aria-role-attribute.

Pˇ

r´ıklad

1 <navrole="navigation">

2 <a href="html">HTML</a>

3 <a href="css">CSS</a>

4 <a href="js">JavaScript</a>

Pojmenov´

av´

an´ı element˚

u

1 Pro pojmenov´an´ıjedineˇcn´ym n´azvem pouˇzijeme atribut _id

Pˇ

r´ıklad (

<id>

)

2 Pro pojmenov´an´ıopakuj´ıc´ım se n´azvem pouˇzijeme atribut _class

Pˇ

r´ıklad (

<class>

)

1 <div class="navigation active">

2 <article>

3 ...

4 </article>

Pˇ

r´ıklad (Komplexn´ı pˇ

r´ıklad HTML str´

anky)

7 <!−−obsah prvniho sloupce−−>

8 <div id="content">

9 <article>...</article>

10 </div>

11

12 <!−−obsah druheho sloupce−−>

13 <div id="sidebar"> 14 <aside>...</aside> 15 </div> 16 17 <footer>...</footer> 18 </div> 19 </body> 20 </html>

HTML entity

Speci´aln´ı znaky.

Definice (Syntaxe html entit)

&nazev entity;

Pˇ

r´ıklad (HTML entity)

N´

azvy

N´azvy soubor˚u maj´ı pˇredevˇs´ım vliv na SEO a pˇr´ıstupnost str´anek jako celku.

Pˇ

r´ıklad (Vhodn´

y n´

azev)

buckminster-fuller.html

Pˇ

r´ıklad (Nevhodn´

y n´

azev)

buckminster fuller.html

Pozn´amka:dodateˇcn´e soubory vkl´adan´e do html str´anky by mˇeli m´ıt

”rozumnou“

velikost.

Pozn´amka:starˇs´ı literatura ˇcasto uv´ad´ı znak podtrˇz´ıtka jako nevhodn´y to m´a

Odkazy jeˇ

stˇ

e jednou (lok´

aln´ı odkazy)

Pˇ

r´ıklad

6 <li><a href="#intro">Introduction</a></li>

7 <li><a href="#main-characters">Description of the Main Characters</a></li>

8 </ul> 9 </nav> 10 </header> 11 12 <article> 13 <h2 id="intro">Introduction</h2> 14 <p>Lorem ipsum...</p>

15 <h2 id="main-characters">Description of the Main Characters</h2>

16 <p>Dolor sit amet...</p>

17 </article>

Validn´ı HTML

Validn´ı = syntakticky (a ˇc´asteˇcnˇe s´emanticky) korektn´ı HTML k´od vzhledem k

aktu´aln´ımuDOCTYPE.

Nevalidn´ı HTML m˚uˇze b´yt renderov´ano neˇcekan´ym zp˚usobem.

Velk´y vliv na SEO.

Automatick´a validace: http://validator.w3.org/

Z´

avˇ

er

D˚uleˇzit´e pojmy:

Jazyk HTML a jeho z´akladn´ı principy, syntaxe a s´emantika jazyka HTML 5

Specifick´e vlastnosti jazyka HTML 5 a jejich pouˇzit´ı.

Formul´aˇre v HTML 5.

ˇ

Cten´ı na doma:

Castro E., Hyslop B., HTML 5 and CSS 3, 2012, ISBN 978-0-321-71961-4.

(chapter 1-6, 15, 16, 18) -hlavn´ı zdroj

http://en.wikipedia.org/wiki/Progressive_enhancement http://www.w3.org/TR/wai-aria/

http://www.w3schools.com/tags/ http://www.wufoo.com/html5/

Kniha: HTML 5 and CSS 3

Visual Quick Start Guide.

Informace o knize:http://www.bruceontheloose.com/htmlcss/

7. vyd´an´ı (v dobˇe vytv´aˇren´ı tohoto kurzu vyˇslo 8. vyd´an´ı).

ˇ

Cesk´y ekvivalent HTML5 a CSS3 (N´azorn´y pr˚uvodce tvorbou WWW str´anek) od