Tutorial HTML en CSS‘Even onder de motorkap kijken’                      Johan Smits                      Minor Internet M...
Kom verder. Saxion.                      Vandaag• Uitleg belang HTML voor SEO• HTML structuur• CSS, stijlsheet voor     – ...
Kom verder. Saxion.                      Principe CMS• Scheiding content en vormgeving     – HTML = Content (structuur)   ...
Kom verder. Saxion.               HTML - structuur• HyperText Markup Language• Functie van tekstblok binnen het  document ...
Kom verder. Saxion.                      HTML Tags (1)• <p> paragraaf = alinea• <h1> heading level 1 = Kop1• <h2> heading ...
Kom verder. Saxion.                      HTML Tags (2)• <li>                List element• <ul>                Unordered li...
Kom verder. Saxion.                      HTML Tags (3)• <div> division = blok-element• <span>     groepering inline       ...
Kom verder. Saxion.                      HTML Tags (4)• <a href=“verwijzing.htm”>Zie ook</a>  – Anker: hyperlink naar ande...
Kom verder. Saxion.           HTML Basisstructuur<html><head>  <title>Titel van de pagina</title>   Andere meta informatie...
Kom verder. Saxion.               HTML HEAD-sectie<head><title>Titel van de pagina</title><meta http-equiv="Content-Type" ...
Kom verder. Saxion.                 Google Scrabble• Keyword in     –   Domeinnaam        woordwaarde   x   20     –   URL...
Kom verder. Saxion.         Structuur ccs stijlblad• Selector { eigenschap: waarde;   eigenschap2: waarde2; …. ; }• h1{col...
Kom verder. Saxion.                      Practicum• Maak de map H:Minor• Download de bestanden vanaf  mim.saxion.nl/docent...
Kom verder. Saxion.                      En verder …• Volgende Week:     – Uitbreidingen op Joomla!• Let op:     – Begin m...
Upcoming SlideShare
Loading in …5
×

Tutorial html en css

735 views

Published on

Joomla CMS,
Kijken onder de motorkap naar html en CSS
Johan Smits, Saxion, Minor Internetmarketing

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
735
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial html en css

  1. 1. Tutorial HTML en CSS‘Even onder de motorkap kijken’ Johan Smits Minor Internet Marketing Module: RealisatieKom verder. Saxion.
  2. 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. 3. Kom verder. Saxion. Principe CMS• Scheiding content en vormgeving – HTML = Content (structuur) – CSS = Presentatie (vormgeving)
  4. 4. Kom verder. Saxion. HTML - structuur• HyperText Markup Language• Functie van tekstblok binnen het document – ‘Gewone alinea’ – Kop – Lijst
  5. 5. Kom verder. Saxion. HTML Tags (1)• <p> paragraaf = alinea• <h1> heading level 1 = Kop1• <h2> heading level 2 = Kop2• <h3> heading level 3 = Kop3Denk aan hoofdstuk, paragraaf resp. subparagraaf
  6. 6. Kom verder. Saxion. HTML Tags (2)• <li> List element• <ul> Unordered list• <ol> Ordered listVoorbeeld:<ol> <li>Opening vergadering</li> <li>Bespreking actiepunten</li> <li>Rondvraag</li> <li>Sluiting vergadering</li></ol>
  7. 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. 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. 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. 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. 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. 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. 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. 14. Kom verder. Saxion. En verder …• Volgende Week: – Uitbreidingen op Joomla!• Let op: – Begin met de groepsopdracht!

×