html

Html - deel 2

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. In voorbeeld 1 zie je de volgende html elementen (ga met de rechtermuisknop naar de html-code):

  • <header> - De kop
  • <nav> - Het navigatie menu
  • <section> - Een sectie, is onderdeel ergens van en dus niet onafhankelijk
  • <article> - Een onafhankelijk onderdeel.
  • <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. Verder kun je in de code zien dat we gebruik maken van een <article> of een <section>. Een <article> is een zelfstandig element zoals bijvoorbeeld een nieuwsitem. Kenmerkend is dat het in zijn geheel overgeplaatst kan worden naar een andere website. Bij een <section> kan dat niet omdat dit altijd ergens een onderdeel van is. Eem <article> kan wel een onderdeel zijn van een <section> en andersom kan he ook:

Section met 3 elementen <article> die ook in een andere webpagina geplaatst zouden kunnen worden.

<section id="main">
    <article>
      <!-- nieuwsitem 1 -->
    </article>

    <article>
      <!-- nieuwsitem 2  -->
    </article>

    <article>
      <!-- nieuwsitem 3 -->
    </article>
</section>

En nu andersom waarbij je kunt zien dat de verschillende sections een onderdeel zijn van het <article>. Het <article> zelf kan weer in zijn geheel, dus inclusief de onderdelen <section>, onafhankelijk worden overgeplaatst naar een andere website.

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

En hieronder de twee voorbeelden gecombineerd.

<section id="main">
    <article>
         <section id="introduction">
             .....
          </section>

          <section id="content">
            De content is de inhoud van het item.
          </section>

         <section id="summary">
              En een korte samenvatting en zou kun je er nog meer elementen aan toevoegen.
         </section>
    </article>
</section>

Merk op dat het <article> zelf ook weer in een <section> is geplaatst.

Je ziet overigens dat er aan de verschillende elementen een id is toegevoegd. Hierover later meer.

2. Float left

In het voorbeeld wordt er gewerkt met een embedded CSS style sheet.

nav {
    float: left;
    width: 30%;
    padding: 20px;
}

Deze code maakt dat het element aan de rechterkant ruimte vrij laat voor andere elementen. In dit geval gaat het element dus ernaast zweven. Deze code is erg belangrijk om een webpagina responsive te maken. Er is ook een beter alternatief voor deze methode maar deze wordt niet zo vaak gebruikt omdat dit niet door alle browsers wordt ondersteund.

Op deze pagina een voorbeeld van een float: right waarbij het plaatje aan de linkerkant ruimte vrij laat voor de tekst.

Nadat je een float: left hebt toegepast dien je altijd een hack toe te passen die de float: left weer opheft. De meest moderene hack is de volgende:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

De code ::after houdt in dat de code wordt toegepast precies na het element.

nav {
    float: left;
    width: 30%;
    padding: 20px;
}

3. Een menu maken

De linkjes van het navigatiemenu staan in het voorbeeld als volgt:

<nav>
    <ul>
        <li><a href="#">Kippensoep</a></li>
        <li><a href="#">Tomatensoep</a></li>
        <li><a href="#">Pompoensoep</a></li>
    </ul>
</nav>

Je ziet dat voor het menu een unsorted list wordt gebruikt. Iets moderner is als je alleen de <a> gebruikt. Hierbij maken we echter wel de opmerking dat de bovenstaande methode nog heel vaak gebruikt wordt. Er is in het moderne HTML5 echter geen reden meer om een <ul> te gebruiken. Het is ook niet logisch.

Verander de code daarom in:

<nav>
    <a href="#">Kippensoep</a>
    <a href="#">Tomatensoep</a>
    <a href="#">Pompoensoep</a>
</nav>

We zullen het menu nu verder met CSS opmaken. We maken eerst een zogenaamd "fixed" menu wat bovenaan in de pagina blijft staan.

Eerst passen we de CSS van het <nav> element aan. Let goed op wat de verschillende codes doen.

nav {
    overflow: hidden; /*als er meer content is dan wordt dit verborgen*/
    background-color: #333;
    position: fixed; /*de navbar wordt op een vaste positie gezet */
    top: 0; /*de positie is bovenaan in de pagina */
    width: 100%; /*de breedte is de breedte van de pagina */
    padding: 0;
}

