Dag 27: Bruke ekte overskrifter

Se for deg hjemmesiden din sine hovedtrekk. Det øverste nivået er merket opp med nettstedets navn. På forsiden din lister du innlegg fra flere dager, så det andre nivået ditt er merket opp med datoenes beskrivelser: «Tirsdag 16. juli 2002», eller noe lignende. Hver dag poster du flere innlegg, og hvert av dem har muligens sine egne titler. Da har du i så fall et tredje nivå også, merket opp med hvert sitt innleggs individuelle titler.

Marker nå opp nettstedet ditt ved å bruke ekte <h1>, <h2>, <h3>-tagger. Skjermlesere er avhengige av disse for å kunne tyde strukturen til sidene dine. Sidene dine har en struktur, men uten passende overskrifts-tagger kan ikke skjermlesere finne den. Jeg vil straks vise deg hvordan du bruker CSS til å få overskriftene dine til å se like ut i visuelle nettlesere som hvilke som helst <font>-basert monstrum du for øyeblikket måtte bruke.

Hvem har nytte av det?

  1. Anne har nytte av det. Straks Anne kommer til siden din sier JAWS fra om at siden har et visst antall med lenker og overskrifter. Anne kan da trykke INSERT+F6 for å høre alle overskriftene på siden din bli lest opp, eller CTRL+INSERT+ENTER for å raskt navigere gjennom siden din ved å hoppe til den neste overskriften.
  2. Jørgen har nytte av det. I Opera kan han trykke S for å hoppe til den neste overskriften, eller W for å hoppe tilbake til den forrige.
  3. Google har nytte av det. Google setter pris på godt strukturerte sider, og rangerer nøkkelord høyere når de befinner seg i taggene til ekte overskrifter. (Enda en grunn til å bruke ekte overskrifter i postenes titler.)

Hvordan gjøre det: Movable Type

  1. Definer stilen til logoen for nettstedet ditt. I malen til stilarket ditt (styles-sites.css), legger du til følgende linjer:

    h1, h2, h3 {
      margin: 0;
      padding: 0;
    }
    
    h1 {
      font-size: 20px;
      font-weight: normal;
    }
    
    /*/*/a{}
    h1 {font-size: 100%}
    /* */
  2. Definer logoen til nettstedet ditt ved å bruke en <h1>-tagg. I dine 4 viktigste maler (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), søker du så for dette:

    <div id="banner">
    <$MTBlogName$><br />

    Og erstatter det med dette:

    <div id="banner">
    <h1><$MTBlogName$></h1>
  3. Definer dine dato-overskrifter ved å bruke <h2>-tagger. Vi har allerede en klasse (class) definert for disse, så vi burde ikke trenge å gjøre noen endringer i stilarket; vi bare endrer på taggen. I dine 4 viktigste maler, søker du for dette:

    <div class="date">
    <$MTEntryDate format="%B %d, %Y"$>
    </div>

    Og erstatter det med dette:

    <h2 class="date">
    <$MTEntryDate format="%B %d, %Y"$>
    </h2>
  4. Definer titlene til innleggene dine ved å bruke <h3>-tagger. Igjen, dette innvolverer kun å endre på taggen, ikke på stilarket. I dine 4 viktigste maler søker du for dette:

    <span class="title"><$MTEntryTitle$></span>

    Og erstatter det med dette:

    <h3 class="title"><$MTEntryTitle$></h3>

Hvordan gjøre det: Radio

  1. Definer stilen til overskriftene dine. Standard-temaet til Radio bruker ikke ekte tagger for overskrifter, så vi blir nødt til å definere disse selv. (Skreddersydd til å passe, så disse eksemplene burde gjøre at sidene dine ser like ut som de gjorde før i visuelle nettlesere.)

    Dog, før vi starter, søk i ditt Home Page Template etter «h2 {». Hvis du finner en slik regel, fjern den; den er egentlig ikke brukt noen steder, og den kommer bare til å være i veien for deg:

    h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
    }

  2. OK, legg nå til disse stilene, hvor som helst i <style>-seksjonen i ditt Home Page Template:

    h1, h2 {
      margin: 0;
      padding: 0;
    }
    
    h1 {font-size: 24px}
    h2 {font-size: 13px}
    
    /*/*/a{}
    h1 {
      font-size: large;
      voice-family: "\"}\"";
      voice-family: inherit;
      font-size: x-large;
    }
    html>body h1 {
      font-size: x-large;
    }
    h2 {
      font-size: x-small;
      voice-family: "\"}\"";
      voice-family: inherit;
      font-size: small;
    }
    html>body h2 {
      font-size: small;
    }
    /* */

    Legg merke til at vi bruker relative fontstørrelser for våre overskrifter i nettlesere som har støtte for relative fontstørrelser, og absolutte fontstørrelser i Netscape 4. Denne teknikken burde se kjent ut, vi gjorde jo akkurat det samme i går.

  3. Definer overskriften for nettstedet ditt sitt navn. I ditt Home Page Template søker du for «<%siteName%>» og finner en linje som ser slik ut:

    <font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

    Endre det så til dette:

    <h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

  4. Definer overskriften for dine dato-overskrifter. I ditt Day Template søker du for «<%longDate%>» og finner en linje som ser slik ut:

    <b><%longDate%></b>

    Endre den så til dette:

    <h2><%longDate%></h2>

Les mer