Innledning

Det fins flere forskjellige måter å lage hjemmesider på. I første omgang skal vi imidlertid gå rett på sak og prøve en metode uten å se noe på teorien bak.

Åpne Netscape. Istedet for nettleseren som vi bruker til å lese ferdiglagde sider på Internett, går vi på hovedmenyen og velger den delen av Netscape som vi kan bruke til selv å lage hjemmesider. Den heter Composer:

Når vi klikker på Composer, åpnes en blank side. Denne kan vi lage en hjemmeside på etter omtrent samme prinsipper som i et tekstbehandlingsprogram (vel, faktisk kunne vi brukt et tekstbehandlingsprogram som Word 97 istedet for Netscape Composer, men mer om det senere ...).

Index-fil og lagring

Dette er hovedmenyen vi får opp:

Den har altså stort sett de samme funksjonene som et tekstbehandlingsprogram. Det vi kan gjøre med en gang, er å lagre siden. Gå File--->Save As. Lag gjerne en ny mappe som du kan lagre hjemmesiden i. Den siden som det er naturlig å begynne med, er jo den som skal være inngangssiden eller førstesiden på ditt sikkert etterhvert omfangsrike nettsted. Denne førstesiden må hete index. Du skriver altså index som filnavn. Composer vil automatisk lagre den som riktig filtype, nemlig .html .
 

Farger på bakgrunn, linker og tekst

En funksjon som er litt spesiell i forhold til tekstbehandling for papirformat, er Format ---> Page Colors and Properties.
 

Vi får opp en dialogboks som den til høyre (Fig 3). Her kan vi bestemme hvilken farge bakgrunnen på siden skal ha. Ved å klikke på det hvite rektangelet merket "Background", får vi opp en palett hvor vi kan klikke på plass den fargen vi ønsker. Her kan vi også velge å bruke et bilde som bakgrunn, men det kan vi vente litt med. Standardfargen, den vi får uten å forandre noe på innstillingene, er hvit, dvs med et lite forbehold: eldre nettlesere, f.eks.skolens gamle Netscape 3.0 versjon, hadde grå bakgrunn som standard. Hvis en ikke aktivt har valgt en annen farge, vil siden komme opp med grå bakgrunn i en slik nettleser, selv om den når vi jobber med den i Composer ser ut til å være hvit. Det er det første lille hintet jeg vil gi om et generelt problem med å lage hjemmesider: forskjellige nettlesere og forskjellige maskininnstillinger (f.eks. skjermoppløsning) og forskjellige maskiner (f.eks. Mac eller PC) viser alle samme side litt forskjellig. Dette er noe vi må ta hensyn til, men som vi har liten mulighet til å kontrollere.  I samme dialogboksen kan vi bestemme fargene på den teksten som skal være klikkbare linker. Hvis vi lar innstillingene være slik de er i dette tilfellet, blir altså tekst som er linker ("Link text") blå. "Active link" betyr linken etter at en er blitt klikket på, men før nettleseren har lastet ned den siden det er linket til. "Followed link text" angir fargen på linktekst som tidligere er blitt klikket på. Vi kan her også stille inn fargen på den øvrige teksten, altså den som ikke er linker ("Normal text"). Dette kan imidlertid like godt gjøres underveis ved at vi merker den teksten det gjelder og trykker på den A'en på hovedmenyen som har en fargestift (ved siden av A'en som brukes til å lage understrekning). Standardfargen, den vi får uten å velge spesielle innstillinger, er selvfølgelig svart.

Fig. 3: Å bestemme farger på siden

Tekst som linker - bilder som linker

Det som gjør Internett til et spesielt medium, er i første rekke hyperlinkene, eller hotlinks eller linkene, eller lenkene - kjært barn ... Å lage en link er en smal sak i Composer. La oss si at vi på vår hjemmeside vil ha en link til Ullern videregående skole og en til nettbokhandelen amazon.com. For den første skal vi gjøre tekst til link, for bokhandelen skal vi hente ned et bilde, en logo for amazon.com, som vi skal gjøre til link.
 
 

Da begynner vi med å skrive teksten som skal bli til link: Ullern videregående skole Så merker vi teksten og gjør en av tre - nei, vi kan nøye oss med en av to - ting: enten klikker vi på link-ikonet på hovedmenyen, det som ser ut som ledd i en kjede:  - eller vi setter markøren på den merkede teksten og høyreklikker. I begge tilfelle får vi opp en kort meny som ser ut som den til høyre (Fig 4):

