Lær å lage hjemmeside - Leksjon 1!

Jeg tenkte jeg skulle lage en ny spalte: Lær å lage hjemmeside!

Jeg vil med korte leksjoner lære bort hvordan man bygger opp en hjemmeside, bit for bit! I starten kommer jeg til å gå veldig grunnleggende til verks. Denne kunnskapen kan du bruke til å endre på ditt eget bloggdesign. Og kanskje til og med bygge opp et helt eget, nytt bloggdesign?

I dette kurset kommer jeg til å gå gjennom:

  • HTML
  • CSS
  • JavaScript
  • Bruk av rammeverk

Så da setter jeg bare i gang med første leksjon!

Leksjon 1: Grunnleggende HTML

I de første leksjonene kan du bruke denne liken her for å prøve deg fram. Etterhvert skal jeg gå gjennom mappestruktur og filer, men akkurat nå holder det å bare teste ut på verktøyet jeg linker til. Den har en fane som heter HTML og en som heter Output. Det du skriver i HTML vil automatisk gi utslag på hvordan Output ser ut. 

Oppbygging av dokumentet

Før vi gjør noen ting kan vi gå gjennom hva vi alltid skal starte et HTML-dokument med: 

<!DOCTYPE html> 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

  • Et HTML-dokument starter alltid med <!DOCTYPE html>. Dette definerer at dokumentet skal være HTML5.
  • <html> Definerer rota av HTML-siden.
  • <head> Inneholder meta-informasjon om nettsiden. Det du skriver her blir ikke synlig på nettsiden, utenom det du skriver inne i <title>. Dette blir teksten du kommer til å se i fanen til nettleseren din. I dette eksempelet er det to meta-setninger:
    • <meta charset="utf-8"> Sier at vi skal kunne bruke et unicode-tegnsett, som blant annet inneholder æ, ø og å. Uten denne linjen kan du ikke skrive disse bokstavene. 
    • <meta name="viewport" content="width=device-width"> Gjør at du kan kontrollere hvordan nettsiden ser ut på mobil og tablet. Vi kommer inn på dette i en senere leksjon. 
  • Så dukker det opp en </head>. Dette betyr at <head> er over. Det er en lukke-tag. Alle tags må alltid lukkes, hvis ikke kan du få veldig morsomme resultater. 
  • <body> Definerer at "kroppen" til nettsiden skal begynne. Det er det du skriver her som vil påvirke hvordan nettsiden din vil se ut. 
  • Til slutt lukkes </body> og </html>, og dokumentet er slutt. 

Du trenger ikke å huske alt dette, du må bare ha det med hver gang du skal lage en ny nettside. I hvertfall bruk dette i starten. Kopier denne teksten og lagre den i et dokument på PC'en din.

Grunnleggende tags

De aller mest grunnleggende tagsene har jeg allerede gått gjennom, altså <html>, <head> og <body>. Men vi vil jo få noe på nettsiden til å skje! 

Mellom <body> og </body> skriver du:

<h1>Dette er en overskrift</h1>

Her ser du <h1>-tag i bruk. Du ser den starter, du ser innholdet og du ser at den slutter. Dette er en header-tag. For alle dere bloggere er det den samme tagen som brukes når du putter inn en "Overskrift 1" i blogginnlegget ditt. Skriver du inn denne setningen i mellom <body>-tagsene (i programmet jeg linket i starten av leksjonen) vil du få dette resultatet:

 

 

 

 

 

 

Nå skal vi tilføye litt mer, slik at teksten inne i <body>-tagene er slik ut:

  <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>
  • <h1> er som sagt Overskrift 1.
  • Kanskje noen da skjønner at <h2> også er en type header? Det som kanskje ikke er like logisk er at dette er en mindre overskrift enn h1. 
  • <h3> er dermed en enda mindre overskrift enn denne igjen.
  • For vanlige paragrafer bruker man <p>, slik som her
  • <a> er link-tag. Men det blir ikke en link bare av å sette tekst inne i <a> og </a>. Her introduserer jeg for første gang en attributt. href="http://frkfrontend.blogg.no" forteller oss at nettsiden <a>-tagen skal linke til er http://frkfrontend.blogg.no. Attributter brukes altså til å fortelle ekstra informasjon utover det faktum at dette er en link. På denne tagen er attributten href.
  • I denne paragrafen har jeg dratt inn <strong> og <i>. Spørsmålet mitt til alle dere nå er: Hva skjer med teksten som er inne i disse tagene?

Resultatet blir slik: 

 

 

 

 

 

 

 

 

Nå kan du jo selv prøve deg litt fram med de tagsene du har fått! 

