Tutorial html en css

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

Tutorial html en css

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Tutorial html en css

Ähnlich wie Tutorial html en css (20)

Tutorial html en css