Veronika Dropčová
veronika.dropcova(at)gmail.com

   nika.blog.matfyz.sk

07 – aspoň niečo z HTML 5

Čo je webová stránka?

– kombinácia textu, obrázkov, animácií, hypertextových odkazov a ďalších objektov

– „obyčajný“ textový dokument so špeciálnymi značkami (zdrojový kód)

– existujú pravidlá (štandardy), podľa ktorých sa tvoria webové stránky (HTML, XHTML, HTML5), ale aj organizácie, ktoré majú na starosti tieto pravidlá vytvárať (W3C)

– zdrojový kód webovej stránky sa skladá z elementov/značiek/tagov, napr. <html>, <meta>, …

– niektoré elementy majú koncovú značku, napr. <html> má koncovú značku </html>, lebo sa očakáva, že vnútri tohto elementu bude nejaký obsah

– niektoré elementy nepotrebujú koncovú značku, napr. element <meta>, lebo nemá žiadny obsah

– dohoda: názvy elementov aj atribútov píšeme malými písmenami; hodnoty všetkých atribútov píšeme v úvodzovkách alebo apostrofoch

 

 

element popis
 <html> </html>  začiatok a koniec dokumentu
 <head> </head> hlavička dokumentu (nezobrazuje sa)
 <title> </title> titulok dokumentu, zobrazuje sa v titulnom riadku prehliadača
 <body></body> telo dokumentu/stránky, ktoré sa zobrazuje v okne prehliadača

 

 

Element <!DOCTYPE>

 

  • dôležitý element, ktorý určujeme typ dokumentu
  • musí byť ešte pred elementom <html>
  • pre štandard HTML5 sa používa <!DOCTYPE html>

 

Kódovanie stránky (slovenčina)

 

  • definujeme pomocou elementu <meta> vo vnútri elementu <head> … </head>
  • je vhodné uvádzať ho skôr ako ďalšie elementy v hlavičke
  • existuje viacero kódovaní slovenčiny (budeme používať UTF-8)
  • <meta charset=“utf-8″>

 

Vnáranie dokumentov

 

  • správne poradie: <head><title>titulok stránky</title></head>
  • nesprávne poradie: <head><title>titulok stránky</head></title>

 

Korektnosť zdrojového kódu

 

  • korektnosť zdrojového kódu (syntax) si môžeme otestovať pomocou tzv. HTML validátora W3C
  • validator.w3.org

 

Štruktúrovanie dokumentu

 

  • základom tvorby stránky je rozdeliť ju na základné časti (hlavička, navigácia, hlavný obsah, pätička, reklama, atď.)

 

element popis
 <header> </header>  hlavička časti (nemusí byť celej stránky), môže byť na stránke viackrát
 <nav> </nav> skupina navigačných odkazov (pre navigáciu najväčšej dôležitosti)
 <section> </section> sekcia (časť) stránky (tematické zoskupenie obsahu)
 <article></article> samostatná časť stránky (mala by sa dať samostatne distribuovať alebo publikovať)
 <aside></aside> časť stránky, ktorá len okrajovo súvisí s okolitým obsahom
 <footer></footer> pätička časti stránky, nemusí byť nutne na konci
 <div></div> všeobecná sekcia (špeciálny blokový element). Vnútri môžu byť ďalšie sekcie, bloky, odseky, text.
 <h1></h1> nadpis úrovne 1 – najvyššia
 <h2></h2> nadpis úrovne 2
 …
 <h6></h6> nadpis úrovne 6 – najnižšia
 <p></p> odsek

 

 

Formátovanie obsahu

 

element popis
 <em> </em> kurzíva
 <strong> </strong> tučné písmo
<br> nový riadok v rámci odseku/sekcie/časti textu
 <sub></sub> dolný index
<sup></sup> horný index
 <code></code> zdrojový kód

 

Názvy a prípony súborov

 

  • prípony webových stránok: .htm, .html
  • špeciálne názvy: index.html, default.html
  • nepoužívajte v názvoch súborov diakritiku ani medzery

 

