TIPS OG TRICKS TIL PROFILEN

html guide -del 1

Profiler er en stor del af vores karakterer. Det er muligheden for at udtrykke hvem de er, hvordan de er, og samtidig vise det på flotte og kreativer måder. Men sidstenævnte kan især være svært til tider, hvis HTML kyndighed ikke er ens stærkeste egenskaber. Men frygt ej, for så er denne guide lige noget for dig!

Over de næste ugerækker vil jeg samle en masse tips og tricks til hvordan du kan tage din html profil til det næste niveau! Først og fremmest vil jeg give en guide til gode tips for hvordan du opsætter koden, og dernæst vil jeg komme med en inspirationsguide til hvordan du finder de bedste billeder og farvekombinationer. Så hold på hat og koste, for vi har en masse godt i vente.

BRUG AF DIV'ER

Div'er... noget, alle efterhånden må have set blive nævnt på chatten, ofte i frustration, flere gange. Men hvordan fungerer de egentlig? Og hvad kan man egentlig lave med dem? Jo, de er faktisk ganske nytte i mere eller mindre alt html man laver!
Man kan betragte div'er som små "kasser". Disse bliver placeret enten ved siden af hinanden, under hinanden, eller - i nogle tilfælde - indeni hinanden. Lyder forvirrende? Måske lidt. Men lad os prøve sammen at lave eksemplet på en profilstart ovenfor sammen!

Den øverste baggrundsgif er faktisk en div boks som er stylet med en billede baggrund. Dette sker i style delen af div'en, og skrives "background-image:url('billedelinket her');" der er ydermere sat en bredde (width) en højde (height). To andre handy ting brugt er style funktionerne "background-size" og "background-position". Førstenævnte sikre sig at din boks bliver dækket af hele billedet, mens sidstenævnte sørger for at det altid starter fra billedets centrum.
Navneteksten er ligeledes en div. Denne har vi ikke givet nogen baggrund, hvorfor den automatisk bliver transparent. En vigtig del af denne div boks er, at vi har angivet font-family og font-size.
Slutvis finder I opdelingslinjen med plads til et citat! Her er det vigtigste at kigge på den styling der hedder "background-color:". Den tillader jer nemlig at ændre den grønne farve til lige det, I har lyst til!
Den fulde kode på første del ser altså således ud:

<div style="width:705px; height:230px; background-image:url('JERES GIF LINK HER'); background-size:cover; background-position: center; float: left; margin-left: 10px; margin-top: 15px; filter: grayscale(70%); opacity: 1; "></div >

<div style=" margin-top:70px; margin-left:35px; color:#fff; position:absolute; font-size:74px; font-family: 'DM Serif Text'; text-shadow: 1px 1px 2px black;letter-spacing: 2px; line-height:20%;"> <center>THEODORE</center > lt; br > <font style="font-family:'Dawning of a New Day', cursive; position:absolute; color:#285528; margin-left:-75px; margin-top:-18px;"> James</font><br> COLLINS</div>

<div style="background-color: #012C17; width: 705px; height: 19px; margin-left: 10px; margin-top: 11px; float: left;font-family: 'playfair display sc'; letter-spacing: 3px;font-size: 8px; color: white; line-height: 220%; ">Et spændende citat der passer til din karakter lige her</div>

Med det på plads kommer vi til den "tunge" del af koden! Nemlig billederne samt boksen der indeholder de to scrollbokse, hvor man kan indsætte relevant information. Også her bruger vi div bokse til at vise billederne. Det tillader os nemlig at style dem lidt mere, samt placere dem mere fleksibelt. Læg mærke til at vi ved hver boks bruger funktionen der hedder "float:left;". Dette betyder egentlig bare, at vi sørger for at den næste boks i rækken altid bliver venstrestillet fra den forhenværende. Hvis der er bredde nok, bliver den på samme "linje" og hvis ikke, rykkes den nedenunder - det er bl.a. sådan vi altid sørger for at vores divider-linjer er på en linje for sig selv.
Dette gør det altså muligt at placere billederne efter hinanden som vist, og ydermere at tekstboksen helt naturligt falder på plads under de tre billeder, da der jo ikke længere er breddeplads ved siden af dem. Vi bruger "margin-left:TALpx" til at bestemme den afstand, der er mellem billederne, hvor 0 placere dem helt op af hinanden. Derfra kan man så justere som det passer en bedst.

