HTML for webredaktører

Webredaktører oplever det hver dag. Der er kopieret tekst ind på hjemmesiden, og uanset hvad du gør, bliver der ved med at dukke andre skrifttyper, størrelser, afstande, farver, m.m. op i teksten.

Funktionerne i CMS’ets editor til at rydde formatering hjælper ikke, og problemet består, uanset hvad du gør. Til sidst spørger du den nærmeste, der kan lidt kode. Personen klikker på kode-knappen i editoren, alt bliver volapyk, og på kort tid er problemet væk.

Det kan du også lære — og det er nemt!

Den nemme løsning

Enhver webredaktør bør huske den gyldne regel, når det kommer til at kopiere indhold fra andre kilder som Word-dokumenter, andre hjemmesider osv.: Kopier altid først indholdet over i et program, der fjerner al formatering.

I Windows er et udmærket bud Notepad. På MAC kan TextEdit bruges, hvis man husker at sætte formateringen til “Plain text”.

Det fjerner de fleste problemer, men sommetider kan der stadig dukke tekststykker op med forskellige farve, størrelse eller skrifttype.

En gennemsnitlig artikel på nettet består af få forskellige elementer som afsnit, overskrifter, punktopstillinger og links. Hvis du ved, hvordan ‘ren’ kode ser ud, så kan du nemt opdage de dele, der giver problemer.

Sådan finder du koden

Langt de fleste webredaktører skriver i editorer, der giver mulighed for at se koden bag formateringen. Det er forskelligt, hvordan koden kaldes frem, men som regel finder du en knap, der hedder “View source”, “</>” eller, som i WordPress, ved at skifte fra “Visual”-modus til “Text”-modus.

Når først du kan se koden, har du næsten ubegrænset mulighed udrydde uønsket formatering.

Afsnit

Afsnit er det, der fylder mest i de fleste artikler på nettet.

Et afsnit ser sådan ud i kode:

<p>Det her er et afsnit.</p>

Det ovenstående giver:

Det her er et afsnit.

Afsnit er et såkaldt block-level element. Dvs. at hvert element ikke vises ved siden af hinanden, men under og over.

Denne kode:

<p>Afsnittet vises på block-level.</p>
<p>Det står altså ikke efter hinanden.</p>

Giver dette:

Afsnittet vises på block-level.
Det står altså ikke efter hinanden.

I HTML-kode gør det ingen forskel, om der er mellemrum i koden eller om der er linjeskift.

Denne kode:

<p>Første afsnit.</p><p>Andet afsnit.</p><p>Tredje afsnit.</p>

Giver dette:

Første afsnit.
Andet afsnit.
Tredje afsnit.

Det er vigtigt at være opmærksom på, for ofte er koden til en artikel én stor klump uden nogen linjeskift eller opsætning.

Typiske fejl

Det er meget ofte i afsnittene, at der er fejl i koden. Teksten bliver kopieret fra f.eks. Word, og der er gemmer sig koder, som skaber problemer.
(Se originalartikel på martinove.dk for nøjagtig formatering.)

Her er et typisk eksempel:

<p style=”font-size: 20px;”>Hele dette afsnit bliver vist med skriftstørrelse 20.</p>

Giver dette:

Hele dette afsnit bliver vist med skriftstørrelse 20.

Bemærk stykket style=”font-size: 20px;”. Det stykke kode gør, at hele afsnittet vises med skriftstørrelse 20. Ofte er det skriftstørrelse eller skrifttype, der bliver kopieret med over.

Samme type fejl kan også se sådan ud:

<p>Dette afsnit bliver vist med normal skriftstørrelse, men <span style=”font-size: 20px;”>dette bliver vist med skriftstørrelse 20.</span></p>

Det giver:

Dette afsnit bliver vist med normal skriftstørrelse, men dette bliver vist med skriftstørrelse 20.

Span-tagget gør det muligt at lave andre farver, størrelser osv. midt i en linje. Det er derfor også en jævnlig gæst, der sniger sig med ind i editoren fra f.eks. Word.

I det ovenstående vil løsningen være helt at fjerne span-tagget, så der står:

<p>Dette afsnit bliver vist med normal skriftstørrelse, og nu gør dette også.</p>

Det giver:

Dette afsnit bliver vist med normal skriftstørrelse, og nu gør dette også.

‘Ren’ kode’

Nøglen til at kunne gennemskue HTML-kode og finde problemet, er at vide, hvad koden bør indeholde.

Nogle tags er i sin simpleste form mere enkle end andre. Et afsnit behøver som vist ovenfor blot at bestå at et start-tag og et slut-tag:

<p></p>

Andre elementer på siden er mere indviklede. Det gælder f.eks. lister:

<ul>
  <li>Første</li>
  <li>Anden</li>
  <li>Tredje</li>
</ul>

Giver dette:

• Første
• Anden
• Tredje

Hvert punkt på listen består af et list-item-tag med start og slut ligesom afsnittet. Men i modsætning til afsnittet omkranses de enkelte punkter på listen af tagget for “Unordered list”.

Bemærk at det også her er ligegyldigt, om der er linjeskift i koden. Denne kode er giver nøjagtig det samme som ovenfor:

<ul><li>Første</li><li>Anden</li><li>Tredje</li></ul>

Elementer med attributter

Nogle elementer har tags, der skal bruge mere yderligere oplysninger for at fungere. Det sker ved attributter. Det kan være forvirrende, for faktisk var det en attribut, der gav problemerne med skriftstørrelsen i de tidligere eksempler!

Et af de tags, der skal bruge en attribut for at fungere, er tagget for links:

<a href="http://dr.dk">Klik her for at komme til dr.dk</a>

Det giver:

Klik her for at komme til dr.dk

Attributten er i dette tilfælde dér, linket fører til. Et link giver ingen mening uden, så det skal være der. Det er denne del af koden:

href="http://dr.dk"

Det samme gælder for et andet almindeligt element på hjemmesider, nemlig billeder. Tagget for et billede giver ingen mening, hvis ikke det har en adresse at hente billedet fra.

Denne kode:

<img src="http://martinove.dk/wp-content/uploads/2015/08/DSC_5284_fuld-1-e1440275753497.jpg" />

Giver dette:

Tagget for billeder er ét af dem, der ikke har en start og en slutning. Trækker man adressen til billedet fra, står der blot:

<img src="" />

Det er altså med andre ord ikke alle attributter, der giver problemer, tværtimod. Nogle er nødvendige.

Opslagsværk

Nedenfor finder du en liste over de mest almindelige elementer.

Afsnit:

<p></p>

Link:

<a href=""></a>

Billede:

<img src="" />

Liste (uordnet):

<ul>
  <li></li>
</ul>

Liste (ordnet):

<ol>
  <li></li>
</ol>

Fed tekst:

<strong></strong>

Overskrifter (i varierende størrelse):

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Kontakt

Giver denne artikel mening? Har den hjulpet dig eller er det volapyk?

Fang mig på @mocdotcom eller google.com/+MartinOveChristensen, og stang mig en kommentar eller spørgsmål.

Denne artikel blev først udgivet på: http://martinove.dk/2015/08/22/html-for-webredaktorer/