Post on 21-Jan-2016
description
HTML elements en CSS Commando's
Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken
Schooljaar 2011-2012
Voorwoord:
Hier laat ik enkel wat HTML tag’s en in het volgende hoofdstuk CSS Comando’s zien.
Eerst laat ik zien hoe je een document opslaat en opent.
Als je dat gezien hebt start ik met de HTML Tag’s daarna de CSS Comando’s.
Eerst laat ik zien hoe je het schrijft. Vergeet niet dat je de document eerst opslaat voor je resultaat ziet.
Inleiding:
Opslaan en openen van een document. (Dia 4)
Een document maken. (Dia 5)HTML Elements. (Dia 6- 13)CSS Comando’s. (Dia 14-15)
Opslaan en openen van een document:Maak een nieuwe map (naam niet
belangrijk).Open notepad (kladblok).Ga naar “opslaan als”.Ga naar de nieuwe map.Sla het op als “index.html” (de naam “index”
is voor als startpagina “.html” is zeer belangrijk. Voor CSS bestanden is het “.css”).
Zoek je bestand terug op en open het met de browser. (per browser varieert het resultaat.
Een document maken:
Een HTML document wordt aaltijd gestart met <html>. Deze wordt pas gesloten aan het eind van je site. Met </html>.
Dan heb je de tag <head>. Hier zet je de tittle, CSS en Java-scripting bestanden. Deze wordt gesloten voor je de body begint.
De body tag <body>, dient voor het geheel van je site te zien, deze wordt gesloten voor je de site helemaal sluit met </body>
HTML Elements
<html><head><link rel="stylesheet" type="text/css"
href="background.css"></head><body><p>Dit is de correcte manier om een externe
stylesheet te maken.</p></body><html>
<html><head></head><body><a href=“index.html”>Dit is een link</a></body></html>
<html><head></head><body><img crs=“panda.jpg” alt=“Een panda”/></body></html>
<html><head></head><body><list><ol>
<li>Dit is het eerste item in de lijst</li><li>Dit het tweede</li><li>De dingen in een lijst als dit zijn geordend</li><li>Als je een niet geordende lijst wilt maken zet je “ul” in plaats van “ol”</li>
</ol></list></body></html>
<html><head></head><body><table>
<tr><th>rij 1 cell 1</th><th> rij 1 cell 2</th>
</tr><tr>
<td>rij 2 cell 1</td><td>rij 2 cell 2</td>
</tr></table></body></html>
<html><head></head><body><h1 style=“color:green”>Dit is groen</h1><p style=“background-color:#FFFF00”>Dit
heeft een gele achterkant</p><p style=“text-align:center”>Dit staat in het
midden</p></body></html>
<html><head></head><body><b>Dit is een text in het vet</b><i>Dit is een schuine text</i><strong>Dit is sterk gemaakt</strong><big>Dit is groot gemaakt</big><small>Dit is klein</small><p>Deze paragraaf heeft een
<sub>subscript</sub></p><p>Deze paragraaf heeft een
<sup>superscript</sup></p></body></html>
<html><head></head><body><p><font size=“2”>Deze text is op grote
standaard 2</font></p><p><font face=“verdana”>Deze text is
met een verdana font</font></p></body></html>
CSS Comando’s
Selector: Dit is om aan te geven wat er verandert wordt.Property: Dit is om aan te geven wat er veranderen moed.Value: Dit is om aan te geven in wat het veranderen moed.Declaration: dit is de groepering van wat er verandert is, een declaration wordt aaltijd gesloten voor er een nieuwe geopend wordt met ;.
ex.1{
width:250px;padding:10px;border:5px solid gray;margin:10px;
}
<div class=“ex.1”>Dit is een doos gemaakt met CSS. Niet te vergelijken met een tabel!</div>