HTML: Del inn nettsida
Skrevet av: Lars Klingenberg
Oversatt av: Stein Olav Romslo
Introduksjon
Målet med denne oppgåva er å lære korleis ein kan organisere ei nettside ved å dele den inn med ulike taggar. Viss du ikkje er kjent med tagg-strukturen i HTML som me har sett på i dei andre oppgåvene (i oppgåvesamlinga HTML), så anbefalar me at du går tilbake og ser på det. Me skal sjå korleis me kan setje farge på dei ulike taggane med CSS, men me kjem ikkje til å gå djupt inn i CSS i denne oppgåva. For meir CSS kan du sjå på dei spesialiserte oppgåvene.
I denne oppgåva skal du gjere steg der du må programmere utan oppskrift. Viss du står fast kan du trykkje på "Sjå koden så langt" og sjå ei mogleg løysing. Det er ingen fasit på oppgåva, men me kjem med forslag til korleis ho kan løysast.
Når me er ferdig med oppgåva kjem sida di til å sjå ut omlag som dette, kanskje med meir tekst eller andre fargar:
Lykke til!
Steg 1: <div></div>
<div>-taggen er ein tagg som brukast veldig mykje. Teksten div står for division eller seksjon. Me brukar denne taggen for å organisere ulike delar av sida, og den blir ofte brukt saman med CSS (som handlar om utsjånaden), som me skal sjå på seinare i oppgåva. La oss starte med eit døme:
Under ser du utviklarverktøyet til Chrome til høgre og kidsakoder.no til venstre. I utviklarvindauget ser me fleire <div>-taggar inne i kvarandre. Desse skal me lære meir om.
Som du ser blir <div>-taggen brukt til å organisere element eller ting på nettsida. Legg merke til at alle <div>-taggane har ein ID. Då blir det enklare å halde styr på kva som ligg i desse seksjonane, og for at det skal vere enklare å setje design (CSS) på dei.
La oss prøve ut <div>-taggen sjølv!
Steg 2: Me deler inn heimesida vår i 3 delar
Som me kanskje hugsar frå oppgåva med Den forsvunne katten, så ser oppbygginga av ei tom nettside slik ut:
<html>
<head>
</head>
<body>
</body>
</html>
Hugsar du at me kan leggje til metadata i <head> for mellom anna å få tittel på nettsida vår?
-
Når me skal lage ein
<div>på sida vår må me leggje den inne i<body>-taggen vår. -
Fann du det? Det er ein slik me prøver å lage, men me skal ha ein forenkla versjon.
No har du delt inn sida i 3 delar: header, navigasjon og hovudområdet (innhald)
Steg 3: Me prøver litt CSS
No skal me setje farge på dei 3 <div>-ane me har laga. For å gjere det brukar me attributten style="". I style kan me leggje til variablar som, til dømes, background-color: favorittfarga di.
<div style="background-color: red"></div>
No skal me setje ein ID på <div>-ane våre før me ser meir på CSS. Kan du tenke deg nokre gode ID-ar me kan bruke på <div>-ane våre?
Steg 4: Me legg til ein ID
ID er ein fin ting å bruke viss me vil ha ulik stil på ulike seksjonar på sida vår. Me har laga 3 <div>-taggar der ein heldt styr på headeren, ein på navigasjonslinja og ein på innhaldet.
Du lagar ID ved å leggje til attributten id="" i <div>-taggen.
<div id="namn_på_id-en"> </div>
No som me har laga ID-ar på <div>-ane våre skal me prøve ein ny måte å lage CSS på.
Steg 5: Litt meir CSS
Me endrar korleis ei side ser ut gjennom å bruke språket CSS (som står for Cascading Style Sheets). Dette er eit veldig enkelt språk, og du lærer meir om dette i andre oppgåver. CSS er bygd opp på denne måten:
selector {
property: value;
}
Selektorar er som regel HTML-taggar som h1, p, img, a. Men dei kan òg vere ID-ar og klasser, som me lærer om seinare.
Property kan vere, til dømes, background-color som me allereie har brukt. Fleire properties finn du på w3schools.com/css.
Value er det som kjem etter ein property og er verdien du sender til property. Det kan til dømes vere farga red.
Under ser du korleis du kan leggje til CSS i <head>-taggen med 3 ID-ar:
<head>
<style>
#header{
}
#nav{
}
#innhald{
}
</style>
</head>
Det finst fleire måtar å skrive farger i CSS på. Me har brukt kjente ord som red, blue og green. Men me kan faktisk lage over 16 millionar ulike farger ved å bruke ein annan metode. For å lage desse fargene skal me bruke tala 0-9 og bokstavane A-F. Me set dei saman i ein kombinasjon av 6 tal og/eller bokstavar. Sidan det tek veldig lang tid å prøve ut desse for å finne fargene me vil ha, så kan me bruke eit hjelpemiddel:
Me skal sjå meir på CSS etter me har lært litt meir HTML.
Utfordring
Steg 6: HTML5-taggar
No har me sett på korleis me kan bruke <div>-taggen til å organisere nettsida vår, og korleis me kan setje stilar på desse ved hjelp av CSS. Det kjem stadig nye versjonar av HTML, og no er me på versjon HTML5. Med denne versjonen kom det nokre nye taggar me skal sjå på. Her er ei liste over nokre:
<nav> - heldt på navigasjonslenkene til sida
<header> - her ligg overskrifta til sida eller til ein artikkel på sida.
<main> - her ligg hovudelementa til sida.
<section> - kan brukast for å lage ein eigen seksjon på sida.
<footer> - denne ligg alltid nedst på sida, og inneheldt gjerne kontaktinformasjon eller namnet på den som har skrive nettsida. Rull ned til botnen på denne sida og sjå kva som står der.
<article> - viss ein har ein artikkel på nettsida kan den stå inne i denne taggen.
Du kan lese om fleire her:
https://www.w3schools.com/html/html5_new_elements.asp
Desse taggane gjer det enklare for nettlesaren å sjå kva innhaldet på sida er. No skal me byte ut <div>-taggane på sida vår med nokre av taggane over.
No vil <body>-en sjå ut som dette:
<body>
<header>
<h1> Den øvste div-en </h1>
</header>
<nav>
<ul>
<li> Heim </li>
<li> Hobbyane mine </li>
<li> Om meg </li>
</ul>
</nav>
<section>
<h3> Mi side </h3>
<p> Denne sida inneheldt informasjon om meg, kven er eg og hobbyane mine.</p>
</section>
</body>
#nav i CSS tyder at me endrar stilen på ein tag med ID-en nav. Viss me ikkje har noko framfor nav tyder det "for alle <nav>-taggar". Når me brukar HTML5-taggane må me hugse å endre på CSS-en vår.
CSS-en bør sjå omlag slik ut, men sannsynlegvis med andre farger:
header{
background-color: #D46A6A;
}
nav{
background-color: #55AA55;
}
section{
background-color: #669999;
}
No vil koden sjå omlag slik ut:
No har du lært korleis du kan dele inn ei nettside ved hjelp av <div>-taggen og HTML5-taggar. La oss gå til neste oppgåve og sjå korleis me kan lenke saman nettsider.
Forbedre denne siden
Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!
