Lær HTML

Fra Wikibooks, den frie samling af lærebøger
Gå til: navigation, Søg

HTML står for Hyper Text Markup Language. En HTML fil er en tekst fil, der indeholder små markup tags. Markup tags fortæller browseren, hvordan den skal vise siden. En HTML fil skal have endelsen: .htm eller .html

Tags[redigér]

"Tags" er det browseren læser og oversætter inden den viser en hjemmeside for dig. Tags er engelsk (udtales også på engelsk) og betyder egentlig etiket eller mærkat. Det er altså en slags mærkater med forskellige kommandoer, du bruger til at fortælle browseren, hvordan du vil have din side til at se ud.

Alle tags har det samme format: De starter med et mindre-end tegn "<" og slutter med et større-end tegn ">".

Generelt findes der to slags tags: Åbningstags: <kommando> og lukketags: </kommando>. For at lave et lukketag skal du blot tilføje en "/" i åbningstaget. Al information, du putter mellem et åbningstag og lukketag, vil være underlagt den kommando, der står i taget.

Ingen regel uden undtagelse. Der findes et par enkelte tags, der både åbnes og lukkes i samme tag. Disse tags indeholder kommandoer, der ikke er knyttet til et specielt stykke tekst, men er en enkeltstående kommando - f.eks. et linjeskift.

Det at lære HTML er stort set ikke andet end at kende tags og lære at bruge dem.

Eksempler på tags[redigér]

Eksempel 1:

<b>Denne tekst vil blive fed</b>

Resultat: Denne tekst vil blive fed

<h1>, <h2>, <h3>, <h4> osv. giver browseren besked på at du vil lave en overskrift. (h står for heading, der betyder overskrift).

Eksempel 2:

<h1>Dette er en stor overskrift</h1>

<h3>Dette er en mindre overskrift</h3>

Resultat:

Dette er en stor overskrift

Dette er en mindre overskrift


Med store eller små bogstaver?[redigér]

De fleste browsere er i udgangspunktet ligeglad om du skriver din tags med stort, småt eller begge dele. <KOMMANDO>, <kommando> eller <KomMaNDO> vil give det samme resultat i browseren. 'Men det er god skik at skrive tags med småt. Det gør det også mere overskueligt, så du kan lige så godt vende dig til det fra starten.

Din første hjemmeside[redigér]

Eftersom du læser her er du nok interesseret i at lave en hjemmeside eller i det mindste vide hvordan. Derfor vil jeg sætte dig igang

Hvordan?[redigér]

For at lave en hjemmeside skal du bruge to ting; En teksteditor (f.eks. Notesblok/Notepad) og en browser (f.eks. Internet Explorer, Google Chrome, Mozilla Firefox)

Åben din teksteditor, som jeg for fremtidens skyld vil kalde Notepad for enkelthedens skyld. Så åben som sagt Notepad.


Hvad skal jeg lave? og Hvordan?[redigér]

