Informatika - Učebnica HTML a CSS
Tento elektronický materiál je určený pre študentov stredných škôl, ktorí sa chcú oboznámiť so značkovacím jazykom HTML. Ciele tejto interaktívnej elektronickej učebnice sú :
- Oboznámiť študenta s jazykom HTML a CSS, s jeho najdôležitejšími a najužitočnejšími značkami.
- Naučiť študenta, po preštudovaní tohto elektronického materiálu vytvoriť jednoduchú webovú stránku.
- Rozvíjať u študenta samostatné myslenie a kreativitu.
- Uplatňovať spôsob dištančného štúdia.
- Snaha vytvoriť pre študenta materiál vhodný na štúdium.
HTML (Hypertext Markup Language) je kód, ktorý slúži k zobrazovaniu dát vopred zadaným spôsobom. Je to vlastne podrobný návod, ako zobraziť prijaté dáta na obrazovke - kód HTML je teda presným a stručným vyjadrením toho, čo chceme zobraziť v programe všeobecne známom ako prehliadač. Hovoríme o jazyku, ktorý slúži k popisu webovej stránky. Aby ste si mohli stránky vytvorené v jazyku HTML prehliadať, potrebujete prehliadač. Ten prevádza zdrojovú podobu kódu HTML do grafickej podoby, ktorá je čitateľná všetkým užívateľom Internetu.
Ak začínate vytvárať svoju prvú stránku, budete potrebovať:
- počítač, na ktorom beží aspoň jednoduchý textový editor (napr. Poznámkový blok, PSPad ...)
- internetový prehliadač (Internet Explorer, Firefox, Mozilla ...)
- nejaký prístup na internet
- inšpiráciu o čom písať
Naopak, čo nebudete potrebovať:
- drahé programy
- nemusíte vedieť programovať
Ako používať túto učebnicu
Učebnica HTML a CSS je interaktívna učebnica. To čo ju odlišuje od ostatných učebníc, je použitie emulátora kódu, ktorý každému žiakovi umožní vyskúšať si akýkoľvek príkaz HTML, akýkoľvek atribút či vlastnosť CSS okamžite priamo v učebnici. Nemusí teda ukončiť prácu v učebnici a môže si hneď vyskúšať to, čo vo vyučovacej hodine práve študuje. Každá z kapitol obsahuje niekoľko štandardných častí. Kapitola je rozpracovaná takým spôsobom, aby žiak pochopil jednotlivé značky – tagy a hlavne syntax zápisu jednotlivých príkazov. Na vyskúšanie je použitý emulátor kódu, prípadne zápis jednotlivých príkazov. Na konci v tabuľkách je zhrnutá syntax, zápis jednotlivých tagov. V pravom menu stránky sa nachádzajú hypertextové odkazy ktoré členia jednotlivé kapitoly. Kapitoly sú zaradené za sebou z pohľadu náročnosti a zachovania kontinuity. Voľba kapitoly je možná i kliknutím na odkazy v rámci kapitoly „Predchádzajúca“ a „Ďalšie kapitola“. Na stránke kapitoly sa študujúci dozvie ciele kapitoly a pojmy (prípadne tagy), ktoré mu budú v priebehu kapitoly objasnené. Kliknutím na tlačidlo „Vyskúšaj si to“ sa otvorí interaktívna stránka – emulátor html prípadne css kódu, kde si žiak priamo môže vyskúšať napísaný kód html a následne ho môže sám editovať a sledovať zmeny, ktoré tým spôsobí.
Príklad
Vyskúšaj si to » |
Príklady jazyka, zápis html značiek, prípadne CSS vlastností sú vysvetlené v jednotlivých kapitolách v orámovaní, ktoré zvyšuje prehľadnosť zápisu značkovacieho jazyka - HTML kódu a vlastností CSS:
| <html> <body> <h1>Môj prvý nadpis.</h1> <p>Môj prvý odstavec.</p> </body> </html> |
Všetky príklady z emulátora kódu ktoré sú použité v rámci jednotlivých kapitol sú tiež zhrnuté v prehľadnom zozname na stránke "Príklady" na konci tematických celkov, kapitol.