Všechny moderní prohlížeče umožňují vložit do HTML stránky rám přesné velikosti a zobrazit v něm jinou stránku (této stránce říkáme "vnořená"). Obsah takto vnořené stránky může být zcela libovolný (textový i obrazový). Pro vnořené rámy se používá HTML značka <iframe> (čte se ajfrejm).

Použítí iframe je různé. Velice často se používá pro vkládání okna streamovaného videa z jiného serveru do vlastních stránek nebo mapové výřezu z mapových serverů.

Iframe není sice nejmodernější způsob tvorby webu, ale pro začínajícího tvůrce je vhodným startovacím způsobem tvorby stránek s více HTML soubory.

<iframe>

• značka párová
• povinnými atributu jsou src, width a height

<iframe src="priklad.html" width="400" height="200">
</iframe>

Atributy prvku

• iframe má celou řadu dalších atributů, které je potřeba často uvádět, jelikož nejdou nahradit CSS stylem

src

• obsahuje URL k souboru vnořené stránky

width a height

• šířka a výška,
• hodnotou může být velikost v pixelech nebo v procentech

scrolling

• hodnota "no" nezobrazí rolovací lišty a vnořenou stránkou nepůjde rolovat,
• hodnota "yes" zobrazí pravou rolovací lištu bez ohledu na to, je-li potřeba.

frameborder

• hodnota 0 vypne zobrazování rámečků kolem vnořeného rámu.

marginheight, marginwidth

• vnitřní okraje vnořené stránky v pixelech,
• doporučenými hodnotami je 0,

align

• nastavení obtékání (hodnoty right a left)

name

• jméno vnořeného rámu, použitelné u odkazů (atribut target), které mají mířit do vnořeného rámu.

<iframe src="priklad.html" width="400" height="200" scrolling="no" frameborder="0"
marginheight="0" marginwidth="0" name="mujiframe">
</iframe>

Odkazy tam i zpět

• odkazy se dají nasměrovat do různých rámů pomocí atributu target u odkazu.

Z nadřazené stránky do vnořeného rámu

• v odkazu se použije u targetu jméno vnořeného rámu (atribut name)

<a href="stranka.htm" target="muj_iframe">Odkaz do vnořeného rámu</a>
<iframe name="muj_iframe" ...></iframe>

Z vnořeného rámu do nadřazené stránky

• ve vnořené stránce bude

<a href="jina_stranka.html" target="_parent">Odkaz z vnořeného rámu</a>

Na závěr ochutnávka z nového HTML5

• HTML5 je nový standard pro psaní v jazyce HTML
• reaguje na změny ve struktuře webu, zejména na vkládání multimediálního obsahu
• HTML5 dnes již podporuje většina moderních webových prohlížečů

Multimediální obsah na webu

Audio

• pro přímé vložení audio do stránek slouží párová značka AUDIO
• tato značka má několik povinných a nepovinných atributů
• první z povinných je atribut CONTROLS, který vám zobrazí v prohlížeči ovládací panel
• dalším povinným je atribut SRC, ve kterém určujete cestu k audio souboru (může to být relativní odkaz nebo URL odkaz na jiný web) a atribut TYPE, ve kterém uvádíte typ audio souboru
• oba dva tyto atributy se zapisují do nepárové značky SOURCE
• uvádí se navíc i alternativní text v případě, že někdo používá nepodporovaný webový prohlížeč

Ukázka kódu

<audio controls>
  <source src="http://www.server.cz/audio.mp4" type="audio/mp4">
  <source src="http://www.server.cz/audio.mp3" type="audio/mp3">
  <source src="http://www.server.cz/audio.ogg" type="audio/ogg">
  <p>Váš prohlížeč nepodporuje HTML5 audio element.</p>
</audio>

Podporované formáty

• bohužel ne všechny webové prohlížeče podporují všechny audio formáty
• nejlepší volbou je formát MPEG (.mp3) nebo AAC (.mp4, .m4a, .aac), který podporují všechny nejpoužívanější prohlížeče vč. Internet Exploreru a Edge
• dalším hojně používaným formátem je OGG (.ogg, .oga), ten však nepodporuje Internet Explorer a Edge

Video

• pro přímé vložení videa do stránek slouží párová značka VIDEO
• tato značka má několik povinných a nepovinných atributů
• první z povinných je atribut CONTROLS, který vám zobrazí v prohlížeči ovládací panel
• dalším povinným je atribut SRC, ve kterém určujete cestu k audio souboru (může to být relativní odkaz nebo URL odkaz na jiný web) a atribut TYPE, ve kterém uvádíte typ audio souboru
• oba dva tyto atributy se zapisují do nepárové značky SOURCE
• uvádí se navíc i alternativní text v případě, že někdo používá nepodporovaný webový prohlížeč
• přidat lze i atribut POSTER, kterým nastavíte úvodní snímek před spuštěním videa

Ukázka kódu

<video poster="http://www.server.cz/movie.jpg" controls>
  <source src="http://www.server.cz/movie.ogv" type="video/ogg">
  <source src="http://www.server.cz/movie.mp4" type="video/mp4">
  <p>Váš prohlížeč nepodporuje HTML5 video element.</p>
</video>

Podporované formáty

