Foreløpig har vi laget header og nav-bar på siden vi bygger opp, men før vi skal fortsette til neste punkt vil jeg gå gjennom noe som heter “flex”. Vi har gått gjennom display-attributtene inline, inline-block og block, men flex er noe relativt nytt som har kommet de siste årene.
Dersom du fortsatt bruker Internet Explorer 10 vil ikke flex fungere hos deg.
Man bruker flexbox for at elementer skal ligge i forhold til hverandre på en side. Man kan velge at de skal være like høye eller like lange, og mye annet. Jeg skal gå gjennom noen av de enkle funksjonene.
Her ser du en blå firkant med grå firkanter i seg.
Denne blå firkanten en en container. De grå firkantene er elementer (items).
Dette vil automatisk få elementene til å legge seg på rad etter hverandre. Det som da vil skje er at uansett hvor mye innhold en av divene har i seg, så vil alle elementene fortsatt ha lik høyde. Bredden vil variere ut i fra hva som er fastsatt, med mindre noe annet er avklart, men høyden vil alltid være det samme.
På bildet over har alle elementene padding, som gjør at det blir luft fra bokstaven og ut til kanten. I tillegg har dem margin, og dette gjør at det blir avstand mellom elementene.
Men dersom man ønsker at elementene skal ta ut full bredde til sammen kan man sette på dette:
Her må man begynne å gjøre litt matte. Dette er brøkregning. Setter man “flex: 1” vil størrelsen bli én del av det totale antallet sum med flex. Hvis alle tre elementene hadde hatt “flex: 1”, ville summen vært 3. Altså ville alle elementene tatt 1/3, og de ville vært like store.
Nå som en har størrelse 1, to har størrelse 2 og tre har størrelse 3 blir summen 6. Altså vil den første elementene ta 1/6 av den totale bredden. To vil ta 2/6 og tre vil ta 3/6.
Et til eksempel er der man bare har to elementer og der css-koden er:
.en {
flex: 1;
}
.to {
flex: 2;
}
Da vil den totale bredden bli 3, og element nr. 1 vil derfor ta 1/3 og element nr. 2 vil ta 2/3, slik som her:
Som standard blir alle elementene lagt i en rad der de alltid vil være like høye. Dette skjer automatisk, men man kan også sette det manuelt med:
Det er også mulig å gjøre at elementene ligger oppå hverandre og forholder seg til hverandres bredde. Da vil de alltid være like brede, men høyden kan justeres, og da ligger de i en kolonne. Man setter det slik:
I dag skal vi ha pils og være sosiale med jobben på taket av bygningen vi jobber i! Været er kjempefint her i Skien, og stemningen er god. Hurra for lønningspils!
Etter en uke med tunge programmeringsoppgaver og mye kaos er det DEILIG å kunne trekke seg tilbake og starte helgen med et par pils i vårvarmen.
I forrige leksjon gikk vi gjennom forskjellige layout-elementer. Om du gikk glipp av den, kan du lese den her. Vi startet å bygge opp en side ved å bruke mange forskjellige layout-elementer. Til nå har vi kun fått på plass headeren. Vi skal få på plass ett element per leksjon framover, og i dag er det nav-baren som står for tur. Dersom du har mistet koden fra forrige gang, lager du en ny mappe med en index.html-fil og en style.css-fil. Her er koden:
I tillegg lastet vi ned et bilde og kalte det “bannerbilde.jpg” (dersom bildet du laster ned er av et annet filformat må du skrive noe annet i <img>-tagen enn .jpg).
Nav-baren
Nav-baren brukes som meny på siden vår. Det er hovedmenyen helt øverst, der det typisk på en blogg vil være linker til “Hjem”, “Kategorier”, “Profil” og “Arkiv”. Man kan velge å ha hva man vil i disse nav-barene.
Vi bygger den opp ved å putte dette inn i <nav>-tagen:
<nav>
<ul class=”menu”>
<li><a href=”#nowhere” title=”Link til forsiden”>Hjem</a></li>
<li><a href=”#nowhere” title=”Link til kategorier”>Kategorier</a>
<ul>
<li><a href=”#nowhere” title=”Link til kategori1″>Kategori 1</a></li>
<li><a href=”#nowhere” title=”Link til kategori2″>Kategori 2</a></li>
<li><a href=”#nowhere” title=”Link til kategori3″>Kategori 3</a></li>
<li><a href=”#nowhere” title=”Link til kategori4″>Kategori 4</a></li>
<li><a href=”#nowhere” title=”Link til kategori5″>Kategori 5</a></li>
</ul>
</li>
<li><a href=”#nowhere” title=”Link til arkiv”>Arkiv</a>
<ul>
<li><a href=”#nowhere” title=”Link til kategori1″>Januar 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori2″>Februar 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori3″>Mars 2018</a></li>
<li><a href=”#nowhere” title=”Link til kategori4″>April 2018</a></li>
</ul>
</li>
<li><a href=”#nowhere” title=”Link til profil”>Profil</a></li>
</ul>
</nav>
Har man litt god hukommelse kan man legge merke til at man bygger opp menyen av en “unordered-list”. Som en påminnelse for andre er <ul>-tagen noe som lager en punktliste bestående av <li>-elementer. Derfor vil dette se veldig rart ut om man nå bare lagrer og ser på uten noe css til:
Legg også merke til at jeg har lagt en <ul> inne i en annen <li> to steder. Dette er for å lage undermenyer under punktene. Det er jo vanlig at for eksempel “Kategori” og “Arkiv” har under menyer med måneder og kategorinavn under seg.
Alle <li>-tagene har en <a>-tag inne i seg. Denne lager linken, for en meny skal jo bestå av forskjellige linker. Foreløpig står det bare “#nowhere” i linken (href), slik at når du trykker på dem, så havner du ingen steder. Det du skriver i “title” vil ikke bli synlig på nettsiden, annet enn når du holder musa over ordet. Dette følger regler for universell utforming, så en dataoppleser kan vite hvor linken skal hen.
Men vi trenger jo litt styling og, for det kan ikke være en slik punktliste nedover. Derfor legger vi først inn denne linken i head:
li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul.menu li ul {
display: none;
position: absolute;
border: 1px solid transparent;
border-width: 0px 1px 1px 1px;
box-shadow: 0px 3px 5px 0px #e8e8e8;
top: 47px;
}
nav ul.menu li:hover ul {
display: block;
}
nav ul.menu li a:hover {
background-color: #f8f8f8;
}
Nå skal jeg gå gjennom og forklare:
Øverst har jeg skrevet “/* Nav */”. /* brukes for å skrive kommentarer i et css-dokument. Det vil ikke bli lest av websiden, og ødelegger derfor ikke valideringen.
Vi starter med å bare legge styling på nav-tagen.
Først legger vi “position: sticky”. Det gjør at posisjonen til elementet blir “klistret” til toppen sammen med parameteret “top: 0” som vi ser under.
Vi fjerner paddingen la vi til for å illustrere med “padding: 0;”.
For å pynte litt legger vi på litt text-transform og border. For å få til at det bare blir border oppe og nede kan man gjøre slik jeg har gjort her med “border-width”.
Vi går videre til å style selve <ul>-tagen. Vi har gitt ul’en klassenavnet “menu”, så vi skriver derfor “nav ul.menu” når vi skal style den. Det betyr ul med klasse “menu” som ligger inni nav.
For å fjerne “dottene” bak listeelementene bruker vi “list-style-type: none”.
Vi fjerner alt av autogenerert margin og padding.
Vi setter bakgrunnsfarge.
Vi gjør at elementene i nav-baren “flexer”. Vi kommer til å ha en helt egen leksjon om flex og hvordan det fungerer en gang. Nå bruker vi det til å få alle elementene under “ul” til å legge seg pent på rekke.
Vi velger at li, som er direkte under ul, som er direkte under nav, skal ha “position: relative”. Man setter denne posisjonen om elementene inne i dette elementet skal forholde seg til dette. Altså om man skal ha et element med “position: absolute”, vil dette bruke det nærmeste elementet oppover med relativ posisjon som “ramme”.
Så begynner vi å style selve linken.
Vi setter at linken skal være vist i blokkvisning, slik at vi kan legge margin og padding på den.
Vi setter farge på skriven, sentrerer den og legger på padding, så det blir litt luft inne i boksen.
Til slutt fjerner vi understreken under linken med “text-decoration: none;”.
Vi har jo en dropdown-meny, og for å få denne til å fungere som den skal må vi også style denne. Det gjør vi ved å velge ul, som er under li, som er under ul igjen og som er under nav. Da blir det spesifikt undermenyen som blir stylet.
Først skjuler vi den med “display: none”. Vi vil jo ikke at den skal vises før man holder musa over den.
Deretter setter vi “position: absolute” for at elementets plassering ikke skal påvirke noen andre objekter på nettsiden. Dette er grunnen til at vi satte “position: relative” på li-tagen, for nå legger den seg direkte under sin egen li-tag.
Vi pynter med border og box-shadow.
Så sier vi at det skal være 47px opp til toppen av elementet. Dette er for at den skal legge seg under <li>-tagen, og ikke oppå.
På “nav ul.menu li:hover ul” sier vi at når vi holder musen over en li-tag, skal ul være “display: block”. Dette overstyrer “display:none” som vi satte i stad.
Til slutt setter vi bakgrunnsfarge på a-tagen når den blir hovret over.
Var dette forståelig?
Lagre dokumentene og se på siden i nettleseren din! Det skal se slik ut:
Gleder meg til neste leksjon når vi skal ta for oss hovedseksjonen!
Nå har vi lært mye av det grunnleggende i det å lage hjemmeside, men foreløpig har vi bare hatt en lang rekke av elementer etter hverandre, uten noen form for struktur. Vi har brukt <head> og <body> for å samle de elementene som er synlige og “usynlige”, men nå skal vi strukturere siden med enda flere tager.
Layout-elementer
HTML tilbyr noen tager man kan bruke for å definere enkelte elementer på siden. Dette er de forskjellige layout-elementene:
<header> – Definerer headeren på nettsiden (toppen)
<nav> – Lager en konteiner rundt navigasjonslinker, som en meny
<main> – Definerer hovedinnholdet. Det som kanskje varierer fra side til side
<section> – Definerer en seksjon på en webside
<article> – Definerer en selvstendig og selvforklarende artikkel. Inneholder ofte bloggposter, nyheter, forumposter og kommentarer
<footer> – Definerer bunnen av nettsiden.
<aside> – Definerer innhold som skal ligge på siden av resten av innholdet.
Alle disse brukes på hver sine måter på blogg.no’s nyeste design (når man oppretter en ny blogg). Før var det bygd opp kun av ulike <div>-elementer. <div>-elementer er veldig praktiske til å gruppere ulike elementer og bygge opp forskjellige layoutklosser. Layout-elementene erstatter altså div’er. Der man før ville skrevet <div class=”header”> kan man nå bare skrive <header>.
Oppgave
Lag en ny mappe og kall den “layoutelements”. Lag to filer i denne mappen, en som heter index.html (filtypen skal være .html) og en som heter style.css (filtypen skal være .css). Det enkleste er å bruke Sublime til dette, som du lærte i leksjon 3.
Analyser denne koden litt. Inne i body-tagen ligger de forskjellige layout-tagene jeg nevnte. Legg merke til at section, article og aside ligger inne i main-tagen. Det vil si at <main> ikke avsluttes med en </main> før etter <aside> er avsluttet. I tillegg ligger alt dette inne i en <div> med klasse “wrapper”. Denne brukes til å sette bredde på alt av innhold, og for at det skal legge seg på midten av nettsiden.
I css’en lister vi opp alle de forskjellige layout-tagene etter hverandre med , mellom. Dette kan man gjøre når flere elementer skal ha lik styling. Vi setter en rød ramme på 1px rundt alle tagene, og legger i tillegg inn litt luft inne i hver av boksene. På div med klasse “wrapper” har vi satt en maks-bredde på 1200px, slik at siden ikke skal bli større enn dette. I tillegg har vi satt automatisk marginer på siden. Dette gjør at wrapperen legger seg på midten. Vi setter at luft til høyre og luft til venstre skal være automatisk.
Resultatet blir slik:
Dette viser litt hvordan man kan legge noen elementer inne i andre elementer.
Vi kan bit for bit gå gjennom og legge styling på de forskjellige elementene til vi har en blogg. Vi starter med header-elementet i dag.
Headeren
I headeren ønsker vi å legge til et bilde, og det er egentlig det hele.
Et bilde settes inn med <img>-tagen, slik:
<header>
<img src=”BILDELINK” />
</header>
Denne tagen er unik fordi den lukker seg selv med en / bakerst. Den har altså ikke noen </img> etter seg. Som du ser, har jeg skrevet “BILDELINK” der det står “src”. Du kan velge om du vil legge inn et bilde som ligger lokalt på din datamaskin, eller om du vil hente et bilde online. Ulempen med å hente online er at bildet kan bli fjernet eller at linken endres senere, men jeg kan uansett vise begge deler.
Hente online:
1. Finn et bilde på nett (OBS! Henter du fra google og skal bruke bildet offentlig må du passe på å filtrere på bruksrettigheter som er “Merket for gjenbruk”. Å skrive “Kilde: Google” holder ikke, for det er ikke Google som lager bildene..
2. Høyreklikk på bildet og velg “Kopier bildeadresse”.
Den andre måten å gjøre dette på er å lagre bildet i samme mappe som filene dine (gi den et enkelt navn, men uten æ, ø og å). Skriv det fulle navnet til bildet i src, slik:
og bruk denne img-tagen:
<img src=”bannerbilde.jpg” />
Nå gjenstår det bare stylingen. Lim inn denne teksten i style.css (nederst):
header
{
padding: 0px;
}
header img
{
width: 100%;
}
Her fjerner vi først paddingen på header-tagen (Lufta på innsiden). Deretter sier vi at img-tagen som ligger inne i header-tagen skal ha en bredde på 100% (full bredde).
Resultatet blir slik:
Da er vi et stort steg på vei! Følg med neste gang når vi skal lage toppmenyen!
Nå som påsken er over syns jeg det passer seg med et lite easter egg jeg oppdaget i dag! Dessverre blir det ingen webleksjon i dag, for jeg har rett og slett ikke hatt tid til å skrive en. Det tar fryktelig lang tid. Men her får dere et supert tips istedenfor.
Det kan godt hende at folk her allerede vet om denne funksjonen. Jeg fant ut av den i dag, så for meg var det sykt kult.
I påsken var jeg jo hjemme hos mamma og pappa, og da spurte mamma plutselig “Betyr ‘Arkivere’ å slette? Jeg trodde det betydde at jeg lagret det ned på telefonen!”. Da hadde hun vært inne på Instagram og arkivert et av bildene sine. Jeg har sett flere steder der “Arkiver” blir brukt som et elendig ord for nettopp “Slett”, så jeg sa at jeg trodde det var riktig. Hun ble jo litt fra seg, for det var et veldig fint bilde hun ikke lenger hadde på egen telefon. Det var jo grunnen til at hun ville lagre det i utgangspunktet. Siden har jeg vært veldig irritert på instagram for å bruke et så dumt ord for å slette bilder, helt til jeg selv gikk inn og så dette:
Det står jo både “Arkiver” og “Slett”? Så jeg valgte et gammelt bilde helt nederst på Instagrammen min og valgte “Arkiver”. Jeg reagerte først på at jeg ikke fikk noen spørsmål om “Er du sikker på at du vil slette bildet?” dersom dette var det som faktisk skjedde. Så begynte jeg å lete litt rundt på Instagram og oppdaget denne knappen:
Det ER faktisk et arkiv! Og jeg som trodde det bare var et dårlig ord! Og her kan du hente inn og ut bildene dine som du vil og “designe” instagrammen! Det er jo sykt kult, for de som er opptatt av sånt. Da slipper man at bildene sine blir borte for alltid når man ikke vil ha de synlig på instagrammen lenger og.
Man får bildet fram igjen sånn her:
Så nå vet alle det. Beklager for et kjedelig innlegg for alle som visste det, men jeg syns faktisk dette var veldig kult. Jeg visste ikke om det fra før!
I dag skal vi prate om fonter og skrifttyper! Det blir dessverre et veldig teoretisk innlegg, men jeg skal gå gjennom litt stylingmuligheter for skrift.
Først av alt: Forskjellen på en font og en skrifttype er at skrifttype er den overordnede typen skrift. En font er spesifikt hvilken skrifttype, skriftstørrelse og skrifttykkelse.
Font-family
Når du bruker et worddokument må du velge deg ut ulike skifttyper, som Times New Roman, Arial, Comic Sans, Calibri og andre skrifttyper. Det samme må du når du lager en hjemmeside. Du velger skrifttype ved å sette det på en tag. Vil du at hele nettsiden skal ha skrifttype “Arial”, legger du det inn slik:
body {
font-family: “Arial”;
}
I tillegg kan du legge til en skrift-familie, som en slags “fallback”. Altså dersom nettleseren ikke finner noen ‘Arial’-skrifttype, så kan den vite hva slags type skrifttypen skal være av. De forskjellige skriftfamiliene er:
Serif: Serif-skrifter har små fnutter på endene av bokstavene. Eksempler er Times New Roman og Georgia.
Sans-Serif: Sans-serif-skrifter har ikke disse fnuttene som serif-skriftene har. “Sans” betyr “Uten”. Eksempler er Arial
og Verdana.
Monoscape: Denne familien brukes ikke like mye som de to andre overstående. Men de brukes på skrifttyper der alle bokstavene skal være like brede. Eksempel er Courier New.
Du setter skriftfamilien bare på rekke etter skrifttypen, så du starter med den skrifttypen du helst vil bruke, for så å legge til skriftfamilien. Da finner nettleseren en lignende skrift. Skriv det slik:
body {
font-family: “Arial”, sans-serif;
}
Font-style
Font-style settes mest for å sette tekst til italic (kursiv). Vanligvis vil man ikke sette all teksten i kursiv, så da er det lurt å lage klasser på paragrafene man ønsker skal være kursiv. Altså skal det se slik ut i HTML-koden:
<p class=”italic”>
Dette er test-tekst
</p>
Da styler du det slikt med det slik med font-style. Legg merke til at jeg setter p og italic med en . mellom seg. Det betyr at jeg vil style tag’en med class=italic:
p.italic {
font-style: italic;
}
Resultatet blir slik:
Dette er en test-tekst
Font-size
For å kunne endre tekst-størrelse på skriften din, må du bruke font-size, altså skriftstørrelse. Dette setter du på blant annet paragrafer (<p>) og headere (<h1>-<h6>).
Det er to mye brukte måter å sette skriftstørrelse på. Man kan bruke en statisk størrelse og dynamisk. Når størrelsen er statisk forandrer den ikke seg ikke når brukeren bruker tekstverktøyer som skal forstørre teksten (for svaksynte blant annet). Dette gjør dynamiske størrelser. I dette kurset har jeg brukt statisk størrelse (px), fordi dette brukes på alle andre elementer, men framover skal vi begynne å bruke dynamiske (em).
Da må man gjøre litt matte for å gjøre px om til em. 1 em = 16px. Altså: Dersom du skal gjøre 40 px om til em blir det
40px/16 = 2.5 em.
Du setter størrelsene slik:
h1 {
font-size: 2.5em;
}
p {
font-size: 1em;
}
Font-weight
Det finnes mange ulike skrift-vekter. Vekter er hvor tykk teksten skal være. Den kan settes med både skrift og tall. Det beste er å bruke tall, for da får du flere alternativer å holde deg etter. Dersom du bruker klartekst, så er parameterne normal, bold, bolder og lighter. I tall strekker deg seg fra 100-900. Altså er det veldig mange flere muligheter når du bruker tall, så lenge skrifttypen tillater det.
400 vil tilsvare normal. Det er standard vekt, så lenge ikke annet er spesifisert. På mange overskrifter er det ofte standard at de er satt til bold.
700 vil da tilsvare bold. Dette er standard for vanlig tykk tekst. Du kan få enda tykkere tekst ved å bruke et høyere tall, om skrifttypen tillater det, for eksempel 800 og 900. Dersom du ikke vil ha fult så tykk tekst, men fortsatt noe som er tykkere enn normalen, kan du bruke 500 eller 600.
Alt under 400 vil være “light”-skrifter. Her er det vanlig å stoppe på 300, men jeg har faktisk flere steder på bloggen min gått helt ned til 200.
Du setter font-weight slik:
h1 {
font-weight: 400;
}
Text-decoration
Text-decoration kan sette eller fjerne tekst-dekorasjon. De ulike parameterne er underline, overline, line-through, none og du kan også sette “underline overline” for å få begge deler på samme. Text-decoration brukes ofte for å fjerne understreken under a-tager (linker). Det gjøres slik:
a {
text-decoration: none;
}
Text-align
Text-align settes for å bestemme hvor skriften kan “flyte”. Altså velger du left, center eller right. Det posisjonerer teksten til venstre, i sentrum eller til høyre. Det settes slik:
p {
text-align: center;
}
Importere tekst
Jeg viste en gang hvordan man importere tekst, men nå skal jeg gå litt mer grunnleggende gjennom det. Nettleseren har nemlig ikke alle verdens skrifttyper innebygd. Du kan for eksempel bruke gratis skrifttyper fra Google Fonts slik:
1. Gå inn på https://fonts.google.com
2. Finn en tekst du liker
3. Trykk på “Select this font”
4. Trykk på den svarte baren nederst der det står “Family selected”, slik at dette dukker opp:
5. Trykk på “Customize”
6. Velg de vektene du ønsker å importere. Prøv å holde deg til bare noen få vekter, for hvis ikke blir lastetiden til nettsiden din så treg. Det pleier å holde med normal, en av de tykkere og kanskje en tynn.
7. Trykk tilbake på “Embed”
8. Kopier lenken under “Standard”
9. Lim importlenken inn i <head> i HTML-koden din.
Foreløpig i leksjonene har vi brukt farger skrevet i klartekst og med # foran litt om hverandre.
Altså; Det finnes tre måter å skrive at du vil ha en bakgrunnsfarge svart på. Du kan enten skrive “background-color: black”, “background-color: rgb(0, 0, 0)” eller “background-color: #000000”. Det er altså klartekst, RGB-verdier og HEX-verdier. Det finnes også RGBA og HSL, men disse skal vi ikke gå inn på i dette kurset.
Alle oppdaterte browsere støtter å skrive 140 forskjellige fargeverdier bare rett ut i klartekst. Det er jo en ulempe å ha et så begrenset antall farger å holde seg etter, men det er veldig praktisk å kunne litt fargenavn når du for eksempel skal teste litt fargebruk.
En full oversikt over alle de 140 forskjellige fargene er her.
RGB-verdier
RGB-verdiene er skrevet på denne formen: rgb( rød, grønn, blå)
De røde, grønne og blå fargene strekker seg fra 0 til 255, der 255 er mest farge og 0 er minst farge. Mange har kanskje hatt om fargelære på skolen og lært at alle farger sammenblandet blir svart. Her er det omvendt. 0 rød, 0 blå og 0 grønn blir svart. 255 rød, 255 grønn og 255 grønn blir hvit.
Dersom man vil ha en 100% rød, klar farge, skriver man rgb( 255, 0, 0), altså 255 rød, 0 grønn og 0 blå.
Grønn er rgb( 0, 255, 0).
Blå er rgb( 0, 0, 255).
Hex-verdier er skrevet på denne formen: #rrggbb
der rr er røde verdier, gg er grønne verdier og bb er blå verdier. De er heksadesimaler (16-tallssystemet) og spenner fra 00 – FF, der FF er det høyeste tallet. På samme måte som hos RGB er #FFFFFF det høyeste tallet og derfor hvit. #000000 er det laveste tallet og er svart.
Denne måten å skrive tall på er veldig mye brukt. Det er en enkel måte å skrive farger på, raskere enn rgb. Samtidig finnes det veldig mange fler kombinasjoner farger enn når man skriver klartekst.
Det ble en kort leksjon denne uka om farger. Neste uke blir det fonter og skrifttyper! Det er kanskje kjedelig for noen med så mye teori, men det er veldig greit å kunne det grunnleggende. Når vi skal gå gjennom font-leksjonen, skal vi lære enda mer om styling av tekst. Så følg med neste uke.
Siden forrige leksjon var så tørr og kjedelig, tenkte jeg at vi skulle ta for oss litt morsommere ting denne uka. Vi skal se på litt forskjellig bruk av farger, størrelser, bilder, og hvordan disse kan endre seg når man for eksempel holder musepekeren over et objekt.
Vi begynner med å sette opp litt forskjellige knapper vi skal style. Følg instruksjonene fra forrige leksjon (her) om å lage ny mappe med nye filer (index.html og style.css). Pass på å opprette en ny mappe til dette prosjektet! Kall for eksempel mappen “styletesting” hvis du ikke kommer på noe eget navn. Kopier og lim inn denne teksten i et nytt HTML-ark:
Her ser vi eksempel på bruk av class-attributten. Den brukes for å sette en klasse på en tag. Klassen gjør av vi kan style denne tagen spesifikt. Man kan ha mange klasser ved å bare legge navnene etter hverandre med mellomrom slik jeg har gjort. Her kan man se at alle a-tagene har klassen “button”. I tillegg har hver enkelt tag en til klasse som er unik for hver enkelt knapp (“button1”, “button2” osv). I tillegg har a-tagen en attributt som er href. Det er her lenken til knappen skal ligge. Nå er det bare en hashtag. Det gjør at når man trykker på den, så skjer det ikke noe veldig spennende, annet enn at url’en legger på en # bakerst, og det gir ingen utslag.
Lagre dokumentet og åpne siden i nettleseren. Nå skal resultatet se slik ut:
Altså er de ikke veldig spennende enda.
Margins, paddings og border
Noen veldig grunnleggende stylinger er padding og margins. Disse brukes hele tiden, men likevel er det mange som blander dem, selv etter å ha kodet med CSS i mange år. Begge brukes nemlig til å legge til luft på hver sin måte.
Opprett et style.css-ark, eller åpne det du har om du alt har opprettet det. Legg så til denne koden øverst:
Legg merke til at jeg nå ikke lenger styler a-tagen i seg selv. Jeg styler klassen jeg har satt på a-tagen. Dette gjør jeg ved å sette et punktum og skrive klassenavnet etter.
Ellers er egentlig dette veldig greit:
Padding lager luft fra skriften og ut til rammen rundt elementet. Dette gjør den selv om du ikke har noen ramme, for det er alltid en “usynlig” ramme rundt alle elementer. Du kan også si at paddingen er lufta på innsiden av en boks eller en knapp.
Her er paddingen satt til 10px opp og ned, og 20 px til høyre og venstre. Du kan sette padding til alle retninger. Skriver du “padding: 10px” vil det bli 10px luft til alle kanter. Skriver du “padding: 1px 2px 3px 4px” vil det bli 1px opp, 2px til høyre, 3px ned og 4 px sil høyre.
Border er rammen rundt elementet, i dette tilfelle knappen. Den settes med tykkelse først (her 1px), utseende (her solid) og farge (her black).
Margin er luften som går utenfor elementet. Altså luft til andre elementer rundt objektet. Den kan settes på samme måte som padding. Her har jeg valgt at det skal være 20px avstand til alle kanter rundt elementet.
Vanligvis ligger a-tager på en linje i teksten, altså det er tekst som følger teksten “inline”. Du kan se for deg når du lager en link i ditt eget blogginnlegg, en mail eller i word. Dette gjør at vi ikke kan sette margin på denne uten at det blir rart og ser feil ut, fordi den skal oppføre seg som et vanlig tekst-element.
Vi kunne her ha satt “display: block”. Når noe er satt som block (slik som h1, h2 og h3 er) vil den ta hele bredden av siden med mindre noe annet er spesifisert, og altså være som en boks.
Her gjør vi en mellomting. Vi setter “display: inline-block”. Det betyr at vi ønsker at elementene skal være satt inline, men som blokker. Da legger de seg på rekke med teksten, men man kan fortsatt legge på stylinger som margin på dem.
“Text-decoration: none” fjerner understreken som naturlig kommer under en a-tag.
“color: black” setter tekstfargen til svart.
“font-family: Raleway,sans-serif” setter skrifttypen til Raleway.
Forskjellige knapper
Nå har vi fått på plass de generelle stilene. Dette har nå gitt alle a-tager som opprettes med klassen “button” dette utseende:
Altså bitte litt mer spennende enn før. Men fortsatt litt kjedelig! Vi styler den første knappen. Lim inn denne teksten i CSS-arket:
Noe som er nytt her er at fargene er skrevet i hex. Det vil si at de er en tallkombinasjon med # foran seg. Googler man “Colorpicker” får man opp en pen fargevelger. Velg da en farge, kopier tallet som står etter # og lim inn der du vil bruke en farge.
En annen ny ting jeg har lagt til er “border-radius: 2px”. Dette gjør at hjørnene på kantene blir avrundet med 2 piksler.
Nå stylet vi én spesifikk knapp. Dette gjorde vi ved å bruke knapp 1 sin andre klasse, altså ordet som var skrevet etter “button”.
Her har jeg brukt forskjellig styling på alle knappene, med bare noen få linjer kode. Les nøye gjennom all koden for å forstå hva den gjør. Dette blir resultatet:
Hover
Nå skal vi gjøre noe som er gøy! Vi skal bestemme hva som skal skje når vi holder musepekeren over knappene. Vi skal bruke noe som heter et psuedo-element. Enkelt og greit “hover”.
Først legger vi på en linje kode i .button-stylingen:
De nye stylingene her er border-color og box-shadow. Border-color er bare fargen på borderen. Man må altså ikke deklarere alt med borderen ved å ha “border: tykkelse, type, farge”. Man gå rett til “border-color”, slik som her.
Box-shadow lager skygge på boksen. Den settes med “box-shadow: pixler til høyre, pixler ned, hvor langt ut den skal gå, farge”. Ønsker du at skyggen skal gå oppover, må du bruke negative pixler der du legger inn pixler ned.
Lagre nå og se hvor forskjellige hover-effektene er!
Bilder
Som siste del av leksjonen må jeg vise hvordan man legger inn et bilde på hjemmesiden.
Da bruker du en html-tag som heter <img>. For at denne skal bli et bilde, må du legge inn en “src”-attributt. Du kan legge inn bilder som ligger i samme mappestruktur (altså lokalt på din datamaskin) eller fra internett. Det gjør du slik:
1. Høyretrykk på bildet du ønsker og velg “Kopier bildeadresse”:
2: Lim inn bildeadressen som src:
img-tagen er rar på den måten at den ikke trengs å lukkes, slik de andre tagene må.
For å endre størrelse på bildet, kan du legge inn dette i CSS’en:
img
{
width: 500px;
display: block;
}
Når jeg justerte på bredden, fulgte høyden etter, slik at bildet ble riktig skalert. I tillegg la jeg inn en “display: block” for å få bildet til å ligge på en egen linje. Nå er det “holdt av” plass til bildet på hele bredden av nettsiden.
Det var litt mer CSS og litt nye tags. Håper du følger med neste uke og, da tenkte jeg å gå gjennom litt farger og skrifttyper!
Hvis du vil se all min kode for å sammenligen og se hvordan resultatet med hovereffekter ble, kan du trykke her.
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.
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:
<!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:
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.
