NVU TVORBA WEBU
1. Vytvorte si úvodnú stránku
obsahujúcu nadpis (pozdrav) a text, v
ktorom sa predstavíte.
o
o
o
Nastavte si vlastnosti pozadia,
textu, kódovanie. Na nadpis
použite štýl.
Stránku uložte ako
súbor index.html (vo vašom
priečinku )
Pri ukladaní nastavte stránke
titulok.
Nápoveď



Napíšte nejaké informácie o sebe.
Označte text, ktorý má byť nadpisom.
Samotný štýl pre nadpis nájdete na
paneli nástrojov (obrázok vpravo).
Vlastnosti pozadia nastavíte pomocou
príkazu Formát/Farby stránky a
pozadia...


Titulok nastavte pomocou
príkazu Formát/Titulok a vlastnosti
stránky.... Do políčka Titulok zadajte
titulok stránky. Na zadanie titulku vás
NVU editor vyzve aj pri ukladaní stránky.
Teraz treba nastaviť kódovanie tak, aby
sa slovenská diakritika zobrazovala na
stránke vždy správne. Použite znovu
príkaz Formát/Titulok a vlastnosti
stránky.... Kliknite na tlačidlo Vybrať
kódovanie.
Zvoľte Stredoeurópska(Windows-1250).
2. Vložte na svoju stránku ľubovoľný obrázok (neskôr vašu
fotografiu), nastavte obrázku vhodný alternatívny text a pohrajte
sa s umiestnením obrázka na stránke.
Nápoveď


Kliknite na ikonku
na paneli nástrojov alebo použite
príkaz Vložiť/Obrázok. Vyskúšajte nastavenia, ktoré ponúka dialógové
okno.
Nezabudnite na nastavenie alternatívneho textu pre každý obrázok,
ktorý obsahuje nejakú dôležitú informáciu. Uľahčíte prístup k
obrázkom používateľom so zrakovým postihnutím, či s pomalším
pripojením k internetu.
3. Vložte na svoju stránku pätičku, ktorá bude
obsahovať vaše meno a dátum poslednej
aktualizácie.
o
o
Text v pätičke zarovnajte na stred a
nastavte mu menší font, ako má zvyšný
text.
Pätičku oddeľte od ostatného textu
vodorovnou oddeľovacou čiarou.
Nápoveď


Vodorovnú oddeľovaciu čiaru vložíte pomocou
príkazu Vložiť/Horizontálna čiara alebo
pomocou tagu <hr>
Centrovanie a menší font dosiahnete pomocou
tlačidiel na paneli nástrojov.
5. Vytvorte si novú stránku odkazy.html. Stránke
nastavte farby, kódovanie a titulok a uložte ju do
vášho priečinku ako odkazy.html.
o Na stránke vytvorte dve skupiny
odkazov: Vyhľadávače (textové odkazy v
odrážkach) a Noviny (obrázkové odkazy
- stiahnite si logá nejakých novín).
o Do oboch skupín vložte aspoň dva
odkazy.
Nápoveď


Použite príkaz Súbor/Nový/Prázdny súbor a
označte políčko vytvoriť XHTML dokument na
vytvorenie novej stránky.
Zoznam nájdete na paneli nástrojov. Zvoľte
nečíslovaný zoznam a zadajte mená
jednotlivých
vyhľadávačov.




Text, ktorý má byť odkazom, označte. Odkaz
vložíte pomocou ikonky
alebo
príkazom Vložiť/Odkaz....
Adresu stránky skopírujte z webového
prehliadača do políčka Umiestnenie odkazu.
Do časti Noviny vložte obrázok - logo nejakých
novín.
Označte obrázok kliknutím a zvoľte
Zadajte adresu webstránky novín.
.
6. Znovu si otvorte hlavnú stránku index.html. Na
hlavnej stránke v pätičke urobte z mena autora
odkaz na jeho e-mail. Takúto pätu skopírujte aj
na stránku Odkazy.
Nápoveď

E-mail vložíte rovnako ako obyčajný odkaz. Ako
adresu odkazu zadajte vašu e-mailovú adresu. V
dialógovom okne ešte označte políčko Jedná se
o e-mailovú adresu.
7. Navzájom prepojte stránky index.html a odkazy.html. Na
stránku index.html pridajte odkaz na stránku odkazy.html a naopak.
8. Vytvorte
súbor skola.html ako
kópiu
súboru odkazy.html.
o Zmeňte jej
titulok na "Moje
štúdium".
o Vložte na
stránku tabuľku
a vpíšte do nej
svoj rozvrh
hodín.
o Vyskúšajte
nastaviť rôzne
pozadia pre
o
riadky (napríklad
pre hlavičku
tabuľky), resp.
pre jednotlivé
bunky (napríklad
pre predmet
IKT).
Zistite, ako sa
menia ďalšie
nastavenia
tabuľky a
buniek.
Nápoveď


Použite
príkaz Súbor/Uložiť
ako... na uloženie
súboru pod iným
menom.
Tabuľku vložíte
pomocou
ikonky
alebo
príkazom Vložiť/Tabuľ
ka.... V dialógovom
okne označte počet
riadkov a stĺpcov
tabuľky.
9. Navzájom prepojte stránky index.html a skola.html .
10. Na úvod stránky Odkazy dajte
obsah, t.j. zoznam odkazov na
kategórie Vyhľadávače a Noviny
(odkazy v rámci stránky, tzv.
záložky). Obsah vytvorte ako
nečíslovaný zoznam.
Nápoveď

Kliknite pred nadpis Vyhľadávače.
Záložky vložíte
pomocou Vložiť/Pomenovaná
kotva)

alebo kliknutím na
.
Na prepojenie textu so záložkou
použite znovu
. Namiesto
písania adresy kliknite na výber
možností a zvoľte príslušnú
záložku.
Prémiová úloha


Zistite, na čo sa na stránkach používa JavaScript. Nájdite stránku
používajúcu JavaScript. Svoju odpoveď aj s adresou stránky pošlite
vyučujúcej e-mailom. Prví traja študenti, ktorí tak urobia, môžu získať.
Stiahnite si nejaký JavaScriptový kód a vložte ho do svojej webovej
stránky. Môžete za to získať o jeden bod viac pri hodnotení stránky.
Download

NVU TVORBA WEBU