Terug

HTML & CSS Les 3 – Vlakken en afmetingen

CSS – Div


Om een vlakverdeling van je pagina te kunnen maken heb je een html element nodig voor elk vlak. Wij gaan hier het <div> element voor gebruiken. Elke rechthoek op een site bestaat vaak uit één of meerdere divs. Bekijk eens de bron van een willekeurige website: een beetje ingewikkelde pagina bestaat al gauw uit honderden divs. In de visualisatie hierboven (bron) is elk vlak met een lichtblauw randje een <div> element.

  1. Open een HTML van een pagina die je eerder hebt gemaakt. Voeg hier drie <div> elementen toe. Hoe doe je dat? Door letterlijk <div> en </div> om bestaande paragrafen, afbeeldingen of andere inhoud op je pagina te zetten.

    Bijvoorbeeld:

    <div>
        <p>
            Dit is een bestaande paragraaf op je website
        </p>
    </div>
    

    of

    <div>
        <img src="kitten.jpg">
    </div>
    

    of

    <div>
        <h1>Mijn Kat</h1>
        <p>
            Deze website gaat over mijn kat. Ze heet Snuggles.
        </p>
        <img src="kitten.jpg">
    </div>
    

    Let op dat alle html-elementen die begonnen worden ná de <div> tag, worden afgesloten vóór de </div> tag. Ze moeten dus volledig binnen het div element zitten. Controleer of dat zo is in jouw code.

  2. Geef elk div element dezelfde class en een verschillend id.

    <div class="mijnDivs" id="mijnDiv1">
        ...
    </div>
    <div class="mijnDivs" id="mijnDiv2">
        ...
    </div>
    <div class="mijnDivs" id="mijnDiv3">
        ...
    </div>
    
  3. Gebruik de class in CSS op elke div dezelfde achtergrondkleur te geven.

  4. Gebruik een id om één div een background-image te geven.
    Experimenteer met de background-size. Bekijk wat het verschil is tussen background-size: cover; en background-size: contain;
    Andere relevante CSS-eigenschappen waar je mee kunt experimenteren zijn:

    background-position
    background-repeat
    
  5. Gebruik een id om één div onzichtbaar te maken door het de volgende CSS eigenschap te geven:
    display: none;
    

    Een div onzichtbaar maken lijkt nu nog wat onzinnig, maar op het moment dat we onze site Responsive gaan maken, komen we dit regelmatig tegen.
    Als dat gelukt is haal je display: none; weer weg. Die gaan we later pas weer gebruiken.

CSS – Margin, padding en border

Dit hoofdstukje gaat over drie CSS-eigenschappen die gaan over de ruimte om je elementen heen:
• de margin: de ruimte tussen het element (bijvoorbeeld een div) en andere elementen.
• de padding: de ruimte tussen de rand van het element en de inhoud.
• de border: waarmee je de rand van het element een dikte, kleur en lijnstijl kunt geven.

  1. Open deze webpagina. Hier lees je hoe je een rand om een element maakt. Gebruik een id om één div een oranje rand van 3px breed te geven.

  2. Zoek op internet wat de margin en padding properties doen, en experimenteer met deze eigenschappen in combinatie met een div. Ga pas verder als je goed begrijpt wat het verschil is tussen margin en padding.

CSS – Afmetingen

In CSS zijn er verschillende eenheden om maten en lengtes aan te geven, zoals px en%. De keuze van de eenheid is belangrijk, vooral voor een responsive website, omdat we willen dat delen van elementen responsief en flexibel zijn voor de verandering van de apparaten.

Absolute lengte

Absolute eenheden met een vaste lengte zijn letterlijk absolute waarden en zorgen ervoor dat een maat in een bepaalde waarde wordt vastgelegd. Bijvoorbeeld:

cm (centimeters) Niet gebruiken!
mm (millimeters) Niet gebruiken!
px (pixels)

Je ziet dat we uit dit lijstje de meeste eenheden niet mogen gebruiken, alleen px (pixels) gebruiken we af en toe, bijvoorbeeld voor de afmetingen van afbeeldingen. Vaak is het beter om een relatieve eenheid te gebruiken.

Relatieve lengte

