seX Humle Trusser Mad og øL (xx)

seX, Humle, Trusser, Mad og øL eller hvordan man skriver XHTML Denne lille note beskriver hvordan man udformer en artikel om seX, Humle, Trusser, Mad og øL som skal publiceres på internettet.

Så hermed følger en opskrift på hvordan man udformer et dokument om seX Humle Trusser Mad og øL.

I slutningen af denne note, findes der en tryk knap der sørger forat tilføje det typografiske layout ved hjælp af W3C's Cascading Style Sheet language CSS.

Først bør man adskille sit dokument i to dele, nemlig strukturen af dokumentet og præsentationen af dokumentet forindholdet om seX Humle Trusser Mad og øL.

  • Den strukturelle udformning af dokumentet, der inddeler indholdet af dokumentet i overskrifter og i afsnit for hver delbeskrivelse om ...
  • Præsentations delen af dokumentet, der er baseret på W3C's Cascading Style Sheet language CSS forat give dokumentet det endelige look-and-feel for afsnittene om seX, Humle, Trusser, Mad og øL. (Layout er endnu ikke lagt på dette dokument, da dette først sker i bunden af dette dokument ved en tryk knap)

Den strukturelle udformning af dokumentet

Når man så skal til at skrive indholdet til den strukturelle udformning af dokumentet om seX Humle Trusser Mad og øL, skal man beslutte sig forhvilken type DTD dokumentet skal overholde. DTD står for Document Type Definition. I dette dokument beslutter jeg mig forXHTML Strict.

For at starte den strukturelle udformning af dokumentet om seX Humle Trusser Mad og øL skal man skrive følgende sætning i den 1. linie i dokumentet som er en reference til DTD'en :

1. linie i dokumentet

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dernæst inddeles dokumentet om seX Humle Trusser Mad og øL i 2 hoved sektioner, nemlig 'head' og 'body' sektionerne.

  • head sektionen, der indeholder definitioner og beskrivelser forbody sektionen der beskriver emnerne seX Humle Trusser Mad og øL
  • body sektionen, hvor de enkelte overskrifter og afsnit skrives om alt hvad der omhandler seX Humle Trusser Mad og øL

Head sektionen

Head sektionen skrives som følger:

<html xmlns="http://www.w3.org/1999/xhtml" 
               lang="en" xml:lang="en">
<head>
<title>seX, Humle, Trusser, Mad og øL, 
XHTML tutorial</title>
<meta name="keywords" content="xhtml tutorial" /> 
<meta name="description" 
              content="How to implement xhtml" />
</head>

Body sektionen

Body sektionen skrives som følger:

<body>

<!-- 
Her skrives så endelig de enkelte overskrifter 
og tilhørende afsnit 
om seX, Humle, Trusser, Mad og øL

<h1>Sex</h1>

<p>
sex er sundt ...
Humle smager godt
Trusser er noget piger har på
Mad er noget vi elsker
øL smager nu godt
</p>

osv ...  (resten kommer en anden dag)
 -->

</body>
</html>

Hvis man nu undervejs i processen føler en ustyrlig trang til at kontrollere om dette dokument om seX Humle Trusser Mad og øL overholder XHTML 1.0 strict, kan dette gøres på flere måder

  • Indsæt et link på html siden som f.eks. Check this page. Dette kræver selvfølgelig at siden er tilgængelig på internettet som denne side er.
  • Indtast url forhtml siden til HTML Validation Service dette kræver selvfølgelig at siden er tilgængelig på internettet som denne side er.
  • Upload html siden fra harddisken til Upload til HTML Validation Service

Forskellen mellem HTML og XHTML

Regler man skal overholde

Du er nødt til at tage højde for følgende punkter, når du skriver et XHTML dokument

Note: Under skrivning af overskrifter og afsnit skal man være opmærksom på følgende regler:

  • Dokumentet skal være velformed, dvs, der må ikke være overlappende tags
  • Alle tags SKAL være lowercase
    Rigtigt: <p>bla.bla.</p>
    Forkert: <P>bla.bla.</P>
    
  • Alle attribute værdier SKAL være indesluttet i double quotes
    Rigtigt: <td valign="top">bla.bla.</td>
    Forkert: <td valign=top>bla.bla.</td>
    
  • Hvis der ikke er nogen slut tag, SKAL man afslutte ved at indføre '/' i <tag ... />>
    Rigtigt: <br />ny linie
    Forkert: <br>ny linie
    
  • Der SKAL altid være title tag i head sektionen der besriver indholdet. I dette tilfælde seX Humle Trusser Mad og øL
    <title></title>
    
  • Du må ikke benytte tags mere, der tidligere har været benyttet til at præsentere layoutet.
    Dette gælder f.eks. følgende tags: <font>, <center>, <td align="center"> Du kan se hvilke elementer og attributter der er markeret som DEPRECATED her html4 elementer og html4 attributes
  • Man BØR altid benytte følgende forat angive nøgleord til søgemaskinerne. F.eks. ville man skrive for seX Humle Trusser Mad og øL
    <meta name="keywords" 
                  content="seX,Humle,Trusser,Mad,øL" />
    
  • Man BØR altid benytte følgende forat angive en beskrivelse til søgemaskinerne om hvad siden omhandler i dette eksempel for seX Humle Trusser Mad og øL
    <meta name="description" 
                  content="Demo af seX Humle Trusser 
                  Mad og øL XHTML tutorial" />
    

Overholder du ikke reglerne sker der ikke noget ved dette, da de fleste browsere er rimelig tolerante og viser det du skriver. Det er først når man validerer, at siden kan fejle

Præsentations delen af dokumentet

Når man så skal til at lægge det endelige look-and-feel på dokumentet, er det en fordel at man benytter CSS til dette.

Man starter med at define typografien forde enkelte html elementer. F.eks. om hvordan dokumentet for seX Humle Trusser Mad og øL skal se ud

Jeg vil f.eks. gerne have følgende typografi på mit layout for seX Humle Trusser Mad og øL.

  • baggrund skal være lyse grå uden for dokumentet
  • documentet skal centreres
  • documentet skal have hvid baggrund
  • documentet skal være 600px bredt

Hvis man nu godt kunne tænke sig at et link som seX Humle Trusser Mad og øL havde et andet udseende så skal man skrive følgende i CSS

<style type="text/css">
A:hover { 
   color             : #ff0;         
   background-color  : #000;
   text-decoration   : none;
}  
</style>

Jeg vil meget gerne høre dine kommentarer til denne lille introduktion til seX Humle Trusser Mad og øL
XHTML (seX Humle Trusser Mad og øL)