- vysvetlite pojem hypertext
- popíšte základné pravidla tvorby hypertextu
- charakterizujte programy na tvorbu www stránok
- popíšte základné štruktúru html kódu
- charakterizujte základné objekty www stránky
- vytvorte jednoduchú www stránku na ktorej umiestnite hypertext, obrázok a hypertextový odkaz na webovú stránku našej školy
Hypertext - Hyper Text Markup Language
HTML – Hypertext => je súbor inštrukcií, ktoré sa pridávajú k textovým dokumentom a premenia sa na web stránky. Inštrukcie HTML povedia prehliadaču, že dokument je web stránka a ako majú byť informácie v ňom zobrazené na obrazovke. HTML je univerzálny kód ktorému rozumie počítač akéhokoľvek typu. V zdrojovom kóde web stránky nie sú obrázky, ale sú uložené samostatne v externých súboroch, na ktoré sa zo zdrojového textu odkazujeme.
Základné pravidlá tvorby hypertextu
- musí mať jasné pravidlá
- cieľom nesmie byť len elektronická podoba klasickej učebnice
- je nutné dávať dôraz na možnosti simulácie, animácie, videosekvencie
WWW
Služba WWW
Je jedna zo služieb internetu. WWW je prezentovaná tisíckami WWW serverov na ktorých sú dáta uložené na HDD www servera alebo dáta ktoré sú programom bežiacim na serveri vytvorené a odoslané užívateľovi, na základe jeho požiadavky. Web stránka je na www serveri reprezentovaná skupinou textových súborov typu HTML a binárnymi súbormi - napr. binárne súbory typu .zip, .exe či grafické formáty .jpg, .gif alebo .png.
Tvorba WWW
- ručne (kód/syntax)
- pomocou html editorov
- pomocou CMS systémov
HTML editor - v prostredí Windows sa používa pre tvorbu www stránok, údržbu a beh webu
WYSIWYG editory - väčšina dnešných editorov sú vizuálne WYSIWIG editory, editor pri vytváraní webu či stránky automaticky vytvára html kód, výsledok vidíme priamo. Medzi charakteristické vlastnosti súčasných editorov patria:
- jednoduchosť generovania stránky
- nie je nutnosť poznania html kódu a syntaxe - prehľad o web stránke `
- podpora databázy
- podpora a importácia rôznych druhov súborových formátov - programový balík ako server
- optimalizácia pre rôzne druhy browserov
Najznámejšie HTML editory:
- Microsoft Frontpage
- Macromedia Dreamweaver
- NetObjects Fusion
- HotDog Pro
- Adobe GoLive
Najznámejšie CMS systémy (potrebná inštalácia)
Drupal
Joomla
Worldpress
CMS systémy predinštalované - Napr. webnode.sk , jasomweb.sk, blogger.com, endora.cz
V súčasnosti sa do popredia dostávajú web stránky s multimediálnou podporou.
- Multimédiá - streaming audia a video
- JavaApplety - napr Web Cam, security aplikácie, obchodné aplikácie
- Shockwave Flash - interaktívny animovaný web - ASP - aktívna komunikácia s užívateľom cez databázu
Prvky web stránky
- Texty - Každý dokument aj web stránka sa skladá prevažne z textu. Každá web stránka môže tak ako dokument vo Worde obsahovať: rôzne veľkosti, typy, farby písma, odstavce a zarovnania.
- Obrázky - Nedoplňujú len texty na stránke, ale slúžia pre vylepšenie celkového dojmu, pre zvýšenie prehľadu a ľahšiu orientáciu.
- Odkazy - Web je previazaný odkazmi. Web stránky môžeme podobne ako knihu rozdeliť na časti a kapitoly tak že vytvoríme viac nezávislých dokumentov ktoré medzi sebou prepojíme. K tomuto slúžia odkazy. Odkaz môžeme vytvoriť na akúkoľvek stránku na Internete.
- Tabuľky - Môžu byť napr. tabuľky z programu MICROSOFT EXCEL- prehľadné formátovanie údajov v bunkách.
- Rámy (orámovania) - Slúžia na rozdelenie jednej Web stránky na viac samostatných častí. Každý rám hlavnej stránky je tvorený jednou samostatnou stránkou vo vnútri jednej veľkej. Môžeme s nimi rolovať, tlačiť ich, pracovať so samostatnou stránkou.
Základná štruktúra html kódu
- Značky - TAGS - Inštrukcie HTML nazývame značky. Väčšinou sa značky používajú v dvojiciach. Otváracia časť < B > Ján < /B > ukončovacia časť. Značky sú uzavreté v <>, všetko čo je mimo značky je text, ktorý zobrazí prehliadač. Celý zdrojový text HTML sa skladá z párových a nepárových značiek a z textu, ktorý je mimo značiek
- Párová značka - Má vplyv len na časť Web stránky: text (typ, veľkosť písma, zarovnanie).
- Nepárová značka - Má vplyv len sama na seba, definuje v stránke určitý prvok (obrázok)
Príklad zdrojového dokumentu Web stránky
< HTML >
< HEAD >
< TITLE >
< / TITLE >
< / HEAD >
< BODY >
< / BODY >
< / HTML >
Každá Web stránka – jej zdrojový text, začína párovou značkou HTML a ňou tiež končí. Web stránka je teda všetko čo je napísané medzi týmito značkami. Zdrojový text je ďalej rozdelený na hlavičku a vlastné telo.
< HEAD > < BODY >.
Hlavička definuje základne parametre: meno stránky, východiskový adresár v ktorom sú umiestnené externé súbory (napr. obrázky). Vlastné zobrazované údaje sú umiestnené až v tele dokumentu a je určený párovou značkou < BODY >
Značky pre efekty a zvýrazňovanie písma (sú párové):
< B > Tučné písmo (BOLD)
< I > Kurzíva šikmé (ITALIC)
< U > Podčiarknuté (UNDERLINE)
< STRIKE > Preškrtnutie písma
< BIG > Ohraničuje písmo, ktoré bude o jeden bod väčšie ako štandardné
< SMALL > Ohraničuje písmo, ktoré bude o jeden bod menšie ako štandardné
Značky pre zmenu písma v texte
FONT = Typ písma. Definuje sa značkou FONT, ktorá môže mať tieto parametre:
SIZE = “Veľkosť“
FACE = “Písmo“
COLOR = “Farba“
Príklad zápisov značiek
< FONT SIZE = “2“ FACE = “Arial“ COLOR = “Red“ >
Táto značka nastaví červené písmo, typ Arial s veľkosťou 2
< FONT SIZE = “3“ FACE = “TIMES NEW ROMAN“ COLOR = “Black“ >
Značka FONT môže zmeniť len jeden parameter:
< FONT SIZE = “4“ >
Zmení len veľkosť
< FONT FACE = “Arial“ >
Zmení len typ ( FONT ) písma
< FONT COLOR = “Red“ >
Zmení farbu
Všetky zmeny dané značkou FONT sú platné len do príslušného ukončenia (zmeny).
Ukončovacia značka
< / FONT SIZE >
Značka pre nadpis
Pre nadpisy je k dispozícii 6. veľkostí. Úroveň 1 – je najväčšia a úroveň 6 – je najmenšia. Na to, aby sa časť textu stala nadpisom úrovne 1 je potrebné napísať < H1 > pred a < /H > za text.
Vkladanie obrázkov na Web stránku
Značka IMG – pre umiestnenie obrázkov na Web stránky je nepárovou značkou < IMG SRC = “obrázok“ > alebo < IMG SRC = “martin. jpg“ >. Ak nie je pri mene súboru uvedená cesta, prehliadač hľadá obrázok v aktuálnom adresári.
Vkladanie odkazov (hypertext)
Značka <A HREF = “html://www.google.com”>GOOGLE</a>
Žiadne komentáre:
Zverejnenie komentára