HTML på en ryddig måte - forståelse og bruk

HTML-kurs ved Nettverksgruppa for Aktivitetsuken 2000

Introduksjon

Internett er fullt av informasjon. Det som kjennetegner mesteparten av denne informasjonen er at den er formulert i et språk som heter HTML. Tanken bak HTML er at man har et dokument hvor man har markert overskrifter, referanser, tabeller og punktlister, dvs. man forteller hvordan dokumentet er oppbygget. Oppgaven for nettleseren blir så å presentere denne informasjonen på en lettoppfattelig måte for brukeren.

Brukeren behøver ikke nødvendigvis å se informasjonen på en skjerm, det kan være hun har fått informasjonen skrevet ut på papir. Hvis brukeren er blind foretrekker hun kanskje at datamaskinen leser opp informasjonen for henne, eller viser den på en Braille-list. Informasjonen kan også bli behandlet maskinelt, for eksempel av en søkemotor, som legger særlig merke til overskrifter og avsnitt og kan optimalisere søkene sine på den måten.

Det er derfor viktig å skjønne teknologien som ligger bak, slik at du kan lage dokumenter som er leselige av flest mulig. På dette kurset vil du ikke bare lære teknologien, men også hvordan du kan bruke denne på en enkel og oversiktlig måte, slik at du skjønner hva du driver med og ikke gjetter på måfå.

Syntaks

syn~tak´s

m1 (fra gr, -taks av taxis 'ordning, oppstilling')

1. (beskrivelse av) regler for hvordan en kan lage setninger el. deler av setninger på et gitt språk, ordføyningslære
2. i edb: forhold mellom tegn og tegngrupper innenfor et dataspråk

Syntaks er nødvendig for å forklare hvordan man kan uttrykke seg i HTML. Syntaksen sier ganske enkelt hvilke tegn og nøkkelord du kan bruke for å strukturere dokumentet.

Elementer

For å strukturere informasjonen i et dokument plasserer man dem i elementer. Et element kjennetegnes ved at det starter og avslutter med en såkalt tag. Tagger gjenkjennes lett ved at de er omkranset av tegnene < og >.

<p>
    Dette er et eksempelavsnitt. Inni et eksempelavsnitt
    skriver man eksempelsetninger. Eksempelsetninger skrives
    som alle andre setninger, bare at de er idiotiske
    og ikke har noen mening.
</p>
          

I eksempelet ser vi at vi starter avsnittet med <p>, og avslutter det med </p>. <p> angir at dette er et avsnitt, p for paragraph på engelsk.

<p>
    Dette er et eksempelavsnitt.
    Inni et eksempelavsnitt skriver man eksempelsetninger.

          Kort sagt.


</p>
           

Alle linjeskiftene og ekstra mellomrom blir glatt ignorert i den endelige fremstillingen til brukeren. Dette må man alltid ha i tankene, slik at man ikke bare trykker [enter] i teksteditoren og håper at da blir det nytt avsnitt på magisk vis. Samtidig er dette en styrke, ved at man kan skrive selve HTML-koden på en måte som gjør det enklere å se strukturen, ved å bruke mellomrom og linjeskift fornuftig. Vi skal se mer på hvordan du kan skrive ryddig kode senere.

HTML kommer med en rekke forskjellige elementer som kan brukes. Elementene kan grovt sett deles inn i to kategorier, blokkelementer og linjeelementer. Linjeelementer er elementer som kan følge hverandre på samme linje, som for eksempel de forskjellige ordene i et avsnitt (elementene flyter langs linjen). Blokkelementer er elementer som blir adskilt fra hverandre vertikalt, som avsnitt og overskrifter. Linjeelementer kan kun inneholde andre linjeelementer, mens blokkelementer som regel kan inneholde linjeelementer. Noen blokkelementer kan også inneholde andre blokkelementer.

La oss konkretisere litt nøyere ved å introdusere noen nye elementer. Linjeelementet em (emphasis på engelsk) kan brukes til å angi at deler av teksten er viktigere og bør utheves ifra den vanlige teksten, f.eks. ved hjelp av kursiv eller fet skrift, eller kanskje ved hjelp av en annen farge eller hvis det er en talesyntese som leser dokumentet kan datamaskinen lese ordet mer klart ved å lese det sakte. Hvis noe skal utheves særskilt kan man bruke elementet strong.

<p>
    Dette er et kort <em>avsnitt</em>. Avsnitt brukes
    til å gjøre teksten mer <strong>leselig</strong>.
</p>
          

Som nevnt er em et linjeelement og det vil derfor være feil å ha et avsnitt innenfor elementet. <em><p>Blapper smaker godt</p></em> vil ikke være riktig, og resultatet i forskjellige nettlesere blir udefinerbart. Noe som er enda viktigere er å huske å avslutte elementene, og det i samme rekkefølge som de er startet. Det vil si at du ikke må glemme sluttagene, og ihvertfall ikke skrive <em> Flapp med <strong> brød </em> er godt </strong>. Hvilket element er inni hvilket her? Er strong inni em, eller er den litt utenforbi? Nettleseren kan bli forvirret, og for alt vi vet kan den finne på å tolke resten av dokumentet som en del av em-elementet. (Netscape finner ofte på slikt)

Attributter

