html

Html - het maken van een website

1. De opbouw van een webpagina - voorbeeld 1

Nadat je de quiz hebt gemaakt en ingeleverd, wordt het nu tijd om een website te maken. Deze bestaat uit de volgende onderdelen:

  • <nav> - Het navigatie menu. Dit onderdeel mag ook onder de kop.
  • <header> - De kop
  • <section> - Een sectie, is onderdeel ergens van en dus niet onafhankelijk.
  • <article> - Een onafhankelijk onderdeel wat ook gekopieerd kan worden in een andere website. Je kiest altijd voor een <section> of een <article>.
  • <footer> - Een footer met daarin informatie over de website

De website is responsive. Dat houdt in dat de layout zich aanpast aan de breedte van het scherm. Je kunt dit in Firefox uitproberen door op Ctrl-Shift-m te drukken. Je komt dan in de zogenaamde responsive mode van Firfox waarin je de breedte van het scherm kunt instellen.

2. Een navbar maken

We werken op deze pagina met een embedded CSS style sheet. Heb je meer pagina's dan maak je een aparte stylesheet die je style.css noemt. We beginnen met het maken van de html.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">wie ben ik</a></li>
                <li><a href="#">hobby's</a></li>
                <li><a href="#">foto's</a></li>
                <li><a href="#">cv</a></li>
            </ul>
        </nav>
    </body>
</html>

We maken in dit geval een website over jezelf. Wees vrij om dit te veranderen in een onderwerp naar eigen keuze (bijvoorbeeld over je hobby).

Het resultaat is te zien in voorbeeld 1.

3. Een Google font instellen.

Bij Google kun je gratis fonts gebruiken. Ga naar de pagina van Google Fonts en kies een bepaald font wat je mooi vindt. Wij hebben gekozen voor "Poppins".

https://images.computational.nl/galleries/html/2022-06-01_11-51-15.png

Aan de rechterkant - rood omlijnd -kun je de code kopiëren om het font te gebruiken. Wij gebruiken alleen de daadwerkelijke link en niet de links die informatie verzamelen.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400" rel="stylesheet">

De variabele display=swap verwijderen weczodat alleen bovenstaande link overblijft. Dit geeft een foutmelding in xhtml. Uiteindelijk plaatsen we de link in de <head>.

Nu moeten we in de style ook nog instellen dat we dit font gaan gebruiken. Dit doen we met de volgende code.

<style>
    * {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
    }
</style>

De * betekent dat de instellingen gelden voor alle elementen. Tevens hebben we voor alle elementen een margin (marge buitenkant) en padding (marge binnenkant) met waarde 0 ingesteld. Het resultaat is te vinden in voorbeeld 2.

Merk op dat de bullets zijn verdwenen. Dat is niet echt zo. Ze zijn alleen buiten beeld i.v.m. de ingestelde marge van 0.

4. Verder met de navbar

We gaan weer verder met de navbar. Als eerste willen we graag af van de bullets. Dan doen we met list-style-type: none; met de selector nav ul. 

nav ul {
    list-style-type: none;
    font-size: 1.25rem;
}

We hebben ook het font iets groter gemaakt met de optie rem. Een rem is de grootte van het lettertype.

Vervolgens willen we graag alle menu-items naast elkaar plaatsen. Dat is in css erg eenvoudig geworden met de display: flex optie. Display bepaalt hoeveel ruimte een element inneemt. Standaard is het <ul> element display: block. Dat houdt in dat het de volle breedte van de pagina inneemt. Flex neemt alleen de breedte in van de letters. We voegen dus toe aan nav ul:

display:flex;

Je zult zien dat de menu-items naast elkaar gaan staan. Als laatste willen we ze graag in het midden. Dat is mogelijk met justify-content:center;.

justify-content:center;

Je kunt in op deze pagina zien wat de mogelijkheden van justify-content zijn. Bepaal zelf hoe je navbar eruit komt te zien.

In voorbeeld 3 kun je zien wat het resultaat tot nu toe is. Merk op dat we ook de titel hebben aangepast. Voor een hoger cijfer ga kopieer je niet maar probeer je andere instellingen toe te passen.

5. Font awesome

In onze navbar gaan we ook icoontjes toepassen. Dat gaat het beste via de website https://fontawesome.com . Maak op deze pagina een account aan met je edictum account.

https://images.computational.nl/galleries/html/2022-06-01_14-48-36.png

Hierna dien je naar de edictum gmail te gaan. Hierin bevestig je jouw emailadres en via deze link moet je nog wat informatie invullen. Geef onzininformatie maar zorg er wel voor dat je het wachtwoord onthoudt! Uiteindelijk zie je een link zoals onderstaand:

