Lær å lage hjemmeside – Leksjon 3

I tidligere leksjoner har vi vært gjennom grunnleggende “tags” og hvordan style dem. Nå skal vi gå litt videre og se på litt mer av logikken rundt. 

Tidligere har vi brukt et hjelpemiddelprogram for å få koden vår til å fungere som den skal. Nå skal vi klare det uten dette hjelpemiddelet, på skikkelig vis. “Nettsiden” kommer bare til å være tilgjengelig lokalt på din maskin, med mindre du laster den opp til en server. 

Bruke en ordentlig tekst-editor

En nettside består egentlig bare av bare tekstdokumenter. Nå som vi bare fokuserer på HTML og enkel CSS blir det også veldig lett å holde oversikt. Dersom du ikke har fått med deg noen tidligere leksjoner, kan du scrolle nederst i dette innlegget. Der har jeg linket til de tidligere leksjonene. 

Slik gjør du: 

  1. Først og fremst trenger du en ordentlig tekst-editor. Du KAN bruke Notepad (til de med windows), men jeg anbefaler på det sterkeste å bruke et program som heter Sublime. Det er kjempeenkelt og bra! Jeg brukte det da jeg først lærte meg koding for første gang, og jeg bruker det enda. Du laster det ned helt 100% gratis her (det er trygt og tar ikke stor plass på maskinen din). 
  2. Stå i en mappe du ønsker å samle alle prosjektene dine i. Du kan for eksempel ha en mappe som heter “Webutvikler kurs” eller lignende. I denne mappen oppretter du en ny mappe som heter “MyFirstWebsite” eller noe annet uten mellomrom eller æ, ø eller å. Du oppretter en ny mappe ved å høyretrykke og velge “Ny mappe”.
  3. Åpne Sublime (eller det tekstverktøyet du bruker)
  4. Velg “Ny fil”. 
  5. Viktig! Lagre den nye filen som “index.html” i mappen du opprettet. Det er viktig at navnet på filen slutter med .html, for hvis ikke skjønner ikke maskinen din at dette er html-kode. 

For å se om det hele fungerer, limer vi bare inn teksten vi har jobbet med i de forrige leksjonene: 

<!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width”>
  <title>JS Bin</title>
  <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”>
</head>
<body>
  <h1>Dette er en overskrift</h1>
  <h2>Dette er en mindre overskrift</h2>
  <h3>Dette er en liten overskrift</h3>
  <p>Dette er en paragraf</p>
  <a href=”http://frkfrontend.blogg.no”>Dette er linken til bloggen min</a>
  <p>Dette er en lenger tekst som inneholder <strong>tykk tekst</strong> og <i>kursiv</i> tekst.</p>
</body>
</html>

 

Det skal se ca. slik ut: 