Et element kan også ha attributter, det vil si egenskaper. Attributtene angis bare i starttagen, ikke i sluttagen. Attributter er som regel alltid på formen egenskap="verdi". I noen tilfeller er det egentlig ikke nødvendig å ha "-fnutter rundt verdien, men det er enklere å være konsekvent og alltid bruke dem istedet for å huske og vurdere hver gang om de er nødvendige eller ikke. Du kan også bruke enkle apostrofer ' istedet, for eksempel hvis det er ønskelig å bruke tegnet " inni verdien. Hvis du skal angi flere attributter skiller du dem med mellomrom eller linjeskift, for eksempel <p align="right" id="blapp"> Følgende eksempel vil indikere at avsnittet skal høyrestilles.

<p align="right">
    Dette er et eksempelavsnitt. 
</p>
          

I forrige eksempel la vi merke til at vi ikke bare angav strukturen i dokumentet, men også utseendet. Vi vil om litt kunne se hvordan dette kan gjøres på en penere måte, ved å skille struktur og utseende ved hjelp av såkalte stilsett. På den måten kan du holde selve dokumentdelen ryddig og oversiktlig.

Selvavsluttende elementer, img

Nå skal vi introdusere et viktig element, nemlig elementet for å sette inn bilder. img står for engelsk image, og er et linjeelement, det vil si at det kommer på samme linje som teksten der det settes inn.

<p>
    Dette er min beste venn: <img src="tux.png"
        alt="Tux leser avisen" /> Er han ikke søt?
</p>
          

Eksempelet demonstrerer hvordan img-elementet enkelt flyter på linjen sammen med teksten. Dog blir det ikke særlig lekkert, den ene tekstlinjen blir tvunget til å være like høy som bildet. Vi skal vise at med litt enkel posisjonering vil bildet enkelt flyte på plass ved siden av teksten, nemlig ved å slenge på attributtet align="right". Bildet vil da istedet oppføre seg som et blokkelement og plassere seg på høyresiden av teksten, slik som her.

Det er flere ting å legge merke til når det gjelder img-elementet. Vi sa tidligere at man må huske å avslutte alle elementene. Men hvordan avsluttes et bilde? Hva er inneholdt i bilde-elementet? Vel, det er bare bildet selv, så elementet blir avsluttet allerede i starttagen med skråstreken du ser sist, <img .. />. Legg også merke til at forfatteren har brukt linjeskift for å slippe å få hele tagen på en eneste lang linje. Dette er fullstendig lovlig, faktisk kan du legge inn linjeskift inne i attributtverdier også, men støtten i nettleserne for det kan jeg ikke garantere for.

Det er to attributter til img-elementet som er obligatoriske, det er src og alt. Førstnevnte gir URIen til bildet (engelsk source), enten relativ eller absolutt. Hvis bildet lå i katalogen ovenfor katalogen HTML-dokumentet lå i kunne adressen blitt beskrevet som src="../bilde.jpeg".

alt (engelsk alternate text) gir en tekst som representeres istedet for bildet i de tilfeller hvor nettleseren ikke har mulighet til å vise bilder, for eksempel en nettleser for blinde eller hvis bildet ikke finnes. Noen nettlesere har også mulighet for å slå av bildelasting slik at man slipper å vente på nedlasting av grafikk. Hvis man har brukt bildet til å være et menyvalg, for eksempel, så vil det være lurt å skrive i alt-attributtet hvilket menypunkt det er.

Entiteter

Det er ikke alle tegn som du kan finne på å bruke som er like lette å få frem i et HTML-dokument. To tegn som du kanskje skjønner kan være problematiske er < og >. Disse brukes jo til å angi en start- eller sluttag, hvordan kan man bruke disse uten at det blir tolket feil? Vel, nettopp for slike situasjoner har man noe fint noe som heter entiteter. Entitet betyr egentlig bare «noe som finnes». Entiteter begynner med tegnet & og slutter med tegnet ;. For å skrive < og > kan man skrive < og &gt, som står for henholdsvis less than og greater than. Nå introduserte vi også et nytt problem, hvordan skriver vi da &? Løsningen er &, ampersand. Du kan uttrykke massevis av tegn på denne måten, for eksempel hvis du sitter i USA og skal skrive æøå uten å ha riktig tastatur, da kan du bruke henholdsvis æ, ø og å. Store bokstaver er Æ, Ø og Å.

Entiteter kan benytter hvor som helst i HTML hvor du ellers kan skrive tekst, det vil si også i attributtverdier. Derfor må du bruke & hvis du for eksempel har en lenke til en URL som http://www.firma.com/cgi-bin/adresser.cgi?navn=Jens&avdeling=2.

<p>
    For &aring; angi uthevet skrift brukes starttaggen 
    &lt;em&gt; og sluttagen &lt;/em&gt;
</p>
          

Kommentarer

Mange ganger kan det være fornuftig å bruke kommentering i HTML-koden din. Det kan være du vil notere for deg selv hva du egentlig har gjort på et finurlig sted, eller du vil kanskje midlertidig koble ut deler av et dokument, gjerne i forbindelse med feilsøking.

Måten man kommenterer på i HTML er ved hjelp av starttagen <!-- og sluttagen -->. Alt imellom disse to blir ignorert av nettleseren. Pass på at du ikke bruker to (eller flere) bindestreker -- etter hverandre innenfor det som er kommentert ut, det slår nemlig av igjen kommenteringen.

