Log ind

**kiksen** · 23-09-2014, 14:52

Programmer din første hjemmeside med HTML 1

Gennemgang

Introduktion
Hjælpeværktøjer
Første kode
Slutning

Introduktion
I denne guide/tutorial vil der blive gennemgået basal HTML kode. Hvordan man installere en hjælpeværktøjet Brackets og tilsidst skrive sin første HTML kode.
HTML står for HyperText Markup Language, har primært til formål at strukturer indholdet på en hjemmeside, få billeder og links til at virke. Alle hjemmesider bruger HTML i deres kode. Hvis du vil i gang med at lære at lave hjemmesider, så er du det helt rigtige sted.

Hjælpeværktøjer
Der findes mange hjælpe værktøjer ude på nettet der er gode til at skrive hjemmeside kode i. Du kan faktisk bare bruge notesblokken hvis det er det du har lyst til, det vil jeg dog ikke anbefale, da der ikke er syntax highlighting i (lyse din kode op i farver, så den er nemmere at læse). I denne guide vil jeg bruge hjælpeværktøjet Brakets, hvilket jeg har været glad for at bruge.
Du kan downloade Brackets gratis på deres officielle hjemmeside http://brackets.io/

Din første kode
Du er nu nået så langt i guiden, at vi skal til at kigge på vores første kode.
Åbn nu Brackets -> Filer -> Ny derefter gemmer du html filen ved at skrive navnet på filen efterfulgt af .html
sådan kunne filen se ud "test.html"
Når dette er gjort vil der komme syntax highlighting på koden.

Start med at skrive:

<html>

    <head>

    </head>

    <body>

    </body>

</html>

I linje 1, starter vi med at fortælle browseren vi gerne vil skrive html kode.
I linje 2, starter head tagget, det er der man skriver alt det der ikke skal ses på hjemmesiden, det kunne være meta tag man bruger til SEO(Search Engine Optimization), eller at vi gerne vil inkludere andre programmeringssprog til hjemmesiden.
I linje 3, fortæller vi browseren vi gerne vil slutte vores head tag, hver gang man slutter et tag vil der altid være et / i tagget.
I linje 4, starter vi på body tagget det er der alt på siden vises billeder,tekst og links.
I linje 5, slutter vi på body tagget.
I linje 6, fortæller vi browseren vi er færdig med vores kode.

Prøv engang at åbn filen, din browser vil automatisk åbne filen, da den kender til html. Din browser vil være helt blank, der vil ikke stå noget overhovedet. For at det skal stå noget skal vi ændre lidt i koden.

<html>

    <head>

    </head>

    <body>

        Kiksen er meget sej, tak for guiden.

    </body>

</html>

Skriv dette og din browser vil printe det ud på skærmen. Fantastisk, men det kan blive bedre endnu. Hvis vi anvender headers. Headers anvendes til at skrive overskrifter. Header tagget ser sådan ud og kan gå fra 1-6.

<html>

    <head>

    </head>

    <body>

        <h1>Dette er en header 1</h1>

        <h2>Dette er en header 2</h2>

        <h3>Dette er en header 3</h3>

        <h4>Dette er en header 4</h4>

        <h5>Dette er en header 5</h5>

        <h6>Dette er en header 6</h6>

    </body>

</html>

Når du åbner filen i browseren vil du se header 1 vil være den største og derefter gå ned til header 6 som er den mindste. Nu når vi har lært at skrive en overskrift, så skal vi da også lære at skrive nogle flere tags.

<html>

    <head>

    </head>

    <body>

        <h1>Denne guide er god</h1>

        Da <strong>kiksen</strong> har skrevet denne dejlige guide <br />

        <em>Vil jeg gerne takke ham</em>

    </body>

</html>

Der kom 3 nye tags ind vi lige skal gennemgå.
 skriver teksten fed slutter for teksten skal være fed
 skriver teksten italic slutter for teksten skal være italic
 er en line break, det vil være det samme som når du trykker enter i word. I html skal du lave line break for at den går ned på næste linje og skriver.