https://images.computational.nl/galleries/html/2022-06-01_14-54-32.png

Deze link kopieer je in de head. Vervolgens kun je met behulp van Font Awesome eenvoudig icoontjes toepassen. 

<i class="fa-solid fa-house" aria-hidden="true">

Je ziet dat een <i> wordt gebruikt om de icoontje te koppelen aan de css. Vroeger was dat de code voor schuine letters maar tegenwoordig wordt hiervoor <em> gebruikt dus de <i> kan voor dit soort dingen worden gebruikt. Dan zie je ook nog de optie fa-solid. De klasse fa-solid geeft aan dat het icoontje het standaard uiterlijk krijg. Er zijn meer opties zoals fa-regular of fa-light. Je kunt zelf zien welke uitwerking dit heeft.

Als laatte nog de optie aria-hidden="true". Dit heeft betrekking op het zogenaamde aria-label en is bedoeld voor bijvoorbeeld een zoekmachine of voor software voor blinden. Als het van een element niet duidelijk is wat de inhoud is dan kun je een zogenaamd aria-label toevoegen. In dit geval doe je dit juist niet.

In voorbeeld 4 zie je wat tot nu toe het resultaat is.

6. Nog meer css

Wij hebben voor de <a> de volgende instellingen toegevoegd.

nav a {
    color: #0966C2;
    text-decoration: none;
    padding: 1rem 1rem 0rem 1rem;
    text-align: center;
}

 Kies je eigen kleuren en maak de website zoveel mogelijk afwijkend van deze lessen zonder dat je de structuur geweld aandoet.

De padding is de verkorte schrijfwijze van padding-top, padding-right, padding-bottom en padding-left. Dit kun je onthouden met het woord trouble waarbij de klinkers staan voor top-right-bottom-left.

Voor de hover voegen we ook css toe.. We nemen meteen de <i> mee met een andere kleur.

nav a:hover {
    color: white;
    background-color: #0966C2;
}
nav a:hover i {
    color: #F3BA64;
}

Het resultaat is te zien in voorbeeld 5.

7. De navbar afmaken

Er rest ons nog één ding te doen. We willen graag de icoontjes boven de woorden tonen i.p.v. er vlak voor. De manier om dit te doen is als volgt. Geef eerst alle menu-items een <span>. Dit is een inline element wat nog niets doet.

<nav>
    <ul>
        <li><a href="#"><i class="fa-solid fa-house" aria-hidden="true"></i><span>home</span></a></li>
        <li><a href="#"><i class="fa-solid fa-person" aria-hidden="true"></i><span>wie ben ik</span></a></li>
        <li><a href="#"><i class="fa-solid fa-headphones" aria-hidden="true"></i><span>hobby's</span></a></li>
        <li><a href="#"><i class="fa-solid fa-images" aria-hidden="true"></i><span>foto's</span></a></li>
        <li><a href="#"><i class="fa-solid fa-id-card" aria-hidden="true"></i><span>cv</span></a></li>
    </ul>
</nav>

Voeg nu de volgende css toe.

nav span::before {
    content: "\a";
    white-space: pre;
}

Dit is een trucje met css. De betekenis van white-space is dat de lay-out hetzelfde is als in de html-code. Een voorbeeld vind je hier. Omdat er ook staat dan aan de content \a wordt toegevoegd, wat de volgende regel, betekent, gaan de menu-items onder de icoontjes zweven. Het resultaat vind je in voorbeeld 6.

Er is echter nog een probleem. In het voorbeeld hebben we ook de volgende instelling toegepast:

nav a {
    border:1px red solid;
}

We hebben dus aan het <a> element een border toegevoegd om te laten zien hoe het element zich gedraagd. Je ziet dat het niet goed gaat. Ook als je er overheen hovert zie je niet een mooi blokje. We moeten nog iets extra's toevoegen. Het <a> element is een zogenaamd inline element. Dat houdt in dat het niet de volle breedte inneemt. Een block-element doet dit wel binnen de ruimte waarin het is geplaatst, in dit geval binnen de <li>. Als we van het <a> element een block-element maken dat gaat het wel goed.

nav a {
    /*andere css code*/
    display: block;
}

Je kunt in voorbeeld 7 zien dat het nu wel goed gaat. Hierin staan de borders nog aan. In je eigen website kun je deze het beste weer uitzetten. In voorbeeld 8 hebben wij dit ook gedaan.

De navbar is nu af maar je kunt er nog veel mee. In voorbeeld 9 hebben we een border en een achtergrondkleur toegevoegd en zo zijn er nog meer dingen te verzinnen. Realiseer je dat de navbar nog niet geschikt is voor een klein scherm zoals een mobiele telefoon.