<p>
    Her er jammen meg enda et av disse avsnittene,
    altså. Alltid avsnitt.
        <!-- <img src="spennendebilde.jpg" width="640" height="480"
                alt="Oi, så spennende!"> -->
    Aldri noe spennende.
</p>
         

Dokumentet

Et HTML-dokument består i sin helhet av et html-element. Innenfor dette elementet har man to elementer, head og body. I head-elementet forteller man ting om selve dokumentet, som kommer i body.

<html>

    <head>
        <title>HTML på en ryddig måte - forståelse og bruk</title>
        <meta name="author" content="Stian Søiland" />
    </head>

    <body>
        <p>
            HTML er en fin måte å uttrykke seg på, man markerer
            teksten med koder, og nettleseren fremstiller teksten.
        </p>
    </body>

</html>
          

Vi legger merke til to elementer innenfor head, hvorav et av dem er selvavsluttende. Det første elementet, title, angir, ja, du gjettet riktig, tittelen på dokumentet. Denne tittelen brukes av nettlesere på tittellinjen, i bokmerker og oversikter. Søkemotorer viser gjerne titlene på de forskjellige dokumentene i sine oversikter. Tittelen bør være kort og beskrive dokumentet. Du kan ikke ha noen andre elementer innenfor title-elementet, så du må uttrykke deg med rene ord. I tillegg kommer et generelt meta-element. Dette brukes til å angi diverse data, i dette tilfellet angir vi forfatteren av dokumentet.

Det neste elementet, body skal inneholde hele dokumentet. Det er tillatt med både blokkelementer og linjeelementer innenfor, men jeg vil anbefale at du bare bruker blokkelementer, og har linjeelementene inne i blokkelementer.

Flere elementer

Overskrifter

I et typisk dokument vil det være minst én overskrift. I dette dokumentet er det ca. 40 overskrifter. Overskrifter angis med elementer som <h1>. Tallet 1 angir her at overskriften er på høyeste nivå. Man kan ha underskrifter helt ned til sjette nivå i HTML. I nettleseren indikeres vanligvis overskrifter med stor skrift, og gjerne litt avstand før og etter.

<h1>Tittelen på dokumentet</h1>

<h2>Første deloverskrift <h2>
    <p>Bla bla bla</p>

<h2>Andre deloverskrift</h2>
    <p>Bla bla bla</p>
    <p>Bla bla bla</p>
          

Det er viktig at overskriftselementene ikke blir brukt til andre ting enn overskrifter, og at man ikke bruker andre elementer istedet for overskriftselementene når det er snakk om en overskrift. Overskriftselementene er blokkelementer, men kan kun inneholde linjeelementer, slik at hvis det på en side er slik at et bilde egentlig er en overskrift kan dette gjøres slik: <h1><img src="overskrift.png" alt="Ingrids hjemmeside" /></h1>. Gjør man det slik vil overskriften bli markert som overskrift for alle som ikke kan se bildet, slik at overskriften ikke forsvinner i den vanlige tekstflyten.

Lenker

En grunnleggende egenskap ved et dokument uttrykt i HTML er at det kan inneholde lenker. En lenke er en referanse til en annen ressurs, hovedsaklig på Internett. Samlingnen av alle HTML-dokumenter og tilhørende ressurser som er lenket sammen kalles World wide web.

<p>
  Det var slik man fant ut at <a href="elefanter.html">elefantene</a>
  tok over verden. <a href="http://www.vg.no/">VG</a> hadde en
  artikkelserie om elefantene i 1983.
</p>
           

Lenker presenteres gjerne som understreket tekst med en annen farge, men ved hjelp av stilsett kan du angi selv hvordan lenkene skal fremstilles i visuelle nettlesere.

a-elementet kan inneholde linjeelementer, og man kan derfor bruke bilder som lenker, for eksempel som: <a href="meg.html"><img src="meg.png" alt="Meg" />.

Generelle gruppering

Noen ganger ønsker man å gruppere en rekke elementer, enten fordi de logisk hører sammen eller fordi man ønsker å gi dem en utseendemessig egenskap ved hjelp av et stilark. Til slike anledninger har HTML to elementer som i seg selv ikke forteller noenting, men som kan inneholde andre elementer.

Elementet div er et blokkelement, og kan brukes til å gruppere både blokk- og linjeelementer. Du kan tilogmed gruppere andre div-elementer hvis det skulle passe deg. For å koble elementet mot egenskaper gitt i stilark benyttes attributtene class og/eller id.

Tilsvarende har en elementet span som er et linjeelement. Du kan bare gruppere linjeelementer innenfor span. Et typisk bruksområde for dette elementet er hvis du vil gi deler av et avsnitt typografiske egenskaper uten at du vil markere disse delene som viktige med for eksempel <em>.

<div class="meny">
    <p>[menypunkt1]</p>
    <p>[menypunkt2]</p>
    <p>[menypunkt3]</p>
</div>
<p>
    <span class="fornavn">Stian</span> <span class="etternavn">Søiland</span>
</p>
           

Lister

<ul>
    <li>Vaske bilen</li>
    <li>Hente hunden i barnehagen</li>
    <li>Lage middag</li>
</ul>
<ol>
    <li>Finn en stikkontakt</li>
    <li>Sett i pluggen</li>
    <li>Slå på fjernsynsapparatet</li>