Jeg har lastet ned et spesielt tema til Sublime, så helt likt blir det nok ikke. Men sjekk at koden fargekoder seg etter hva som er tager, attributter og tekst. Her kan dere se at tagene (feks a) blir røde, attributtene (feks href) blir gule, innholdet til attributtene (feks “http://frkfrontend.blogg.no”) blir grønt. Det er noe av det som er så praktisk med å bruke en ordentlig tekst-editor. 

 

Se nettsiden i nettleser

Nå skal vi endelig få opp nettsiden i nettleseren. Sånn til advarsel: Dette blir ikke en offentlig nettside, og linken til den kommer kun til å fungere lokalt på din datamaskin. 

Gå inn i mappen du lagde. Der skal index.html-filen ligge og se ca. slik ut: 

eller med bilde av nettleseren din som ikon. 

Høyreklikk på denne, hold over “Åpne med” og velg nettleseren du bruker (for eksempel Chrome eller Opera). Dersom dette åpner seg har du gjort riktig:

 

Legge til styling

Nå skal vi legge til styling, og dette har vi tidligere gjort veldig enkelt i jsbin.com. Når man skal gjøre det ordentlig er det ikke like enkelt, men noe av logikken har vi vært borte i før, da vi la til skrifttype fra Google. 

1. Opprett et nytt dokument i Sublime og kall det “style.css”. Pass på å lagre det i samme mappe som index.html.

2. Disse dokumentene er ikke automatisk knyttet sammen. For å få til dette må du legge til denne setningen i <head>-tagen:

<link href=”style.css” rel=”stylesheet”>

<head> skal altså nå se slik ut: 

<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width”>
  <title>JS Bin</title>
  <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”>
  <link href=”style.css” rel=”stylesheet”>
</head>

Dette lenker altså index.html opp mot style.css. Den forteller i tillegg at linken er av type “stylesheet” som er et CSS-ark. 

3. Legg til stylingen vi lagde forrige uke i CSS-arket. Dersom du har mistet det, så har jeg det jeg laget her: 

body
{
  background-color: white;
  font-family: Raleway,sans-serif;
}

h1
{
  color: #555;
  font-weight: 200;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 2px
}

h2
{
  color: yellowgreen;
}

h3
{
  color: hotpink;
}

a
{
  background-color: DarkCyan;
  color: white;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
}

4. Oppdater nettleseren din igjen. Nå skal stylingen også være oppdatert til å være likt som vi gjorde forrige gang! Dersom det nå ikke er stylet, så ta kontakt med meg, så skal jeg se hvor feilen har oppstått.

 

Når vi nå først har vært borti <head>-tagen, kan vi gjøre en annen justering først som sist. Nå som vi bruker nettleseren kan vi gjøre om på denne tagen: 

<title>JS Bin</title>

Det som står inne i denne tagen er nemlig det som dukker opp i fanen øverst i nettleseren. Endre den for eksempel til 

<title>Webdesignkurs</title>

eller det du vil. 

Resultatet skal nå se slik ut: 

 

Nå som det grunnleggende er på plass skal vi starte med litt morsommere ting neste kurs! Imens kan du selv lese deg opp på morsomme ting å gjøre med CSS her

 

Alle leksjoner: 

Tise it #2

Jeg hadde et innlegg forrige måned om akkurat det samme. Det slo godt an, og det var i tillegg gøy å lage. Jeg vil slå enda et slag for brukt-shopping med dette innlegget her. 

Selv elsker jeg å kjøpe brukt eller arve noe som kan passe inn i mitt hjem. Det er spesielt gøy med møbler man kan fikse litt på, så blir de plutselig til noe helt nytt! Og klær er jo samme greie. Man kan få nesten helt ubrukte klær til ekstreme rabatter.

Så her er Tise-wantsene jeg har funnet:

Løp og kjøp! 

Har du handlet på Tise før? 

To do-list: Uke 10

Tenk at vi allerede har kommet til uke 10 av året.. Jeg føler året nettopp startet! Og så er vi snart allerede ferdig med 1/5. Tiden går så utrolig fort, så det er viktig å ta vare på hverdagen, like mye som helga. Tiden går så fort når man konstant jobber for noe, og glemmer å se på hva man har, hvor man står nå i livet, hvor mye gleder man er gjennom, hvor mye man kan oppleve. Vi må passe på å ikke bare tenke “om bare noen år, så..”, vi må glede oss over

dav

Denne uka skal jeg sette hårkur på To Do-lista mi, bare så jeg faktisk får gjort det. Jeg syns det er litt styrete å kure håret ordentlig, slik at jeg lar kuren sitte i i flere timer. Da må man jo inn i dusjen, vaske håret, ta i kur, gå ut av dusjen, gå med hårkur i noen timer og så tilbake igjen inn i dusjen. Men det føles skikkelig godt ut etterpå, og det er jo veldig bra for håret. Så denne uka skal jeg gjøre det!

Dette er alt jeg  gjøre denne uka: 

Jeg har et par planter som fikk sitt å streve med i vinter. De skal få litt ekstra god behandling denne uka. Mens jeg kurer mitt hår, skal de få sin blomsterkur. Jeg skal kjøpe gjødsel og jord som er tilpasset den enkelte planten, så skal de få blomstre og gro i sommer! Det blir de nok “glade” for. 

Ellers er det på tide å vakse og rydde bilen igjen, og utenom det er alt bare vanlige ukesting! 

 

Hva har du på din liste denne uka? 

Uka som gikk – Uke 9

Ukas høydepunkt: Det er vanskelig å avgjøre hva som var denne ukas høydepunkt. Det var skjedd så mye! Hvis jeg må velge noe var det kanskje teparty med to venninner på tirsdag. Det var veldig lenge siden jeg hadde truffet de, og da er det ekstra godt å møtes igjen. Dette er mennesker jeg får energi av å være med, så når de drar jeg er jeg mindre sliten enn før de kom. 

Ukas stolteste øyeblikk: Det var utrolig stas å holde kodekurs for ungdommer. Jeg ble skikkelig stolt av dem alle, når de tok alt jeg sa så fort og lagde kule sider. De virket så fornøyd med kurset alle sammen, og de lærte masse! Det var definitivt ukas stolteste øyeblikk, og jeg gleder meg så mye til neste uke!

Ukas høydepunkt på jobb: Jeg fikk tilbud om fast jobb denne uka! Jeg ble så utrolig glad, for jeg elsker virkelig jobben min! Jeg er så glad for at de setter pris på jobben jeg gjør, nok til å tilby meg helt fast stilling. Veldig gøy!

Ukas mest leste innlegg: Det mest leste innlegget ble der jeg skrev om at jeg hadde fått fastjobb! Det er koselig at så mange bryr seg om det. Innlegget kan leses her.

Ukas serie: Jeg har begynt å se på Broen igjen. Jeg så første sesong for mange år siden, men så fikk jeg aldri sett resten. Jeg husket også veldig lite av første sesong, så jeg så like godt alt sammen på nytt. Nå er jeg på tredje sesong, og det går unna! Det er jo så spennende, så jeg vil bare se neste episode med en gang en er ferdig. 

Ukas oppskrift: Jeg skal prøve meg på den her i dag. Det blir spennende, og jeg gleder meg ordentlig til å smake på resultatet. Den blir laget på torsk!

Ukas film: På fredag så vi en utrolig kul film om finanskrisen i 2008. Den heter “The big short” og er proppet full av talentfulle skuespillere, innblikk i hvordan en slik finanskrise kunne oppstå og både humor og drama om hverandre. Den anbefales på det sterkeste, og den ligger på Netflix!

Ukas treningsøkt: I går hadde jeg første intervalløkt på halvannen måned, og det var så deilig å være tilbake på mølla! Det gikk mye bedre enn forventet, og jeg tok det veldig rolig. Intervallene ser slik ut:
1 min – 8.0 km/t – 4 i stigning
30 sek pause
2 min – 8.0 km/t – 4.5 i stigning
1 min pause
3 min – 8.0 km/t – 5 i stigning
1.5 min pause
4 min – 8.0 km/t – 5.5 i stigning
1.5 min pause
3 min – 9.5 km/t – 1.5 i stigning
1 min pause
2 min – 10.5 km/t – 1.5 i stigning
30 sek pause
1 min – 11.5 km/t – 1.5 i stigning

 

God søndag videre! 

DIY – Forny bokhylla med enkle detaljer

God lørdag alle sammen! 

Jeg har fått så rar døgnrytme at jeg våknet klokka åtte i dag og fikk ikke sove mer. Det var veldig deilig, og jeg lå lenge i sengen og leste bok helt til sulten kom smygende. Vi sto begge opp (jeg og samboeren min) og lagde rundstykker til frokost! En ordentlig god start på dagen. 

Vi kom oss til og med på trening! Vi satt i bilen og da måtte jeg bare si “Du vet, Øystein. Nå er vi de irriterende menneskene som drar på trening klokka tolv på en LØRDAG.“, og ingen av oss visste helt hva vi følte om oss selv, haha! 

I tillegg har jeg jo måttet male litt, for å få på plass denne ukas DIY. I dag tok jeg bare mange små ting og malte dem i samme farge som det nye kjøkkenbordet. Jeg syns de ble veldig fine! Til dette kan man jo bruke all verdens gamle potter, esker og andre pynteting. Det blir fresht med litt farger i bokhylla, syns jeg, og det er ekstra stilig når det matcher!

dav

Dette trenger du:

  • Maling
  • Ting å male
  • Sandpapir
  • Malekoster
  • Spraylakk (valgfri til metalldetaljer) 

Slik gjør du: 

  1. Pass på å fjerne alle eventuelle detaljer fra tingene du ikke ønsker å male over. 
  2. Slip gjenstandene med sandpapir
  3. Vask dem godt
  4. Mal først et strøk og la tørke i ca. en time
  5. Mal deretter et strøk til
  6. (Valgfritt) Spraylakkér alle metalldetaljer i en annen farge, for å fornye ekstra mye! La tørke i 2-3 timer.

dav

dav

mde

 

Før: 

dav

 

Etter:

dav

Jeg syns hylla fikk et mye friskere og kulere utrykk nå, og jeg ble kjempefornøyd! Det ble veldig eget og personlig. 

 

Nå skal jeg gjøre meg klar til spillkveld hos en kollega. God lørdag videre!

 

10 ting jeg vil gjøre i mars

sdr

1. Feire bursdagen min
Jeg har bursdag i mars, hurra! Og jeg er en som elsker en god grunn til å feire, og hva er vel ikke en bedre grunn enn ens egen bursdag? Jeg skal hvertfall prøve å få til en feiring med Lørenskog-vennene mine i påsken, men det hadde jo og vært gøy med en feiring med studievennene her i Skien? Får se! Uansett noe jeg gleder meg til, for jeg elsker bursdag!

2. Pynte til påske
Jeg er så glad i påsken og syns den setter ordentlig fart på våren! Selv om jeg ikke skal være hjemme hele påskeferien, så vil jeg likevel pynte til påske, for det er så koselig. Da kan jeg komme hjem i etter ferien til et påskepyntet hus, akkurat som da jeg kom hjem fra juleferie. Jeg tenkte å lage litt egen pynt med fjær og kvister, og det gleder jeg meg til.

3. Spise påskelam
Jeg kommer fra en kristen familie og vi har beholdt noen veldig fine tradisjoner i påsken. En av dem er å ha påskelam med en annen vennefamilie! Pappa og faren i den andre familien varter opp med ordentlig god forrett, middag og dessert. Det smaker helt fantastisk hvert år! Jeg gleder meg skikkelig, for det blir alltid gøy.

4. Stå på ski
Det er så gøy å stå på ski, så det skal jeg gjøre mer før vinteren drar fra oss. Ikke at det ser ut som at det skjer på en stund, men man må nyte den mens man har den!

5. Se Utøya 22. Juli
Det har jo vært veldig delte meninger om denne filmen, men jeg vet at regissøren er god, så jeg er veldig sikker på at det er en ærverdig film og en god fremstilling av denne dagen. 

6. Bake bursdagskake
Jeg liker bursdag og jeg liker kake, så da må det jo bli en bursdagskake. 

7. Holde kurs for kids
I dag er første dagen av kodekurset jeg og noen andre skal holde! Jeg gleder meg skikkelig! Jeg er så glad for at så mange engasjerte ungdomsskoleelever har meldt seg på kurset vårt. Det blir skikkelig spennende å se hvor langt de kommer på de fire kursene vi skal ha. 

8. Dra hjem til mamma og pappa
Det er ikke lenge siden jeg traff mamma, men det er noen måneder siden jeg traff pappa. Så jeg gleder meg veldig til å være en hel uke sammen med mamma og pappa i påskeferien! Da rekker man å være litt ordentlig sammen og ikke bare ha de overfladiske samtalene man gjerne har når man bare er på besøk. 

9. Besøke mormor og morfar
Det er også en stund siden jeg møtte mormor og morfar. Og siden jeg besøkte farmor forrige måned må jeg treffe mormor og morfar denne måneden. Det er viktig å ta vare på de man er glad i, og som har stilt opp for deg i livet!

10. Ha spillkveld
Nå er det en stund siden jeg hadde spillkveld sist, og jeg er veldig glad i brettspill! Så det må jeg arrangere igjen. Brettspill er så gøy, og i tillegg er det veldig sosialt! Man har ikke lov til å sitte på mobilen når man er på brettspillkveld. 

mde

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top