een website kun je op heel veel manieren opbouwen. een kale html zonder css maar gewoon puur de opmaak ziet er zo uit.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
doctype
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dit is je doctype: je doctype bepaald eigenlijk hoe de browser je website moet lezen en hoe hij de pagina moet behandelen. Je doctype staat altijd boven in de pagina en er mag niks voor staan. Er zijn verschillende soorten doctypes elk voor een ander doel. Zo heb je bijv ook transitional & frameset (transitional als je oude html tags gebruikt, frames als je werkt met frames binnen je website.
head
in je head vind je meestal:
title:titel van je website
HTML:
<head>
<title>titel</title>
</head>
Dit in een meta tag deze dient er voor dat je browser weet welk karakterset je gebruikt.
dit is voor speciale tekens zoals het � teken.
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in je head kun je ook links plaatsen naar externe stylesheets: in deze externe stylesheet kun je je opmaak van je website plaatsen.
link: geeft aan t is een link naar iets externs
rel: (relation) beschrijft de relatie van het huidige document met de link in de href
href: de plaats waar het css bestand staat zit het in een mapje css dan word het dus
href="css/layout.css"
HTML:
<link type="text/css" rel="stylesheet" href="layout.css"/>
ook kun je er voor kiezen de css rechtstreeks in je head te plaatsen denk er wel om dat wanneer je dit doet dit je extene stylesheet overrulled.
HTML:
<style type="text/css">hier je css code</style>
daarnaast zijn er nog type links zoals javascript dit je in een externe file kunt zetten of rechtstreeks:
HTML:
<script type="text/javascript" src="locatie van je bestand"></script>
je head tag kan er dus ongeveer zo uitzien:
HTML:
<head>
<title>mijn website</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
</head>
hierna begint de body: de body tag is eigenlijk wat je ziet als je een leeg onopgemaakt html bestand ziet.
het is je view: je body tag bevat al je html opmaak.
HTML:
<body>
<!-- dit is een comment: hier komt al je html code-->
<div id="page">voorbeeld</div>
</body>
zoals je vroeg hoe krijg ik een site in het midden: dit doe je door hier een div te plaatsen met een id. deze id link je aan je css.
in je body:
HTML:
<div id="page">voorbeeld</div>
in je css
HTML:
#page{
position:relative:
margin:0 auto;
width:960px;
}
deze css kun je dus direct in je head plaatsen, maar mooier is om dit extern te plaatsen. dus d.m.v die link in je head.
Linken naar een id doe je door een # teken te plaatsen voor de naam van je id (in je css file). Heet je idee pietje, dan roep je deze in css aan met #pietje, id's kun je zelf bedenken en hebben geen vaste naam nodig. Wel is het handig de id zo te benoemen dat je weet wat hij inhoud, voorbeeld: #sidebar, #top #main, #content Een id kun je maar een keer gebruiken in je website. hij is dus uniek. Voor iets wat vaker dezelfde opmaak heeft gebruik je een class. deze roep je aan in je css met een . (punt) dus heeft je div een class dan ziet dat er zo uit:
HTML:
<div class="banner"></div>
in je css roep je deze dan aan d.m.v:
Ik hoop dat je nu een beetje snapt hoe een html document is opgebouwd en wat waar voor is, mocht je nog vragen hebben hoor ik dit graag
succes