</ol>
<dl>
    <dt>Studentutvalget</dt>
        <dd>Hjelper deg med hva det måtte være.</dd>
    <dt>Velferdstinget</dt>
        <dd>Samler inn semesteravgift og deler pengene ut igjen.</dd>
    <dt>Studenttinget</dt>
        <dd>Synser og mener ting om så mangt</dd>
</dl>
           

ul-elementet inneholder en uordnet liste, det vil si en punktliste. Hvert av punktene angis med li-elementer. Kun li-elementer er tillatt innenfor listen, men innenfor li er både blokk- og linjeelementer tillatt. En ordnet liste, ol angir punktene på samme måte, men her blir hvert punkt markert med et stigende tall.

dl, definisjonslisten, er litt annerledes oppbygd. Den består av en liste med termer og beskrivelser. Termen som skal beskrives angis innenfor dt-elementet, og beskrivelsene innenfor dd-elementene. Legg merke til at innenfor dt kan du bruke linjeelementer, mens innenfor dd kan du bruke både blokk- og linjeelementer.

Tabeller

Tabeller er svært nyttige når man skal presentere datamangder. En tabell består av rader og kolonner, som utgjør cellene. I HTML angis en tabell radvis, slik eksempelet vil vise.

<table>
    <thead>
        <tr> <th>Navn</th>          <th>Fagområde</th>   <th>Telefonnummer</th> </tr>
    </thead>
    <tbody>
        <tr> <td>Jens Jakobsen</td> <td>Fysikk</td>      <td>91484</td> </tr>
        <tr> <td>Kari Olsen</td>    <td>Informatikk</td> <td>94815</td> </tr>
        <tr> <td>Ingrid Hauge</td>  <td>Historie</td>    <td>98482</td> </tr>
    </tbody>
</table>
           

Innenfor elementet tr, table row, er der to muligheter, th som brukes på header-celler, det vil si celler med en overskrift som brukes til å beskrive noe annet i tabellen. td, table data, angir vanlige tabellceller. Vi har gruppert tr i to elementer, thead og tbody. Sammen med tfoot er dette elemter som angir hvilke deler av tabellen som er statiske og hvilke som er dynamiske. I en veldig stor tabell kan nettleseren la radene inneholdt i thead og tfoot stå stille på skjermen mens man scroller innenfor tbody.

Tabeller kan også (mis)brukes til utforming av et dokuments utseende. Siden td-elementet kan inneholde blokkelementer kan man plassere hele dokumentdeler innenfor hver sin tabellcelle for å plassere disse på skjermen slik man ønsker det. Det anbefales at man forsøker å bruke stylesheets i kombinasjon med div-elementet for å oppnå slik formattering.

Stilsett

Vi nevnte i begynnelsen at vi ønsket å skille struktur og utseende. For å gjøre dette tar vi i bruk noe som kalles stilsett. Tenke deg at du har et dokument, fiks ferdig strukturert, med ferdigmarkerte overskrifter, uthevinger og inndelinger. Hva om du nå bare kan si at alle h2-elementer skal ha rosa skrift, blinke og ha et gusjegrønt bakgrunnsbilde og god avstand over men ikke under?

Vel, det kan du. Verktøyet heter CSS, som står for Cascading Style Sheets. Vi behandler bare CSS overfladisk nå, spesifikasjonen til CSS1 er såpass grei at når man har fått basisforståelsen holder det med den og litt prøving og feiling.

body {
    background-color: white;
    color: black;
    text-align: justify;
    margin: 1em;
}
h1,h2,h3,h4 {
    font-family: arial, helvetica, sans-serif;
    background-color: white;
    color: #b86;
}
        

Stilsettet over setter først egenskaper for body, deretter for h1, h2, h3 og h4 samlet. Alt mellom { og } er egenskaper som settes. Til venstre for kolon står det hvilken egenskap som skal settes, for eksempel color, og til høyre for kolon står det hva denne egenskapen skal settes til, for eksempel black. Man avslutter hver egenskaptilordning med semikolon.

Dette stilsettet setter bakgrunnsfargen for dokumentet til hvit. I tillegg blir det satt en marg rundt hele innholdet av dokumentet ut ifra en typografisk standardstørrelse em som er relativ til den skriftstørrelsen som måtte gjelde for elementet. Teksten i body-elementet skal være svart, og den skal være blokkjustert.

Det prinsippet til CSS nå sier er at egenskaper arves. Det vil si at hvis elementet body inneholder for eksempel et table-element, så vil innholdet i dette elementet også bli formattert med sort skrift og blokkjustert tekst. Noen egenskaper arves ikke, som for eksempel marg, iogmed at det ikke virker logisk at det skal settes samme marg på alle underliggende elementer.

Hver av elementene h1, h2, h3 og h4 blir gitt egenskaper for skrifttype, farge og bakgrunnsfarge. Nettleseren bruker tre forskjellige stilsett på dokumentet før den viser det endelige resultatet til brukeren. Først legger den på sitt standardstilsett, som for eksempel sier at h1 skal være såså stor og at standardmargene er så som så. Deretter legger den på brukerens stilsett, og til slutt legger den på dokumentets stilsett. (I noen nettlesere kan brukeren dog bytte om på disse, slik at hennes stilsett blir brukt oppå dokumentets.) Det som da kan bli et problem er at brukeren kan ha oppgitt i sine preferanser at han liker sort skrift på brun bakgrunn for overskrifter. Hvis stilsettet vårt kun setter fargen på overskrifter til brun uten å si noe om bakgrunnsfargen, kan vi risikere at det kommer brun skrift på brun bakgrunn. Derfor oppgir vi alltid background-color når vi oppgir color og motsatt.