Efter billederne kommer vores tekstboks. Da det faktisk er to tekstbokse i den samme grønne kasse, er det lavet således at den grønne kasse er én div. og inde i denne div, har vi så lavet de to div'er, der repræsentere hver tekstboks. På den måde er det let for os at placere dem hvor vi vil, for når vi sætter dem ind i en anden kasse, er det denne kasse, der er deres "grænse". Så når vi laver "float:left;" på dem, er det udelukkende i forhold til pladsen i den grønne kasse, og ikke til resten af koden.
Med andre ord gruppere vi altså tekstboksene i én boks! Dette er en god måde at fordele ting på ens profil på en mere overskuelig måde.

I kan finde koden for denne sektion lige her!

<div style="background-image:url('BILLEDE URL HER'); background-size:cover; background-position: center; width: 252px; height:362px; margin-left: 10px; margin-top: 12px; border: 1px solid black; filter: grayscale(70%); opacity: 1; float: left; "> </div>

<div style="background-image:url('BILLEDE URL HER'); background-size:cover; background-position: center; width: 138px; height:120px; margin-left: 10px; margin-top: 12px; border: 1px solid black; filter: grayscale(40%); opacity: 1; float: left; "> </div>

<div style="background-image:url('BILLEDE URL HER'); background-size:cover; background-position: center; width: 138px; height:120px; margin-left: 10px; margin-top: 12px; border: 1px solid black; filter: grayscale(40%); opacity: 1; float: left; "> </div>

<div style="background-image:url('BILLEDE URL HER'); background-size:cover; background-position: center; width: 138px; height:120px; margin-left: 10px; margin-top: 12px; border: 1px solid black; filter: grayscale(40%); opacity: 1; float: left; "> </div>

<div style="background-color:#4E6A4E; background-size:cover; background-position: center; width: 440px; height:230px; margin-left: 10px; margin-top: 12px; border: 0px solid black; filter: grayscale(0%); opacity: 1; float: left; ">

<div style="width:195px;height:200px; border: 0px dotted #999997; overflow:scroll;overflow-y:scroll;overflow-x:hidden; background-color: transparent; text-align: justify; float: left; margin-left:15px; margin-top: 15px; line-height: 140%; padding-right: 8px; font-size: 12px; color: white; opacity: 1px; font-family: times new roman; letter-spacing: 0px;"> Info her </div >

<div style="width:195px;height:200px; border: 0px dotted #999997; overflow:scroll;overflow-y:scroll;overflow-x:hidden; background-color: transparent; text-align: justify; float: left; margin-left:15px; margin-top: 15px; line-height: 140%; padding-right: 8px; font-size: 12px; color: white; opacity: 1px; font-family: times new roman; letter-spacing: 0px;"> Info her </div>

< /div >

<div style="background-color: #012C17; width: 705px; height: 19px; margin-left: 10px; margin-top: 11px; border: 0px solid #414141;box-shadow: 0px 0px 0px grey; opacity: 1; float: left;font-family: 'playfair display sc'; letter-spacing: 3px;font-size: 8px; color: white; line-height: 220%; " > Et spændende citat der passer til din karakter lige her </div>

Og med det sagt, er vi vidst kommet godt igennem de mest væsentlige principper ved koden! Der er stadig en masse at tage fat på, men jeg håber dette gav jer en bedre forståelse af hvordan man kan bygge noget, relativt simpelt, op selv! Er du interesseret i den fulde kode, så du kan gøre den helt til din egen? Så får du den lige her!

Vi ses snart igen til endnu flere html tips og tricks!
Theodore Collins