Jeg kan tydeligt huske første gang, jeg selv skulle lave en html profil. Jeg synes, det med at sætte billeder ind, var noget af det værste. For hvordan var det nu, at man skulle få fat i web-adressen på et billede? Hvordan skulle jeg da overhovedet lave billedet så stort, som jeg nu ville have det? Så da jeg endeligt havde fået sat billedet ind, kom det næste spørgsmål: Hvorfor gider teksten ikke stå ved siden af billedet?

I dette blogindlæg vil vi tage et kig på noget, som mange brugere er i tvivl om: Html-profilen. Jeg har lavet en helt ordinær profil, som I, brugere, kan tage og udfylde selv. I løbet af opslaget, vil der komme forklaringer på, hvad det egentligt er, at jeg laver i koderne. Det er ikke en særlig avanceret kode, og slet ikke en af de pæneste profiler – men for de af jer, der gerne vil lære det; er det et godt sted at starte.

Før vi begynder, vil jeg starte med at sige: Da der er mange elementer i en html-kode, er det muligvis ikke alt, jeg når at dække. Hvis du i sidste ende sidder med en masse spørgsmål, kan du tjekke World of Potters egen html-guide ud, eller sende mig en ugle.
 


For at gøre forklaringen så nem som muligt, så tager vi koden i flere dele. Vi starter op med at tage linje 1-8, som også er blevet vist på billedet.
På linje 1-2, har jeg lavet en bokskode. Man kan sådan set altid selv designe en boks, ved at skrive < div style=”Koder til hvordan den skal se ud herinde.” >.
Jeg har designet en meget simpel boks, som jeg nu vil forklare:

Padding betyder, hvor meget mellemrum, der er fra boksen kanter til teksten derinde. Nogle gange føler jeg, at en boks nemt kan se rodet ud uden padding. Når jeg skriver margin i koden, betyder det bare, hvor jeg vil placere min boks. Hvis jeg sætter min margin på auto, placerer den sig i midten, hvilket både er super nemt og smart.
Border betyder i det store og det hele, hvordan jeg vil have kanten på boksen til at se ud. Jeg kan skrive tre ting deri; jeg valgte at skrive; 1px solid black. Det første betyder, hvor stor jeg vil have den til at være, det andet betyder, hvordan kanten skal se ud (stribet, normal mm.), og det sidste er farven. Så kan man selv justere på det, alt efter, hvordan man vil have koden til at se ud.
Background-color siger selv, til de af jer, der er en haj til engelsk. Background betyder nemlig baggrund, og color betyder farve. Så ved hjælp af den funktion, kan man selv bestemme baggrundsfarven. Hvis man ikke sætter nogen baggrundsfarve ind, antager boksen den farve, som siden har i forvejen. Jeg har sat baggrundsfarven til hvid (white), som I selv kan ændre på, hvis I vil have en anden farve. Det er dog vigtigt, at baggrundsfarven skrives på engelsk.
Den sidste funktion i boksen er, hvor høj den skal være. Det kaldes height – engelsk for højde. Jeg har bare skrevet 700px, men det kan man helt selv bestemme.
Når jeg har startet min boks ud med < div >, skal boksen også helst afsluttes med < / div >. Jeg sætter først < / div > ind, når hele min boks er færdig – så jeg sætter den altså først ind nederst i koden.

I linje 3, laver jeg en overskrift. Jeg har skrevet min karakters navn ind. Ved hjælp af < font > har jeg kodet, hvor stor overskriften skulle være. Når jeg laver < b > betyder det egentligt bare, at jeg laver teksten fed. For at afslutte skriver jeg < / b >. Jeg laver < center >, for at centrere teksten.

I linje fire skriver jeg < br / >, og det er bare for at lave et afsnit.

Linje 5-7 sætter jeg et billede ind. Jeg starter koden ud med at skrive img. Det er fordi, at img betyder image – også kendt som billede. Det røde i koden, er der, hvor webadressen sættes ind. Du finder et billedes webadresse ved at højre klikke på billedet, også trykker du på ”kopier billedets webadresse”. Så kan du sådan set bare ctrl + V billedets webadresse ind.
Der fremgår mange af de samme ting i stylingen af et billede, som i en boks, så jeg kommer ikke til at forklare alt.
Float betyder, hvorhenne billedet skal være. Hvis man laver en float, kommer teksten ved siden af billedet, og ikke under.
Margin-right betyder, hvor meget mellemrum, der fra højre side af billedet skal være mellem teksten. Jeg bruger det ofte, så det ikke ser rodet ud.