Koble stilsett med dokument

Et stilsett kan knyttes til et dokument på to måter. Den ene måten er ved å inkludere et <style type="text/css">-element innenfor <head>-elementet, det andre er å ha stilarket i en egen fil som man lenker inn ved hjelp av link-elementet. Følgende eksempel viser et dokument hvor man har kombinert disse to teknikkene.

<html>
    <head>
        <title>HTML på en ryddig måte - forståelse og bruk</title>
        <link href="/stylesheet.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            body {
              background-color: white;  /* overstyrer fargene i stylesheet.css */
              text: black;
            }
        </style>
    </head>
    <body>
      ..
    </body>
</html>
          

Her introduserer vi også hvordan man foretar kommentering i CSS. Man starter en kommentar med /* og avslutter med */.

Klasser og identifisering

Hvert eneste element i HTML som er en del av elementet body kan ha attributtene class og id. Flere elementer kan ha samme verdi for class, men bare ett element i hvert dokument kan ha samme id.

<p class="farge">
  <em class="farge">Viktig informasjon:</em>
  <strong id="inntaksstopp"> Det er inntaksstopp</strong>
</p>
          

.farge {
  color: maroon;
  background: white;
}
em.farge {
  font-size: large;
}
#inntaksstopp {
  font-family: helvetica, arial, sans-serif;
}

          

Legg merke til at vi kan angi egenskaper generelt for alle elementer som er med i klassen farge med .farge, og samtidig gi spesielle egenskaper til em-elementene som er medlem av klassen. Siste del av stilsettet gir egenskaper for det (eneste) elementet som har id="inntaksstopp".

Det er verdt å legge merke til at bare egenskapene arves, ikke klassetilhørigheten. Her skiller CSS seg ifra det gamle klassesystemet som rådet i Europa på 1800-tallet. Dersom vi i eksempelet ovenfor ikke hadde hatt med class="farge" i em-elementet ville «Viktig informasjon» fortsatt blitt skrevet med mørkerød farge, for den egenskapen arver den ifra p-elementet, men den ville ikke fått større skrift, som er definert for em-elementer som er medlem av klassen farge.

Størrelser

Mange av egenskapene i CSS angir størrelser. Man vil angi hvor stor skrift man vil ha, hvor stor marg, hvor bred en ting skal være, osv. Det finnes flere måter å oppgi slike størrelser på. Den ene måten er ved å bruke absolutte størrelser, og den andre er å bruke relative størrelser.

En absolutt størrelse vil si at et element med den angitte stilen vil bruke den samme størrelsen uansett hvor det befinner seg. Du kan oppgi absolutte størrelser i mange forskjellige enheter, som tommer eller milimeter, men den vanligste er punkter, og brukes slik: p { font-size: 12pt; } Du bør kun bruke absolutte enheter for medier med kjente egenskaper, som ved utskrift på papir.

Relative størrelser, på den andre siden, kan brukes i alle sammenhenger. Det vanligste er å oppgi relative størrelser i prosent eller ved hjelp av enheten em. em er en vanlig typografisk enhet, og 1em er i et gitt typesett et kvadrat, brukt til å angi mellomrom. I mange skrifttyper er 1em like langt som bredden av en stor M. Det viktige å få med seg er at 1em er relativt til den aktuelle skriftstørrelsen i elementet.

Størrelser i prosent % referer til foreldreobjektet. Hvis man oppgir at et element skal være 100% bredt vil det forsøke å fylle foreldreobjektet med hele sin bredde. I noen få tilfeller kan det være hensiktsmessig å angi størrelser i piksler med px, for eksempel når man setter inn et bilde og man oppgir størrelsen i CSS slik at nettleseren kan tegne opp dokumentet før den har hentet bildet for å få vite hvor stort det er.

Det anbefales å bruke relative størrelser der det er mulig, slik at det blir enkelt for brukeren å angi sine egne preferanser. En svaksynt bruker kan for eksempel ha satt standardskriften sin til 18 punkter så han klarer å lese teksten, selv om han jo må scrolle litt mer på websidene. Hvis du da kommer og setter overskrifter til 12 punkters størrelse og teksten til 10, så har du allerede mistet en leser. Bruker du derimot relative størrelser fornuftig kan du ønske alle velkommen.

Egenskaper

Her er de egenskapene som du kanskje mest får bruk for. Flere er definert i spesifikasjonen.

Noe av det vanligste designere liker å spesifisere er skriftegenskaper. Vi velger å vise de vanligste egenskapene med et eksempel.

blockquote {
    font-family: times, "times new roman", serif;
    font-size: large;
    font-style: italic;
    font-weight: bold;
}
          

La oss ta for oss egenskapene i rekkefølge. font-family er en liste over foretrukne skrifttyper. Det er viktig at du tenker på at alle ikke har de samme skriftene installert. For å helgardere deg er det derfor i tillegg til å gi flere mulige preferanser også en generell skriftfamilie til sist, denne er enten serif, sans-serif, cursive, fantasy eller monospace. Hvis et skriftnavn inneholder mellomrom bruker du anførselstegn slik som i eksempelet.

