God helg!
Lær å lage hjemmeside – Leksjon 2
Dersom du ikke har fått med deg leksjon 1 av dette kurset kan du finne den her.
Forrige uke gikk jeg gjennom litt grunnleggende tags og oppsett av et HTML-dokument. Nå tenkte jeg at vi skulle fortsette der vi slapp, og legge på litt styling! Vi bruker fortsatt denne siden for å skrive koden og se hvordan det blir. Trykker du på linken jeg la inn nå, ser du at det er en til fane som er åpnet. Den har tittelen CSS. CSS beskriver hvordan HTML-koden skal bli fremstilt. Å lære seg CSS er veldig nyttig for å kunne gjøre endringer på bloggen din!
Dersom du har mistet koden fra forrige leksjon, så kopier og lim inn det her:
<!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>
<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>
Introduksjon til CSS
Mens HTML er språket som beskriver innholdet på siden, er det CSS som beskriver hvordan det skal se ut. Det er veldig enkelt sammensatt:
Du styler <body> med body {}. Altså dersom du skriver
body {
background-color: white;
}
background-color: white;
}
vil bakgrunnsfargen på siden din bli hvit! Prøv selv! Kopier teksten og lim inn i CSS-fanen. Som jeg skrev i forrige innlegg, er body “kroppen” til nettsiden. Derfor blir hele siden påvirket av det du legger inn i body { }. Det er viktig å avslutte hver linje med ; for å ikke få feilmelding. Du kan legge inn så mange linjer med styling du vil mellom { }, så lenge du skiller dem med ;.
Nå skal vi legge til skrifttype, for den standard skrifttypen er litt kjedelig. En veldig fin en er Raleway, men den er litt komplisert å legge til. Den er ikke standard i nettleseren, så den må importeres. Legg først inn font-family i CSS slik:
body {
background-color: white;
font-family: Raleway,sans-serif;
}
background-color: white;
font-family: Raleway,sans-serif;
}
I tillegg til dette trenger du å legge til importering av skriften i HTML-koden din. Gå inn i HTML-fanen og skriv inn <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”> slik:
<!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>
<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>
link-tagen definerer en link mellom et dokument og en ekstern ressurs. Her er den eksterne ressursen hentet fra Googles apier. rel=”stylesheet” forteller at den er et stylesheet, altså et CSS-ark.
Har du gjort riktig nå skal resultatet se slik ut:
Så nå kan vi begynne å gjøre overskriften ordentlig fin! Som jeg gikk gjennom i forrige leksjon er den største overskriften en h1-tag. Kopier og lim inn dette i CSS-arket ditt:
h1 {
color: #555;
font-weight: 200;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 2px;
}
color: #555;
font-weight: 200;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 2px;
}
- “color” er skriftfargen og her setter jeg den til fargen #555. Det er en mørk grå farge. Du kan også i starten skrive “gray”, men da får du ikke nøyaktig den nyansen du vil ha.
- “font-weight” definerer vekta på skriften. Det vil si hvor tynn eller tykk skriften skal være. Standard tykkelse er 400, så når jeg setter 200 vil skriften bli veldig tynn. Når du bruker fet skrift i blogginnlegg eller i et skriveprogram (bold), tilsvarer det som oftest font-weight: 600.
- “font-size” forteller hvor stor skriften skal være. 40px tilsvarer det samme som om du skulle valgt 40 i skriftstørrelse på et skriveprogram.
- “text-transform” kan brukes til å endre på om bokstavene skal være store eller små. Her har jeg satt at bokstavene alltid automatisk skal gjøres store med uppercase. Noen bloggere har dette, og noen har at alle bokstavene automatisk skal være små. Da bruker man lowercase.
- “letter-spacing” setter luft mellom hver bokstav i overskriften. Her har jeg satt 2 px mellom hver av bokstavene.
Personlig syns jeg denne overskriften er veldig kul og kan brukes som tittel på blogginnlegg for eksempel.
Etter styling av h1 legger vi bare på litt farger på h2 og h3, slik:
h2 {
color: yellowgreen;
}
h3 {
color: hotpink;
}
Nå skal vi prøve å gjøre linken om til en knapp, for akkurat nå er den jo litt kjedelig. Linken er en a-tag, så da legger vi inn denne koden:
a {
background-color: DarkCyan;
color: white;
text-decoration: none;
padding: 10px;
border-radius: 4px;
}
background-color: DarkCyan;
color: white;
text-decoration: none;
padding: 10px;
border-radius: 4px;
}
- Igjen bruker vi background-color for å sette bakgrunnsfargen til knappen.
- “color: white” gjør skriftfargen hvit
- Så kommer det en litt mer komplisert igjen. Som standard legger nettleseren på en understrek under alle a-tager (altså alle linker). Til vanlig er gjerne dette ønskelig for å tydeliggjøre at det er en link, men i en knapp vil vi ikke ha understreken der. Da legger vi på text-decoration: none; for å fjerne “dekorasjon”.
- Jeg skal ha et helt eget kurs som inneholder padding men kort fortalt er det luften mellom skriften og rammen(borderen) til a-tagen. Her gjør den at knappen blir større.
- Selv om vi ikke har lagt ramme på et element vil den alltid ha en form for ramme likevel. Og denne kan vi justere på slik som her. Det “border-radius” gjør er å runde av hjørnene på knappen, slik at den blir rundere.
Resultatet av alt vi har lagt inn nå blir slik:
Til sammenligning var det slik det så ut forrige uke:
Prøv deg fram mer farger for eksempel herfra og test ut bakgrunner og skriftfarger. Øk størrelser på ting, mer og mindre border-radius, legg til og fjern stylinger. Test og prøv, øvelse gjør mester!
I neste leksjon skal vi gå vekk fra det enkle programmet vi bruker nå og begynne å lage nettsider i filstrukturen istedenfor! Så følg med!
Alle leksjoner:
Fredagshumor #6
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>
<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:
Lær kidsa koding!
God kveld!
Jeg er jo (som bloggnavnet tilsier) frontendutvikler. Det betyr at jeg koder websider. Da jeg skulle velge studieretning visste jeg ikke at det var en vei å gå. Det ble sett litt på som en nerdete greie, og det var folk som spurte om jeg skulle lage dataspill da jeg sa jeg skulle studere informatikk. Jeg skulle ønske jeg hadde lært litt før hva utvikleryrket gikk ut på, for det er en veldig trygg, morsom og smart vei å gå! Jeg tenkte å skrive et innlegg om dette senere.
Det at jeg selv visste så veldig lite om det, gjør at jeg ønsker å lære bort det jeg kan til andre “kids”. “Lær kidsa koding” er en frivillig bevegelse som jobber for å lære barn og unge koding landet over. Man kan lese om de her. Med deres verdier i bakhodet har jeg og noen andre damer bestemt oss for å lage et webdesignkurs for ungdommer i alderen 12-16 år her i Grenland. Vi møttes for første gang i dag og la opp et opplegg for fire leksjoner. Dette er noe vi gjør på fritiden vår, og jeg gleder meg veldig! Jeg håper det vil motivere flere unge til å se på webutvikling som en mulig vei å gå karrieremessig.
Og til alle dere bloggspirer der ute: Hadde dere vært på noen webutviklerkurs hadde dere lært dere hvordan dere endrer på designet deres her på bloggen! Det vi lærer bort er oppsettet av alle tekstfilene dere finner under HTML i venstremenyen under blogsoft.no (for alle som bruker blogg.no som plattform). Det er veldig kult å kunne endre på alt dette selv! Du vil altså kunne endre alt av farger, rammer, linkfarger, tekster og annet.
Jeg gleder meg skikkelig til å sette i gang med disse kursene, og dersom det er noen ungdommer i alderen 12-16 år i Grenlands-området, så kan dere melde dere på kurset her.
Har du satt deg inn i koden til bloggen din?
#webutvikling #blogg #code #lærkidsakoding #webdesign #programmering #koding #bloggdesign #html #css
Fredagshumor #4
Fredagshumor #3
Utviklerpoesi
Programmerer definisjon
Min vei til utvikler
Hei, og velkommen til bloggen min! Tenkte første innlegget skulle starte med hvorfor jeg kalle meg “FrkFrontend” og hvorfor jeg har laget denne bloggen i det hele tatt.
Jeg fikk et plutselig ønske om å fortelle litt om yrket “utvikler”. Jeg visste selv svært lite til ingenting om det da jeg skulle finne ut av hva jeg ville bli.
Som barn ønsket jeg å bli dyrlege. Dette var fordi jeg var fryktelig glad i dyr.
Deretter ville jeg bli sanger, fordi jeg var så glad i å synge.
Senere ville jeg bli sykepleier, siden jeg var glad i å hjelpe mennesker.
Da jeg endelig ble så gammel at jeg skulle søke utdanning, ville jeg drive med økonomi, siden jeg syntes det var gøy.
Jeg søkte rundt og sjekket ut forskjellige økonomi-studier rundt om i Norge. Da kom jeg over et studie der første året innebar diverse datafag og de to neste hadde samme fag som en del av de rene økonomi-studiene. Genialt, tenkte jeg. Data er jo kjekt å kunne uansett. Studiet het Informasjonssystemer.
Det var et rent hell at jeg kom over dette studiet, for etter jeg hadde startet, innså jeg at koding var langt morsommere enn jeg hadde trodd. Jeg hadde ingen erfaring med det fra før, og det var vanskelig, men gleden av å skape noe eget var utrolig deilig. Jeg innså at det var utvikler jeg ville bli!
Det første året for Informasjonssystemer-studenter var felles med studenter som studerte Informatikk, en annen bachelorgrad der alle tre årene var fokusert på diverse datafag. På tampen av det første skoleåret byttet jeg over til Informatikk, og det har ikke vært et sekund jeg angret på at det gjorde nettopp dette.
Nå er jeg utdannet utvikler og jobber med Webutvikling i en bedrift i Skien. Jeg har mye fokus på å kode fram det brukeren kan SE på en hjemmeside, og tittelen min er derfor “Frontend-utvikler”.
Tenkte å fortelle litt om hverdagen som webutvikler utover på denne bloggen, så om man interessert, er det bare å følge med!