swp sola oblikovanje www strani del zdaj ko po internetu surfajo ze otroci ki se hodijo v vrtce upokojenci v domovih za ostarele ter seveda vsi ki spadajo nekam vmes in ko vec ni dalec cas ko nas bodo policaji na cesti prosili za www in elektronski podpis je ze zadnji cas da se se mi skupaj naucimo izdelovati www strani sicer po tem ne mislimo postati profesionalni oblikovalci za kar se nekateri ko se naucijo uporabljati html urejevalnik imajo www stran popularno imenovano »homepage« »hp« ali »domaca stran« za sebe ljubico in psa pa se hocemo nauciti narediti dobro in zanimivo cilji za oblikovanje in vzdrzevanje www dokumentov obstaja kup profesionalnih orodij ki nekatere stvari obvladajo bolj druge manj ker se nocemo vezati na profesionalno orodje nekaj sto dolarjev in vec je namrec precej denarja za zakolicenje nasega cyber dvorisca si bomo pomagali z najrazlicnejsimi programi ki so prosto dotopni in se le izjemoma zatekli k uporabi kakega preizkusnega programa tu je se druga resnica ki pravi da lahko vsako zadevo najbolje oblikujemo kar »rocno« torej z pisanjem html kode kar v navadnem notepadu ali podobnem zal je za to potrebno poznati jezik html ki se uporablja za opis www strani v nasi soli bomo poskusali htmlu izogniti kolikor je to mogoce vendar nic bolj kjer bomo za dosego zastavljenih ciljev potrebovali html bomo ugriznili tudi vanj kaj potrebujemo programska oprema bistvena orodja ki jih bomo potrebovali za stvari ki se jih bomo lotevali v posameznih poglavjih web sole boste nasli na prilozenem cdju tokrat nas bosta zanimala netscape communicator na cdju najdete razlicico ter arachnophilia na cdju je verzija prvi je vsem dobro znani www brkljalnik ki ga bomo namestili zaradi vgrajenega vizualnega urejevalnika www strani in ne zaradi kakega prirojenega sovrastva do vseg kar prihaja iz microsofta drugi je html urejevalnik ki nam pomaga pri urejanju html dokumentov uporabljali ga bomo kadar se bomo hoteli pes lotiti htmlja poleg netscapea priporocamo oblikovalcem www strani da namestijo vsaj se internet explorer s katerim si bodo lahko ogledali kako bodo izdelano stran videli uporabniki ie www strani namrec ne izgledajo v vseh brkljalnikih enako zaradi kake drobne napake lahko stran v enih izgleda kot smo hoteli v drugih pa je povsem popacena od programske opreme bomo potrebovali se ftp odjemalca lahko uporabljate vasega standardnega jaz bom v zgledih uporabljala ws ftp le ki je vecini na voljo brezplacno svojemu namenu pa prav dobro sluzi najdete ga denimo na www ipswitch com streznik poleg programske opreme bomo potrebovali tudi dostop do interneta strani sicer lahko oblikujemo tudi brez tega a sami jih najbrz potem ne bomo gledali no sam dostop do interneta pa ni dovolj ce nam nas ponudnik storitev v zameno za nase denarce ne da tudi prostora na strezniku ce ste dostop dobili ste morali dobiti tudi uporabnisko ime in geslo za dostop do streznika ce ne veste se pozanimajte pri vasem ponudniku v primeru da v svojem paketu prostora na strezniku niste dobili lahko svojo domaco stran postavite na kakem brezplacnem www servisu med bolj znanimi so denimo geocities angelfire in xoom ali pa si seveda omislite bolj razumnega ponudnika interneta ce ste eden izmed srecnezev s stalnim dostopom kabel najeta linija in ste pripravljeni imeti nenehno prizgan racunalnik si seveda lahko postavite kar lasten www streznik na voljo jih je cel kup nekaj dobrih tudi brezplacno prvi korak zdaj se lahko lotimo sestavljanja kar najbolj preproste domace strani obliko bomo zanemarili saj se hocemo najprej seznaniti s celotnim postopkom izdelave in prenosa na streznik najprej prepricajmo obe orodji netscape in arahnofilio v sodelovanje to storimo tako da v netscapeu v meniju »edit« »preferences« izberemo arachnofilio »choose« potem pa poiscemo arach exe kjer smo ga pac namestili kot zunanji html urejevalnik »external editors« »html source« slika tako pripravimo netscape in arachnophilio k sodelovanju lotimo se zdaj dela pozenemo netscape ter v meniju »file« izberemo »new« »blank page« odpre se urejevalnik v njem pisemo podobno kot v »obicajnih« urejevalnikih besedil oblikujemo lako tako da izberemo stil ali obliko barvo ipd in napisemo kar hocemo ali pa tako da najprej vse napisemo potem z misko oznacimo del ki ga zelimo oblikovati potem pa izberemo zeljeno obliko iz menijev za oblikovanje je pomembna spodnja orodna vrstica v kateri najdemo po vrsti stil vrsto velikost in barvo pisave povdarjene posevne ali podcrtane znake privzeti neoblikovani izpis sezname in zamik ter poravnavo ostale moznosti oblikovanja pisave in stile najdemo v meniju »format« del besedila lahko oznacimo ter izberemo »format« »character properties« ter kar iz tega dialoga dolocimo vecino oblikovnih lastnosti zanimiv je tudi dialog »format« »page colors and properties« kjer dolocimo lastnosti www strani naslov strani pomemben prikaze se na vrhu brkljalnikovega okna barve ime in priimek avtorja strani za ozadje strani lahko izberemo kako sliko o tem vec pozneje v prvem zgledu bomo uporabili nekaj osnovnih nacinov oblikovanja znakov da ne bi v besedilo pomotoma postavljali znakov za nov odstavek ki jih morda ne bi opazili je smiselno da si v urejevalniku vkljucimo prikaz oznak za nova poglavja to storimo tako da obkljukamo »view« »show« »paragraph marks« ker bomo pisali stran v slovenscini moramo najprej izbrati ustrezni kodni razpored tega ne moremo storiti s preprosto izbiro kakega »ce« nabora znakov saj mora biti informacija o uporabljenem naboru na prenosljiv nacin zapisana v sami strani slovenski razpored znakov izberemo v meniju z »view« »character set« »central european« za »centralnoevropsko« razporeditev imamo na izbiro standard iso ki vam ga priporocam unicode utf lahko pa se odlocite tudi za windows razporeditev s katero pa bodo morda imeli tezave uporabniki bolj eksoticnih sistemov pozor kodno stran moramo izbrati v composerju in ne v navigatorju slika izbira pisave v composerju oglejmo si sedaj nas zgled slika zgled v netscape composerju v njem smo za oblikovanje znakov uporabili funkcije iz menija format »format« oziroma njegovih podmenijev »style« »size« in »color« ter funkcijo za oblikovanje odstavkov ki smo jo izvedli nad celotnim besedilom »format« »align« »center« tipke enter ne pritiskamo po nepotrebnem oblikovnje odstavkov prepustimo brkljalniku izberemo le poravnavo z enter vnesemo prelom vrstice oziroma pricnemo novo poglavje kar naredimo le kjer se konca pomenska celota z njim ne oblikujemo strani prav tako besedila ne zamikamo s presledki oziroma ce ze potem vsaj z posebnim presledkom ki se imenuje nbsp in ga dobimo ce pritisnemo shift preslednico izgled strani je odvisen od velikosti brkljalnikovega okna slika zgled v sirokem netscapeovem oknu slika zgled v vitkejsih oknih netscapea in ie nazadnje vrzimo oci zaenkrat zgolj iz radovednosti se na to kaj je netscape ustvaril oglejmo si neposredno nastali html dokument kliknemo »edit« »html source« in pozene se arachnophilia ce smo vse ustrezno nastavili kot je bilo opisano ki prikaze html dokument med nekaksnimi kodami vidimo svoje besedilo zaenkrat omenimo le da so kontrolne kode v html jeziku zapisane v taksnih oklepajih i nagnemo i denimo vkljuci posevno pisavo izpisi »nagnjeno« in izkljuci posevno pisavo font color » ff« pa denimo izbere rdeco barvo izpisa zaenkrat se v to ne bomo poglabljali povejmo le da vse www strani izgledajo v osnovi priblizno tako slike glasba in datoteke so shranjene posebej www stran lahko torej brez tezav oblikujemo kar v navadnem editorju le jezika se moramo nauciti ce koga matra firbec in bi se rad poglobil v html in ostale www standarde najde vso potrebno dokumentacijo na naslovu http www w c org slika rentgenski posnetek nasega zgleda se nekaj pripomb glede nasega prvega zgleda ce zelimo prenosljivost je bolje uporabljati standardne v html relativne velikosti znakov to moznost moramo najprej vkljuciti z »show relative html font scale« v nastavitvah glej sliko composer omogoca spreminjanje nabora znakov tega ne pocnite ce to ni nujno potrebno kdo vam jamci da bo obiskovalec vase strani imel na racunalniku ki je lahko cisto drugacne vrste namescen vas nabor vsi ki ga nimajo bodo namesto uporabljene pisave videli privzeto pri pisavah sta uspesno standardizirana le »variable width« in »fixed width« prvi pomeni obicajen izpis drugi pa pisavo kjer so vse crke enako siroke skok zdaj ko smo stran oblikovali se bomo naucili kako jo prenesemo na streznik netscape ima to moznost sicer vgrajeno imenuje se »publish« tak nacin prenosa ponuja premalo nadzora nad tem kaj se dogaja zato priporocam uporabo obicajnega ftp klienta kot sem ze povedala jaz uporabljam ws ftp le vi pa kar pac gre takole celotno strukturo www mesta ce je to le en dokument pac le njega moramo prenesti na www streznik tja se prijavimo preko ftp klienta uporabnisko ime in geslo smo morali dobiti od svojega ponudnika internetnih storitev datoteke ki sestavljajo domaco stran je potrebno obicajno prenesti v poseben folder ki je dostopen www strezniku obicajno je to folder html vcasih tudi www ali kaj podobnega tudi to informacijo morate dobiti od svojega ponudnika lahko pa poskusite z obicajnim html ce tak imenik se ne obstaja ga ustvarimo s ftpjem potem datoteke prenesemo z diska v ta imenik na strezniku slika prenos sestavnih delov domace strani na streznik ws ftp le poskrbeti moramo da lahko streznik bere vse imenike in datoteke nase domace strani v nasem primeru moramo denimo omogociti skupini uporabnikov »other« bralni dostop do imenikov html in ws ter do obeh zgledov to v ws ftp nastavljate s chmod v kontekstnem meniju ob kliku pogosto spreminjanje atributov datotek sploh ni potrebno ker je streznik ustrezno nastavljen slika poskrbimo da bo streznik lahko dostopal do nase domace strani ws ftp le ce imate s tem postopkom tezave se pozanimajte kako se tocno uporablja ftp tu imamo premalo prostora ce se vedno ne bo slo vam lahko najbolje pomaga vas ponudnik ce je vse teklo v redu lahko zdaj do svoje strani dostopamo preko interneta naslov je obicajno oblike http www nasstreznik sth ~uporabniskoime imedokumenta html drugi korak oglejmo si sedaj se nekaj moznosti oblikovanja www strani za nastevanje pogosto uporabljamo sezname ti so lahko ostevilceni ali ne zacnemo jih najpreprosteje tako da kliknemo na ikoni »bullet list« ali »numbered list« v orodni vrstici koncamo jih na enak nacin prvi seznam kaj najraje jem je navaden drugi pa je ostevilcen v urejevalniku namesto stevilk vidite znake naslovi v drugem zgledu niso preprosto napisani vecje ampak so narejeni z slogom za naslov prvega in drugega nivoja to naredimo tako da v orodni vrstici kot »paragraph style« namesto »normal« izberemo »heading « ali »heading « to je boljse ker bo na ta nacin v dokumentu zapisano da je to naslov preprosti brkljalnik za tekstovne terminale »lynx« denimo ne pozna razlicnih velikosti znakov zato naslov poudari drugace ce bi namesto tega oznacili velikost znakov bi prikazal vse enako besedilo pod naslovom »moja najljubsa pesem« je oblikovano z »format« »paragraph« »block quote« ki je namenjen prev citatom citate vecina brkljalnikov zamakne v desno ter ne spreminja njihove oblike zamik smo tokrat izjemoma dosegli s presledki slika zgled v composerju ko si boste stran ogledali v navigatorju ali explorerju ali boste namesto znakov videli stevilke urejevalnik namrec strani ne prikaze enako kot brkljalniki shranite stran ne pozabite tega redno poceti posebej zato ker se netscape kar rad sesuva imenujete jo lahko denimo zgled html pomembna je koncnica html ki je standardna za html dokumente potem stran nalozite v navigator s klikom na navigatorjevo krmilo v orodni vrstici composerja o prenosljivosti dokumentov ze nekajkrat smo omenili da www strani ne izgledajo v vseh brkljalnikih enako html je namrec jezik za opis vsebine in ne oblike tako denimo citat html preprosto oznaci kot citat kako bo citat videl bralec je odvisno od njegovega brkljalnika zaradi tega se moramo ze v zacetku oblikovanja strani odlociti ali hocemo oblikovati stran ki bo dostopna berljiva kar najvec obiskovalcem ali pa za kar najlepso obliko obicajno poskusamo strani pri katerih je bistvena vsebina besedilo oblikovati tako da jih bodo lahko brali vsi tisti ki se odlocajo za obliko kar je se kako pomembno za interaktivne strani razlicnih mreznih firm morajo pogosto oblikovati kar dve razlicni strani eno za netscape drugo za ie vcasih se vec ker tudi razlicne verzije teh brkljalnikov ne poznajo istih elementov o tem kaj bodo videli uporabniki drugih brkljalnikov obicajno niti nimajo casa razmisljati ne pozabite niti tega da ne uporabljajo vsi windowsov v drugih okoljih so standardni drugi nabori znakov dugacna velikos ekrana locjivost barve morda celo grafike sploh ni hiper povezave bistvena lastnost hiper besedila je navezovanje to pomeni da se lahko kjerkoli sklicujemo na nek drug del dokumenta na drug dokument kjerkoli na internetu ali na datoteko kaj to pomeni vemo vsi kliknemo na povezavo v dokumentu ki je doma v sloveniji pa ze prenasamo datoteko z japonske zgledoma ki smo ju oblikovali do zdaj je manjkala ravno ta bistvena lastnost www strani dopolnimo nas drugi zgled s hiper povezavami najprej bomo stran povezali tako da bomo imeli na zacetku »kazalo« s katerim bomo lahko skocili na posamezna poglavja znotraj strani nekaj postavk iz seznamov bomo povezali z www stranmi ki se ukvarjajo s to temo dodali bomo tudi povezavo na svoj in zerkov e mail naslov zerku nikar ne pisite saj sem si ga izmislila za potrebe tega zgleda za konec pa se povezavo na prvi zgled in datoteko malce se bomo poigrali se z barvami tudi z barvo ozadja ki jo spremenite v »page colors and properties« da bi lahko naredili povezave ki nas pripeljejo na druge dele nase strani moramo najprej dolociti cilje kamor bojo te povezave vodile to naredimo z »insert« »target« vpisemo poljubno simbolicno ime na katerega se bomo kasneje sklicevali v urejevalniku se pojavi posebna oznaka slika vstavimo cilj povezave potem ustvarimo opis ki bo vodil do tega cilja preprosto napisemo neko besedilo nakar ga oznacimo in izberemo insert link zdaj za povezavo iz seznama izberemo prej vpisani cilj takih povezav v daljsih dokumentih naredimo cim vec saj omogocajo lazje branje slika povezava znotraj dokumenta povezave ki vodijo drugam naredimo tako da v polje link to a page location or local file vpisemo ustrezen url naslov za www strani drugod na internetu vpisemo naslov ki ga vidimo na vrhu nasega brkljalnika ne pozabimo na ime protokola povezava http www yahoo com nas denimo ob kliku nanjo pripelje na vsem dobro znani portal ce mislimo narediti povezavo do kakega drugega dukumenta vpisemo relativno pot do njega povezavo na netscape ki se pri nas nahaja v visjem imeniku naredimo kot cc e exe brez narekovajev pozor za locevanje folderjev uporabljamo obicajno posevnico ne tako kot v dosu in oknih s tem ko uporabljamo relativne povezave dosezemo da lahko celoten sklop www dokumentov in pripadajoce krame postavimo kamorkoli ce bi namesto relativnih povezav uporabljali absolutne se bi v primeru »selitve« znasli pred kupom neprijetnega dela povezavo ki vodi na e mail naslov in ob kliku odpre program za posiljanje poste naredimo tako da pred e mail naslov vpisemo mailto povezava vnesemo jo na enak nacin kot druge mailto mamaplata matetopis si denimo vodi na moj elektronski naslov podobno povezava pred katero zapisemo news vodi do novicarskih skupin na usenetu itd slika relativna povezava na datoteko slika s hiperpovezavami opremljen drugi zgled v navigatorju do naslednjic za to stevilko naj bo tole dovolj naslednjic se bomo ukvarjali s slikami in tabelami do takrat si lahko ogledate in preurejate te zglede in se kako malenkost na naslovu http swpsola matetopis si ne pozabite da lahko katerokoli stran z interneta nalozite v composer in si proucujete kako je narejena tako da v navigatorju izberete file edit page ce boste imeli kake neresljive tezave mi lahko tudi pisete mamaplata