(Klikk på bildet for nedlasting)

Kortversjonen    +   utskriftsvennlig versjon i Word- format.

Om du lurer på hvordan du skal bruke MIX-kontoen din til å
lage og lagre nettsider kan du lese her.

HTML-redigering kan utføres på ulike måter, fra det å skrive HTML-kode direkte i et enkelt tekstredigeringsprogram som for eksempel Notisblokk i operativsystemet Windows eller i gedit i Linux, til å benytte mer avanserte verktøy som eksempelvis Microsofts Frontpage. Sistnevnte representerer den typen verktøy som vi kaller WYSIWYG (What You See Is What You Get). Felles for programmer av sistnevnte type er at man ser dokumentet tilnærmet slik det vil bli vist i en nettleser, og at HTML-koden blir generert automatisk. Noen av denne typen programmer lar deg ikke redigere HTML-koden. HTML-editoren i OpenOffice.org tilhører nok kategorien WYSIWYG.

HTML-editoren har mange felles trekk med og ligner tekstbehandlingsprogrammet OpenOffice.org Writer eller Word. Dette gjelder blant annet stiler og maler. Blant de muligheter som ligger i dette programmet, kan vi nevne følgende kraftige verktøy for å lage HTML-dokumenter:

  Tekstformatering

  Redigerbar HTML-kode

  Innsetting og redigering av tabeller

  Innsetting av hyperlenker, både som tekst og grafikk.

  Innsetting av grafikk, regneark, osv.

  Verktøy for å lage og sette inn GIF-animasjoner og rullende tekst.

  Innsetting av applets, skript, plugins og hyperlenker til makroer.

  Innsetting av skjema og felt.

Arbeidsområdet i HTML-editoren

 

  Hyperlenkelinja har verktøy for å redigere hyperlenker.

  Objektlinja har verktøy for å formatere både tekst- og grafikkobjekter.

  Hovedverktøylinja tilbyr verktøy for innsetting av objekter som tabeller, osv.

  Dialogboksen for stiler benyttes til å formatere avsnitt, tegn og nummereringsstiler.

Hovedverktøylinja.

Ovenfra og ned inneholder den disse verktøyene:

Nytt blankt HTML-dokument

Man kan opprette et nytt blankt dokument. Dette fører til at man får opprettet et tomt HTML-dokument basert på de vanlige stilene, blant annet overskrifter 1-6, listeinnhold, tabelloverskrift og tabellinnhold, og vannrett linje.

Velg Fil-Ny-HTML-dokument.

Nytt HTML-dokument på andre måter

Det finnes flere andre måter å lage HTMLdokumenter på:

  Eksport av Impress- og Drawdokumenter.

   Lagre andre dokumenter som HTML. (Writer og Calc) velger du Fil-Lagre som. Deretter velger du filtypen Web-page.

  Sette inn fil (dvs. tekstfil) i et blankt HTML-dokument. Velg Sett inn-Fil.

  Sette inn objekt (regneark, diagram, tegning) i et blankt HTML-dokument. Velg Sett inn-Objekt, og velg enten ålage nytt objekt, eller å lage fra fil.

Nytt HTML-dokument ved hjelp av veiviseren

Man kan bruke en av de forhåndsdefinerte malene til å opprette HTML-dokumenter.

1. Velg Fil-Veiviser-Nettside.
2. I vinduet «Veiviser for nettsider» velger du en mal i listen på venstre side. Etter hvert som du markerer malene, vil de bli vist i arbeidsområdet for HTML-editoren.
3. Velg det sideoppsettet du ønsker i listen til høyre.
4. Klikk Opprett.

Bruke veiviseren til å lage en HTML-mal

Man kan ta utgangspunkt i en eksisterende mal for å lage en ny.

1. Velg menyvalget Fil-Veiviser-Nettside.

2. I vinduet «Veiviser for nettsider», velg mal i listen på venstre side, og sideoppsett i listen på høyre side. Se figuren på forrige side.

3. Huk av for Lag mal nede til venstre i vinduet, og klikk Opprett på høyre side.

4. I vinduet «Maler», skriv inn navnet på malen og klikk OK.

Lage en standard HTML-mal

1. Lag et HTML-dokument med skrifttyper, grafikk og annen formatering du måtte ønske å basere dine HTML-dokumenter på.