Fig 4.  Å lage linker - meny 1

 

Her velger vi "Create Link Using Selected", dvs. lag en link ut av den merkede teksten. Da får vi opp en dialogboks som den til høyre: Her skal adressen til det nettstedet vi lager link til inn i linjen "Link to a page location or file". Igjen har vi flere måter å gjøre neste steg på. Vi kan rett og slett skrive inn med tastaturet adressen til det nettstedet eller den fila vi skal linke til.  Siden feil ikke tolereres i adressene, og siden det er lett å gjøre skrivefeil, vil jeg imidlertid anbefale å gjøre følgende: gå til nettleseren, Navigator, altså den delen av Netscape som du bruker til å "surfe" på nettet med; finn nettstedet du vil linke til. Klikk i adresselinjen slik at url'en (http://www ...osv) blir merket. Sett markøren på det merkede området og høyreklikk. Da får du opp menyen nedenfor (Fig 6):   Fig 6. Å lage linker - meny 3

Figur 5. Å lage linker - meny 2 Nå klikker du "Kopier", går tilbake til Composer, der dialogboksen ovenfor  (Fig. 5) fremdeles står og venter på deg, setter markøren i den hvite linjen under "Link to a page ...", høyreklikker igjen slik at du får opp samme meny som den til venstre, og klikker "Lim inn". Nå har du fått helt nøyaktig adresse på plass og kan klikke "OK". Da vil du se at ordene du merket, Ullern videregående skole, er blitt blå og understreket: de er blitt en link til Ullern videregående skole.

Så var det linken til amazon.com. Jeg sa at vi skulle bruke et bilde, nemlig logoen til denne Internett-bokhandelen, som link. Du husker selvfølgelig fra Leksjon 2 hvordan du henter ned bilder fra nettet? Vi går altså til amazon.coms hjemmeside først. Der finner vi logoen, høyreklikker på den, og lagrer den i en passende mappe (på H: hvis du jobber på skolen). Så skal vi hente den inn i hjemmesidefila vår. Da kan vi klikke på "Image"-ikonet på hovedmenyen (dette:  ) slik at vi får opp en dialogboks som ber oss "Choose file" - velg en fil - hvorpå vi går til den mappa hvor vi lagret logoen, merker den og åpner den. Den vil da komme inn på siden og se slik ut:

Alt vi trenger å gjøre for å omgjøre dette til en link, er å merke bildet - det gjør vi ved å sette markøren på det og venstreklikke - for så å høyreklikke med det resultat at vi får opp samme dialogboks som vi hadde da vi laget linken til Ullern vidergående skole. Istedet for å skrive inn adressen til amazon.com med tastaturet, kopierer vi den inn fra nettstedet til bokhandelen.

En liten detalj angående utseendet på bilder som er linker: Composer har som standardinnstilling at disse bildene skal ha en "ramme" som er to piksler bred og har samme farger som tekstlinkene. Hvis du ikke liker denne kanten rundt bildet, kan du merke bildet (ved å venstreklikke) etter at du har laget linken, så høyreklikke slik at du får opp en kortmeny der ett av valgene er "Image/Link Properties". Velg dette. I "Image"-delen av den dialogboksen du nå får opp, har du nederst i høyre hjørne noen valg for "Space around image". På "Solid border" setter du 0 istedet for 2.
 

Å bruke dine egne bilder

Det er greit å kunne hente ned bilder fra Internett og bruke på sitt eget nettsted - forutsatt at man tar hensyn til dette med copyright, selvfølgelig ... Nå som vi har skanner på skolen og mange har det privat, kan man imidlertid også bruke sine egne fotografiske mesterverker. Det eneste du må huske på, er filformatet: bare formatene .gif og jpg (kan også skrives .jpeg) funker på Internett. Derfor må du sørge for å lagre bildene i ett av disse formatene når du skanner. Jpg-formatet brukes normalt for fotografier, mens gif'er er egnet til ting som ikke krever så høy oppløsning, som f.eks. logoer eller tegnede illustrasjoner. Generelt om bilder: prøv å få filene så små som mulig (reduser størrelse i cm eller reduser oppøsning), da det tar lang tid å laste ned en stor bildefil.
 

Linker mellom forskjellige filer på ditt nettsted

