03 - CSS - Toevoegen: de integratie met HTML

CSS toevoegen aan je pagina

1 / 10

Slide 1: Diapositive

ICTMBOStudiejaar 1,2

Cette leçon contient 10 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 60 min

Éléments de cette leçon

CSS toevoegen aan je pagina

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Wat weet je al over het toevoegen van CSS aan je pagina?

Slide 2 - Carte mentale

Cet élément n'a pas d'instructions

Leerdoelen

Weet en begrijpt hoe je een extern CSS-bestand aan een HTML-pagina koppelen.
Begrijpt wat interne CSS-stijlen zijn en hoe je deze kan toepassen.
Begrijpt wat inline CSS-stijlen zijn en hoe je deze kan toepassen op een HTML-element

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Inline CSS

Met inline CSS kun je CSS-stijlen direct in een HTML-element plaatsen met behulp van het 'style' attribuut.

<p style="color: blue; font-size: 16px;">Tekst</p>

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Internal CSS

Met internal CSS kun je CSS-stijlen direct in het head-gedeelte van je HTML-document plaatsen.

    <html>
        <head>
            <title>Interne CSS-voorbeeld</title>
            <style>
                /* Interne CSS-stijlregels */
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f0f0f0;
                    margin: 0;
                    padding: 0;
                }
            </style>
        </head>
        <body>
            <h1>Dit is een interne CSS-voorbeeld</h1>
        </body>
   </html>

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

External CSS

Met external CSS kun je een apart CSS-bestand maken en deze koppelen aan je HTML-pagina.

    /* Externe CSS-stijlregels */
   body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
   }

    <html>
        <head>
            <title>Extern CSS-voorbeeld</title>
            <link rel="stylesheet" type="text/css"   href="style.css">
        </head>
        <body>
            <h1>Dit is een extern CSS-voorbeeld</h1>
        </body>
   </html>

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Voordelen

External CSS maakt hergebruik van stijlen eenvoudig.

Internal CSS is handig voor kleine aanpassingen

Inline CSS is handig voor specifieke elementen.

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Oefenopdracht

Individueel

Je gaat oefenen met de 3 manieren waarop je CSS kan toevoegen aan HTML

Detective Opdracht

Groepsopdracht

Ga op onderzoek uit!

Onderzoek eens 3 verschillende websites!

Kijk hoe CSS is toegevoegd aan deze websites!

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting

Je weet nu dat er drie manieren zijn om CSS aan HTML te koppelen en je hebt voorbeelden van elk van deze methoden op een website onderzocht.

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 10 - Question ouverte

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.

03 - CSS - Toevoegen: de integratie met HTML

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Carte mentale

Slide 3 - Diapositive

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Question ouverte

Plus de leçons comme celle-ci

03 - CSS - css toevoegen

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

CSS_ALA_webdesign 1

Les4 - CSS Selectoren: HTML Elementen Aanspreken

04 - CSS - eigenschappen

HTML & CSS: Opmaak met CSS

Basis CSS: Bouw een Aantrekkelijke Website

HTML & CSS: Opmaak met CSS