Relatieve lengte-eenheden zijn relatief ten opzichte van een andere lengte-eigenschap. Bijvoorbeeld:
vw is relatief tot de breedte van het scherm. 1vw is 1% van de breedte van het scherm.
vh is relatief tot de hoogte van het scherm. 1vh is 1% van de hoogte van het scherm.
% is relatief aan het ‘parent’-element (het element waar dit element in staat)
em is relatief aan de letter-grootte van het ‘parent’-element. 2em is 2 keer de grootte van het huidige lettertype.
rem is relatief aan de letter-grootte van de pagina.

Een lange lijst aan keuzes dus. Maar wat raden we aan? Hieronder zie je ons advies. Handig om even voor jezelf op te slaan zodat je er makkelijk bij kunt.

Algemeen advies

Breedte van elementen:
Zo veel mogelijk vw, en anders px

Hoogte van elementen:
Liefst de hoogte niet instellen maar de inhoud de hoogte laten bepalen,
maar als je een element precies even hoog als (een deel van) de pagina wilt maken, dan vh
en anders px

Lettertypes:
Stel geen font-size in voor de body, omdat bijvoorbeeld slechtzienden of dyslecten zelf willen bepalen hoe groot de standaard tekst in hun browser is.
Voor tekst die groter of kleiner moet zijn dan de standaard tekst gebruiken we rem.

Margins, padding en border
Voor margin en padding en voor de dikte van borders gebruiken we meestal px.

Afbeeldingen
Stel nooit de width én de height van een <img> in, omdat dit ertoe kan leiden dat je afbeelding uitgerekt wordt.
Gebruik vw, % of px voor de width, afhankelijk van de toepassing.

  1. Gebruik een id om één div een zo hoog als een kwart van het scherm te maken.
  2. Als je al font-size, margin of padding gebruikt in je CSS, pas deze dan aan zodat je hier rem als eenheid gebruikt.

Chrome – Device Emulator

We gaan in deze lessenreeks ook veel ontwerpen voor mobiele telefoons. Omdat het natuurlijk niet handig webdesignen is op je telefoon, blijven we – ook voor mobile design – werken op onze pc. Gelukkig kunnen we Chrome laten doen alsof het een mobile device is (emuleren).

🡆 Rechts-klik op een webpagina in Chrome, en kies voor Inspect. In het scherm dat nu opent klik je op dit icoontje:
🡆 Bovenin het scherm kun je nu kiezen voor een aantal devices, en inzoomen naar 100%. In sommige gevallen is het nodig om eerst de pagina te refreshen voordat de site goed geëmuleerd wordt.

Opdracht

We gaan een eenvoudige mobiele website maken met de elementen die we hebben geleerd. Deze site is bedoeld om jezelf voor te stellen.
Links
Afbeeldingen
H1-H6
Background-color
Different fonts and sizes
Borders
Hover

  1. Maak een nieuwe projectmap, met een index.html en style.css-bestand, en zoek een afbeelding van jou of over jou die je op deze site zou willen laten zien. Zet dat afbeeldingsbestand in een map met de naam ‘img’ in je projectmap. Vergeet ook niet om het HTML bestand aan het CSS bestand te koppelen.

  2. Maak 5 div’s in je index.html-bestand. Die div’s zijn voor de titel, link, afbeelding en twee teksten zoals in de bovenstaande foto. Geef alle div’s dezelfde class. Voeg marge en / of padding toe aan die class toe in het css-bestand. Voel je vrij om er ook randen en (met id’s) verschillende achtergrondkleuren voor te gebruiken.

  3. Maak in de bovenste div een heading met de tag <h1>. Zorg ervoor dat je de lettergrootte van h1 in het css-bestand instelt met rem.

  4. Maak een link naar een externe website of een e-mailadres met behulp van de <a>-tag. (Als je een e-mailadres wilt linken, gebruik je mailto:).

  5. Wijzig de lettertypekleur van de link met een hover-actie in het css-bestand.

    hint:

    a:hover {
      /* letterkleur */
    }
    
  6. Geef je afbeeldingsbestand weer met de <img>-tag. Zorg ervoor dat deze afbeelding een rand (border) en een marge heeft die is ingesteld in het css-bestand. Stel een afbeeldingsgrootte in vw in het css-bestand in.

  7. Schrijf een alinea met tekst in de eerste tekst-div over jezelf.

  8. Schrijf een alinea met tekst in de tweede tekst-div over je hobbies of je huisdieren. Zorg ervoor dat er nog een subkop is met de tag <h2>. Stel ook hiervan de lettergrootte in met rem.

  9. Stel de achtergrondkleur van de hele pagina in.

  10. Gebruik de class van de div’s om alle tekst in het midden uit te lijnen.