1. Tutorial HTML en CSS
‘Even onder de motorkap kijken’
Johan Smits
Minor Internet Marketing
Module: Realisatie
Kom verder. Saxion.
2. Kom verder. Saxion.
Vandaag
• Uitleg belang HTML voor SEO
• HTML structuur
• CSS, stijlsheet voor
– Opmaak: lettertype, kleur, achtergrond
– Vormgeving: bullets bij lijsten
– Positionering: o.a. kolommen, vakken
3. Kom verder. Saxion.
Principe CMS
• Scheiding content en vormgeving
– HTML = Content (structuur)
– CSS = Presentatie (vormgeving)
4. Kom verder. Saxion.
HTML - structuur
• HyperText Markup Language
• Functie van tekstblok binnen het
document
– ‘Gewone alinea’
– Kop
– Lijst
5. Kom verder. Saxion.
HTML Tags (1)
• <p> paragraaf = alinea
• <h1> heading level 1 = Kop1
• <h2> heading level 2 = Kop2
• <h3> heading level 3 = Kop3
Denk aan hoofdstuk, paragraaf
resp. subparagraaf
6. Kom verder. Saxion.
HTML Tags (2)
• <li> List element
• <ul> Unordered list
• <ol> Ordered list
Voorbeeld:
<ol>
<li>Opening vergadering</li>
<li>Bespreking actiepunten</li>
<li>Rondvraag</li>
<li>Sluiting vergadering</li>
</ol>
7. Kom verder. Saxion.
HTML Tags (3)
• <div> division = blok-element
• <span> groepering inline
elementen
• In HTML5 zijn nieuwe blok-
elementen geïntroduceerd:
– <nav>, <header>, <footer>, <aside>
8. Kom verder. Saxion.
HTML Tags (4)
• <a href=“verwijzing.htm”>Zie ook</a>
– Anker: hyperlink naar andere pagina
• <img src=“afbeelding.jpg” />
– Plaatje invoegen op de pagina
9. Kom verder. Saxion.
HTML Basisstructuur
<html>
<head>
<title>Titel van de pagina</title>
Andere meta informatie en links naar externe
bestanden: css en js
</head
<body>
Content van de pagina
</body>
</html>
10. Kom verder. Saxion.
HTML HEAD-sectie
<head>
<title>Titel van de pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Deze tekst geeft Google weer als
beschrijving van de site bij de zoekresultaten" />
<script src="javascript.js" type="text/javascript"></script>
<link href="stijblad.css" rel="stylesheet" type="text/css" />
</head>
11. Kom verder. Saxion.
Google Scrabble
• Keyword in
– Domeinnaam woordwaarde x 20
– URL woordwaarde x 10
– Title-tag woordwaarde x 6
– H1 woordwaarde x 4
– H2 woordwaarde x 3
– Link-tekst woordwaarde x 2
– Eerste zin van alinea (p)
12. Kom verder. Saxion.
Structuur ccs stijlblad
• Selector { eigenschap: waarde;
eigenschap2: waarde2; …. ; }
• h1{color: orange; font-size: 18pt;
font-weight: bold;}
• Let op: Maak geen type-fouten!
13. Kom verder. Saxion.
Practicum
• Maak de map H:Minor
• Download de bestanden vanaf
mim.saxion.nl/docent/sms/
Minor_InternetMarketing/
CSS practicum
• Start Adobe Dreamweaver
14. Kom verder. Saxion.
En verder …
• Volgende Week:
– Uitbreidingen op Joomla!
• Let op:
– Begin met de groepsopdracht!