font-size bruker vanlige lengdeenheter. Det man dog må være oppmerksom på er at for skriftstørrelser referer relative størrelser alltid til foreldreelementets skriftstørrelse. For skriftstørrelser har man i tillegg noen praktiske absolutte størrelser, xx-small, x-small, small, medium, large, x-large og xx-large. Disse kan brukes uavhengig av mediet, og den faktiske størrelsen av disse avgjøres av nettleseren. Tilsvarende finnes det relative nøkkelord, larger og smaller.

Som en hovedregel bør du benytte relative størrelser for skriftstørrelser. html-elementet vil ha en standard skriftstørrelse fra nettleseren, og hvis du da har body { font-size: 110%; } så vil skriftstørrelsen i dokumentet bli 110% av normal størrelse gitt av nettleseren/brukeren. Husk på at standardstørrelsen kan variere, så å leke med sin egen nettleser med font-size: 80% til man har akkurat den skriften man vil ha ikke vil være noen god løsning.

Siden størrelsen em ellers alltid referer til gjeldende skriftstørrelse i elementet anbefales det å alltid benytte % eller larger/smaller til relative skriftstørrelser. Typografene rister på hodet over angivelser av skriftstørrelser i em.

De to resterende egenskapene er enkle å forklare. font-style: italic; sier at teksten skal skrives i kursiv, og font-weight: bold; angir at det skal brukes fet skrifttype. Hvis et element har arvet en slik egenskap kan du reversere den ved å gi den egenskapen normal istedet for bold eller italic.

Marger og bokser

Ethvert element kan bli gitt egenskaper for marger og rammelinje. Dette er vanligvist brukt på blokkelementer, men virker også på linjeelementer. Du kan få et element til å bli fremstilt som en «boks», med bakgrunnsfarge og ramme, en gitt bredde og høyde. Du kan også spesifisere hvordan den skal plasseres i dokumentet.

margin angir hvor meget plass man skal sette av utenfor elementet. Det er flere måter å spesifisere denne egenskapen på, de to vanligste er å enten spesifisere marg for alle 4 sider samtidig med margin: 1em;, den andre er å spesifisere marg spesifikt for hver enkelt side med margin-left: 2em; osv. Merk deg forskjellen mellom å bruke em som størrelsesenhet, som er relativ til skriftstørrelsen, og %, som her er relativ til lengden og bredden av foreldreelementet. (Forsøk å forandre størrelsen på nettleservinduet)

p.midtstiltprosent {
  margin-left: 15%;
  margin-right: 15%;
}
p.midtstiltem {
  margin-left: 4em;
  margin-right: 4em;
}
          

Elementer kan tenkes på som små bokser, ihvertfall hvis vi tenker på blokkelementene. Vi skal om litt se hvordan vi kan sette bakgrunn for slike bokser, først skal vi sette en ramme rundt.

div.boks {
    border-width: thin;
    border-color: black;
    border-style: solid;
}
          

Dette er de tre egenskapene man angir til en ramme. Først bredden, som kan være thin, medium eller thick eller angitt som en standardstørrelse. Deretter har vi angitt fargen. Vi skal gå nærmere inn på hvordan man spesifiserer farger om litt. border-style kan være blant annet none, solid double, dotted. Utdypende informasjon står i spesifikasjonen.

Hvis du ønsker å ha forskjellig utseende på noen av rammesidene kan du for hvert av disse egenskapene liste opp egenskapsverdier fire ganger, som da vil gjelde i rekkefølgen topp, høyre, bunn, venstre, eksempelvis border-width: thin thick thin thick;.

margin-egenskapene sa hvordan margene var på utsiden av rammen. Hvis man ønsker å beskrive margene på innsiden av rammen, kan man bruke padding på akkurat samme måte, dvs. si hvor stor avstand det skal være mellom rammen/ytterkanten av elementet og innholdet i elementet.

Bakgrunner og farger

Med CSS kan du for alle elementer spesifisere ikke bare farge og bakgrunnsfarge, men også bakgrunnsbilder. Når man benytter seg av farger og bakgrunner er det dog viktig at man sørger for at resultatet blir leselig. Husk også at overdrevent bruk kan være helseskadelig.

Farger kan beskrives på forskjellige måter i CSS. En måte er å bruke fulle navn, men siden det bare er 16 (fæle) standardfargene som er definert, kommer denne metoden fort til kort. En må istedet beskrive en farge ut ifra hvordan den er satt sammen av fargetoner i rød, grønn og blå. Hvis man kan regne heksadesimalt (telle til 16 istedetfor til 10) kan man benytte heksadesimal skriveform #ffcc88 eller ganske enkelt #fc8 om man ikke vil være så detaljert. Bildebehandlingsprogrammer presenterer ofte en slik heksadesimal kode når man velger en farge i paletten.

Om man blir skremt av å telle helt opp til F istedet for til 9, bør man kanskje prøve rgb()-metoden istedet. I CSS kan du skrive rgb(255,128,191) istedet for #ff80bf for å beskrive samme farge. Hvert enkelt tall er fortsatt for henholdsvis rød, grønn og blå fargetoner, og styrken beskrives med et tall som er i området [0;255]. Det finnes enda en mulighet, og det er å angi tallene som prosenter istedet. rgb(100%, 50%, 75%) gir samme farge.

body {
    background-color: rgb(99%, 90%, 85%);
    color: rgb(67%, 47%, 33.3%);
}
          