I linje 8, skriver jeg bare en overskrift.



Nu tager vi endnu et lille afsnit af koden. Det kan godt være at linje 9-25 lyder af mange linjer, men det meste af det er egentligt bare fyld. Nu da vi både har lavet en boks og et billede, skal vi bare have skrevet noget information ned om din karakter.
Jeg laver en < br / > for hver linje, så der er afsnit imellem. Når jeg har skrevet ”information”, betyder det bare, at det er noget, du selv skal udfylde om din karakter. Du kan sagtens ændre det, hvis du vil have noget andet til at stå – f.eks. din karakters øjenfarve. Det vigtigste er bare, at du laver < br / > før, så der er et afsnit.



Vi går nu i gang med beskrivelsen af koden fra linje 25-44. I linje 26 laver jeg en overskrift, som jeg centrere ( < center > ) og skriver med en fed ( < b > ) tekst.
På linje 28 begynder jeg, med at lave tre spalter. Jeg skriver, at jeg nu laver en lille boks, der kun fylder 32% af siden (width:32%). Jeg stiller den i venstre side (float:left). I den første boks, kan man så skrive alle sine relationer ind i. For enden af den første spalte skriver jeg < / div > for at slutte koden af.
På linje 37, laver jeg den anden spalte. Det er sådan set den samme kode som den første spalte, så det behøves jeg ikke forklare igen. Denne spalte dedikerer jeg til de emner, man nu er i gang med. Man kan både skrive emnets navn, emnets sted og hvem man emner med. Jeg skriver < b> foran emnenavnet, for at gøre emnenavnet i en fed skrift, for at give det lidt effekten. På samme måde, som den anden boks, slutter jeg den af med < / div >, fordi jeg startede boks-koden med < div >.



I de sidste tre linjer – fra linje 45 til 48 – skal vi sådan set bare have lavet den sidste spalte. Den bliver lavet på den samme måde, som de to andre – den eneste forskel er blot, at dens float er til højre (float:right). Jeg har placeret den sidste spaltes float til højre, så at alle 3 spalter ikke klumper sammen til venstre. Det er vigtigt at have float med, for ellers er du garanteret, at det ikke ser ud, som du ønsker. Den tredje spalte er dedikeret til en meget lille og beskrivende personlighedstekst – næsten ligesom i et resumé.

I linje 47, har jeg lavet en < / div >, så nu tænker du nok: Har hun ikke lige forklaret, at man skriver < / div >, når man afslutter en boks? Og det er korrekt. Nu er den første boks (der rammer det hele ind) afsluttet, og koden er derved færdig.

Den færdige profil ender med at se sådan her ud (bemærk, at jeg bare har brugt min egen karakters faceclaim, navn og information):


 
Det var så alt for denne gang. Jeg håber, at det ikke har været alt for forvirrende at læse med – jeg har i hvert fald, gjort hvad jeg kan, for at gøre det forståeligt. I er alle sammen meget velkomne, til at bruge denne kode, til jeres egne profiler. Jeg har sat koden ind i et Google Docs-dokument, hvor jeg har markeret det, du selv skal udfylde med fed og rød. Hvis du vil have et sted at øve koden, vil jeg foreslå en Html tryit editor, som du nemt kan finde på google, ved at søge på det.

Link til koden og dokumentet:
https://docs.google.com/document/d/1_kF5mTNJkgaAW5MwUg4p9_aD-gOQAdt6W30LmR6Ekc0/edit?usp=sharing

Du kan selv rette i koden, hvis du måske tænker, at du hellere vil have at baggrundsfarven skal være rød, eller hvis der er andet, du har lært fra dette blogindlæg.
Hvis du derimod vil skabe fin helt egen, individuelle profil, kan du tjekke html guiden ud, for at lære flere koder, der måske går lidt mere i dybden, end jeg har gjort. Jeg håber, at I har kunnet bruge det!

Et sidste spørgsmål: Hvad synes I om de har slags opslag? – Har det været noget, I har kunnet bruge?