Præsentation

Denne side er den første side jeg har kodet i html. Jeg har ikke brugt særligt avanceret kode i selve html dokummentet. Jeg har mest lagt vægt på at producere et solidt css dokument, som kunne bruges til mit studieweb. Jeg har ikke sat særligt meget design på den udover de solide grundlæggende bokse med links. Jeg kan selvfølgelig se at jeg kunne forbedre den på mange punkter, men jeg er nu alligevel stolt i forhold til det er min allerførste hjemmeside kodet med html og css.

Jeg vil nu prøve at reflektere over mit valg af design og kodning for selve hjemmesiden. Jeg vil formulere min proces med billeder af min kode, og hvilke tanker der er gået igennem mit hoved.

Dokumentation

Først og fremmest har mit mål være at gøre siden rigtigt nem at finde rundt i med simple knapper alle kan forstå, og let vejledning. Det er for at gøre det simpelt for både elev og lærer. Jeg har en side for hvert fag, så det er meget let adskilt og det gør det meget svært at sende forkert. Jeg har altså sat det op kort og kontant med fire bjælker. Jeg vil herunder vise min css kodning, til disse bjælker.

#links { color: rgba; margin: 0px; font-size: 20px; margin:auto; width: 1000; text-align: center; border-bottom: solid; border-bottom-color: black; font-family: 'Indie Flower', cursive; <!-- det er med denne #links, og min ul kode, at jeg ændre på selve boksenes lokation, og sørger for at de sidder oppe i venstre hjørne. } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: sticky; top: 0; width: 100%; } li { float: left; border-right: 1px solid #bbb; } li a { display: block; color: white; text-align: center;<!-- denne linje og den næsste ændrer jeg på teksten inde i boksene> padding: 14px 16px; text-decoration: none; } li a:hover{ background-color: #111; <!-- dette gør at når musen er på blokkene, vil farven ændres. Jeg prøvede også at lege lidt rundt med at gøre boksen større, men valgte bare at nøjes med en farveændring.> }

Jeg må indrømme at jeg fik lidt hjælp til nogle af disse lidt fancy tags, men efter jeg fik lidt forståelse for det, kunne jeg ændre lidt på det, og gøre det til mit eget.
Nedenunder forklarer jeg hvordan jeg satte selve html dokumentet op, og hvad jeg altså skrev i mit head. til at starte med, så jeg kunne bygge videre på det. Det er altså her i toppen hvor jeg inkludere mine referencer, til fx. andre teksttyper og css dokumenter

<!DOCTYPE html> <html> <head> <!-- starter head> <link rel="stylesheet" href="forside.css"> <!-- inkluderer mit css dokument> <title>Albert's Studieweb</title> <!-- giver min side en fanetitel> <meta name="author" content="Albert Koba"> <meta charset= "utf-8"> <!-- inkluderer danske bogstaver og tegn som æ ø og å> <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> <!-- inkluderer google fonten indie flower> </head> <!-- slutter head hvor jeg nedenunder går i gang med body>

Refleksion

Alt i alt synes jeg har det været meget spændende at lære hvordan man laver en hjemmeside fra bunden af. Især fordi jeg overhoved intet vidste om html, så det har været en meget ny proces som jeg bestemt har nydt. Jeg synes at siden blev nogenlunde okay, selvom den selvfølgelig kan arbejdes meget meget mere med, føler jeg at det var en okay start.