banner

HTML Basis

Met deze lessenreeks leer je de basiskennis over Html en CSS. Bij de lessen vind je korte video’s met uitleg. Om deze te bekijken moet je eenmalig inloggen bij Vimeo.

Voor deze lessenreeks heb je de volgende programma’s nodig:

  • FileZilla
  • Visual Studio Code
Heb je deze nog niet geïnstalleerd, volg dan eerst deze les.

Voordat je begint

Hiernaast zie je een aantal links naar video’s. Hierin wordt uitgelegd wat HTML/ CSS is. Bekijk deze eerst voordat je met de uitwerking begint. 

Werk je met Safari? Zet dan het Ontwikkel-menu aan via Safari > Instellingen > Geavanceerd > Toon Ontwikkel-menu in menubalk.

Werk je met Chrome? Dan vind je dit onder rechtsklik > Inspecteren.

1. Introductie

  1. Maak op de juiste plek in je mappenstructuur een nieuwe map aan met de naam basiscursus (kleine letters). 
  2. Maak een nieuwe pagina aan in VSC (Visual Studio Code) via File > New Text File.
  3. Sla je lege bestand op in de map basiscursus via File > Save As en noem dit index.html. 
  4. Plak nu de basiscode voor een html pagina (hiernaast) in je bestand.
  5. Tussen de <title> en </title> tags zet je je naam.
  6. Bekijk de video “Elementen in HTML” en voeg de onderstaande elementen toe tussen de <body> en </body> tags.
    1. <h1> t/m <h6>
    2.  <p>
  7. Bekijk de video’s “Charset”, “Keywords”, “Description” en “Author”, en voeg deze <meta> tags toe tussen de <head> en </head> tags.
  8. Valideer je HTML code op validator.w3.org.
  • De basis structuur (7:58)
    Let op!Let op: In de video instructie wordt gesproken over het programma Textwrangler en Brackets. Deze gebruiken we niet meer. Daar waar wordt gesproken over ‘Textwrangler‘ en ‘Brackets’ denk jij ‘Visual Studio Code‘.
				
					<!DOCTYPE html>
<html lang="nl-NL">
    <head>
        <meta charset="UTF-8" />
        <title>Naam</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Beschrijving van de pagina." />
        <meta name="author" content="Jouw voor- en achternaam" />
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
    </body>
</html>

2. Plaatjes en links

  1. Werk door in het index.html waarin je bent begonnen hierboven.
  2. Maak in de map basiscursus een nieuwe map aan met de naam links. Zet hierin drie submappen: audio, video en images.
  3. Download deze zipfile en pak deze uit op je computer. Zet de bestanden in de juiste submap van de map links.
  4. Ga nu verder met het schrijven van code in de index.html volgens de video’s die je hiernaast kunt vinden:
    1. Zet een willekeurige comment in je code.
    2. Maak een unordered list van de weekdagen.
    3. Maak een link naar de video bamboleo.mp4
    4. Maak een link naar de audio rickrol.mp3
    5. Maak een link naar www.google.nl die opent in een tweede tab.
    6. Maak een link naar het plaatje pannekoek.jpg
    7. Maak een link naar jouw Ma emailadres.
    8. Maak een link van een plaatje dat naar een zelfgekozen website gaat.
  5. Valideer je HTML code op validator.w3.org. Fouten over lang, frameborder of space character mag je negeren.

TIPS

  • Gebruik voor bestandsnamen altijd kleine letters, vermijd vreemde tekens en spaties (gebruik – of _). Wil je tóch een spatie, gebruik dan de code %20 in je html om een spatie te maken.
  • Laat je code netjes inspringen door in VSC de sneltoets Shift-Alt/Option-F te gebruiken.

Let op! In de video’s wordt een map gemaakt voor ieder hoofdstuk. Dat doen wij niet meer. In plaats daarvan werk je door in hetzelfde bestand index.html.

Je mappenstructuur ziet er als volgt uit ►

3. Media insluiten

  1. Plaats de volgende media ingesloten (embedded) in je html pagina:
    1. Afbeelding
    2. Video
    3. Audio
    4. Youtube
    5. Google Maps
  2. Valideer je HTML code op validator.w3.org. Fouten over lang, frameborder of space character mag je negeren.
  3. Zorg dat je code netjes is ingesprongen.
  4. Gebruik FileZilla om de map basiscursus op jouw Ma-Server te zetten in de map web. Controleer of de link werkt in een incognito venster.

TIPS

  • De link begint in je browser met https:// en niet met file://.
  • De link ziet er zo uit (1 kan ook 2 zijn):
    https://studentnummer.hosts1.ma-cloud.nl/basiscursus