Lad os starte med noget simpelt. Her laver vi en hjemmeside der skriver "Dette er min allerførste hjemmeside" HTML kan godt lyde indviklet og besværligt, men når man først forstår det, er der en mening bag alt. Din browser læser HTML på samme måde som du læser en avis eller en bog: starter oppe i venstre og hjørne og slutter nede i højre). Derfor starter HTML-dokumenter altid med det der skal komme først på din side og sluttes - af samme grund - med det der kommer til sidst. Det allerførste du skal gøre er at fortælle browseren, at du har tænkt dig at skrive HTML. Det gør du simpelt nok ved at skrive <html>. Gå derfor ind i din Notepad og skriv <html>. Som du måske husker fra afsnittet om '''tags''' er <html> et åbnings tag og det skal derfor lukkes med </html>. Dette giver Browseren besked på at du nu er færdig med at skrive HTML. Gå derfor ind i din Notepad og skriv, nogle linjer nede, </html> Nu ved Browseren, hvad du skriver og hvornår du er færdig med det (indikeret af henholdsvis <html> og </html> Derfor skal alle tags - logisk nok - skrives mellem <html> og </html> Din side skal nu have et hoved og en krop. Endnu engang stråler det af logik, da hovedet (head) skal skrives over kroppen (body). Tilføj derfor lige under dit <html> følgende <head> og </head> og under </head> skal du nu skrive <body> og </body>.

Nu skulle din side se sådan ud:


<html>

<head>
</head>

<body>
</body>

</html>

Hvis det lykkedes for dig og dit dokument ligner ovenstående, så har du lige skabt din første hjemmeside. Ikke den drømme side du havde i tankerne, eftersom dette kun vil være en blank side. Men det du har lavet, er grundskabelonen for alle dine fremtidige sider.


Nu til en rigtig side[redigér]

Din side har som nævnt to dele: et hoved (head) og en krop (body). I hovedet kan du gemme oplysninger om din side, men kroppen indeholder det, der udfører siden. Hvis du for eksempel vil fortælle browseren, hvad sidens titel er, ville det være naturligt at gøre det i <head>. Tag'et for en titel er <title>:

<title>Min første side</title><nowiki> Som jeg lovede skal vi have siden til at skrive "Dette er min allerførste hjemmeside". Det er altså det, vi vil have udført og derfor hører det som sagt til i ''kroppen'' (body): <nowiki> <p>Dette er min allerførste hjemmeside<p>

P'et i <p>-taget står for "Paragraph", som er engelsk og på dansk betyder "afsnit". Det er også meget logisk eftersom det vi lige har lavet er et afsnit for sig selv.

Med de nye tilføjelser skulle du gerne have følgende i din Notepad:


<html>

<head>
<title>Min første side</title>
</head>

<body>
<p>Dette er min allerførste hjemmeside</p>
</body>

</html>

Færdigt arbejde. Du har lavet din første rigtige side!

Nu skal den bare gemmes, så den kan åbnes i din browser. For nemhedens skyld nøjes vi i første omgang med at gemme siden på din egen computer og ikke på Internettet:

Vælg "Gem som..." under "Filer" i Notepad. Vælg "Alle filer" ("Alle Filer") i boksen "Gem som type" (Dette er meget vigtigt, da du ellers gemmer din side som et tekstdokument og ikke som en HTML-fil). Gem nu din side som f.eks. "side1.htm" (endelsen ".htm" fortæller, at det er en HTML-fil, men endelsen ".html" giver det samme resultat, så du kan selv bestemme, hvilken endelse du vil bruge).

Nu finder du det sted du har gemt din fil og åbner den.

Tillykke! Nu skulle der meget gerne stå "Dette er min allerførste hjemmeside" i din browser.

Begynd at eksperimentere[redigér]

Nu er du allerede kommet et godt stykke af vejen. Du kender nu grundformen til en hjemmeside. Du ved hvordan man gemmer den rigtigt og du kender faktisk også en række tags du kan bruge.

<p>Bruges ved afsnit. Når du starter et nyt afsnit hopper du automatisk to linjer ned.</p>
<b>Skriver teksten med fed.</b>
<h1>Overskrift</h1>
<h2>Underoverskrift</h2>
<h3>Mindre underoverskrift</h3>


Nu bliver din opgave så at eksperimentere dig frem. Få prøvet alle disse tags. Altså skal du lave dit egen side, helt uden hjælp nu. Det er fuldstændig ligegyldigt hvad du skriver af tekst. Det vigtige er at du får prøvet nogle tags. Held og lykke!

Min opdatering af bogen er nået hertil indtil videre. --Krog99 17. jun 2009, 18:21 (CEST)

Tags[redigér]

Align[redigér]

Align er et tag, som man kan bruge til at fortælle browseren, hvor på siden et objekt skal placeres... Objektet kan være hvad som helst. En tabel, tekst, eller et billede.

Eks.


<body >

<h5 align="center">Denne tekst er centreret</h5>
<h5 align="right">Denne tekst ligger op ad højre margenen</h5>
<h5 align="left">Denne tekst ligger op ad venstre margenen</h5>

</body/>

De tre attributter gør følgende:

Center: Centrerer objektet Right: Placerer objektet mod højre Left: Placerer objektet mod venstre

Lister[redigér]

Det er muligt at oprette lister i et HTML dokument. Det gøres med følgende tags:

"<ul>": Den står for "unordered list", 
hvilket  kan oversættes til "liste uden rækkefølge". 
Den bruges til at lave punkter med. 
En anden er: 
"<ol>", der betyder: "ordered list" eller "liste med rækkefølge". 
Den bruges til at lave opstille listen med tal.
For at opstille selve listen, skal man bruge følgende tags... 
"<li>", der står for: "list item" = "listepunkt"


eksempel...

<ul>
  <li>Første punkt</li>
  <li>Andet punkt</li>
  <li>Tredje punkt</li>
</ul>

Det vil så komme til at se således ud:

   * Første punkt
   * Andet punkt
   * Tredje punkt

Eksempel...

<ol>
  <li>Første punkt</li>
  <li>Andet punkt</li>
  <li>Tredje punkt</li>
</ol>

Det vil så komme til at se således ud:

   1. Første punkt
   2. Andet punkt
   3. Tredje punkt


Hvad med lidt farve?[redigér]

Baggrundsfarve:[redigér]

Man kan give sin hjemmeside en baggrundsfarve ved at skrive: bgcolor=, efterfulgt af en farvekode sat i anførselstegn(""), eller farven skrevet på engelsk. F.eks. "green", "yellow" "red". Farvekoderne består af tal og bogstaver. En fordel ved at bruge farvekoder er, at man kan vælge imellem alverdens farver... En hurtig søgning via en søgemaskine giver hurtigt utallige skemaer over disse. Nedenfor er der et eksempel, tom farver sider grøn.

<html>

<head>
<title>Min første side, nu med farve<title/>
</head/>

<body bgcolor="green">
</body/>

</html>

Hvad er en hjemmeside uden links?[redigér]

For at indsætte et link, skriver man følgende:


<a href="http://da.wikibooks.org/wiki/L%C3%A6r_HTML">Mit første link<a>

På en hjemmeside, vil det komme til at se sådan ud:

Mit første link

href er en attribut og er en forkortelse af Hypertext REFerence.