• bohužel ne všechny webové prohlížeče podporují všechny video formáty
• nejlepší volbou je formát H.264 (.mp4, .m4v), který podporují všechny nejpoužívanější prohlížeče vč. Internet Exploreru a Edge, avšak jedná se o komerční formát
• možnou alternativou je svobodný formát OGG (.ogg, .ogv), ten však nepodporuje Internet Explorer, Edge nebo Safari

Skládání jednoduché webové stránky z blokových prvků

Většina webových stránek v dnešní době je vytvořena tak, že obsah je složen pomocí HTML blokových prvků (DIV, atd.) a vzhled je definován pomocí CSS šablony (tzv. layout).

• každá stránka má záhlaví (angl. header), ve kterém je umístěn hlavní nadpis charakterizující obsah stránek
• pod záhlavím je většinou umísěno menu a obsah
• hlavní menu se nejčastěji nachází vpravo nebo vlevo od hlavního obsahu (může být i nad hlavním obsahem pod záhlavím)
• na konci stránky je zápatí (angl. footer), ve kterém jsou informace o autorovi stránek, atd.
• celé stránky bývají většinou vycentrované na střed a nezabírají celou šířku obrazovky, z důvodů lepší čitelnosti textu

 

Příprava HTML souboru index.html

• vytvořte si nový HTML soubor a pojmenujte jej INDEX.HTML
• upravte první řádek souboru s deklarací "!doctype" podle ukázky níže
• v souboru index.html si vytvořte nový oddíl DIV a přiřaďte mu identifikátor "page"
• tento oddíl bude sloužit pro vycentrování stránek na střed obrazovky
• dále si uvnitř toho oddílu vytvořte 4 nové oddíly DIV
• přiřaďte jim identifikátory: "header", "menu", "content", "footer", přesně v tomto pořadí

Příprava CSS souboru

• vytvořte si nový CSS soubor a pojmenujte jej STYL.CSS
• nalinkujte tento soubor do hlavičky souboru INDEX.HTML (viz ukázka výše)

Úprava CSS souboru

Oddíl "page"

• tento oddíl slouží pro nastavení základní šířky a vycentrování na střed okna
• šířka by neměla přesáhnout 1000 pixelů (zachování čitelnosti textu)
• můžete zde též nastavit typ písma pro celou stránku

Oddíl "header"

• hlavička zabírá většinou celou šířku stránky
• má pevně nastavenou výšku
• doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

Oddíl "menu"

• tento oddíl obsahuje jen položky hlavního menu
• jednotlivé položky lze vytvořit opomocí odstavců, seznamů či tabulky
• má pevně stanovenou šířku
• nastavuje se mu obtékání podle požadovaného umístění menu (vpravo nebo vlevo od obsahu)
• doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

V případě, že požadujete umístění menu při pravém okraji, změňte hodnotu "left" na "right".

Oddíl "content"

• tento oddíl obsahuje hlavní obsah stránek
• obtéká oddíl menu zprava nebo zleva (podle nastavení)
• nastavuje se mu šířka, která je zmenšená o šířku menu (např. 760 px - 200 px = 560 px)
• doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

V případě, že požadujete umístění menu při pravém okraji, změňte hodnotu "right" na "left".

Oddíl "footer"

• tento oddíl se vkládá proto, aby ukončil obtékání, které je aktivní kvůli menu a obsahu
• šířka je většinou shodná s celkovou šířkou a může mít pevně stanovenou výšku
• doporučuji nastavit barevné pozadí (mimo bílé) pomocí background-color

Vytvoření menu pomocí <iframe>

• vytvořte si nový HTML soubor a uložte si jej pod názvem MENU.HTML,
• nezapomeňte nalinkovat do těchto HTML souboru CSS soubor STYL.CSS,
• do souboru INDEX.HTML vložte do oddílu s identifikátorem "menu" nový IFRAME odkazující na výše vytvořené HTML soubory,
• šířku IFRAME nastavte na "100%" (rozměry jsou již vyřešeny v CSS souboru) a výšku IFRAME nastavte na 500 pixelů.

Příklad kódu v souboru index.html

Příklad kódu v souboru menu.html

Teď už je celá šablona webové stránky hotová. Následujícími kroky jsou doplnění obsahu, menu, atd. a nastavení konečného barevného vzhledu. :-)

Vytvořte sadu webových stránek za použití postupu popsaného ve studijním materiálu.

Povinný obsah

• záhlaví (header)
• menu (alespoň 10 položek, umístěné vlevo nebo vpravo od hlavního obsahu)
• hlavní obsah
• zápatí (footer)

Téma webových stránek

• podle zadání vyučujícího

Hlavní obsah budou tvořit:

• nadpisy minimálně H2 a H3
• text v odrážkách (minimálně 10 řádků)
• alespoň 3 obrázky
• audio ukázka se zobrazeným přehrávačem

Stránky budou doplněny o obrázek v pozadí o šířce 1920 pixelů, umístěné tak, aby se pozadí neposouvalo s obsahem.

Barevné schéma stránek libovolné, avšak v barvách vzájemně ladících. Pro výběr vhodných barev využijte např. Paletton.com. 

Formální požadavky

• hlavní stránka bude pojmenována index.html,
• veškeré styly CSS budou zapsány v externím souboru: style.css,
• položky menu budou zapsány v souboru: menu.html,
• veškeré cesty k multimediálnímu obsahu (obrázky, zvuk) budou tvořeny URL odkazem na server Wikipedia Commons a řádně odcitovány,