Webpagina's maken met stijl

Je gaat leren websites bouwen met Brackets en Chrome.

Bovendien is dit een demonstratie van hoe professionele webdesigners werken. Dit gaat dus ook over het organiseren van werk.
Tip 1: maak een goede mappenstructuur op je computer met aparte mapjes per opdracht, zodat je je werk kunt terugvinden.
Tip 2: bewaar kopieën van tussenresultaten, zodat je eventueel terug kunt gaan naar een werkende versie.
Hieronder heten de HTML-bestanden voorbeeld0.htm, voorbeeld1.html, voorbeeld2.html en zo voort. Elke keer is de webpagina een beetje anders en elke werkende versie krijgt een nieuw nummer. De programmeur van de webpagina's kan op deze manier geen werk kwijt raken, omdat hij te veel heeft veranderd of omdat de webpagina het opeens niet meer doet. In zo'n geval kan de programmeur gewoon terug naar een vorige versie.

Onderstaande voorbeelden kan je rechtsstreeks van deze webpagina kopiëeren en plakken. Bovendien staan alle voorbeelden ook in een ZIP-bestand, die je kunt downloaden en kunt uitpakken op je eigen computer.

We veronderstellen dat je reeds een map hebt waar je je werk gaat opslaan en dat je Brackets en Chrome hebt geïnstalleerd. Voor het voorbeeld gebruiken we de map voorbeeld.

Start Brackets

Klik op Bestand en Open map...
Selecteer jouw map en klik op Map selecteren.

Maak voorbeeld0.html

Klik op Bestand en Nieuw.

Kopieer onderstaande code van deze webpagina en plak die in Brackets.
Klik op Bestand en Opslaan als...
Noem je bestand voorbeeld0.html

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>  
    

Dit is een lege webpagina met tags, die op elke webpagina horen. De taal is Nederlands (lang="nl") en de tekens op deze webpagina zijn gewone letters (charset="utf-8"), geen Chinese of Arabische tekens.

De tags zijn in Brackets blauw en als je op een tag klikt, laat Brackets zien welke tags bij elkaar horen. In voorbeeld0.html staan de tags die bij elkaar horen keurig onder elkaar.

Voorbeeld 1 zonder stijl

Klik op Bestand en Opslaan als...
Noem je bestand voorbeeld1.html

Brackets helpt je om je webpagina netjes te structuren. Als je met de cursor na de body-tag op Enter drukt, springt de cursor automatisch vier spaties in op een nieuwe regel. En als je een h1-tag intoetst, maakt Brackets automatisch de bijbehorende afsluitende h1-tag. Probeer dit uit!

Maak voorbeeld1.html af met wat inhoud voor deze webpagina in de body en een titel in de head.
En klik op Bestand en Opslaan.

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Voorbeeld 1</title>
    </head>
    <body>
        <h1>Voorbeeld Kop 1</h1>
        <h2>Voorbeeld Kop 2</h2>
        <h3>Voorbeeld Kop 3</h3>
        <p>
            Voorbeeld paragraaf met wat voorbeeld tekst.
            Kijk goed wat      er     met deze tekst
            gebeurt in Chrome.            
        </p>
    </body>
</html>  
    

Nu gaan we deze webpagina testen in Chrome. Klik op de bliksemschicht rechts op de rand van Brackets. De bliksemschicht wordt oranje en Chrome verschijnt, die deze webpagina laat zien. Voor het plaatje zijn de Windows van Brackets en Chrome precies naast elkaar gezet. Merk op dat in het tabblad van Chrome de titel uit de head staat en dat Chrome reageert op de h1, h2 en h3-tags, maar dat ie niets doet met de spaties en nieuwe regels na de p-tag.

Voorbeeld 2 met inline style

Klik op Bestand en Opslaan als...
Noem je bestand voorbeeld2.html

Je kunt bij elke kop een kleurtje specificeren. Probeer er maar een paar uit.

In onderstaand plaatje zie je dat er nog wat extra lichtblauwe randen zijn rond Kop 3 in Chrome, omdat de programmeur nog bezig is met het specificeren van een kleur voor Kop 3 in Brackets.

Voorbeeld 3 met embedded style

Met deze code specificeer je voor alle h1, h2 en h3-tags welke kleur ze krijgen. Bovendien specificeer je voor alle tags binnen de body een ander lettertype.

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Voorbeeld 3</title>
        <style>
            body {font-family: sans-serif}
            h1, h2, h3 {color: maroon}
        </style>
    </head>
    <body>
        <h1>Voorbeeld Kop 1</h1>
        <h2>Voorbeeld Kop 2</h2>
        <h3>Voorbeeld Kop 3</h3>
        <p>
            Voorbeeld paragraaf met wat voorbeeld tekst.
            Kijk goed wat      er     met deze tekst
            gebeurt in Chrome.            
        </p>
    </body>
</html>  
    

En dit is het resultaat.