De navbar gaat nu bovenin de pagina zweven maar het <a> element moet nog worden aangepast. Dit kan met de volgende code.

/* de a binnen het nav element */
nav a {
    float: left; /*zie les*/
    display: block; 
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

Je ziet nog niets als je met de muis over de linkjes gaat. Dit kun je als volgt aanpassen:

nav a:hover { 
    color: black;
    background: #ddd;
}

Uiteindelijk voeg je bij de body nog de volgende code toe zodat de navbar niet over een element staat (in dit geval de kop).

margin-top: 60px;

Het reusltaat vind je op de pagina van voorbeeld 2. De eerdere CSS instellingen van <nav> zijn hierbij verwijderd.

4. Een menu maken - 2

In de vorige les stond het menu bovenaan gefixeerd. Met enkele eenvoudige ingrepen kunnen we het menu ook integreren in de website op de oorspronkelijke plek. Hieronder de veranderde code. De code die we moeten verwijderen staat binnen een /* en een */.

nav {
    /*overflow: hidden;*/
    background-color: #333;
    /*position: fixed; */
    /*top:*/
    width: /*100%*/ 30%; 
    padding: 0;
    /*toegevoeg: */float: left;
}

/* de a binnen het nav element */
nav a {
    /*float: left; */
    display: block; 
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

Het resultaat vind je in voorbeeld 3. Je ziet dat het vrij eenvoudig is om het menu ergens anders te positioneren.

5. Javascript

Bij het maken van webpagina's heb je in principe te maken met drie talen:

  1. HTML5: voor de content van de webpagina.
  2. CSS: voor de opmaak van de webpagina.
  3. Javascript: voor het gedrag van de webpagina.

We maken een start met Javascript zullen nu laten zien hoe dit het gedrag van een webpagina kan beïnvloeden. We maken een zogenaamde side navigation.

Eerst veranderen we de CSS van het <nav> element als volgt:

nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fc9;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

Als je nu op de webpagina kijkt is het menu volledig verdwenen. Dat komt omdat de breedte op 0 staat.

Het <nav> element geven we een id.

<nav id="sideNav">

We voegen nu een Javascript toe met behulp van het <script> element. Plaats dit onder de footer.

<script>
    function openNav() {
    document.getElementById("sideNav").style.width = "250px";
    }

    function closeNav() {
    document.getElementById("sideNav").style.width = "0";
    }
</script>

Het script bevat twee functies:

  • function openNav()
  • functioni closeNave()

De naam zegt het al. Het is bedoeld om de navigatie aan de zijkant te openen en te sluiten. Hoe doen we dit. De "truc" is om de breedte op 0 of 250 pixels te zetten.

Nu moeten we nog twee knopjes toevoegen om deze functies aan te roepen. Eerst plaatsen we het knopje om het menu te openen op de webpagina zelf. Plaats dit ergens bovenin de pagina.

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

Dit is een zogenaamd <span> element. Dit element gedraagt zich als een inline element. We hebben hier een inline stijl aan toegevoegd en een attribuut onclick. De naam zegt het al. Hiermee roep je de functie openNav() aan. Je kunt het menu nu openen maar nog niet sluiten. De code &#9776; is een HTML unicode.

We moeten ook nog een knopje toevoegen die de functie closeNav aanroept. Dit kunnen we eenvoudig toevoegen aan het menu.

<nav id="sideNav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&#215;</a>
    <a href="#">Kippensoep</a>
    ....

Je moet nu in staat zijn om het menu te openen en te sluiten.

We passen het menu ook nog aan, aan de nieuwe functionaliteit:

nav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

nav a:hover {
    color: #f1f1f1;
}

nav > .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

Het resultaat is hier te zien.

Een dropdown menu maken

Op W3schools staat uitgelegd hoe je een dropdown menu kunt maken. Er staan nog meer voorbeelden.

6. Het gridsysteem

Vroeger, in de jaren 90 of later, werd een webpagina gebouwd met behulp van een tabel. In de tabel werden de randen (borders) uitgeschakeld en dan zag het er ongeveer zo uit (sterk vereenvoudigde weergave).

head

content

plaatje
footer

De bijbehorende code van een tabel ziet er zo uit:

<table style="width: 100%; border-collapse: inherit;">
    <tr>
        <td style="width: 100%; text-align: center;" colspan="3">
            head
        </td>
    </tr>
    <tr>
        <td style="width: 75%;" colspan="2">
            <p>content</p>
            <p></p>
        </td>
        <td style="width: 25%;">
            plaatje
        </td>
    </tr>
    <tr>
        <td style="width: 100%; text-align: center;" colspan="3">
            footer
        </td>
    </tr>
</table>

Tegenwoordig doen we dat niet meer. Een tabel mag je alleen nog maar gebruiken voor het presenteren van gegevens. Voor het positioneren van elementen is hiervoor in de plaats het op CSS-gebaseerde gridsysteem gekomen. In voorbeeld 5 zie je een eerste opzet (bron W3schools). We gaan dat gridsysteem nu zelf maken.

Eerst geven we een CSS-instelling waarbij de * geldt voor alle elementen.

* {
  box-sizing: border-box;
}

Deze code zijn we al eerder tegen gekomen.  Nu kunnen we de breedte instellen op 100%. In voorbeeld 6 hebben we de <nav> en <article> weer naast elkaar gezet met de volgende code.

.navigation, .content {
    float: left;
    height: 300px;
}

.navigation {
    width: 25%;
}

.content {
    width: 75%;
}

Merk op dat we de instelling float: left; en height: 300px; ingesteld hebben door de classes .navigation en .content achter elkaar te zetten en met een komma te scheiden. Zo stel je dus voor twee classes CSS tegelijk in. Verder zie je dat de breedte voor beide classes op precies 100% is gezet.

We kunnen ook 12 classes aanmaken en ervoor zorgen dat de optelling van twee classes altijd 100% is.

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Vervolgens zorgen we er met de volgende code voor dat al deze classes een float: left krijgen.

[class*="col-"] {
    float: left;
}

Uiteindelijk regelen we de hoogte met een aparte class

.heigtContent {
    height: 300px;
}

Het resultaat is te zien in voorbeeld 7.

7. Formulieren

Een zeer belangrijk onderdeel zijn formulieren. In het volgende leerjaar zullen we een interactieve website gaan maken en deze kan alleen functioneren als de gebruiker de mogelijkheid heeft om informatie te geven of door ergens op te klikken. Informatie geven we met behulp van een formulier.

Een eenvoudig formulier ziet er zo uit:

<form action="loggedin.xhtml">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="verzenden" />
</form> 

Dit inlogformulier kun je hier bekijken in voorbeeld 8. Het <input> element is eigenlijk een inline element maar met de CSS-code display: block veranderen we deze eigenschap zodat ze onder elkaar gaan staan.

Als we het formulier, leeg of gevuld, willen versturen treed de action in werking. Deze instelling zorgt ervoor dat de pagina wordt doorverwezen naar de pagina loggedin.xhtml. Het maakt daarbij dus niet uit wat je invult. Later, als we een interactieve applicatie gaan maken zullen we ervoor zorgen dat de action verwijst naar een algoritme wat de code checkt en verwerkt.

Een meer geavanceerder inlogformulier vinden we in voorbeeld 9. Hierin is een combinatie van CSS en Javascript gebruikt. Hierover wat uitleg:

  • De CSS-code input[type=text], input[type=password] verwijst naar alle input elementen van dat type. Een input kan van een verschillend type zijn.
  • De code button:hover {opacity: 0.8;} is een mooie manier om aan te geven dat het een werkend knopje is. :hover is een zogenaamde pseudo class
  • Met de CSS-code img.avatar {border-radius: 50%;} maak je een plaatje rond.
  • Het formulier heeft de class animate. Met behulp van een keyframe kun je het effect bereiken van de pop-up.
  • Als we klikken op de button dan wordt er een scriptje getriggerd (onclick="document.getElementById('modal-1').style.display='block'") en met behulp van Javascript wordt het meteen gekoppeld aan de style display="block". Eigenlijk wordt daarmee de CSS-code inwerking gebracht omdat de code eerst was display: none; /* Hidden by default */, dus de default-instelling was een verborgen login formulier. Met de code
  • display="block maken we het zichtbaar waarbij dus het @keyframe in werking treedt.

Op W3schools vind je nog veel meer van dit soort effecten of andere elementen die je kunt gebruiken voor je website.

Heel veel succes met het maken van je eindopdracht. De eisen vind je in deel 3.