Teraz vypracujte toto zadanie (klik na mňa).

 

Zoznam s odrážkami a číslovaný zoznam

 

  • <ul> … </ul> – zoznam s odrážkami
  • <ol> … </ol> – číslovaný zoznam
  • <li> … </li> – prvok zoznamu

– zoznamy sú bloky, jednotlivé prvky zoznamu môžeme formátovať, aj do nich vkladať bloky, napr. odseky, nadpisy

 

Číslovaný zoznam (<ol>) a jeho atribúty

  •  atribúty s ich hodnotami definujeme v otváracej značke elementu
  • napr. <ol type=“A“ reversed>
  • hodnoty atribútov je vhodné uvádzať v úvodzovkách alebo apostrofoch
  • poradie atribútov je ľubovoľné

 

atribút hodnoty popis
 type 1, A, a, I, i typ zoznamu (číslovaný, veľké písmená, malé písmená, veľké rímske číslice, malé rímske číslice)
 start číslo hodnota, ktorou sa začína číslovať zoznam
reversed reversed či má byť zoznam v opačnom (zostupnom) poradí (ak chceme zoznam v normálnom poradí, atribút neuvádzame)

 

Obrázky

 

  • element <img> (nemá koncovú značku)
  • povinný atribút src – cesta k obrázku
  • povinný atribút alt – alternatívny text, ktorý sa zobrazí namiesto obrázka, ak sa obrázok nezobrazí (nie, to nie je to, čo sa zobrazuje v bubline – v IE je chyba)
  • atribúty width, height veľkosť obrázka
  • atribút title – text, ktorý sa zobrazí v bubline
  • <img src=“obrazky/logo.jpg“ alt=“logo“ width=“510″ height=“80″ title=“logo firmy“>
  • povolené formáty: gif, jpg, png

 

Odkazy

 

  • element <a></a>
  • atribút href – zdroj odkazu
  • atribút title – akási nápoveda (zobrazuje sa v bubline)
  • <a href=“http://www.google.sk“ title=“vyhľadávač“>GOOGLE</a>
  • <a href=“mailto:moj@email.sk“>Napíšte mi</a>

 

Tabuľky

 

  • skladajú sa z riadkov a stĺpcov
  • definujeme po riadkoch (v nich sú bunky)
  • počet buniek v riadku = počtu stĺpcov (ale len v prípade, ak nie sú niektoré stĺpce alebo riadky spojené)
  • vnútri buniek môžeme používať elementy na štruktúrovanie a aj elementy na formátovanie obsahu
  • tabuľky môžeme do seba vnárať

 

element popis
 <table></table> začiatok a koniec celej tabuľky (vnútri musí byť všetko, čo sa týka tabuľky)
 <tr></tr> definuje celý riadok (vnútri sú bunky)
 <th></th> definuje bunku v rámci riadka, ktorá je nadpisom (zvyčajne zvýraznená) – používať len pre nadpisy riadkov/stĺpcov, nie kvôli zvýrazneniu
 <td></td> definuje bunku v rámci riadka
<caption></caption> legenda celej tabuľky, zobrazuje sa mimo okraja tabuľky, musí byť definovaná v rámci elementu <table></table>

 

Tabuľka – ukážka

 

Tabuľka s legendou (2 riadky x 2 stĺpce)

 

<table>

<caption>legenda</caption>

<tr>

  <th>nadpis stĺpca 1</th><th>nadpis stĺpca 2</th>

</tr>

<tr>

<td>obsah bunky 1</td><td>obsah bunky 2</td>

</tr>

</table>

 

Element <table> – atribúty

 

 

atribút hodnoty popis
 border 1,““ či sa zobrazí okraj tabuľky (iné hodnoty nie sú podporované)

 

Špeciálne znaky

 

 nedeliteľná medzera  &nbsp;
 < &lt;
 > &gt;
 & &amp;
 × &times;
 ÷ &divide;
 € &euro;

 

Ďalšie zadanie: klik sem 

 

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *