Du er no i arkivet for nettsidene til tidlegare Høgskolen Stord/Haugesund. Oppdatert informasjon finn du på den offisielle nettstaden til Høgskulen på Vestlandet.

Foretrukket HTML i HSHveven

Både for at HSHveven skal framtre som seriøs, og for at søkemotorer (f.eks. Google) lettere skal fange opp informasjonen i sidene våre, bør vi benytte enkel, ren og ryddig HTML-kode i sidene våre. Å lime rett inn fra f.eks. Word går som regel veldig dårlig - selv om det først kan se «fint» ut på overflaten.

Det viktigste for å lage gode nettsider er at man tenker innhold og ikke utseende. Hold deg til riktig HTML og la web-designeren ta seg av den grafiske utformingen! Ta gjerne kontakt med web-utvikler om du føler du har noe å tilføre grafisk!

HTML-blokker

h1 (Overskrift 1)
Eksempel:

Web-prosjektgruppa i HSH

HTML:

Web-prosjektgruppa i HSH

Forklaring: H1 (Header One) brukes til sidetittel eller «Overskrift 1».
H1-taggen bør bare ha enkel tekst inni seg!
h2 (Overskrift 2)
Eksempel:

Kort om gruppa

HTML:

Kort om gruppa

Forklaring: H2 (Header Two) brukes til temaoverskrift eller «Overskrift 2».
H2-taggen bør bare ha enkel tekst inni seg!
h3 (Overskrift 3)
Eksempel:

Gruppas mandat

HTML:

Gruppas mandat

Forklaring: H3 (Header Three) brukes til avsnittsoverskrift eller «Overskrift 3».
H3-taggen bør bare ha enkel tekst inni seg!
p (Avsnitt)
Eksempel:

Gruppa har mandat til å pålegge publisistene å legge inn korrekt HTML.

HTML:

Gruppa har mandat til å pålegge publisistene å legge inn korrekt HTML.

Forklaring: P (Paragraph) brukes til den vanlige teksten. P-taggen kan ha mange andre tagg-typer innenfor, f.eks. lenker og bilder.
ul (Liste)
Eksempel:
  • Leder: Kari Pedersen
  • Nesteleder: Ola Olsen
  • Vara: Zahid Nasser
HTML:

  • Leder: Kari Pedersen

  • Nesteleder: Ola Olsen

  • Vara: Zahid Nasser

Forklaring: UL (Unordered List) brukes til lister. NB! UL-taggen må alltid ha li-tagger inni seg. LI-tagger kan ha f.eks. tekst, bilder og lenker innenfor.

HTML-elementer

img (Bilde)
Eksempel:

Forsamling i kurslokale

HTML:

Grafisk dekorelementsrc="http://www.server.com/bilde.jpg" width="120" height="79" alt="Forsamling i kurslokale" border="0">

Forklaring: IMG brukes til å vise bilder i sida. NB! Bildene må først ha blitt lagt ut på nettet og du må vite adressa. Adressa blir satt som verdi i scr-egenskapen.
IMG-tagger blir alltid laget innenfor en HTML-blokk. Husk at IMG-taggen ikke har slutt-tagg: . Husk også hat du skal ha med alt-egenskapen ? en forklaring for blinde og svaksynte om hva bildet inneholder.
a (Lenke)
Eksempel:

Denne lenka går til HSH.

HTML:

Denne href="http://hsh.no">lenka går til HSH.

Forklaring: A brukes til å lage lenker av ord i tekst eller bilder. I href-egenskapen setter du som verdi adressa det skal lenkes til.
A-tagger blir alltid laget innenfor en HTML-blokk.
strong (Forsterket skrift)
Eksempel:

Dette er viktig!

HTML:

Dette er viktig!

Forklaring: STRONG brukes til å markere at deler av teksten bør legges spesielt merke til. Normal gir dette halvfet skrift.
em (Uthevet skrift)
Eksempel:

Dette kalles psykosomatisk.

HTML:

Dette kalles psykosomatisk.

Forklaring: EM brukes til å legge trykk på deler av teksten. Normal gir dette skråstilt skrift (kursiv).

Spesielle elementer

id (Ankerpunkt)
Eks. for anker:

id="apntider">Åpningstider

Eks. for lenke til anker:

Hopp ned til oversikt over åpningstider for Biblioteket href="#apntider">her!

Forklaring:

Alle tagger kan få sitt eget id (anker), men husk at det ikke skal være to eller flere like anker på ei side (unike verdier)!
Når et element har fått id kan du lenke til dette id ved å sette # foran id-verdien.
Dette er en teknikk du bruker for å la brukeren kunne hoppe til forskjellige steder i sida. Typisk bruk er i innholdsfortegnelse oppe på sida.
Ikke bruk spesiell tegn (f.eks. norske bokstaver eller mellomrom (bruk gjerne understrek istedetfor))!

div (Inndeling i seksjon)
Eksempel:

Dette er en seksjon - selv om du ikke kan se det.

HTML:

Dette er en seksjon - selv om du ikke kan se det.

Forklaring: DIV er bare en inndeling av kode i grupper. I bunn og grunn er dette en unødvendig tagg for de fleste, men er nyttig i sammenhenger som vises under HSH-spesifikke innstillinger.
hr (Skillestrek)
Eksempel:
HTML:
Forklaring: Med HR kan du lage et tydelig skille mellom innhold i sida, for at det skal bli lettere å lese.
table (Tabell)
Forklaring: Tabeller er kompliserte å lage i HTML. Dette gjør du helst bare etter at du har fått nøye innføring eller ved hjelp av HTML-verktøy. Å lime inn en tabell fra Word skaper unødig mye kode.

HSH-spesifikke stilklasser*

class="linkNone" (Lenke uten understrek)
Eksempel:

Klikk her for å gå dit!

HTML:

Klikk class="linkNone" href="#dit">her for å gå dit!

Forklaring: Det er dårlig skikk ålage lenker uten understrek. Men i toppfortegnelser tillater HSH det ? p.g.a. lettere lesbarhet og fordi brukerne normal skjønner logikken.
class="fortegnelse" (Liste for fortegnelser)
Eksempel:
HTML:
Forklaring: Ofte når det blir mye informasjon på ei side, kan det være nyttig med en fortegnelse øverst som gir lenker til nedover i sida. Bruk gjerne stilklassen på ei slik ul-liste!
class="tavle" (3D-boks)
Eksempel 1:

Dette er den eneste utdanningen av sitt slag i Norge!

HTML:

class="tavle">Dette er den eneste utdanningen av sitt slag i Norge!

Eksempel 2:

Eneste i sitt slag!

Dette er den eneste utdanningen av sitt slag i Norge!

HTML:
class="tavle bg-himmelbla">

Eneste i sitt slag!


Dette er den eneste utdanningen av sitt slag i Norge!


Forklaring: Når noe virkelig bør vises igjen i sida, bruk denne klassen! Men ikke overdriv bruken ? da går det inflasjon.
NB! Webdesigner kan når som helst og uten varsel endre utseendet for denne boksen. Et hovedstilark bestemmer hvordan dette elementet skal se ut i alle sidene.

* = For forklaring om hva en stilklasser er, vennligst spør din kontaktperson for web-publisering, eller søk informasjon på Internett, søkeord: CSS classes.

TIPS: På alle sider på Internett kan du se hvordan sidene har blitt laget med HTML. Om du har interesse for det, kan du fort lære mye av ting andre har laget. Velg «Vis kilde» el.l. fra menyen!

Sida ble sist oppdatert: 21.01.2017