|
HTML
|
|
HTML Tags
|
De uitgebreide lijst met
HTML Tags van W3Schools.
|
|
HTML Attributes
|
De uitgebreide lijst met
HTML Attributes van W3Schools.
|
|
<!-- -->
|
Comment
|
|
<html> </html>
|
Start en einde van een webpagina.
|
|
<head> </head>
|
Hier staat informatie die niet zichtbaar wordt, bijvoorbeeld
de titel van de webpagine en CSS-style-definities.
|
|
<body> </body>
|
Start en einde van de inhoud van een webpagina.
- <body bgcolor="lightyellow">
- <body link="blue" alink="blue" vlink="blue">
|
|
<br>
|
Nieuwe regel.
|
|
<p>
|
Nieuwe paragraaf.
- <p align="left">
<p align="right">
<p align="justify">
<p align="center">
|
|
<h1> </h1>
|
Kopteksten.
|
|
font style
|
- <strong></strong>
=
<b></b>
bold
- <em</em>
=
<i></i>
italic
- <tt></tt>
teletype
|
|
<font></font>
|
Font : kleur, grootte, ...
- <font color="red"></font>
- <font size="5"></font>
- <font size="+1"></font>
|
|
<hr>
|
Horizontale lijn.
- <hr size="2" color="red">
|
|
<img>
|
Invoegen van een foto.
- <img src="relatief-pad-naar-foto/foto.jpeg">
- <img src="pad/foto.jpeg" width="5">
|
|
<a> </a>
|
Link naar webpagina.
- <a href="https://webpagina.html">Naam van webpagina</a>
- <a href="https://webpagina.html" target="_blank">Naam van webpagina</a>
- <a href="https://webpagina.html" target="_blank"><img src=..></a>
|
|
<ul></ul>
|
Unordered list
<ul>
<li>
...
</ul>
|
|
<ol></ol>
|
Ordered list
-
<ol>
<li>
...
</ol>
-
<ol type="a">
<ol type="I">
|
|
<table></table>
|
Table
- <table width="30%">
- <table border="1" cellspacing="1" cellpadding="5">
|
|
<tr></tr>
|
Row in table
|
|
<td></td>
|
Column in table
- <td width="30%">
- <td valign="top" align="left">
- <td valign="top" align="center" colspan="2">
|
|
<div></div>
|
Division.
Gebruikt met CSS-style definities.
|
|
CSS
|
|
CSS Properties
|
De uitgebreide lijst met
CSS Properties van W3Schools.
|
|
CSS Selectors
|
De uitgebreide lijst met
CSS Selectors van W3Schools.
|
|
/* */
|
Comment
|
|
<tag style="property:value>
|
In-line style
|
<style>
selector {property:value; ...}
</style>
|
Internal style: in head-sectie.
- body { margin:40; padding:10; background-color: lightyellow; }
body { font-family: Andale Mono, monospace; }
body { font-size: 18px; font-style: normal; color: red}
=>
<body>
- a { text-decoration:none; color:magenta; }
=>
<a></a>
- r { color:red; }
=>
<r></r>
|
<style>
selector.class { property: value; ...}
</style>
|
Selector met 'class'-selector.
- p.a { font-style: normal; color: lightblue; }
p.b { font-style: italic; }
p.c { font-weight: bold; }
p.box { width: 100px; heigth: 50px; padding: 20px; border: 1px solid; }
=>
<p class="a"></p>
=>
<p class="box"></p>
|
<style>
.classname { property: value; ...}
</style>
|
Classes: kunnen in allerlei tags worden gebruikt.
- .special { font-size:25px; font-weight:bold; }
=>
<div class="special"> </div>
- .mar { margin-left:100px; padding:10px; }
=>
<div class="mar"> </div>
=>
<p class="mar"> </p>
|
<style>
.classname tag { property: value; ... }
</style>
<style>
.classname tag:.. { property: value; ...}
</style>
|
Tag-classes: gelden voor bepaalde tag.
- .speciallink a { color:green; }
=>
<a class="speciallink"> </a>
- .linkstyle a { color:blue;}
.linkstyle a:visited { color:red; }
.linkstyle a:hover { background: yellow; color: black; }
.linkstyle a.active { background-color: green; color: white; }
=>
<div class="linkstyle">
<a class="active"> </a>
</div>
- .navbar { background-color: #333; ... }
.navbar a { color: blue }
.navbar a:hover { background: #ddd; color: black; }
.navbar a.active { background-color: #04AA6D; color: white; }
=>
<div class="navbar">
<a class="active" href=".."> </a>
</div>
|
|
selector {property:value; ...}
|
External style : in aparte CSS-file "naam.css"
In head-sectie: <link="stylesheet" href="naam.css">
|