Som nevnt tidligere bør man alltid definere bakgrunnsfarge sammen med forgrunnsfarge. I tillegg kan man definere et bakgrunnsbilde hvis det skulle sømme seg:

body {
    background-color: rgb(99%, 90%, 85%);
    background-image: url(papir.png);
    color: rgb(67%, 47%, 33.3%);
}
          

Legg merke til url()-funksjonen. Denne kan ta både relative og absolutte adresser. Vær oppmerksom på at relative adresser vil gjelde i forhold til stilsettets adresse, ikke dokumentets. Dette får betydning når man skiller ut stilsettet i en egen fil som lenkes inn ifra HTML-dokumentet. background har også noen gøyale egenskaper, eksempelvis background-repeat: no-repeat, background-attachment: fixed og background-position: center center; Se spesifikasjonen for flere detaljer.

Generelt

a:link, a:visited: a:active { text-decoration: underline; } gjør at alle lenker i a-elementer blir vist med understreking. Vi introduserer her samtidig såkalte psevdoklasser som gjelder spesielt for a-elementet. a:link gir egenskapene for ubesøkte lenker, a:visited gir egenskapene for besøkte lenker og a:active gir egenskapene for lenken brukeren er i ferd med å klikke på. Vi kan bruke disse psevdoklassene til å forandre hva som er fargen på lenker i et dokument. Hvis vi ønsker å foreslå at lenkene ser best ut uten understreking kan man bruke text-decoration: none;.

p.hoyre { text-align: right; } gjør at teksten i p-elementer som er medlem av hoyre-klassen får teksten høyrejustert. Mulige verdier er left, right, center og justify. Sistnevnte vil si blokkjustering.

body { line-height: 130%; } beskriver linjehøyden, eller avstanden mellom baselinjen til to etterfølgende linjer. Lengden er relativ til skrifttypens høyde. En har også body { letter-spacing: 1em; } som angir hvor stort mellomrom det skal være mellom to bokstaver i tillegg til det vanlige mellomrommet. Tilsvarende har en word-spacing for tillegg i avstanden mellom ord. Begge disse to siste egenskapene kan være både positive og negative, slik at en kan få bokstavene til å stå tettere eller mer spredt.

CSS lar deg selvsagt også spesifisere hvordan en listestruktur skal se ut.

ul {
    list-style-type: disc;
    list-style-image: url(hake.png);
}
          

Oversiktlig kode

Vi vil her komme med forslag til teknikker for å skrive HTML på en måte som gjør det enklere å ha oversikt over koden og dermed unngå feil, eller i det minste lettere fikse feil.

Tenk elementer

Alt i HTML er elementer. Elementene i et dokument kan fremstilles i en trestruktur, hvor hvert element er underordnet et annet. Under følger en sterkt forenklet versjon av hvordan elementene i dette dokumentet hører sammen.