Kanskje er det å foregripe litt, men jeg forutsetter at du før eller senere lager flere sider enn inngangssiden på nettstedet ditt. Da må du selvfølgelig kunne navigere mellom disse sidene. Da vi laget linkene ovenfor til Ullern videregående skole og amazon.com, satte vi inn i dialogboksen for "Link" i Fig. 5 det som kalles den absolutte banen  til startsidene til henholdsvis skolen og bokhandelen. Det vil si at vi spesifiserer hele adressen fra og med http://www.skolesjefen.oslo ... osv. Vi kan gjøre dette når vi navigerer mellom forskjellige sider på ett nettsted også, men det er unødvendig. Istedet oppgir vi bare den relative banen, altså banen i forhold de øvrige filene bare på dette nettstedet. Hvis du har bare én mappe på nettstedet (etterhvert vil du ønske å organisere det i flere forskjellige mapper for å få bedre oversikt), vil det si at du bare trenger å angi navnet på den fila du skal lage link til.

La oss si at du har laget side nummer to på nettstedet ditt med stoff om din favorithobby, golf. Du har lagret denne som golf.html og nå vil du lage en link fra førstesiden til denne. Merk et ord eller et bilde på førstesiden (dvs fila index.html) som skal utgjøre linken og gå gjennom samme prosedyre som i Fig. 4 og Fig 5 ovenfor. Når du får opp dialogboksen i Fig.5, kan du du gjøre en av to ting: du kan skrive med tastaturet golf.html i linjen "Link to a page or a local file" - her er det så liten sjanse for å skrive feil at det er OK. Eller du kan bruke knappen "Choose file" i dialogboksen. Denne bringer opp oversikt over alle kataloger og mapper på maskinen din på samme måte som når du velger "Fil" ---> "Åpne" i alle mulige andre programmer. Så bare leter du deg frem til mappen der du har lagret golf.html og merker den og klikker "OK" i dialogboksen.

Når du skal tilbake fra golf-siden din til førstesiden, kan du selvfølgelig bruke "Tilbake"-knappen på nettleseren, men helst bør du også ha en link tilbake. Da gjør du på tilsvarende måte med fila golf.html som du akkurat har gjort med index.html: du merker et ord eller et bilde på golf-siden, la oss si et bilde av en pil som peker til venstre (et vanlig "Tilbake"-symbol - bildefiler med slike symboler kan du hente ned gatis fra nettet - søk f.eks. etter "free gifs buttons"); når du har fått opp dialogboksene i Fig.4 og Fig.5 skriver eller klikker du inn index.html i linjen "Link to a page ...".
 

Bruk av tabeller for å formatere innhold

Det er ikke like enkelt i en html-fil som i et papirdokument å bestemme hvor forskjellige elementer på siden, som f.eks. bilder, skal være. Tabulatorfunksjonen virker bl.a. ikke i forhold til å bestemme innrykk og du kan ikke sette antall spalter slik du gjør i Word. Det enkleste redskapet for å plassere elementer der vi vil ha dem, er rett og slett tabeller. Selv om det ikke ser slik ut, er det tabeller som holder mange av bildene på denne siden på plass. Grunnen til at du ikke ser tabellene, er at vi kan "skru av" alle linjene i dem slik at de blir usynlige. La oss se litt på hva vi kan gjøre med tabeller.

En veldig konvensjonell, men stadig aktuell måte å organisere en hjemmesides layout på, er å ha en rad med navigasjonsknapper på venstre side og en eller flere kolonner med tekst og/eller bilder til høyre for den. Se f.eks. på Aftenpostens nettutgave, der innholdet under tittelen er organisert i tre kolonner. Uten å gå Aftenposten i næringen, kan vi jo prøve på noe av det samme.

På hovedmenyen velger vi Insert ---> Table ---> Table. Da får du opp dialogboksen i Fig.7. Hvis du bare klikker "OK" på de valgene som automatisk kommer opp, setter du inn en tabell som ser ut som den nedenfor:
 
 