2. Velg Fil-Lagre som.

3. I Lagre-vinduet velger du filtypen OpenOffice.org 1.0 Web-pages Template.

4. For å lagre malen på rett plass, bla deg fram til template-katalogen (../share/template/norwegian/ i en nettverksinstallasjon, eller ../user/template/ i en enbrukerinstallasjon).

5. Skriv inn et passende filnavn for denne malen, og huk av for Automatisk filetternavn.

6. Klikk Lagre.

Endre en eksisterende HTML-mal

1. Åpne den malen du ønsker å endre.

2. Gjør de endringene du ønsker.

3. Lagre filen under samme navn og filtypen OpenOffice.org 1.0 Web-pages Template.

Tabeller

Når man skal lage HTML-dokumenter, kan man ha god nytte av tabeller, særlig når man skal legge ut informasjon på en ryddig og oversiktlig måte. Det er lett å plassere bilder nøyaktig dersom man legger dem inni tabellceller.

Tabellinnstillinger

Før man begynner å bruke tabeller i OpenOffice.org HTML-editor, bør man kontrollere og eventuelt endre de innstillinger som gjelder for tabellene.

Innstillinger:

  Tabelloverskrift synlig eller skjult

  Tabelloverskrift gjentas på hver side

  Kantlinje synlig eller skjult

  Formatering av inndata (slå av eller på)


  Justering av inndata (slå av eller på)

  Hvor mye bredden og høyden på celler endres om gangen når man bruker ALTtasten + piltastene

  Hvor brede og høye cellene blir når man setter inn nye rader eller kolonner.

  Hvordan endringen i rader og kolonner skal påvirke de omkringliggende rader og kolonner.

Endre standardinnstillingene for tabeller

1. Velg Verktøy-Innstillinger-HTML-dokument-Tabell.

2. Huk av for Overskrift dersom du ønsker at tabellen skal ha formatert tabelloverskrift. Huk av for Gjenta på hver side dersom du ønsker at tabelloverskriften skal gjentas på hver side. Huk av for kantlinje dersom du ønsker at tabellens kantlinje skal vises.

3. Huk av for Tallgjenkjenning dersom du ønsker at tall skal gjenkjennes som tall i en teksttabell. Huk av for Gjenkjenning av tallformat dersom du ønsker at tallformatet skal gjenkjennes. Huker du ikke av her, vil data som skrives inn, bli formatert som vanlig tekst. Huk av for Justering dersom du ønsker at tall skal høyrejusteres i tabellcellene. Dette skjer bare dersom tallformat er gjenkjent.

4. I seksjonen Tastaturhåndtering - Flytt celler kan man angi hvor mye bredere og høyere en celle skal bli ved bruk av tastaturet (ALT-tasten + piltastene). I feltet Rad setter man hvor mye bredere cellen skal bli ved ett trykk på ALT+pil til venstre. Tilsvarende sier tallet i feltet Kolonne hvor mye høyere cellen skal bli ved ett trykk på ALT+pil ned. Man kan sette inn celler ved hjelp av objektlinja for tabell. I seksjonen Sett inn celle angir man standardverdiene for innsetting av rader og kolonner.

5. I seksjonen Oppførsel til rader/kolonner, velger man hvordan endringene skal påvirke tabellen. Se forklaring ved hvert alternativ i vinduet for tabellinnstillinger i HTML-dokumenter nedenfor.

Formatering av tabeller

Tabellformateringsverktøyene i HTML-editoren ligner på dem i tekstbehandlingsdelen OpenOffice.org Writer, men de er ikke helt identiske. Se figur i høyre spalte. Når man har satt inn en tabell, og har plassert markøren i en av tabellcellene, vil Objektlinja over arbeidsområdet skifte til Tabellformateringslinja, gjengitt i høyre spalte på denne sida.

Tips

Hvis du ikke ser Objektlinja og dermed ikke tabellformateringsikonene, velg Vis- Verktøylinjer og klikk på Objektlinje. Hvis objektlinja vises, men ikke Tabellformateringslinja, klikk pil-ikonet helt til høyre på Objektlinja.

Sette inn en ny tabell

1. Velg menyvalget Sett inn-Tabell.

2. Hvis du vil ha en ganske enkel tabell, så gjør dine valg i vinduet «Sett inn tabell», og klikk OK.

3. Hvis du ønsker å gjøre bruk av de forhåndsdefinerte tabellformatene, klikk Autoformatering, og velg det formatet du ønsker.

Rader og kolonner i en tabell

I OpenOffice.org HTML-editor er det svært enkelt å bearbeide tabellene etter at de er satt inn i dokumentet. Man kan sette inn og slette rader og kolonner etter behov.

Endre høyden på en tabellrad

1. Sett markøren i raden.

2. Høyreklikk og velg Rad-Høyde.

3. Gjør de endringer du ønsker.

Endre bredden på en tabellkolonne

1. Sett markøren i kolonnen.

2. Høyreklikk og velg Kolonne-Bredde.

3. Gjør de endringer du ønsker.

Endre dimensjonene for hele tabellen

1. Plasser markøren i en celle i tabellen.

2. Høyreklikk og velg Tabell.

3. Velg arkfanen Tabell, og velg en annen justering enn Automatisk.

4. Skriv inn en absolutt bredde, eller huk av for relativ bredde og oppgi prosentvis bredde av vinduet tabellen vises i.

Tips

Skal du formatere en tekst inni en tabellcelle, må du ha tilgang til tekstformateringsverktøyet i objektlinja.

Men siden du arbeider inni en tabell, vil tabellformateringsikonene vises i objektlinja. For å skifte objektlinje til tekstformateringsikonene, klikk på pil-ikonet helt til høyre på objektlinja.

Slå sammen tabellceller

Man kan slå sammen tabellceller ved å merke de cellene det gjelder og klikke på ikonet for å slå sammen celler i Tabellformateringslinja.

Dele opp en tabellcelle

Man kan dele opp en tabellcelle ved å merke den cellen det gjelder, og klikke på ikonet for å dele opp celle i Tabellformateringslinja. Man får opp vinduet for å dele celler. Oppgi mengde og hvilken retning cellen skal deles i. Klikk OK.

HTML kildekode

HTML-dokumenter består foruten de synlige elementene også av kode som normalt ikke vises, nemlig HTML-koden. Denne koden forteller nettleserprogrammene hvordan informasjonen skal vises. Der er kode for overskrifter, for tabeller, for hyperlenker, osv.

Redigering av kildekode

Av og til kan man ha behov for å redigere direkte i kildekoden for HTML-dokumentet. Før man kan redigere denne koden, må man imidlertid lagre HTML-dokumentet.

Tips

For å få HTML-koden inn i en egen fil, kan du merke koden, kopiere den og lime den inn.
En annen måte er å velge Fil-Eksporter kilde.

1. Velg Vis-HTML-kilde, eller klikk knappen «HTML-kode» nederst i hovedverktøylinja til venstre for
arbeidsområdet.
2. Klikk ikonet for Rediger fil i funksjonslinja, hvis det ikke allerede er aktivert.
3. Rediger HTML-koden.
4. Velg Vis-HTML-kilde fra menyen, eller klikk knappen «HTML-kode» nederst i hovedverktøylinja for å forlate HTML-kodevisningen.
5. Lagre dokumentet på nytt for å ta vare på endringene.

Formatering av tekst og grafikk i HTML-editor

De fleste av de formateringsmulighetene som finnes i HTML-editoren, er de samme som i tekstbehandlingsprogrammet Write. Her skal vi bare se på dem som er spesielle for HTML-editoren. I figuren under finner vi følgende elementer:

1. Ikonet for redigering av fil. Før du redigerer tekst, må du ha klikket dette ikonet, eller sjekke at det er klikket.

2. Objektlinja gir formateringsmuligheter

3. Standard HTML-stiler.

4. Overskrift 1.

5. Vannrett linje. Velg Sett inn - Vannrett linje.

6. Overskrift 2.

7. Liste 3.

Tips

Hvis du vil være sikker på at dine HTML-dokumenter skal kunne vises på samme måte i ulikenettlesere, bør du teste dem ved å åpne dem i disse nettleserne.

Innsetting og formatering av grafikk