Slutning
I denne guide har du lært grundprincipperne i at skrive HTML kode. Der er meget mere der skal læres indenfor html, så du kan ikke pralle med at du kan html endnu.
Den næste guide vil komme, når jeg har lidt tid igen til at skrive den.
Jeg har brugt en lidt over en time og kostet en halv pakke smøger at skrive denne guide, så lidt feedback vil være på sin plads

Spagnum · 23-09-2014, 15:11

Fin guide mr kiks, der skal nok være nogen der for glæde af den :)

Lecheffer · 23-09-2014, 17:34

Har længe tænkt på at skrive en guide på html og css fordi det er så let, og man kan alligevel få så meget ud af det!
Jeg synes din guide er mægtig fin! Vil nok også skrive en engang hvis jeg får tid eller lyst! Venter dog spændt på næste guide og se hvad du har og fortælle :)

**kiksen** · 23-09-2014, 18:30

1000 tak for feedback, jeg har som valgt at skrive guides i det, da jeg ved det basale og jeg er i gang med at lære mere. Så kan jeg huske det bedre ved at skrive en guide. Så jeg bedre forstår.
Men det er mere php jeg er i gang med :)

**Mr Phantom** · 23-09-2014, 21:19

En som mig som fatter hat af kodning osv fik faktisk rigtig meget ud af den. Stor ros fordi du er så god til at forklare det og gøre læseren opmærksom på hvad personen "skal" det er ikke rodet eller noget. Super fin guide! +2

Lecheffer · 24-09-2014, 01:44

(23-09-2014, 18:30)kiksen Skrev: "Så kan jeg huske det bedre ved at skrive en guide. Så jeg bedre forstår."

Det har også været mit store problem at huske. Jeg har aldrig rigtig kunnet fortælle mine venner "Hey skal jeg vise dig hvordan man laver en hjemmeside?". Det tog mig meget længe før jeg lærte at bruge tags som jeg nu skriver ind med det samme jeg åbner min text editor og skriver <html><head></head><body></body></html>... Jeg kan ikke engang putte css ind fordi jeg ikke kan huske <link rel= udenad, og det er pinligt at skulle google et hver gang for at finde frem til link= rel=stylesheet blablabla. Det hjælper meget at skrive det ned i forståelse for at andre kan lære det og jeg synes at det er pisseflot, det er ikke alle der er lige gode til at lære fra sig men du gør det framragende, ligesom mange andre herinde der har lavet nogle super flotte guides!(y) Jeg burde selv gøre det og jeg har også noget i tankerne men jeg er bare lazy as fuck!

**kiksen** · 24-09-2014, 19:13

Lecheffer ->
1000 tak skal du have.Jeg er heller ikke god til at tage mig sammen til sådan noget. Men her den anden dag, tænkte jeg at nu skal det være.
Jeg gjorde det og det lykkedes godt :)

**Doctor Blue** · (Denne besked var sidst ændret: 24-09-2014, 20:03 af Doctor Blue.)

Jeg synes der mangler lidt grundlæggende viden om tags og hvordan man nester dem korrekt, altså at etellerandether er forkert. Desuden er det også en god idé at lære folk at inkludere en doctype lige fra starten. HTML 5 er dejlig nem at huske.
<!DOCTYPE html>

Du kaster nemlig begrebet "tag" omkring dig i forventning om at læseren ved hvad det er.

**kiksen** · 25-09-2014, 14:08

Tak for feedback doctor blue, det vil jeg rette i weekenden. Samt skrive en guide mere :)

**Henta24** · (Denne besked var sidst ændret: 14-10-2014, 23:06 af Henta24.)

Jeg synes at du helt klart skulle indkludere CSS oveni hatten med det samme. Ved godt at det er smart at lære diverse små grundlæggende tags i starten, men efter en time med det, eller når man har opsnappet teorien og lige set dem ved at bruge diverse tags til styling osv. Vi bruger html minimalt, resten er masser af CSS og PHP :D men ellers en fin lille intro guide til HTML :)

Log ind
Brugernavn
Kodeord:	Glemt kodeord?
	Husk mig