Download
1 / 15
150 likes | 284 Views
Schooljaar 2011-2012. HTML elements en CSS Commando's. Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken. 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.
E N D
Schooljaar 2011-2012 HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken
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. Voorwoord:
Opslaan en openen van een document. (Dia 4) • Een document maken. (Dia 5) • HTML Elements. (Dia 6- 13) • CSS Comando’s. (Dia 14-15) Inleiding:
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. Opslaan en openen van een document:
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> Een document maken:
<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 Elements
<html> <head> </head> <body> <a href=“index.html”>Dit is een link</a> </body> </html>
<html> <head> </head> <body> <imgcrs=“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>
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 ;. CSS Comando’s
ex.1 { width:250px;padding:10px;border:5px solidgray;margin:10px; } <divclass=“ex.1”>Dit is een doos gemaakt met CSS. Niet te vergelijken met een tabel!</div>
