HTML Fra Bunden - (Begynder Artikel)

 

- Introduktion

Nu har jeg bestemt mig for efter jeg selv har kodet lidt HTML og CSS i et halvt årstid, at lave en artikel med det grundlæggende, dette er en artikel for totalt begyndere, så hvis du selv er god til HTML, vil den her artikel spilde din tid.
|1.0 Hvad du skal bruge.|

Hvis du bruger Windows er det eneste du skal bruge Notesblok/Notepad.

Hvis du ikke bruger Windows, skal du bruge en tilsvarende simpel teksteditor: f.eks. Pico hvis du bruger Unix/Linux eller Simple Text, hvis du er Mac-bruger.

|2.0 struktur|

Først skal du åbne din teksteditor.

så starter du med at skrive:

 <html> 


Det fortæller din teksteditor at du nu vil til at kode HTML.

HTML's struktur er bygget op af et hoved/head og en krop/body

Først laver man sit hoved/head, i hovedet fortæller du hvad siden skal hedde i browseren, det ser sådan her ud:

[CODE}]
<html>

<head>

<titel> min første side </titel>

</head>

Nu vil der så stå "min første side" oppe i den blå browseren.

Lige en anden grundlæggende ting, når du åbner et tag ( fx <html> ) skal du altid bruge den her kommando: <tag> når du så vil lukke det igen bruger du så den her kommando: </html>

nu videre i din websites struktur, nu skal du lære hvordan kroppen/body kommandoen virker.

Men først lidt information om hvilke ting du kan lave i dokumentes krop/body.

Kroppen/body er det sted i dokumentet, hvor du bestemmer følgende ting: tabeller,layout & billeder. og en hel masse andre ting, men jeg vil kun komme ind på de områder i min guide.

Nu skal vi lave vores første side:


<html>

<head>

<titel> Min Første Side </titel>

</head>

<body>

Min første side.

</body>

</html>



Nu skal du så gemme siden som: test.html

når du koder i HTML, skal du altid gemme din som .html


|3.0 - Layout| ALT LAYOUT SKAL SKRIVES UNDER <body>

Okay først skal vi lære at skifte linje:
[CODE}
hej mit navn er Kasper
<p> Jeg er 16 år Gammel.
[/CODE)

Du skal selvfølgelig stadig væk have lavet dit hoved/head, før du begynder med din krop/body, den del med hoved/head springer jeg over i den her del af artiklen.

Man kan også lavet et støre linjeskift sådan her:


Hej mit navn er Kasper
<br />
Jeg er 16 år gammel


du kan også Lave din skrift om til fed skrift sådan her:


<b> Hej mit navn er kasper.
<p> Jeg er 16 år gammel.</b>


Du kan også lave skråskrift sådan her:


<i> Hej mit navn er Kasper </i>


Men hvis du nu skal have en overskrift inde midt på siden, så gør du bare sådan her:

 
<center><h1> Velkommen </h1></center>


Først hvad de 2 forskellige tags gør:

Center = Centeret tekst.
h1 = Stor overskrift.

Du kan også bruge h2 og h3, det er bare mindre overskrifter.

Hvis du nu skulle for brug for at lave din tekst mindre af en eller anden grund kan det også gøres ved hjælp af et simpelt tag:


<small> den her skrift er lille </small>


Hvis du vil lave en slags menu, kan du lave din tekst i punkter sådan her:


<li> Punkt A </li>
<li> Punkt B </li>
<li> Punkt C </li>
<li> Punkt D </li>


Hvad nu hvis jeg vil have min skrift lavet om til en anden farve? så skal du bare bruge følgende tag:


{
color: #FF0000;
}


Nu skulle din tekst gerne være rød. Du kan finde mange farve kode rundt på nettet, dette er bare en af mange.

OBS! Dette er dog ikke en html kode, men en CSS kode.

Så nu til sidste Tag, du vil gerne have gerne have lavet din baggrund sort, så skriver du bare følgende kode:


{
background-color: #000000;
}


nu skulle din baggrund gerne være sort.
Igen dette er bare en af mange farve koder.

koder til farver, er de samme til tekst og baggrunds farver.

|4.0 - Tabeller| TABELLER LAVES OGSÅ UNDER BODY

Det lyder måske svært, men det er faktisk meget nemt at lave en tabel.

Din første tabel:


<table>
<tr>
<td>Celle 1</td>
<td>Celle 2</td>
</tr>
<tr>
<td>Celle 3</td>
<td>Celle 4</td>
</tr>
</table>
[/CODE}

Nu har lavet en tabel, problemet er bare at den ikke har nogen ramme rundt om sig, det viser jeg hvordan man gør lige om lidt, først vil jeg lige forklare hvad de forskellige tags gør:


<Tabel> Fortæller dokumentet at du vil lave en Tabel.

<tr> Fortæller dokumentet ay du vil begynde på en ny tække i din tabel.

<td> laver en ny celle.


Nå, nu vil vi gerne have en ramme om vores Tabel, så den ikke ser så grim ud mere:


<tabel border="1">


Nu har du så en ramme om din tabel, du kan ramme om din tabel større ved at ændre tallet til fx. 10.

Du kan også bestemme hvor mange % af skærmbilledet din tabel skal fylde, det gør du sådan her:


<tabel border="1" width="10%">


Nu vil din tabel så fylde en 1/10 af dit skærbillede.

|5.0 - Indsætning af billeder|

At indsætte billeder, er noget af det nemmeste at gøre du skal bruge følgende tag:


<img src="">


"img" står for "image" = billede på dansk.
"src" står for "Source" = kilde på dansk.

så det du skal gøre er at give taget det link til den folder/mappe du vil hente dit billed fra.

lige et eksempel:

vi siger nu du har et billede liggende i en mappe der hedder billeder, så src er i dette tilfælde billeder.

derefter kommer billedets navn så, billedet hedder, edward, og billedet er gemt som en .gif fil.

så koden vil komme til at se sådan her ud.


<img src="billeder/edward.gif" />


Jah meget simpelt, du kan selvfølgelig også hente andre billede filer som, JPEG & PNG.

JPEG & GIF er dog de mest brugte.

Det var så alt fra mig.

Hvis du har nogle spørgsmål, så skriv endlig til min email, eller add mig på MSN på:

Joergensen_02@hotmail.com

Håber min guide kan hjælpe nogle af jer nybegyndere.















Skrevet af: | Dato : 2008-07-16 23:4 | Læst : 8931 gange