Å sette inn grafikk i et HTML-dokument som skal publiseres på Internett, kan på den ene siden friske opp dokumentet og gjøre det mer informativt, mens det på den andre siden kan føre til at dokumentet blir tungt og tregt å åpne i nettleseren. En tommelfingerregel er at fotografier og bilder som skal settes inn i et HTML-dokument, ikke bør være større enn 30 KB (kilobytes). Dette må ordnes i et bildebehandlingsprogram før man setter dem inn. Som regel kan man oppnå en slik redusert størrelse ved å minske lengde og høyde, oppløsningen (piksler per tomme) og antall farger i paletten.

Når man jobber med digitale bilder skal man passe på flere ting. Filformat, filnavn og filstørrelse er viktig å tenke på når man skal lagre bildet. Husk at internett ikke vil ha æ,ø,å ifilnavn og bildet bør ikke være større enn 400 pixler noen veier. Særlig ved skanning av bilder er det behov for å endre størrelsen og gi nytt filnavn, samt lagre.

Skal bildene legges ut på nett må du velge filtype JPG eller GIF før du lagrer bildet, File - Save as. Begge er komprimerte filtyper, det betyr at de tar mindre plass, men kvaliteten forringes ved etterbehandling av bildene. Skal du bearbeide et bilde mye lønner det seg å gjøre alle forandringene mens bildet fremdeles er BMP- eller PSP-format, det kan lagres som JPG etterpå.

Husk å lagre alle bildene som du skal bruke i samme mappa som html-dokumentet.

Du kan sette inn grafikk på tre måter:

  Velg Sett inn-Grafikk.

  Velg Sett inn-Fil for å sette inn en tekstfil som inneholder grafikk.

  Lim inn grafikk fra et annet program som OpenOffice.org Draw ved å benytte standardmetoden i operativsystemet: merk bildet eller fotografiet, høyreklikk og velg  Kopier, Høyreklikk i HTMLdokumentet og velg Lim inn.

Sette inn en vannrett linje

1. Plasser skrivemerket på den linjen i HTML-dokumentet der du ønsker å sette inn en vannrett linje.

2. Velg Sett inn-Vannrett linje.

3. Velg en linje i listen, og klikk OK.

4. Om du vil justere linjen setter du skrivemerket før eller etter linjen, deretter kan du høyre eller venstre-justerere.

Hyperlenker

Hva er hyperlenker?

En grunnleggende egenskap ved Internett er at dokumenter kan kobles sammen ved hjelp av hyperlenker. Det kan være dokumenter lagret i samme katalog eller dokumenter lagret på servere et helt annet sted i verden. I tillegg kan man også lage lenker til bokmerker i samme dokument, eksempelvis mellom en innholdsfortegnelse og avsnitt eller kapitler lenger ute i samme dokument. Hyperlenker kommer ofte til syne som understreket tekst, andre ganger som knapper eller bilder man kan klikke på og som da fører til at du får se andre dokumenter eller bilder.

Absolutte og relative lenker

En absolutt hyperlenke er en lenke eller filsti som tar utgangspunkt i rot-nivået på den disken du arbeider på, og viser hele banen fram til dokumentet som lenken peker på. En relativ lenke tar utgangspunkt i den katalogen du arbeider i, og refererer til dokumenter og bilder i den samme katalogen eller i underkataloger til denne. Relative lenker er derfor bare mulig når dokumentene ligger lagret på samme disk.

Tips

Når du utvikler HTML-dokumenter som skal publiseres på Internett, bør du bruke relative hyperlenker. Dette vil gjøre det lettere å få lenkene til å fungere etter at du har lagt dokumentene ut på web-serveren.

I tabellen nedenfor er det gitt eksempler på relativ og absolutt lenke både i filsystemet og i Internett. Legg merke til at den relative lenken er lik både i filsystemet og i Internett. Det er dette som gjør at det anbefales å bruke relative lenker når man utvikler dokumenter som skal publiseres på Internett.

Lage hyperlenker

Ved hjelp av Hyperlenkevinduet kan man lage følgende lenketyper:

  lenke til Internett-side

  lenke til ftp-side

  lenke til ny tom fil

  lenke til bokmerke

  lenke til e-post

  lenke til diskusjonsgrupper

  lenke til skript

 

Hyperlenke til Internettside

Når man skal lage en lenke til en Internettside, kan man hente Internett-adressen fra adressefeltet i nettleseren ved å merke den, kopiere den og deretter lime den inn i målfeltet i Hyperlenke-vinduet. Se punkt 6 i oppskriften i høyre spalte.

