Videre med HTML
I min første artikel introducerede jeg jer til det grundlæggende HTML - hvad HTML er, hvilke programmer du kan bruge for at skrive dine HTML-koder og ikke mindst lidt om hvordan HTML er opbygget.
HTML - tags tags tags
Et tag består af et en "kommando" indrammet i krokodillemunde, eksempelvis:
<b>Denne tekst skrives med fed</b>
Over her har jeg lavet et tag rundt om teksten, tagget b, står for "bold" som betyder "fed", ved at indramme en tekst i b-tags, bliver teksten skrevet som fed. Et andet eksempel kunne være kursiv, som indrammes i <i> for italic:
<i>Denne tekst skrives med kursiv</i>
Overstående tekst bliver nu skrevet med kursiv. Der er altså et tag for hver funktion man ønsker. Man kan også kombinerer to tags samtidig:
<b><i>Denne tekst skrives både med fed og kursiv</i></b>
Overstående vil resulterer i en tekst både skrevet med fed og kursiv.
Som jeg nævnte i min tidligere artikel, er HTML blot en bunke tags som over her, de sættes sammen og danner rammer om dit layout, indehold som tekster og billeder og ikke mindst din tekstformatering som skrifttyper, størrelser mv.
Standard-skelettet
Den nemmeste måde at komme i gang med HMTL er at tage udgangspunkt i standard-skabelonen - også kaldt skelettet for HTML. Skelettet er grundstenen i enhver hjemmeside. Skelettet er delt i to afdelinger - head og body.
<Head> er alle de ting som man ikke direkte ser på hjemmeside, altså alt andet end indholdet. I starten skal vi ikke rigtig bruge head, til andet end at definerer titlen på hjemmesiden. Senere kommer vi ind på hvordan head-tagget yderligere kan bruges til f.eks. at fortælle Google hvad denne side handler om, indsætte Javscript og CSS-filer og meget mere.
<Body> er alt indholdet på hjemmesiden. Tekster, billeder, videoer osv. I denne artikel og over de næste artikler vil vi primært fokuserer på body-sektionen.
Alt fra start til slut indrammes i <html> tagget.
Her er standard-skabelonen
<html> <head> <title></title> </head> <body> </body> </html>
Enhver hjemmeside i verden bygger over denne standard skabelon.
Men lad os komme i gang med at lære de mange tags.
Allerførst skal vi definerer vores titel på siden, titlen fremgår i browservinduet og hjælper brugerne til at se hvilke vinduer/faner der hører til hvilke sider.
Titlen skal skrives imellem <title>-tagget, eksempelvis
<title>DanielsMotorcykel.dk - Forside</title>
Nu kan du gemme dit dokument med filnavnet index.html og prøve at åbne det i en browser som eksempelvis Internet Explorer, Firefox eller Google Chomre. Du vil nu se en som side med din titel i browserens titellinje. Titlen bliver også vist i søgemaskine-resultater, så skal du sørge for din titel kan fortælle, hvad din webside handler om.
Der er somsagt flere tags, du kan placere inde i <head>, ligesom meta, link og script. Jeg kan forklare mere om dem i en anden artikel senere, nu går vi videre til <body>.
Overskrifter og afsnit
Overskrifter og afsnit er de mest almindelige elementer i HTML. Der findes seks forskellige overskriftstyper i HTML du kan bruge. Den største hedder <h1> og kaldet "Overskrift 1", der er seks niveauer af overskrifter, fra H1 til H6, hvor H6 er den mindste skrifttype.
Hvert afsnit indrammes i <p>-tags, dette giver automatisk linjeskift imellem de forskellige afsnit i teksten på hjemmesiden.
<h1>Jeg elsker HTML </h1> <p>Hej mit navn er Daniel, jeg elsker HTML og glæder mig til at lære jer en masse om at lave hjemmesider</p>
Husk disse kodeks skal placere inde i body-tagget, som vist i det komplette eksempel under her:
<head> <title>Daniels HTML Hjemmeside</title> </head> <body> <h1> Jeg Elsker! HTML </h1> <p>Hej mit navn er Daniel og jeg elsker HTML</p> </body> </html>
Du kan nu gemme dine ændringer som index.html igen og åbne HTML-filen i browseren. Du bør nu få en webside som dette:
Nu har vi fået lavet en simpel hjemmeside med en overskrift og en tekst. Det sidst vi skal gennemgå i denne artikel er formatering af denne tekst. Vi skal arbejde med to forskellige formaterings tags, nemlig fed og kursiv.
Fed tekst
Der er to forskellige måder at lave fed tekst på, den ene er tagget <b> og den anden er tagget <strong>.
Begge gør det samme, og den eneste forskel i de to tags ligger i hvordan "Oplæsningsprogrammer", altså programmer der kan oplæse en hjemmeside med robot-tale udtaler ordene. Hvis en tekst er markeret med <b>-tags vil et opløsningsprogram ikke læse teksten anderledes, hvorimod hvis det er markeret i <strong>-tags vil et oplæsningsprogram læse det op som FED tekst. Begge tags ser ens ud på skærmen.
<p>Hej mit navn er Daniel, jeg <b>elsker HTML</b> og glæder mig til at lære jer en masse om at lave hjemmesider</p>
Kursiv tekst
Der er ligesom med fed, to forskellige måder at lave kursiv tekst på. Forskelliger ligger ligeledes i hvordan oplæsningsprogrammer læser teksten højt.
<i> er ligesom <b> - teksten bliver kursiv, men oplæsningsprogrammer læser teksten almindeligt. <em> er ligesom <strong> og får oplæsningsprogrammer til at læse teksten op som kursiv.
<p>Hej mit navn er Daniel, jeg <b>elsker HTML</b> og glæder mig til at lære jer <i>en masse om</i> at lave hjemmesider</p>
Gem igen din side, med samme filnavn: index.html og nyd din første hjemmeside i din favorit browser.
God fornøjelse