Men det var jo ikke akkurat slik vi ville ha den. Så vi prøver en gang til og justerer litt mer på de forskjellige innstillingene. For det første skal vi ha 3 kolonner, så vi forandrer "Number of columns" til 3. Så skal vi gjøre tabellen usynlig når siden er ferdig. Da går vi til "Border line width" og setter den til 0. "Cell spacing" er avstanden mellom de forskjellige cellene; den kan vi også sette til 0. "Cell padding" er avstand fra celleveggene på alle fire kanter og innover til innholdet, det være seg tekst eller bilder. Hvis vi ønsker litt "luft" mellom tekst i to kolonner i tabellen, kan vi sette den til f.eks. 5 pixels (dvs punkter eller piksler). Hos Aftenposten så vi at det også var - ihvertfall med skjermoppløsning på 800x600 - mye "luft" til høyre for den høyre kolonnen. En måte å få til dette på, er å bestemme at tabellen ikke skal fylle hele skjermen ved å sette "Table width" til en mindre "% of window" enn 100. La oss si at vi vil ha en tabell som skal være 90% av skjermen. Den vil da "tøye" eller "krympe" seg alt etter hvor stor skjerm den som ser på sida har, slik at de siste 10 prosentene helt til høyre på skjermen alltid vil være uten annet innhold enn bakgrunnsfargen, evt. bakgrunnsbildet. "Equal column widths" er avkrysset som standardinnstilling, men vi vil vel helst ha forskjellig bredde på de tre kolonnene. Derfor fjerner vi haken i denne boksen.  Så kan vi altså for "Table background" bl.a. velge "Use color". Da blir hele tabellen eventuelt en annen farge enn sida forøvrig. Jeg tenkte imidlertid at vi kunne gå rett videre til de mer detaljerte formateringsmulighetene for hver enkelt celle. Derfor klikker jeg "OK" slik at tabellen med de avmerkede innstillingene settes inn på sida. Deretter setter jeg markøren et eller annet sted inni tabellen og velger på hovedmenyen Format ---> Table Properties. Da får jeg opp dialogboksen i Fig.8 - dvs, først får jeg faktisk opp nøyaktig samme boks som i Fig.7. Men så legger vi merke til at øverst i boksen har vi nå et valg mellom tre forskjellige ting vi kan redigere: "Table", "Row" eller "Cell". Vi velger det siste, og da kommer boksen til høyre frem.  I de to første linjene her kan vi justere plasseringen av innhold horisonalt og vertikalt i cellen. Her kommer det jo an på hva vi vil, men vi må i alle fall stille inn på noe annet enn "Default", fordi det gjør at innholdet midtstilles vertikalt - det er jo ikke særlig nyttig for noe formål. "Use color" betyr altså at vi for hver enkelt celle kan velge en bestemt farge. Disse innstillingene har forrang fremfor innstillingen for tabellen som helhet. Når vi skal gjøre noe med de enkelte cellene i tabellene, må vi selvfølgelig fortelle programmet hvlken celle det gjelder. Dette gjør vi rett og slett ved å sette markøren i den aktuelle cellen.     Nå er vi vel klare til å se på hvordan vår trekolonners tabell kan se ut:

Fig.7. Formatering av tabeller   Fig.8. Innstillinger for cellene i en tabell

 

Her er en celle som vi kan bruke til å putte navigasjonsknapper i. Den er definert som 130 piksler bred. Det er "cell padding" på 5 i tabellen. Da skulle vi ha 120 piksler igjen i denne cella til eventuelle knapper som den ovenfor.

Tabellbredde Legg merke til at tabellen ikke går helt ut til høyre side av skjermen. Det er fordi jeg har satt tabellbredde til 90% av skjermbredden. Cellen til venstre har jeg definert til 130 piksler, den til høyre til 100 piksler. Denne hvite cellen vil dermed fylle det som er igjen av de 90% av skjermen. Hvor stor den blir i piksler vil variere med størrelse på skjermen og hvilken skjermoppløsning som er valgt. Farge Her har jeg valgt hvit bakgrunn.Hver celle kan ha forskjellig farge.  Hovedtekst Her kan vi ha hovedteksten. Det kan være litt overskrifter nedover sida og diverse  bilder osv.  Overskrift bla bla bla Ja, se her har vi en overskrift til. Og så kommer det litt tekst til, osv osv.

Vi kan selvfølgelig også velge skriftfarge, men linkene er det vanskeligere å forandre på. De blir samme farge på hele sida med mindre du går inn og forandrer HTML-koden på hver link

 

Opplasting av sidene til en server

Nå har du fått en del basiskunnskaper om hvordan du kan sette inn tekst, bilder og linker på sidene din. Men foreløpig ligger jo alt vel forvart på din egen maskin. For at dine bidrag til verdensveven skal bli tilgjengelig for andre, må de lastes opp til en server som nettsurfere rundt omkring i verden har tilgang til til enhver tid. Du må ha en vert, eller på "nynorsk", en host. Hvem kan tenkes å ville være vertskap for dine sider?

En god nyhet for de av dere som har et privat Internett-abonnement, er at dere som del av det sannsynligvis har tilbud om mange megabyte plass for privat hjemmeside som del av abonnementet. Hvis du vil benytte deg av dette tilbudet, kan du bare å gå til internettleverandørens nettsted og finne deres veiledning om hvordan du skal laste opp. Eller du kan hoppe over de to neste avsnittene og bli med oss litt til.