Voorbeeld 4 met external style

Met inline style specificeer je dus per tag een stijl. Met embedded style specificeer je een stijl voor een hele webpagina. Met external style kan je de stijl van een website van vele pagina's specificeren in een Cascading Style Sheet oftewel css-bestand. Het is gebruikelijk om de opmaak te scheiden van de webpagina's. De opmaak staat in het css-bestand en de pagina's staan in html-bestanden. In de html-bestanden moet je dan wel een link leggen naar het css-bestand.

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Voorbeeld 4</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
    </head>
    <body>
        <h1>Voorbeeld Kop 1</h1>
        <h2>Voorbeeld Kop 2</h2>
        <h3>Voorbeeld Kop 3</h3>
        <p>
            Voorbeeld paragraaf met wat voorbeeld tekst.
            Kijk goed wat      er     met deze tekst
            gebeurt in Chrome.            
        </p>
    </body>
</html>  
    

En dit is het css-bestand.

Indien je iets verandert in voorbeeld.css, verandert de webpagina van voorbeeld4.html in Chrome, omdat er vanuit voorbeeld4.html een link is naar voorbeeld.css. Bovendien geldt dat voor alle andere webpagina's: voorbeeld5.htm, voorbeeld6.html, enz. die een link hebben naar voorbeeld.css.

Brackets heeft allerlei handige functies om voorbeeld.css te bewerken. Klik maar eens op de kleur en dan Ctrl-E. Probeer bijvoorbeeld de hexadecimale kleurencode.

Chrome heeft allerlei handige functies om in de CSS van een website te kijken. Klik in Chrome op de rechter muistoets en klik op Inspecteren. Je bent nu in de DOM inspector. Hier zie je precies welke CSS-regels actief zijn. Je kunt overal op klikken. Pobeer het maar uit.

Het voorbeeld.css is natuurlijk niet zo interessant, want er staan maar twee opmaakregels in, maar op andere websites kan je heel veel leren over opmaken. Probeer dat maar eens uit.

Voorbeeld 5 met een tabel

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Voorbeeld 5</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
    </head>
    <body>
        <h1>Voorbeeld tabel</h1>
        <p>Hieronder staat een tabel met cellen in rijen en kolommen.</p>
        <table>
            <tr>
                <td>cel 1,1</td>
                <td>cel 1,2</td>
                <td>cel 1,3</td>
                <td>cel 1,4</td>
            </tr>
            <tr>
                <td>cel 2,1</td>
                <td>cel 2,2</td>
                <td>cel 2,3</td>
                <td>cel 2,4</td>
            </tr>            
            <tr>
                <td>cel 3,1</td>
                <td>cel 3,2</td>
                <td>cel 3,3</td>
                <td>cel 3,4</td>
            </tr>
            <tr>
                <td>cel 4,1</td>
                <td>cel 4,2</td>
                <td>cel 4,3</td>
                <td>cel 4,4</td>
            </tr>
            <tr>
                <td>cel 5,1</td>
                <td>cel 5,2</td>
                <td>cel 5,3</td>
                <td>cel 5,4</td>
            </tr>
            <tr>
                <td>cel 6,1</td>
                <td>cel 6,2</td>
                <td>cel 6,3</td>
                <td>cel 6,4</td>
            </tr>
            <tr>
                <td>cel 7,1</td>
                <td>cel 7,2</td>
                <td>cel 7,3</td>
                <td>cel 7,4</td>
            </tr>
        </table>
    </body>
</html>  
    

Indien je bovenstaande code in Brackets plakt, begint de code onoverzichtelijk te worden. Brackets kan helpen om de code weer overzichtelijk te maken door het inklappen van code, zodat je de structuur beter ziet.

De tabel bestaat uit 7 rijen en 4 kolommen. Het geheel staat tussen de table-tags. De rijen staan tussen tr-tags. De cellen per rij staan tussen de td-tags. De cellen van de verschillende rijen vormen samen de kolommen van de tabel.

Klik op de driehoekjes voor de regels met tr-tags, zodat je alleen de rijen van de tabel ziet. Eventueel kan je de code van de hele tabel ook inklappen. Indien je op de drie puntjes klikt (of nogmaals op het driehoekje), klapt alles weer uit.

In Chrome ziet de tabel er wel overzichtelijk uit, maar de dubbele lijnen zijn niet zo mooi. Dat is in het volgende css-bestand verbeterd.

body {
    font-family: sans-serif;
}

h1, h2, h3 {
    color: maroon;
}

table, th, td {
    border: 1px solid black;
}

tr, td {
    padding: 10px; /* ruimte binnen de cellen van de tabel */
}

table {
    border-collapse: collapse; /* dubbele rand wordt enkele rand */ 
}      
    

