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:
- 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).
- 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”.
- Åpne Sublime (eller det tekstverktøyet du bruker)
- Velg “Ny fil”.
- 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:
<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:
<head> skal altså nå se slik ut:
<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:
Det som står inne i denne tagen er nemlig det som dukker opp i fanen øverst i nettleseren. Endre den for eksempel til
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.
