Miniguide: Utdatert HTML

Tekst: Vidar Solbakk.

I denne mini-guiden ser vi nærmere på fire av taggene som er utdatert i HTML 4.01 strict, nærmere bestemt <center>, <font>, <s> og <u>.

Artikkelen forutsetter grunnkunnskaper om HTML. Du kan lese mer om HTML i en tidligere guide her på Hardware.no.

To typer elementer

Vi begynner med å kikke på forskjellen mellom "block level"-elementer og "inline"-elementer. Et "block level"-element er typisk en tabell, paragraf, liste, overskrift osv., mens "inline"-elementer i hovedsak er tekst-formateringer og pynt.

"Block level"-elementer kan inneholde inneholde både "block level"-elementer og "inline"-elementer, mens "inline"-elementer kun kan inneholde andre "inline"-elementer.

Dersom et element skal bevares som "inline", bruker vi taggen <span>. I alle andre tilfeller benyttes taggen <div>. Stilen kan også legges til andre tagger som f.eks.<img>, <table> osv.

1. Metoder for å legge til CSS-informasjonen til taggene

Det finnes i hovedsak tre metoder for å legge til stilinformasjon (CSS) til taggene. Dette er henholdsvis attributtene «class=””», «id=””» og «style=””». Disse skiller seg fra hverandre ved at class-attributten inneholder en referanse til en standard vi har laget, som kan benyttes så ofte man vil i dokumentet.

Id-attributten inneholder også kun en referanse til stilinformasjonen, men kan kun benyttes en gang, og blir dermed et ankerpunkt i siden (som kan linkes direkte til). Style-attributten inneholder på sin side stilinformasjonen direkte.

2. Sentrering

For å sentrere innhold på siden har man ofte brukt <center>-taggen. Det som i hovedsak skiller denne fra CSS, er at man i CSS ikke kan benytte samme kode for å sentrere ren tekst og en hel nettside. For tekst-sentrering benyttes text-align: center; f.eks. <span style=”text-align: center;>Sentrert tekst</span>.

For å sentrere en hel side må denne legges inn som et "block level"-element med en spesifisert bredde. La oss si at siden skal ha en total bredde på seks hundre punkter. Vi spesifiserer bredden med width: 600px; og legger til marger på hver side med automatisk størrelse. Det vil si at innholdet holder seg til ønsket bredde, mens margene blir tilpasset automatisk, f.eks. <div style=”width: 600px; margin-left: auto; margin-right: auto;>Sidens innhold</div>.

3. Tekst-formatering

Tekst-formatering i CSS er svært enkelt og tilbyr flere muligheter enn tradisjonell HTML. De utdaterte taggene <font>, <s> og <u> er nå byttet ut med <span> og skilles kun av forskjellig stilsetting. Font-taggens tidligere attributter (color=””, face=”” og size=””) også byttet ut med stilinformasjon.

Her er noen eksempler med bruk av slik CSS:

Attributt Verdi Betydning
text-decoration underline Understreket
  line-through Gjennomstreket
font-family ... Font-navn, f.eks. Verdana, Serif
font-size ... Størrelsen, f.eks. 12px
color ... Fargen, f.eks. #ff0000 (rød)
font-variant small-caps Små bokstaver blir omgjort til mindre blokkbokstaver.
line-height ... Linjens høyde, f.eks. 1.4
letter-spacing ...px Mellomrom mellom bokstavene, f.eks.12px
text-align center Sentrert tekst
  left Venstre-justert tekst
  right Høyre-justert tekst
  justify Utfyllende tekst (justert både til høyre og venstre)

Mer informasjon

Dette er bare et lite utdrag av hva som er mulig med CSS. Du finner mer informasjon her:

Kommentarer (40)

Norges beste mobilabonnement

Mars 2017

Kåret av Tek-redaksjonen

Jeg bruker lite data:

Komplett MiniFlex 1GB


Jeg bruker middels mye data:

Telio FriBruk 5GB+EU


Jeg bruker mye data:

Komplett MaxiFlex 10GB


Jeg er superbruker:

Komplett MegaFlex 30GB


Finn billigste abonnement i vår mobilkalkulator

Forsiden akkurat nå

Til toppen