Lage en hyperlenke til en Internettside

1. Åpne et dokument.

2. Plasser skrivemerket i dokumentet på det stedet du ønsker at hyperlenken skal være.

3. Klikk hyperlenke-ikonet til høyre på funksjonslinja. Hyperlenkevinduet vises.

4. Velg Internett-ikonet på venstre side av Hyperlenkevinduet.

5. Huk av for Internett under type hyperlenke.

6. Skriv inn Internettadressen i målfeltet, eller kopier den inn fra adressefeltet i nettleseren.

7. Velg Ramme ( _blank, _parent, _self eller _top). Det anbefales å bruke _blank. Da vises Internettsiden i et nytt vindu.

8. La det stå Tekst i skjema-feltet. Ikke velg Knapp, fordi dette ikke vil virke uten at man programmerer hva som skal skje når man klikker på knappen.

9. Skriv inn den teksten som skal fungere som hyperlenke i tekstfeltet.

10. Skriv eventuelt inn et ankernavn i navnefeltet. Dette er nyttig hvis man skal lage lenke til denne lenken fra et annet dokument.

11. Klikk knappen Bruk og deretter Lukk.

Hyperlenke til ny tom fil

Når man lager en hjemmeside bestående av flere dokumenter som skal være lenket sammen, kan man enten lage ferdig alle deldokumentene først, og deretter lenke dem sammen. Men man kan i OpenOffice.org HTML-editor lage lenke til et nytt tomt dokument. Man kan med andre ord opprette nye dokumenter idet man lager hyperlenkene uavhengig av om dokumentene er laget ferdig på forhånd. Dette gjør det noe enklere å bygge en hjemmeside bestående av ett hoveddokument og flere underdokumenter. Vær imidlertid oppmerksom på at den hyperlenken som blir laget, er absolutt. Benytter man denne metoden når man lager hjemmesider, så må man redigere hyperlenkene manuelt direkte i HTML-koden etterpå slik at man får relative hyperlenker.

Lage en hyperlenke til en ny tom fil

1. Åpne et dokument.

2. Plasser skrivemerket på det stedet i dokumentet der du ønsker at hyperlenken skal være.

3. Klikk hyperlenke-ikonet til høyre på funksjonslinja.

4. Velg ikonet Nytt dokument til venstre i Hyperlenke-vinduet.

5. Velg filtype, f.eks. HTML-dokument.

6. Skriv inn navn på det nye dokumentet.

7. Huk av for om du skal redigere det nye dokumentet nå eller senere.

8. Velg ramme, skriv inn tekst for hyperlenken.

9. Klikk knappen Bruk, og deretter Lukk.

Hyperlenke til bokmerke

Bokmerker er punkter inni et dokument som u kan lage hyperlenker til. For eksempel kan du lage et dokument med innholdsfortegnelse der hver oppføring kan lenkes til en overskrift lenger ute i dokumentet. Da vil man kunne klikke på en oppføring i innholdsfortegnelsen og kunne hoppe direkte til det stedet i dokumentet hvor overskriften står. Når man skal lage hyperlenker til bokmerker i et dokument, må man først definere opp bokmerkene og deretter lage hyperlenker til dem.

Lage bokmerker i et HTML-dokument

1. Åpne dokumentet som inneholder de punktene du ønsker å kunne hoppe til ved hjelp av hyperlenker.

2. Planlegg hvor du ønsker å plassere bokmerkene og hvilke navn du skal gi dem. Husk på at disse

navnene må være unike, dvs at alle bokmerkenavnene i samme dokument må være forskjellige.

3. Plasser skrivemerket der du ønsker å plassere bokmerket, f.eks. rett foran første bokstav i en overskrift.

4. Velg Sett inn-Bokmerke. Bokmerkevinduet kommer til syne (se figuren i venstre spalte).

5. I bokmerkevinduet skriver du inn navn på bokmerket, og klikker OK.

6. Fortsett med punktene 3-5 ovenfor inntil du har laget alle bokmerkene.

Lage hyperlenke til et bokmerke

1. Plasser skrivemerket der du ønsker at hyperlenken skal være.

2. Klikk hyperlenke-ikonet til høyre på funksjonslinja.

