SlideShare a Scribd company logo
Tutorial HTML en CSS
‘Even onder de motorkap kijken’


                      Johan Smits
                      Minor Internet Marketing
                      Module: Realisatie
Kom verder. Saxion.
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
Kom verder. Saxion.



                      Principe CMS
• Scheiding content en vormgeving
     – HTML = Content (structuur)
     – CSS = Presentatie (vormgeving)
Kom verder. Saxion.



               HTML - structuur
• HyperText Markup Language
• Functie van tekstblok binnen het
  document
     – ‘Gewone alinea’
     – Kop
     – Lijst
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
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>
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>
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
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>
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>
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)
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!
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
Kom verder. Saxion.



                      En verder …
• Volgende Week:
     – Uitbreidingen op Joomla!


• Let op:
     – Begin met de groepsopdracht!

More Related Content

PDF
The Top Skills That Can Get You Hired in 2017
PPT
Les01 Htmlen Xhtml2008
PPTX
PPT
PPT
Crossmedia les 12 de basis over Html
 
PDF
1.7 terugblik module 1
PPT
Html, xhtml en Ftp
PDF
HTML opfrissing
The Top Skills That Can Get You Hired in 2017
Les01 Htmlen Xhtml2008
Crossmedia les 12 de basis over Html
 
1.7 terugblik module 1
Html, xhtml en Ftp
HTML opfrissing

Similar to Tutorial html en css (13)

PDF
Wdreader1
PDF
1.7 html css terugblik
PPTX
1.1 html css introductie
PDF
HTML kort & bondig
PDF
Presentatie webrichtlijnen
PPTX
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
PDF
1.4 html css basis 3
PDF
1.2 html css basis 1
PPSX
Html css-les1
PPT
Cascading Style Sheets 2009
PPTX
Talk 02 html5-css3
PDF
Gastcollege: Basis HTML, CSS en JavaScript
PDF
Wdreader2
Wdreader1
1.7 html css terugblik
1.1 html css introductie
HTML kort & bondig
Presentatie webrichtlijnen
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
1.4 html css basis 3
1.2 html css basis 1
Html css-les1
Cascading Style Sheets 2009
Talk 02 html5-css3
Gastcollege: Basis HTML, CSS en JavaScript
Wdreader2
Ad

Tutorial html en css

  • 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!