Lær å lage hjemmeside – Leksjon 7

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

Lim denne teksten inn i index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Layout elementer</title>
    <meta charset=”utf-8″>
    <link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
       <div class=”wrapper”>
        <header>
            Header
        </header>
        <nav>
            Navigasjonsbar
        </nav>
        <main>
            Main
            <section>
                Seksjon
            </section>
            <article>
                Artikkel
            </article>
            <aside>
                Sidebar
            </aside>
        </main>
        <footer>
            Footer
        </footer>
    </div>
</body>
</html>

Lim denne teksten inn i style.css

div.wrapper
{
    max-width: 1200px;
    margin: auto;
}

header, nav, main, footer, section, aside, article
{
    border: 1px solid red;
    padding: 10px;
}

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”.

Lim denne linken inn i src, slik: 

<img src=”https://cdn.pixabay.com/photo/2016/08/30/16/27/banner-1631299_960_720.jpg” />

 

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! 

Lærte du noe av denne leksjonen?

 

Alle leksjoner: 

4 thoughts on “Lær å lage hjemmeside – Leksjon 7

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top