3. Velg Dokument-ikonet på venstre side av Hyperlenkevinduet.

4. Klikk ikonet for å finne mål i dokumentet, deretter klikk pluss-tegnet til venstre for Bokmerker for å få tilgang til listen over definerte bokmerker i dokumentet. Klikk på det bokmerket du ønsker, og deretter knappene Bruk og Lukk.

5. Skriv inn teksten som skal vises som hyperlenke i dokumentet.

6. Klikk knappen Bruk og deretter Lukk.

Hyperlenke til e-post og diskusjonsgrupper

Hvis man ønsker å ha en lenke til e-post eller diskusjonsgrupper på hjemmesiden, kan man lage en slik svært enkelt i OpenOffice.org HTML-editoren.

Lage hyperlenke til e-post

1. Åpne et dokument.

2. Plasser skrivemerket på det stedet i dokumentet du ønsker at hyperlenken til e-post skal være.

3. Klikk ikonet for hyperlenke til høyre i funksjonslinja

4. Klikk ikonet for E-post og diskusjonsgrupper til venstre i hyperlenkevinduet.

5. Velg E-post eller Diskusjonsgrupper.

6. Skriv inn mottakerens e-post adresse. Når du klikker i Emne-feltet, vil koden mailto: bli lagt til foran epost-adressen.

7. Skriv eventuelt inn emne. Det du skriver inn her, vil sammen med e-post adressen automatisk bli fylt inn

i henholdsvis emnefeltet og adressefeltet i den meldingen du får opp til redigering når du klikker

hyperlenken.

8. Skriv eventuelt inn teksten som skal vises som hyperlenke.

9. Klikk Bruk, og deretter Lukk.

Grafikk som hyperlenke

Når man surfer på Internett, vil man av og til legge merke til at grafikk kan være hyperlenker såvel som tekst.

Tips

Man kan fjerne en hyperlenke som er koblet til et bilde eller annen grafikk. Dette gjøres ganske enkelt ved å velge bildet ved å flytte muspekeren til kanten av bildet slik at muspekeren endres fra en hånd til et pilkors. Mens muspekeren er et pilkors, klikker du en gang med musa, og de grønne hendlene vises. Høyreklikk det valgte bildet, og velg Bilde. Under arkfanen Hyperlenke sletter du adressen i URL-feltet. Klikk deretter OK.

Lage et bilde om til hyperlenke

1. Åpne et dokument.

2. Plasser markøren på det stedet du ønsker å sette inn bildet.

3. Sett inn bildet ved å velge Sett inn-Grafikk, bla deg fram til bildet, velg det, og klikk Åpne-knappen.

4. Velg det innsatte bildet slik at de grønne hendlene vises, høyreklikk på det og velg Bilde.

5. Velg arkfanen Hyperlenke i Grafikkvinduet.

6. Skriv inn Internettadressen i URL-feltet.

7. Skriv eventuelt inn navn i navnefeltet. Dette navnet vil vises i HTML-kildekoden.

8. Velg ramme, f.eks. _blank.

9. Klikk OK.

Bildekart

Et bildekart (engelsk: image map) er et bilde om er delt opp i deler der hver del er en separat hyperlenke. Eksempler på slike bildekart kan være en planskisse over et hus eller et geografisk kart over et land eller landområde. I planskissen kan man lage hvert rom til en hyperlenke. Når man klikker på baderommet, kan man eksempelvis få opp et dokument som viser bilde av baderommet og eventuelt en tekstbeskrivelse av det. På det geografiske kartet kan man for eksempel klikke på en by som er markert, og derigjennom få tilgang til kommunens hjemmeside. OpenOffice.org HTML-editor har et meget sterkt verktøy for å lage bildekart. I prinsippet lager man bildekart ved å lage en avgrensning ved å tegne en figur (rektangel, kvadrat, sirkel, ellipse eller frittformet figur) rundt det området i bildet som skal være en hyperlenke. Deretter tilordner man selve lenken. Slik kan man tilordne mange hyperlenker tilett og samme bilde.

Etterord

Av muligheter som programmet har, som ikke er nevnt her, kan nevnes; animert tekst, gif-animasjoner, lage sideoppsett for utskrift, notater og tabell i tabell, men det har andre skrevet om. Se OpenOffice egne sider.