Lær å lage hjemmeside – Leksjon 11

Nå begynner vi å nærme oss et ferdig resultat med stormskritt, og nå skal vi bli ferdig med innleggsdelen. Det meste har vi gått gjennom før, så jeg kommer bare til å lime inn mye av koden, slik at du kan kopiere og lime inn. Jeg prøver mest å vise fram hvordan vi kan bruke alt vi har lært til å bygge opp en blogg.

Article

Forrige leksjon gikk vi gjennom sideseksjonen, og nå skal vi lage innleggene. Da bruker vi elementet “article”.

Over <aside>-klassen limer du inn dette i HTML-koden:

<section>
    <article>
        <div class="article-top">
            <span class="article-time">
                16:00
            </span>
            <span class="article-date">
                16.05.17
            </span>
            <span class="article-category">
                Webleksjon
            </span>
        </div>
        <div class="article-main">
            <h1>Innleggstittel</h1>
            <p>
                Dette er et blogginnlegg
            </p>
        </div>
        <div class="article-bottom">
            <span class="article-comments">
                2 kommentarer
            </span>
        </div>
    </article>
</section>

Denne koden skal altså ligge inne i main-tagen, men over aside-tagen. Dersom du hadde section-tagene liggende der fra før fra forrige leksjon, limer du kun inn article-tagene. Altså alt fra og med <article> og til og med </article>.

Dette skjer i koden:

• Vi lager en article-tag inne i seksjonen. Dette er fordi det skal kunne ligge flere article-tager inne i samme leksjon.
• Vi deler opp innlegget med en topp som heter “article-top”, en midtdel som heter “article-main” og en bunn som heter “article-bottom”. 
• I toppen lager vi span-elementer for klokkeslett, dato og bloggkategori. 
• I midtdelen lager vi en overskrift og en kort paragraf for innholdet i innlegget. 
• I bunnen lager vi et span-element for kommentarer. 

Uten styling blir resultatet slik:

Her har vi altså en stylingjobb å gjøre. Men først bytter vi ut blogginnlegg-paragrafen med litt mer innhold, slik at mengden innhold blir litt mer realistisk. Da kan man bruke en Lorum Ipsum-generator! Da velger man bare hvor mange paragrafer med svadatekst man ønsker, så får man det ut. Jeg bruker denne. 

Erstatt dette:

<p>
     Dette er et blogginnlegg
</p>

med dette:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta molestie tortor, quis ultricies lacus auctor at. Duis convallis rutrum nisl, non auctor dolor sollicitudin scelerisque. Nam vehicula dui vel dolor gravida, sed interdum massa scelerisque. Curabitur porta diam sit amet ligula mattis, et vulputate nisl sollicitudin. Sed eget arcu eget neque bibendum finibus eget sed est. Nam ultrices pretium tellus, in mollis libero placerat quis. Curabitur nunc est, cursus posuere odio vitae, tincidunt posuere eros. Phasellus turpis mauris, venenatis ut diam ut, ornare porta mi. Mauris non justo id eros aliquet tempor nec eget orci. Suspendisse imperdiet vehicula arcu ac pharetra. Ut viverra sapien eu nisi imperdiet cursus. Integer imperdiet, nisi vitae tempor vulputate, metus diam semper nisi, non rutrum diam turpis at ante. Aenean tincidunt ligula elit, nec cursus tellus condimentum a. In eu ex eu enim finibus interdum.
</p>
<p>
    Vivamus a sapien sollicitudin, aliquam enim et, luctus mi. Morbi at tincidunt turpis. Aliquam posuere iaculis est, sed rhoncus leo pulvinar at. Sed ultrices, turpis dapibus lacinia pulvinar, elit libero aliquam ante, sed hendrerit eros metus non augue. Curabitur eleifend diam vel eros euismod vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tempor faucibus aliquam. Nulla bibendum dapibus massa varius dapibus. Cras condimentum ante quam, eget suscipit elit interdum non. Aliquam eget turpis maximus, consequat quam vitae, faucibus metus. Nulla eu faucibus turpis, et pretium nulla. Sed elementum sagittis risus, quis luctus enim dictum a. Sed congue id quam sit amet mattis. Nulla facilisi. Phasellus ut suscipit nisi, posuere euismod massa. In hac habitasse platea dictumst.
</p>

Styling

Nå skal vi begynne med CSS, og vi skal importere ikoner! Font Awesome har et hav av ikoner du kan bruke gratis. Blogg.no har integrert Font Awesome, så dette steget trenger du ikke å gjøre inne på blogg.no, men lokalt på egen PC må du importere disse ikonene. Det gjør du bare på samme måte som vi ellers legger til stylingark og skrifter. 

Legg dette inn i <head> i HTML-koden:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Da kan vi begynne i CSS-arket. 

Vi begynner å style topp og bunn av article:

article {
    background-color: #f8f8f8;
    margin-right: 10px;
}

article div.article-top, article div.article-bottom {
    text-align: center;
    padding: 10px;
    color: #777777;
}

article div.article-top .article-time, article div.article-top .article-date, article div.article-top .article-category {
    padding: 0px 10px;
}

Legg merke til her at jeg legger samme styling med text-align, padding og tekstfarge på både topp og bunn ved å legge dem etter hverandre med komma mellom. Det samme gjør jeg med time, date og category. De får alle sammen 10px padding på siden av seg. 

Nå skal vi legge til ikonene. Det gjøres slik: 

article div.article-top .article-time:before {
    content: 'f017';
    font-family: Font Awesome 5 Free;
}

article div.article-top .article-date:before {
    content: 'f073';
    font-family: Font Awesome 5 Free;
}

article div.article-top .article-category:before {
    content: 'f07c';
    font-family: Font Awesome 5 Free;
}

article div.article-bottom .article-comments:before {
    content: 'f075';
    font-family: Font Awesome 5 Free;
}

Vi legger ikonet foran elementet ved å bruke et pseudo-element som heter “before”. Man bruker det ved å skrive ::before eller :before. Deretter setter vi hva som skal være innholdet foran elementet, og koden man legger inn her finner man inne på Font Awesome sin side. Til slutt forteller man datamaskinen at man ønsker å bruke Font Awesome sitt ikonbibliotek.

Nå gjenstår bare stylingen på innholdet i innlegget, og der har jeg valgt å gjøre det enkelt med denne koden: 

article div.article-main {
    padding: 20px;
    margin: 0px 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #e8e8e8;
}

article div.article-main h1 {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1.2px;
    margin: 10px 0px;
}

Her er det gjenbruk av mye av koden vi har lært før.

Resultatet blir slik:

Så da er det bare å endre på farger og størrelser som man selv vil, og tilpasse sitt eget behov. Ha det gøy med det!

Andre leksjoner: 

• Leksjon 1
• Leksjon 2
• Leksjon 3
• Leksjon 4
• Leksjon 5
• Leksjon 6
• Leksjon 7
• Leksjon 8
• Leksjon 9
• Leksjon 10
• Leksjon 11
• Leksjon 12