4. Mini website

  1. Zet een mini-website van 7 pagina’s online.
    1. De eerste pagina heet index.html (en niet plaatje.html ofzo).
    2. Op iedere pagina staat de naam van die pagina in de <title> tag.
    3. Zet de naam ook in een <h1> op de pagina.
    4. Op iedere pagina is iets anders te zien:
      1. plaatje
      2. video
      3. audio
      4. youtube
      5. googlemaps
      6. email-link
      7. link naar Google die opent in een tweede tab.
    5. Geef elke pagina een eigen achtergrondkleur met CSS. Op W3 Schools kun je uitzoeken hoe je dat doet. Je kunt deze CSS kleurcodes gebruiken.

5a. CSS

  1. Pas je index.html aan:
    1. Geef <h1> een achtergrond kleur met inline CSS
    2. Geef de <body> een andere achtergrond kleur met embedded CSS
    3. Geef de <p> een andere achtergrond kleur met externe CSS.
  2. Geef de <h1>, <body> en <p> ook een tekst-kleur (dat heet in CSS gewoon “color“) via de externe CSS. Op w3schools kun je lezen hoe dat moet.
  3. Geef de eerste letter van de <h1> en de <p> een andere kleur. Dit doe je door een <span></span> om de eerste letter te zetten op de volgende manier: <h1><span>D</span>eze titel heeft om de eerste letter een span-tag.</h1>

TIP

In VSC kun je je index.html en je mijn_stijl.css naast elkaar openen. Dit doe je door CMD/Ctrl-\ te typen. Er opent nu een tweede venster (zie 1). Sleep vanuit je Explorer je style.css (zie 2) hierin. Je hebt nu de html en css in één beeld.

Lees en oefen hier met de 3 manieren van CSS gebruiken.

Voorbeeld inline CSS

				
					<body style="background-color: #FF9900; color: white;">

Voorbeeld embedded CSS

				
					<head>  
   <title>Embedded CSS</title>  
   <style>   
      /* Vanaf hier is het CSS */   
      body{
         background-color: #FF9900;
         color: white;   
      }   
      /* Tot hier is het CSS, hieronder wordt het weer HTML */  
   </style>
</head>
<body>
...etc...

Voorbeeld externe CSS (in de <head>)

				
					<link rel="stylesheet" href="mijn_stijl.css">

5b. Meer CSS

Let op! Schrijf je CSS in een externe stylesheet. Dus niet, zoals in de instructiefilmpjes, in de <head>tag.

  1. Pas alle technieken uit de instructievideo’s toe.
    1. Doe de video’s niet exact na, maar gebruik een ander plaatje, andere koppen, andere lettertypes, andere kleuren, andere begin-kapitaal, etc.
    2. Geef één element een mooi opgemaakte first-letter (beginkapitaal).
    3. Geef de p-tag een first-line die er anders uitziet dan de rest van de tekst.
    4. Zorg ervoor dat je pagina goed leesbaar is. Je achtergrond plaatje is niet storend voor de teksten. Je kleuren combineren goed. Achtergrond en tekst kleur zijn voldoende contrasterend.

Let op!Let op! In de volgende instructies wordt alle CSS uitgelegd met embedded CSS. Maar het is de bedoeling dat jij je styles met een externe CSS maakt. Je gebruikt alleen embedded of inline CSS als die style voor één pagina of één html-object is bedoeld.

In de instructie wordt gesproken over css.html, maar zo noem jij je pagina niet. Jouw pagina heet gewoon index.html.

				
					body {
    background-image: url(links/afbeeldingen/pannekoek.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /*maar hier kan natuurlijk ook contain staan of een maat in pixels of procenten*/
}

5c. Links stylen

Gebruik voor alle pagina’s (totaal 5) van je website één externe CSS. 

  1. Je navigatie ziet er op alle pagina’s hetzelfde uit.
  2. Geef je navigatie een mooi randje en achtergrond kleur.
  3. Gebruik een hover style in je navigatie.
  4. Maak gebruik van de clearfix oplossing bij je navigatie als jouw navigatie gebruik maakt van float (zie voorbeeld rechts).
  5. Iedere pagina laat m.b.v. een <h1> de naam van de pagina zien.
  6. Iedere pagina heeft die naam ook in de <title> staan.
  7. Iedere pagina heeft een ander achtergrondplaatje 
    (dit mag je doen met embedded of inline CSS, maar het mag ook met een class of id, maar dat is advanced…).
  8. Iedere pagina heeft een andere tekst.
    Leuk als jouw website echt een onderwerp heeft, bijvoorbeeld een artiest of jouw favoriete kledingmerk.

Als je html elementen, zoals jouw navigatie, naast elkaar hebt gezet met float, dan moet je je float ook weer stoppen. In jouw unordered list zet je dit:

				
					<ul class="clearfix">
  <li> ...etc...</li>
   ...nog meer html...
</ul>

En in jouw stylesheet zet je dit:

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

Lees meer over float en clearfix

Instagram

Admin

Privacybeleid

Copyright 2024 © Mediacollege Amstedam