For de som ikke har egen leverandør, er det imidlertid massevis av tilbud fra selskaper som gjerne vil tilby gratis plass. Den lille haken er selvfølgelig at de krever en motytelse, nemlig retten til å plassere reklame i forskjellige former på dine sider. Det er ikke særlig stas, men "the price is right", ikke sant?

La oss ta for oss ett eksempel på et slikt selskap: Tripod. Før du kan laste opp sider hos dem, må du bli medlem. Det er gratis, men de vil ha litt opplysninger om deg. Sørg for at du bare fyller ut det som er absolutt nødvendig og at du ikke setter deg på lister over tilbud om "interessante" epost-oppdateringer om ditt og datt. Med den advarselen i mente, gå til Tripods hjemmeside. Du må velge deg et medlemsnavn og et passord. Disse får du også tilsendt pr epost når medlemsregistreringen er unnagjort. Du trenger dem selvfølgelig når du skal begynne å laste opp.
 

Vi skal se på én av flere mulige måter å laste opp, en som kan brukes uavhengig av hvilken server du laster opp til. Vi bruker et program som ligger på startmenyen på skolens maskiner under Programmer ---> Internett. Det heter WS FTP og er en såkalt filoverføringsklient (hvis du jobber andre steder fra og ikke har WSFTP, kan du laste den ned gratis, f.eks. her).  Start programmet slik at du får opp menyen til høyre  (Fig.9): Vi skriver først inn "adressen" vi skal laste opp til. For Tripod er det: ftp.tripod.com  - som skal stå i linjen "Host Name/Address". Så må du finne frem medlemsnavnet og passordet ditt i Tripod (eller hos Internett-leverandøren din, hvis du laster opp dit). Medlemsnavnet skriver du i linjen "User ID" - husk å bruke små og store bokstaver akkurat slik det står i meldingen fra Tripod. Passordet går selvfølgelig i linjen "Password" -også med små og store bokstaver påpasselig kopiert.  Trykk "OK". Hvis du ikke allerede er online, ringes nå Tripod (eller eventuell annen server) opp. Når du får forbindelse, dukker det opp en dialogboks à la den nedenfor (Fig.10):

Fig.9. Oppringing av server med WSFTP

Vinduet til venstre (med den grønne pilen i) inneholder oversikt over alle kataloger på din egen maskin. "Rull" ned til du finner H: (hvis du jobber på skolen) eller hvilken katalog du måtte ha lagret hjemmesiden din på. Dobbeltklikk på katalogen og åpne så den mappen der index.html og golf.html ligger. Når du har funnet index.html, merker du den med et venstreklikk. For alle html-filene skal innstillingen på filtype under dette vinduet være ASCII. Klikk i sirkelen for dette. Så klikker du på pilen som peker til høyre mellom de to vinduene. Dermed skulle index.html overføres til Tripod. Gjør det samme med golf.html. Nå skulle disse to filene dukke opp i det høyre vinduet i Fig.11. Dette er nemlig oversikten over mapper og filer som du har tilgang til hos serveren du laster opp til, f.eks. hos Tripod.

NB! En viktig ting å huske på er at bildefilene som du har satt inn i sidene må overføres separat. Dette gjelder også f.eks. småting som den pilen jeg foreslo du kunne bruke til å navigere tilbake fra golf.html til index.html. For bildefiler skal innstilling på filtype være binary. Klikk i sirkelen ved siden av dette ordet under de to vinduene.

Når du har overført alle filene, lukker du WSFTP. Nå kommer det store øyeblikk: du er klar til å se din egen side på the World Wide Web! Skriv inn i adresselinjen på Netscape Navigator (altså nettleseren, ikke den delen av programmet du nå har brukt til å lage sidene med): medlemsnavn.tripod.com (der du selvfølgelig erstatter ordet "medlemsnavn" med ... ja, du skjønner). Trykk "Enter" - og, Voilà!!!

... eller kanskje ikke? Hvis du får til alt dette på første forsøk, er enten jeg usedvanlig god til å forklare eller du usedvanlig skarp. Hvis du ikke får til etter forsøk nummer tjuefem, kan du spørre meg, så prøver vi å få kontakt med Tripod sammen. Forhåpentlig har jeg gjort det litt lettere å få opp hjemmesider - jeg ville bli deprimert om alle skulle måtte prøve og feile like mye på egen hånd som jeg har gjort ...