Når HTML-editoren driller i dit CMS-system eller BLOG!
Her følger en gennemgang af basis html (hjemmeside kode!), som kan redde dig ud af vanskelige situationer, når siderne på din weblog eller CMS-system ikke ser ud som forventet.
At lave nye sider og opdatere gamle i CMS-systemet er som regel smertefrit og lige til. Nogle gange går det dog ikke, som vi forventer og ønsker. Her kan en lille smule grund-viden om html redde hjemmesiden, dagen og humøret. Et eller andet sted på din tekst-editor sidder muligheden for at kunne skifte til html-visning. Det er her, det hele starter!
HTML kode skrives på denne måde!
Tekst:
Almindelig tekst* (Brødtekst):
<p> din tekst her! </p>
Overskrifter (h1 – h6) – h1 (heading 1) er den vigtigste, h6 den mindst vigtige.
(Typisk bruges kun én eller to overskrifter <h1> & <h2> )
<h1> din tekst her! </h1>
<h6> din tekst her! <h6>
Nb! Koderne til de forskellige skrifttyper (almindelig skrift <p>...</p> og overskrifter <h1>...</h1>) må ikke stå inde i hinanden.
FEJL
<p> din tekst <h1> din tekst her! </h1> her! </p>
Læg mærke til at en kode begynder <..> og afsluttes. </..>
* Almindelig tekst behøver ikke at indsættes i <p> ... </p> da CMS-systemet indsætter teksten i en tabel eller div-container - men gør det til en god vane at bruge <p> ... </p> når du skriver almindelig tekst.
WordPress er en undtagelse da html-editoren ikke er en "rigtig" html-editor - den indsætter selv
<p> ... </p>
Link:
Link indsættes med følgende kode:
<a href="http://www.dit-domæne.dk"> link tekst </a>
Nb! Koden til et link kan både være udenfor og indenfor en af tekst-koderne (<p>, <h1>, <h2> etc.)
Eksempel:
<p> Her er en tekst <a href="http://www.dit-domæne.dk"> link tekst </a> her fortsætter teksten efter linket </p>
NB! Koden til link kan indeholde andre elementer end eksemplet viser. Eksempelvis kan der tilføjes title="beskrivelse af link", alt="beskrivelse af link" og target="en kode der fortæller, hvor siden skal åbne (ny eller samme side!)"
Det vigtige er her at vide, at et link begynder med : <a href="..... og slutter med </a> og at koden <a href="http://www.dit-domæne.dk/mappe/mappe/dinside.html"> er beskrivelsen af hvor siden dinside.html er gemt - i hvilken mappe html filen ligger!
Billeder
Billeder indsættes med følgende kode:
<img src="../images/ditbilled.jpg" alt="beskrivelse af billed" />
Nb! Koden til et billed kan både være udenfor og indenfor en af tekst-koderne (<p>, <h1>, <h2> etc.)
NB! Koden til billedet kan indeholde andre elementer end eksemplet viser. Typisk er der angivet koderne : width og height som beskriver størrelsen af billedet.
En vigtig tilføjelse er koden: <img style="float:left;" src="...... som får billedet til at rykke til venstre (left) i forhold til teksten. <img style="float:right;" src="...... får billedet til at rykke til højre (right).
Ofte har man brug for at flytte et billed i forhold til teksten. Her er det ofte nemmest at sakse (<Ctrl> + <x>) selve koden til billedet og bagefter indsætte den (<Ctrl> + <v>) på det ønskede sted.
Resourser
- Tjek din html kode hos W3C - her kan fejl oftes spottes i koden. HTML Validator
- Læs mere ... og lær mere om hvordan man skriver HTML kode på http://www.html.dk