De opmaakregel border-collapse: collapse zorgt dat dat dubbele lijnen samen vallen tot een enkele lijn. De programmeur legt dat uit in het commentaar, zodat iemand anders (of hijzelf over een jaar) ook begrijpt hoe dit werkt. Dit is een goed voorbeeld van commentaar in de code. Commentaar bij de opmaakregel border: 1px solid black daarentegen is niet nodig. Het is zonder commentaar ook wel duidelijk dat de rand 1 pixel dik is en goed zwart is. En als je het verschil weet tussen margin en padding is het commentaar bij padding: 10px misschien ook overbodig.

Voorbeeld 6 met een tabel met samengevoegde cellen

In deze tabel zijn een aantal cellen samengevoegd.

In HTML specificeer je colspan om cellen binnen een rij samen te voegen en rowspan om cellen in een kolom samen te voegen. En uiteraard is het ook mogelijk om cellen van verschillende kolommen en rijen samen te voegen. Je moet dan wel opletten dat je na een paar samengevoegde cellen niet een cel dubbel specificeert. De programmeur heeft in onderstaande code comentaar toegevoegd om uit te leggen hoe dat is gedaan.

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Voorbeeld 6</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
    </head>
    <body>
        <h1>Voorbeeld tabel</h1>
        <p>
            Hieronder staat een tabel met cellen in rijen en kolommen 
            en voorbeelden van colspan en rowspan.
        </p>
        <table>
            <tr>
                <td>cel 1,1</td>
                <td>cel 1,2</td>
                <td>cel 1,3</td>
                <td>cel 1,4</td>
            </tr>
            <tr>
                <td>cel 2,1</td>
                <td>cel 2,2</td>
                <td>cel 2,3</td>
                <td>cel 2,4</td>
            </tr>            
            <tr>
                <td>cel 3,1</td>
                <td colspan="2">cel 3,2+3</td>
                <!-- cel 3,3 staat in de vorige kolom -->
                <td>cel 3,4</td>
            </tr>
            <tr>
                <td rowspan="2">cell 4+5,1</td>
                <td>cel 4,2</td>
                <td>cel 4,3</td>
                <td>cel 4,4</td>
            </tr>
            <tr>
                <!-- cell 5,1 staat in de vorige rij -->
                <td>cel 5,2</td>
                <td>cel 5,3</td>
                <td>cel 5,4</td>
            </tr>
            <tr>
                <td>cel 6,1</td>
                <td colspan="2" rowspan="2">cel 6+7,2+3</td>
                <!-- cel 6,3 staat in de vorige kolom -->
                <td>cel 6,4</td>
            </tr>
            <tr>
                <td>cel 7,1</td>
                <!-- cel 7,2 en cel 7,3 staan in de vorige rij -->
                <td>cel 7,4</td>
            </tr>
        </table>
    </body>
</html>  
    

Deze webpagina als voorbeeld met link en plaatje

Deze hele website is bedoeld als voorbeeld van hoe je op eenvoudige wijze webpagina's maakt. De HTML en CSS is bewust zo simpel mogelijk gehouden. De ontwikkeling van de hele website volgt zelfs de stappen, die hierboven zijn beschreven. Je kunt die ontwikkeling terugzien via deze link naar oude versies.

Hoe je zo'n link en bovenstaande plaatje in HTML-code eruit ziet, zie je op bovenstaande plaatje. Je kunt ook zelf de HTML-code van deze pagina bekijken.

De code die begint met de img-tag verwijst naar het bovenstaande plaatje. Bij src= is gecodeerd in welke map het plaatje chrome4.PNG is opgeslagen. De programmeur heeft width= en height gecodeerd, omdat Chrome dan vooraf weet hoe groot het plaatje is, wat Chrome moet laten zien. Op deze manier is Chrome in staat om de webpagina sneller te laten zien.

De code die begint met de a-tag is de link naar een andere webpagina. Bij href= is gecodeerd dat die andere webpagina versies.html heet. De programmeur heeft target= zodanig gecodeerd dat Chrome een nieuw tabblad opent voor versies.html terwijl de huidige webpagina zichtbaar blijft in het huidige tabblad van Chrome.

HTML-code en CSS-code inzien van een webpagina

Om de CSS-code van deze pagina te bekijken, klik je in Chrome op de rechter muistoets en klik je daarna op Inspecteren. Met de DOM inspector zie je precies welke CSS-regels actief zijn. Indien je op het tabblad sources klikt, zie je de HTML-code en de CSS-code van deze webpagina.

Het bovenste deel is wat Chrome normaal laat zien. Het onderste deel is speciaal voor webdesigners.

Samenvatting

Dit is een lijst van wat je nu moet kunnen en kennen, nadat je deze webpagina hebt doorgewerkt. Als dat inderdaad het geval is, ben je geslaagd als beginnend webdesigner!

Op deze webpagina wordt uiteraard niet alles uitgelegd over HTML en CSS. Met name over layout staat hier weinig uitleg. Daarom is het nuttig om ook de opgaven in de reader te maken!