I neste leksjon skal vi lære å style dette med farger, størrelser og skrifttype. Så følg med!

 

Alle leksjoner: 

18 kommentarer

Fantastisk. Har allerede klart å bekrefte Pinteresten min, som jeg har stresset med i to-tre uker!

Tusen takk, dette er genialt. Du bør sjekke om du kan lage en webinar om dette!

Ingrid; voksen tilslutt: Det hadde vært råtøft! Skal sjekke det ut! I første omgang blir det nok for barn og for blogglesere :D

Kristine Larsen: Så bra du synes :D

Jeg mener webinaret kunne vært for oss bloggere. Kjør et introduksjonskurs gratis eller svært billig, der nybegynnere kan se at det ikke er vanskelig og de selv faktisk kan klare å gjøre det. Mange (les jeg) er redd for å bruke penger på noe jeg/de ikke får noe skikkelig igjen for. Ikke fordi læreren (du) er dårlig, men fordi det er en allmenn sannhet at JEG aldri kan lære koding. Hvis du kjører noe gratis som beviser for oss at vi kan gjøre det, er det mye større sjanse for at vi betaler for å få ta et grundigere kurs! BOM, Ekstra inntekt!

Ingrid; voksen tilslutt: Det var en veldig god idé! Er litt usikker på om jeg har tid til å sette opp webinarer som er verdt å betale for da.. Nå er det så lett å bare "Sjekk her! Koding" uten at jeg har det presset :D

Nå kommer dere til å lage et kurs for kidsa, og da deler dere dette opp i flere 'oppgaver' eller læremål ikke sant? Da har du begynnelsen. Se og vurder hvordan barna tar det, om det er for mye eller for lite for en 'lesson'.

Hvordan du teknisk lager det, vet jeg ikke, det er du som er ITdama, men hadde det ikke vært kult om du om ett år kunne legge ut et webinar?

Tips er å passe på at du også har markedsføring som forteller HVA folk kan gjøre, HVORFOR folk bør lære seg dette, og bare litt HVORDAN slik at helt blanke folk som meg kan se at "til og med jeg kan lære dette"!

For helt ærlig, jeg signere meg ikke opp på et webinar før jeg vet jeg har evnen til å lære meg dette. For 15 min siden hadde jeg sagt at det ikke var sjanse for at jeg skulle klare det. Så leste jeg halve siden på dette blogginnlegget og fikk til noe jeg har forsøkt å få til i to-tre uker. Nå er jeg på kanskje jeg kan gjøre det allikevel!

Ingrid; voksen tilslutt: Shit, nå fikk jeg veldig lyst til å få det til! Tusen takk :D Ja, alle kan lære seg koding, det er litt av grunnen til at jeg har denne bloggen! For å vise hvor gøy og enkelt det kan være!
Jeg tror du kommer til å klare deg VELDIG bra på Webinar! Du er veldig gløgg og ser sammenhenger. Mer trenger du ikke, så lenge læreren er god :D

Jeg syns du skal gjøre det! Du har en påmeldt i hvert fall!

Og siden jeg holder på å leser meg opp på markedsføring også, kan jeg være med å brain-storme litt på det, dersom du ønsker!

For mens du syns det er kjekt å vise hvordan alle kan koding, syns jeg det er kjekt å oppmuntre, heie og forhåpentligvis hjelpe folk på vei mot å klare sin drøm!

Go for it, noter ned ideer, ta med hva som funket og ikke funket for kidsa, kjør webinar og be folk kommer med tilbakemeldinger på hvordan du kan gjøre det bedre. Øk prisen litt, og kjør på nytt.

Du har en kunnskap som andre har behov for, og du fortjener å få betalt for å gjøre andre mennesker bedre!

Ingrid; voksen tilslutt: Jeg skal vurdere det! :D Akkurat nå er det ikke noe jeg har tid til å styre med, men skal så absolutt tenke på det!

Ja, det er viktig å ha tiden til å gjøre det, det må være gøy for at man skal gjøre noe ekstra. :-)

Ingrid; voksen tilslutt: Jepp! :D Så får se etter jeg har hatt kursene for barn hvor mye fritid jeg får igjen! Da skal jeg tenke på det :D

Tusen takk for tipset, dette skal jeg se nærmere på :)

linnsteen: Gjør det! Veldig kjekk kunnskap å ha :)

Veldig bra tiltak, dette skal jeg sette meg inn i når jeg er litt mer opplagt.

morsmiddag: Så bra du synes! Det er veldig gøy å lære seg :D

Helena Westergren: Åå, du er grei! Håper leksjonen var bra :D

Skriv en ny kommentar