 |
||
|---|---|---|
|
Cilji vaje:
Izdelava osnovne spletne strani z besedilomKo odpremo program Nvu, nam ta samodejno ustvari nov prazen dokument. Nov dokument lahko odpremo tudi z menijskim ukazom Datoteka>Nova, kjer v oknu Ustvari dokument ali predlogo označimo, kakšen dokument želimo.
Prav tako nov dokument kreiramo tudi s klikom na gumb Novo v orodni vrstici. S klikom na puščico ob gumbu Novo razpremo meni, v katerem določimo, kje naj se nov dokument odpre, z izbiro Več možnosti. pa se nam odpre okno Ustvari dokument ali predlogo v katerem nastavljamo dodatne nastavitve novega dokumenta.
Nov dokument je privzeto poimenovan (neimenovano) in ni shranjen. Če odpremo več novih dokumentov se ti vsi poimenujejo (neimenovano).
Dokument poimenujemo in shranimo v meniju Datoteka>Shrani. V oknu Naslov strani vnesemo naslov strani, s katerim se stran predstavlja v naslovu okna in med zaznamki. Vnesemo naslov Prva spletna stran.
V oknu Shrani stran kot moramo najprej izbrati mesto kamor želimo shraniti naš dokument. Mesto shranjevanja določimo v spustnem seznamu Shrani v:. V Ime datoteke vpišemo ime prva, v izbiri Vrsta datoteke: pa izberemo Datoteke HTML.
Da si povečamo delovni prostor zaprimo Upravitelja strani Nvu. Ko ga bomo potrebovali, pa ga bomo ponovno odprli. Vstavljanje besedilaPri vnašanju besedila v dokumentno okno nam prehodov v novo vrsto ni potrebno posebej vnašati. Če prehod v novo vrsto potrdimo s tipko Enter, s tem prelomimo besedilo. V kodi nam Nvu doda značko preloma <BR>, ki je samostojna in ne nastopa v paru. Značka za prelom v besedilo vstavi en prehod v novo vrstico. V dokument vstavimo besedilo tako, da se postavimo v dokumentno okno in natipkamo besedilo:
Dodajanje naslova in postavitev na sredinoPred besedilo bomo vrinili še naslov dokumenta. Z vrivnikom se postavimo pred prvi znak, v našem primeru pred besedo Učim., nato pa z Entrom vstavimo dva preloma besedil. Za naslov vpišemo: Moja prva stran
Naslov v dokumentu bomo postavili na sredino. Vrivnik postavimo v besedilo Moja prva stran in v vrstici za oblikovanje kliknemo na gumb Poravnaj na sredino.
Nastavitev barv besedilaPrivzeta barva besedila na strani je črna. V pogovornem oknu menija Oblika>Barva besedila. lahko spremenimo barvo besedila. Barvo besedila lahko spremenimo tudi s klikom na gumb Izberi barvo besedila v vrstici za oblikovanje.
Naš naslov v dokumentu bomo obarvali modro. Naslov označimo in v vrstici za oblikovanje kliknemo gumb Izberi barvo besedila. V oknu Barva besedila izberemo modro barvo. To lahko storimo na več načinov:
Če poznamo oznako ali ime barve lahko v polje za vnos barve vpišemo številko barve v šestnajstiški obliki, npr. za modro #0000FF ali pa kar njeno ime blue. Seznam imen barv si lahko ogledamo na spletni strani http://www.w3schools.com/html/html_colornames.asp . Shranjevanje dela in predogled v brskalnikuShranimo naš prvi dokument z ukazom Shrani v meniju Datoteka ali s tipkovno bližnjico Ctrl+S ali pa s klikom na gumb Shrani datoteko na lokalno mesto v orodni vrstici. Našo datoteko si sedaj oglejmo v brskalniku. To storimo tako, da v orodni vrstici kliknemo gumb Prebrskaj.
V oknu Zahteva zunanjega protokola potrdimo polje Mojo odločitev si zapomni za vse povezave tega tipa in zaženemo brskalnik z ukazom Poženi program.
V brskalniku so se nepravilno prikazali šumniki.
Zato si datoteko še enkrat shranimo z menijskim ukazom Datoteka>Shrani in spremeni kodiranje znakov. V oknu Shrani in spremeni nabor znakov izberemo Unicode(UTF-8) in potrdimo shranjevanje.
Ponovno si ogledamo dokument v brskalniku. Šumniki so se sedaj prikazali pravilno.
Zaprimo brskalnika in se vrnimo v program Nvu. Lepljenje besedila iz datotekeOdprimo si nov prazen dokument v programu Nvu. Shranimo ga z imenom cas.html v isto lokacijo na trdem disku, kamor smo shranili prvi dokument (prva.html).Dokument pa poimenujmo Čas in prostor. Pri poimenovanju dokumentov je priporočljiva previdnost. Izogibajmo se slovenskih krilatih črk, presledkov in ostalih dobrot v dolgih imenih datotek. Prej ali slej nam bodo v širnem internetu prinesle težave. V Nvu postavimo vrivnik tja, kamor želimo nalepiti besedilo. V meniju Urejanje izberemo ukaz za lepljenje Prilepi brez oblikovanja, ki nam v dokument vstavi samo besedilo, oblike pa ne. Ukaz v meniju Urejanje>Prilepi nam poleg besedila v dokument prilepi tudi oblikovanje besedila.
Oblikovanje besedilaBesedilo, ki smo ga prekopirali iz urejevalnika besedila bomo oblikovali, da bo dobilo lepšo in preglednejšo obliko. Uporaba oblikovanja besedilaZ menijem v vrstici za oblikovanje bomo uporabili standardno oblikovanje HTML za besedilo. Na voljo imamo štiri osnovne možnosti oblikovanja:
Izberimo besedilo ČAS IN PROSTOR in ga oblikujmo v slog Naslov 1.
Podobno preoblikujmo tudi besedo Čas v slog Naslov 3.
Označimo prvi odstavek in ga poravnajmo obojestransko. Obojestransko poravnajmo tudi preostale odstavke, ki vsebujejo več besedila.
SeznamiUporabljamo lahko označene sezname, ki jim v jeziku HTML pravimo neurejeni seznami, in oštevilčene sezname, ki jih v jeziku HTML imenujemo urejeni seznami. Označeno besedilo v seznam oblikujemo z gumboma v vrstici za oblikovanje.
Označimo besedilo drugega odstavka v našem dokumentu in ga spremenimo v urejen oziroma oštevilčen seznam.
Podobno bomo preoblikovali tudi odstavek, ki se začne z besedilom Enote časa: v neurejen oziroma označen seznam.
Spreminjanje velikosti besedilaPisavi lahko spreminjamo velikost. V jeziku HTML ne moremo prirediti točno določene velikosti v pikah. To lahko storimo z uporabo palete za urejanje slogov CSS (Cascading Style Sheets). Označimo odstavek besedila Natančneje določimo enoto časa. in mu določimo velikost besedila z menijskim ukazom Oblika>Velikost na vrednost majhno. Z gumboma v vrstici za oblikovanje zmanjšujemo ali večamo pisavo. Pri tem načinu velikost pisave ocenimo vizualno.
Umikanje besedilaOdstavek, ki smo mu spremenili velikost besedila, zamaknimo v levo z umikanjem besedila. To storimo tako, da kliknemo na gumb Zamakni v desno v vrstici za oblikovanje.
Izbira pisaveBesedilu lahko namesto privzete pisave, ki je običajno Times New Roman, dodelimo drugo pisavo. To storimo tako, da označimo besedilo, ki mu želimo spremeniti pisavo, nato pa izberemo nabor pisav ali pisavo v vrstici za oblikovanje. Če sami vidimo pisavo na svojem zaslonu, to še ne pomeni, da bodo pisavo enako videli tudi obiskovalci naše spletne strani. Če pisave nimajo nameščene v računalniku, bo brskalnik uporabil privzeto nadomestno pisavo. V našem primeru bomo naslovoma ČAS IN PROSTOR in Čas spremenili pisavo v Helvetica, Arial.
Dodajanje ločevalne črteVodoravna črta je grafični element, ki je v kodi HTML zapisan z značko <HR>. V isti ravnini ne more poleg ločevalne črte stati noben drug element. Vodoravno črto vstavimo tako, da v meniju Vstavi izberemo Vodoravna črta. Seveda se moramo pred tem z vrivnikom postaviti na mesto kamor želimo vstaviti vodoravno črto. Mi jo bomo v našem primeru vstavili v predzadnjo vrstico našega dokumenta.
Našemu dokumentu dodajmo še nekaj lastnosti oblik, da dobimo končno želeno obliko:
Nastavljanje lastnosti straniDokumentu lahko dodelimo še nekaj lastnosti in nastavitev. Ozadje našega dokumenta bomo obarvali v svetlo sivem tonu #EFEFEF. To storimo s klikom na gumb Izberi barvo ozadja v vrstici za oblikovanje.
Dokument še shranimo z menijskim ukazom Datoteka>Shrani in spremeni kodiranje znakov. Nastavimo kodiranje znakov na Unicode (UTF-8). Da dokument ni shranjen nam označuje sličica diskete v zavihku z imenom dokumenta. Dokument si oglejmo v brskalniku.
Navodila
|
||
| na vrh | ||