html
|-- head
|   |-- title
|   |   `-- HTML på en ryddig måte
|   `-- style
|       `-- ...
`-- body
    |-- h1
    |-- `-- HTML på en ryddig måte
    |-- p
    |   |-- bla bla...
    |   `-- em
    |       `-- HTML
    |-- h2
    |   `-- Syntaks
    |-- dl
    |   |-- dt
    |   |   `-- syntaks
    |   `-- dd
    |       |-- p
    |       |   |-- m1 (fra gr,
    |       |   |-- em
    |       |   |   `-- -taks
    |       |   `-- ...
    |       `-- ol
    |           |-- li
    |           |   `-- (beskrivelse av) ..
    |           `-- li
    |               `-- i edb: forhold ..
    `-- address
        `-- a
            `-- stain@nvg.org
        

Pass på at det ikke forekommer blokkelementer inni typiske linjeelementer, slik som i <em> Flapp og hei .. <p> blapper uten grenser</p> flapper <em>.

Avslutt alle elementer

Gjør det til en hovedregel at med en gang du har skrevet en starttag skriver du sluttagen samtidig. Deretter fyller du inn elementets innhold mellom disse. På denne måten skal det litt til å glemme å avslutte et element, siden du alltid vil ha sluttagen liggende. Ikke fall for fristelsen å åpne et avsnittselement med <p> uten å ta med </p>. Det er lovlig etter spesifikasjonene, men det ødelegger tankegangen for deg selv om at du arbeider med elementer som inneholder hverandre. Vær konsekvent, husk å avslutte elementer som ikke har noen sluttag.

Følg spesifikasjonene

Ved å HTML-spesifikasjonen sørger du for at dokumentene dine ikke bare virker i dagens nettlesere, men også i morgendagens nettlesere. Ved oppdatering minskes faren for at nettlesere plutselig skal oppføre seg merkelig, fordi du har oversikt over dokumentstrukturen og

Bruk innrykk

Ved å benytte seg av innrykk får du lett oversikt over hvilke elementer som er inneholdt hvor. Det gjør det enklere å finne feil, og også enklere å flytte på deler av dokumentet. Du bør selv finne ut hvilken innrykkingsstil som passer deg best. Her kommer noen varianter:

Alle blokkelementer innrykkes uansett

  <body>
      <h1>
          Overskrift
      </h1>
      <ul>
          <li>
              <div class="egg">
                  <p>
                      Kort avsnitt.
                  </p>
              </div>
          </li>
      </ul>
  <body>
            

Legg merke til hvordan du veldig enkelt kan sjekke at alle elementer er avsluttet, og at det er ingen tvil om at det korte avsnittet er en del av punktlisten. Samtidig ser vi at dette blir fort veldig stort.

Forenklet innrykk

  <body>
      <h1>Overskrift</h1>
      <ul><li>
          <div class="egg">
              <p>Kort avsnitt.</p>
          </div>
      </li></ul>
  <body>
            

Her har vi forkortet litt der vi mener det ikke er nødvendig med innrykk, for eksempel i det kortet avsnittet, som man lett identifiserer som et enkelt avsnitt. Siden det bare er et punkt i punktlisten har vi også slått sammen ul og li på samme linje. Fordelen med denne metoden er at koden ikke ser ut som et stort trekkspill. Ulempene er at man ikke like lett klarer å identifisere de enkelte elementene, for eksempel om <li> er riktig avsluttet. Hvis koden forandres må det merarbeid til, for eksempel hvis vi skal legge til et til punkt på punktlisten kan vi lett risikere å miste den ene </li>en, og om avsnittet blir lengre kan </p> bli vanskeligere å få øye på.

Bruk av linjeskift

  <body>

  <h1>Overskrift</h1>

  <ul>

  <li>

  <div class="egg">
      <p>Kort avsnitt.</p>
  </div>

   </li>

   </ul>
  <body>
            

Denne metoden går ut på at man bruker linjeskift rikelig slik at man kan se hvilke deler av koden som logisk henger sammen. Metoden er grei for små dokumenter, men det blir fort vanskelig å kontrollere sin egen kode for feil. Det blir også lettere å sette inn nye elementer på feil sted i en slik modell. Metoden kan brukes om man bare har tilgang til en veldig enkel editor hvor det å bruke innrykk fører til så mye merarbeid at det ikke lønner seg.

Logisk innrykk

<body>
    <h1>Overskriften</h1>
        <p>Dette er et avsnitt først</p>
        <h2>Deloverskrift</h2>
            <p>Dette er et avsnitt som en del av første seksjon.</p>
            <p>Dette er et annet avsnitt. Dette er også med.</p>
        <h2>Andre deloverskrift</h2>
            <p>Dette er et avsnitt som en del av andre seksjon.</p>
            <p>Dette er et annet avsnitt. Dette er også med.</p>
</body>
            

Denne innrykksmetoden tar hensyn til hvilke logiske deler som hører sammen. Avsnittene hører til under hver sine deloverskrifter, selv om de ikke er inneholdt i elementene til deloverskriftene. Å bruke innrykk slik gjør det veldig enkelt å finne frem til rette sted i dokumentkoden siden du enkelt kjenner igjen de ulike delene av teksten. Den viser på den andre siden ikke så godt hvilke elementer som er inneholdt i hvem.

Det beste er kanskje å prøve kombinasjoner av disse metodene til du føler at du har funnet den beste måten å arbeide på. Mennesker er forskjellige. Hvis flere skal arbeide på de samme dokumentene, noe som ofte er tilfelle, snakk med de andre om hvilke metoder de foretrekker, og forsøk å finn en gylden middelvei. Det er viktig at en er konsekvent i metodevalget, hvis ikke kan det lett bli rotete.

Stians forslag

<body>

    <h1>Overskriften</h1>
        <p>Dette er et avsnitt først</p>

    <h2>Deloverskrift</h2>
        <p>
            Dette er et avsnitt som en del av første seksjon.
        </p>
        <p>
            Dette er et annet avsnitt. Dette er også med.
        </p>

    <h2>Andre deloverskrift</h2>
        <p>
            Dette er et avsnitt som en del av andre seksjon.
        </p>
        <p>
            Dette er et annet avsnitt. Dette er også med.
        </p>
</body>
            

Separer struktur og utseende

• Si mest mulig om strukturen i HTML-koden, og minst mulig om utseendet.
• Forsøk å unngå elementer og attributter som har med utseendet å gjøre, såsom <font> og width="100".
• Angi logisk struktur ved hjelp av klasser og id, og spesifiser mest mulig av utseendet i stilarket.
• Bruk div- og span-elementene til å angi generelle strukturer som ikke er støttet av HTML.

Bruk evaluatoren

http://validator.w3.org/ sjekker dokumentet ditt opp mot spesifikasjonen du har valgt å bruke og forteller deg om eventuelle feil.

Referanser

http://www.w3.org/TR/html4/

Spesifikasjonen for HTML 4.01 er veldig utfyllende og er stappet med eksempler.

http://www.w3.org/TR/xhtml1/

Gjeldende HTML-spesifikasjon er en XML-implementering av HTML 4.01. Spesifikasjonen beskriver foreløpig hvilke forskjeller det er fra vanlig HTML 4.01, så man er avhengig av å lese begge spesifikasjonene.

http://www.w3.org/TR/REC-CSS1

CSS1-spesifikasjonen kom i desember 1996, og er veldig kort og lett forståelig, men fyller kanskje ikke alle behov for stilsetting av dokumenter.

http://www.w3.org/TR/REC-CSS2

CSS2 går mye dypere enn CSS1, og har mange spennende saker, som lagposisjonering. Det er bare å vente i spenning på at støtten kommer i nettleserne.

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/

Dette w3c-notatet beskriver hvordan man bør gå frem for å lage dokumenter som flest mulig kan støtte.