WEBDESIGN MET HTML
HTML betekent Hyper Text Markup Language.
Het is dus een Markup language voor het beschrijven van web documenten.
Het gebruikt markup tags om het gedrag text en graphics te beschrijven.
HTML gebruikt zelf ook een aparte scripting languages zoals CSS en JavaScript.
CSS staat voor Cascading Style Sheets
Het beschrijft hoe HTML elementen op scherm, papier of andere media getoond worden.
Javascript is de meest gebruikte programmeertaal op het internet.
Het wordt voornamelijk gebruikt om HTML dynamischer te maken, m.a.w. om beweging en verandering te brengen in webpagina’s.

De simpelste manier om de voorbeelden over te nemen is door in notepad een file te openen en deze met de optie all files te saven als .htm of .html. Dus niet als .txt (text file).
Dit document kan je dan bewerken in Notepad en saven en openen als een webpage om het resultaat te zien.
We gebruiken soms het woord 'html document' en soms 'webpage'. Beiden zijn hetzelfde. Ook hebben we bepaalde delen text in het engels staan. Hiervoor bieden we onze verontschuldigingen aan.

HTML syntax:

<!DOCTYPE html> geeft aan welke versie van html gebruikt wordt
<html> Het html-document valt tussen de <html> en </html> tags
<body> Het zichtbare deel van de webpage valt tussen de <body> en </body> tags
<h1>My First Heading</h1> is de heading of de hoofdstuk titel en beschrijving

<p>My first paragraph.</p> html documenten zijn opgedeeld in paragrafen.
<p>My second paragraph.</p> Het zijn afgebakende delen van het zichtbare document

</body>
</html>

HTML maakt gebruik van elements (te vergelijken met zinnen, een element is een zin).
HTML elements bestaan uit een start tag, een end tag, en content (inhoud bestaande uit text, prentje of video) ertussen:
<tagname>inhoud</tagname>

Onderstaand een lijst van elements met hun tags
<div class= > text </div> stelt hierbij een divisie in de body voor. Een divisie is afgebakend deel van je html page die als één blok geformatteerd kan worden.
Een divisie kan verder verdeeld worden in pages <p format></p>
<pre> text </pre> houdt een vaste breedte aan en de spaces en breaks blijven behouden (veel gebruikt bij tabellen).
<td> text </td> geeft aan een cel in een tabel
<tr> text </tr> geeft aan een rij in een tabel
</br> gebruik je om naar een volgende regel te springen zonder een nieuwe paragraaf te beginnen. Het is een begin en end tag in een. Het PHP equivalent is /n  newline
<hr> wordt gebruikt om een verandering aan te geven in hetzelfde blok. Je blijft in een afgebakende deel.
<hr > komt zonder closing tag.
<ul></ul> creeert een unordered list, die dan weer uit list items <li ></li> bestaan.
<select></select> creeert een dropdownlist, die dan weer uit option items <option></option> bestaan.
<a href= http://iemsabi.com>IEMSABI</a> geeft een link aan naar een website. IEMSABI is wat de gebruiker ziet.
<a href=”#id”>Ga naar id</a> geeft een link aan naar een plaats in de locale webpage. Gebruiker ziet ‘Ga naar id’

Html tags kunnen attributes hebben. De attribute geeft meer informatie over het element of bepaald de eigenschap ervan.
Ze worden in de <start tag> gespecificeerd en komen voor als: naam = “waarde”

Onderstaand enkele attributes
<!DOCTYPE html> document type is html
<html lang="en-US"> taal is US engels
<p title="About Iemsabi.com">dit is een lang verhaal</p> het onderwerp is About Iemsabi.com
<a href="http://www.iemsabi.com">This is a link</a>  geeft de url van de link aan. This is a link ziet de gebruiker.
<img src="iemsabi.jpg" alt="Iemsabi.com" width="104" height="142">  geeft van de prent aan de documentnaam, de tekst als de prent niet getoond kan worden, de breedte en de hoogte.

De class attribute maakt het mogelijk om een style aan te geven.
<div class= >text</div> hierbij creer je een gelijke stijl voor de hele <div> element.

The HTML style attribute wordt gebruikt om CSS style sheets te definieren.
Syntax  style="property:value"
The property is een CSS property. The value is een CSS value.
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

The HTML <link> element wordt gebruikt om external CSS style sheets te definieren.
<body style="background-color:lightgrey">text </body>

Je kan ook gewoon een style tag gebruiken om text te bewerken
Onderstaand heb ik een lijst van tags en hun functie

Tag Description
<b> Definieert bold text
<em> Definieert emphasized text
<i> Definieert italic text
<small> Definieert smaller text
<strong> Definieert important text
<sub> Definieert subscripted text
<sup> Definieert superscripted text
<ins> Definieert inserted text
<del> Definieert deleted text
<mark> Definieert marked/highlighted text

Citaat en haar tags

<abbr> Een afkorting of acronym
<address> ContactInformatie voor de schrijver van een document
<bdo> Text directie
<blockquote> Een block data die uit een andere bron komt
<cite> De titel van een werkstuk
<q> Citaat tussen informatie

HTML ondersteund vrije text size en letter spacing.
Computer code ondersteund dat echter niet. Bij computer code moet je vaste lettersize en spacing gebruiken.
Onderstaand een lijst van elements voor computer code.
<code> Programmeer code
<kbd> Keyboard input
<samp> Computer output
<var> een wiskundige variabele
<pre> Voorgeformatteerde text

commentaar wordt niet getoond in de browser. Het wordt geplaatst tussen
<!-- plaats commentaar en -->
conditional comment is een commentaar onder bepaalde voorwaarden.
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->

<span></span> wordt gebruikt om een deel van de inhoud van een element te stylen.
In het onderstaande vb wordt de begeleidende text van de image van de referentie gestyled
<a href="defaultENG.htm"><img src="images2/engels.png" ></a></br><span style='font-family:Agency FB'>ENGLISH</span></img>

CSS wordt op drie manieren gebruikt
inline als je <style> op een html element wilt gebruiken
internal als je <style> op een pagina meerdere keren wilt gebruiken
<style> wordt dan in de head geconfigureerd en naar verwezen in de body.
external als je <style> op meerdere paginas wilt gebruiken.
<link> verwijst dan naar een CSS document waar de style in geconfigureerd is

Inline : rechtstreeks in het document

<h1 style="color:blue">This is a Blue Heading</h1>

Internal: hierbij wordt het in het head element geplaatst

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External: hierbij wordt het in een aparte document opgeslagen en in het head element naar dit document verwezen.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Hierin verwijst de link attribute naar de stylesheet style.css

Onderstaand een voorbeeld van CSS syntax
Onderstaande CSS syntax toont drie properties met hun waarden.
Het bepaald dat er lijntjes worden getekend om het html element,
met een dikte van 10 pixels en een marge (ruimte tussen text en rand) van 30 pixels.

p { border:1px solid black;
padding:10px;
margin:30px; }


Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to
support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

Je kan CSS style gebruiken om de default colors bij het gebruik van een hyperlink te veranderen
De pseudo classes staan onderin in de volgorde waarin ze het effectiefs samenwerken

<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>

Je kan CSS style gebruiken om aan te geven hoe de target te openen
<a href="http://www.iemsabi.com/" target="_blank">Visit Iemsabi!</a>
_blank Opent het target document in een nieuwe window of tab
_self Opent het target document in hetzelfde frame waar het geclicked is(default)
_parent Opent het target document in de parent frame
_top Opent het target document in de full body van de window
framename Opent het target document in een benoemde frame

Je kan een image ook als link gebruiken
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a>
Je kan ook verwijzen naar een bookmark: dit is een locatie op een pagina
Deze locatie geef je aan met de id attribute
<h2 id="tips">Useful Tips Section</h2>
Om daarna naar deze lokatie te verwijzen.
Als het locaal is (de pagina van de bookmark)
<a href="#tips">Visit the Useful Tips Section</a>
Als het op een andere pagina is
<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>

Gebruik gif voor animaties, jpg voor levensechte fotos, png voor kleur rijke schemas etc.
Als de image in een andere folder is
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Als de image op een andere website is
<img src="http://www.iemsabi.com/images/iemsabi_green.jpg" alt="Iemsabi.com">
Voor geanimeerde images gebruik je de gif standaard
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Als je een geanimeerde image wilt gebruiken als een link
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"></a>
border:0; voorkomt dat er een randje wordt geplaatst om de image
Ook videos kan je plaatsen in html en middels
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Hier wordt dezelfde video in twee formats geplaatst. Als de mp4 niet afdraait wordt de ogg geprobeerd. Lukt het toch niet dan wordt in de plaats hiervan de text eronder geplaatst.

Map tag heeft een of meer gebieden waar je op kunt klikken
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Herhaling
Gebruik de HTML <img> element om een image te definieren
Gebruik de HTML src attribute om de URL van de image te definieren
Gebruik de HTML alt attribute om een alternative text voor een image te defieren, als het niet getoond kan worden
Gebruik de HTML width and height attributes om de grootte van de image te definieren
Gebruik de CSS width and height properties om de grootte van de image te definieren (met CSS)
Gebruik de CSS float property om een image te laten zweven
Gebruik de HTML <map> element om een image-kader te definieren
Gebruik de HTML <area> element om een klikbare ruimte in een image map te definieren
Gebruik de HTML <img>'s element gebruik map attribute om te verwijzen naar een image-map

Tabellen worden gedefinieerd met de <table> tag.
Tabellen worden opgedeeld in table rows met een <tr> tag.
Table rows worden opgedeeld in table data met een <td> tag.
De eerste table row kan ook een heading zijn met een <th> tag.

Table data <td> zijn data containers van de tabel.
Ze kunnen allerlei HTML elements bevatten zoals text, images, lists, andere tabellen etc.

<table border="1" style="width:50%" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Je kan liever de CSS style gebruiken voor de configuratie
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; } <style> collapse smelt alle borders tot een

Je kan een cell n columns laten beslaan met colspan="n"
Je kan een cell n rows laten beslaan met rowspan="n"

<table border="1" style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

Lists
Unordered List
• The first item
• The second item
• The third item
• The fourth item

Ordered List
1. The first item
2. The second item
3. The third item
4. The fourth item

Een unordered list begint met de <ul> tag en de list items beginnen met de <li> tag
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Een style attribute kan gebruikt worden om te bepalen hoe de bullets eruit zien
Style Description
list-style-type:disc The list items krijgen bullets (default)
list-style-type:circle The list items krijgen circles
list-style-type:square The list items krijgen squares
list-style-type:none The list items krijgen geen markering

vb
<ul style="list-style-type:square" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Een ordered list begint met de <ol> tag en de list items beginnen met de <li> tag
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Type Description
type="1" The list items krijgen numbers (default)
type="A" The list items krijgen uppercase letters
type="a" The list items krijgen lowercase letters
type="I" The list items krijgen uppercase Romeinse cijfers
type="i" The list items krijgen lowercase roman numbers

A description list is een lijst met termen en een beschrijving van elke term.
The <dl> tag bepaald de description list, the <dt> tag de term (name), and the <dd> tag beschrijft elke term:
vb

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Nested list plaatst een list in een list
bv
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Met de CSS property display:inline kan je de lijst horizontal displayen

<head>
<style>
ul#menu li { display:inline;}
</style>
</head>
<body>
<h2>Horizontal List</h2>

<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>

Block-level elements beginnen op een nieuwe regel en nemen de hele wijdte van een pagina in.
Enkele block-level elements zijn
<div> wordt als container gebruikt voor script. Het kan (maar hoeft niet) style of class gebruiken.
vb
<div style="backgound-color:black; color:white: padding:20px">
<h2>Titel</h2>
<p>Titel en paragraaf worden in de div omsloten</p>
</div>
<h1> tot <h6>
<p>
<form>
Inline elements beginnen niet op een nieuwe regel en nemen zoveel ruimte in als nodig
<span> wordt meestal als container voor text gebruikt
vb <h>Mijn <span style="color:red">Belangrijke</span> Hoofdstuk</h1>
<a>
<img>

HTML5 biedt nieuwe semantic elements om een webpagina op te bouwen:

header Bepaald een header voor een document of section
nav voor navigation links
section een gedeelte van het document
article Defines an independent self-contained article
aside Als een sidebar. Je kan er ook reklame in zetten
footer Onderkant van je document
details Voor additionele detailles
summary Een heading voor de details section

Ze worden allemaal in een body of div element geplaatst.
De elementen kunnen middels css style aangepast worden in dimensie, achtergrondkleur, fonts etc


Om een webpage aan de grootte van het scherm aan te passen kan je werken met de w3.css style sheet. Of je kan werken met dimensies die je in procenten aangeeft.
Onderstaand een voorbeeld van een volledige website geconfigureerd met semantic elements

<!Doctype html >
<html>
<head>
<style>
header { background-color:black; color:white; text-align:center; padding:5px; }
nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }
section { width:350px; float:left; padding:10px; }
footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }
</style>
</head>
<body>
<div>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London</br>
Paris</br>
Tokyo</br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright © Iemsabi.com
</footer>

</div>
</body>
</html>

Een Iframe plaatst een webpage in een webpage
<iframe src="URL"></iframe> is de syntax maar je kan attributes toevoegen
<iframe src="http://iemsabi.com/Vierkinderen/GrondRegistratie01.html" width="200" height="200"></iframe>
Je kan er een link onder plaatsen naar dezelfde webpage.
<iframe src=" http://iemsabi.com/Vierkinderen/GrondRegistratie01.html " name="Online Registratie"></iframe>
<p><a href=" http://iemsabi.com/Vierkinderen/GrondRegistratie01.html " target="Online Registratie">Iemsabi.com</a></p>
CLIENT-SIDE SCRIPTING (ZOALS JAVA)
<script> Definieert de client-side script
<noscript> Definieert het alternatief als de browser de client-side script niet ondersteund
vb
<script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<head> Geeft informative over het document
In de head komen de volgende metadata tags voor
<title> Bepaald de titel van het document. Je ziet het bovenaan de browser. Gebruikt door search engines
<base> Bepaald het default address of een default target voor alle links op een page
<link> Bepaald de relatie tussen een document en een externe bron. Zoals CSS
<link rel="stylesheet" href="mystyle.css">
<meta> Geeft informative over de data in een HTML document
<script> Definieerd een client-side script
<style> Definieerd style informatie voor een document

Sommige characters moeten uitgeschreven worden
Bv om een space te maken gebruik je &nbsp genaamd non breaking space
Onderstaand meer symbolen. Ze beginnen allemaal met de & ampersand.
Symbol Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

WEB BROWSING

Webbrowsers (IE, google chrome, firefox) gebruiken de URL uniform resource locator om een webpage aan te vragen bij een webserver
De webserver is server (computer) die de webpage ter beschikking stelt.
Als je op een html page klikt op een link, zal een <a> tag dirigeren naar een adres op het internet
De syntax voor een adres is:
http: //www.iemsabi.com/html/index.html
scheme://host.domain:port/path/filename.extensie
Waarbij
scheme Definieert het type Internet service (http, https, ftp, file)
host Definieert de domain host (default www voor http), kan ook anders geconfigureerd zijn op de webserver
domain Definieert de Internet domain name (iemsabi.com)
port Definieert de port number bij de hosts (per default 80 voor http). Hoeft veelal niet aangegeven te worden
path Definieert een path op the server (Als je het niet ziet is het de root van de site)
filename Definieert naam van een document or resource (als je het niet ziet is het het startdocument)
http (HyperText Transfer Protocol) Alledaagse unEncrypted web page.
https (Secure HyperText Transfer Protocol Secure) Encrypted web document voor inloggen en betalingen.
ftp (File Transfer Protocol) Voor het downloaden of uploaden van files
file A file on your computer
extensie Geeft aan welk type file het is bv html, php, asp etc
URLs worden over de web gestuurd in de ASCII character set. Als je in de benaming niet ASCII code gebruikt zullen die
characters vervangen worden door % gevolgd door hexadecimale characters 0 t/m 9 A t/m G.
In HTML5 wordt UTF-8 gebruikt.

FORM ELEMENTS

Form elements zijn voor user input (input van de bezoeker van de website)
De bezoeker kan zich hiermee ondermeer aanmelden, registreren of informatie voor een enquete invoeren.
De syntax is:

<form>
.
form elements
.
</form>

De belangrijkste form element is de <input> element, met zijn verschillende type attributen

<input type= "text"> Bepaald de normale text input
<input type= "radio"> Bepaald de radio button voor een of meerdere keuzes
<input type= "submit"> Bepaald de submit button voor het indienen van de form

Onderstaand twee text boxen, twee radio buttons en een submit button.
De gebruiker ziet en krijgt de keuze in te vullen zijn
Firstname met een default waarde Mickey.
Lastname met een default waarde Mouse
De gebruiker ziet en krijgt de keuze te klikken op Male (default) of Female
En een submit button, waarop hij kan klikken als hij de waarden heeft ingetypt
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

De name attribute wordt bij elke formelement gebruikt en is essentieel voor het submitten
De value attribute is de waarde die verstuurd zal worden
De optiekeuzen (illustratietext) die de gebruiker te zien krijgen worden niet met "" quotations geconfigureerd

action="document.php" gebruikt een php documentscript om de input te verzenden
Kan ook geschieden per e-mail adres of op de huidige of een remote webpagina

Meer form attributen
Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

The <select> element biedt een dropdownlists met opties. Je moet een optie kiezen.
In onderstaand voorbeeld is Fiat de default keuze.

<select name="cars">
<option value="fiat" selected>Fiat</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>

The <input> Element
The <textarea> Element
The <textarea> element definieerd enkele blanco regels waarin de user zijn informatie kan intypen
In het voorbeeld kan de gebruiker Maximaal 300 characters invoeren.
Per default staat er 'The cast was playing in the garden'
Voorbeeld
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The <button> Element
The <button> element definieert een een handeling die kan worden gepleegd door het klikken van de button.
In het onderstaande voorbeeld wordt er een alertboxje geopend met Hello World erin.
Voorbeeld
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 heeft de onderstaande elements toegevoegd.
<datalist> dropdownlist van predefined options
<keygen> biedt een secure methode om gebruikers te authenticaten
<output>

Een form met een datalist. De list attribute moet refereren naar de id attribute van de datalist element
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

Een form met keygen field
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>

Input Types

Canvas element is een vierkante box (container) waarin je grafics kan plaatsen.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">graphics</canvas>
De graphics zelf plaats je met scripting, bv Java.

VIDEO EN AUDIO
Multimedia op het internet is plaatjes, muziek, videos, records, films, animations etc
videos en animations kunnen vanaf html5 gewoon geconfigureerd worden, zonder scripting

Video tag maakt het mogelijk een video te plaatsten in html5
Het werkt met zijn eigen attributen om de video te positioneren en beheren
Onderstaand voorbeeld plaatst een video met aangegeven dimensies en een controlpanel
De video is in verschillende formats geplaatst. De browser speelt het eerste format af welke zij kent.
Als de video niet kan worden afgespeeld door de browser wordt er een text ingegeven.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Onderstaand voorbeeld plaatst een video met aangegeven dimensies zonder controlpanel.
De video begint automatisch te spelen, zodra de website opent.

<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Momenteel worden alleen MP4, WebM, and Ogg ondersteund.
Bij video horende tags zijn:
<video> Definieerd dat er een video of movie geplaatst is
<source> Geeft de source aan deze kan zijn video, audio of andere multimedia
<track> Definieerd text tracks in media players

Audio tag
Om audio te spelen in HTML5 wordt het audio element gebruikt (ongeveer als het videoelement voor videos)
Voorbeeld
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Je kan ook video als source gebruiken. Het zal wel muziek laten horen en geen video tonen gezien het element.
De formatten die ondersteund worden zijn MP3, Ogg, Wav.

PLUG-INS

Plug-ins zijn programmas die de functionaliteit van een HTML browser vergroten.
Ze zijn vaak geschreven in een andere taal zoals Java, flash.
Om de plug-ins op te roepen onderscheiden de object element en de embed element
<object> wordt gebruikt om een object in HTML in te voeren. Een object kan zijn
like Java applets, PDF readers, Flash Players, maar ook HTML page, multimedia etc
Zie de voorbeelden onderin:
flash object
<object width="400" height="50" data="bookmark.swf"></object>
html
<object width="100%" height="500px" data="snippet.html"></object>
image
<object data="audi.jpeg"></object>
<embed> wordt op dezelfde manier gebruikt.
<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpeg">

API’s
Bij API's wordt de script in de head geplaatst en de zichtbare html code in de body
DRAG AND DROP

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}
function drop(ev) {ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>
<p>Drag the Iemsabi image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

GEOLOCATION

Geolocation API wordt gebruikt om de positie van een gebruiker te achterhalen.
De gebruiker moet hier wel toestemming voor geven.
De positie is voor smartphones en devices met GPS accurater dan voor computers en laptops.
Onderstaand een voorbeeld van een basic script. Het laadt de positie van de gebruiker en
De functie getlocation() toont die positie in latitude en longitude coordinaten.
De scrip is geplaast in de body van de page:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);}
else { x.innerHTML = "Geolocation is not supported by this browser."; }}
function showPosition(position)
{x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;}
</script>
</body>
</html>
Als je de coordinaten wilt tonen in een map. Heb je toegang nodig tot een map service zoals google.maps.
Onderstaande functie showPosition() toont de positie op een googlemap via een googleapi:
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";}

The getCurrentPosition() method zal een position locator returnen als het succesful is.
The latitude, longitude and accuracy properties worden altijd getoond. De andere properties zijn afhankelijk van browser en apparaat.
Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response
watchPosition() - resulteert in de huidige positie van de gebruiker en update als die verandert. Als GPS in een auto
Het werkt best met een smartphone of iphone. clearWatch() - Stopt de watchPosition() method.
Onderstaande functie toont en update de positie met een watchPosition(showposition) functie:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {navigator.geolocation.watchPosition(showPosition);}
else {x.innerHTML = "Geolocation is not supported by this browser.";}}
function showPosition(position) {x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;}
</script>

Voor bovenstaande script kan je error code toevoegen in geval de gebruiker niet toestemt, of de browser het niet toelaat.
Gebruik de showError() functie alsvolgt:
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;}}

LOCAL STORAGE

Laat je server informatie opslaan in de browser van de gebruiker. Je kan meer dan 5 MB aan informatie zoals cookies en andere html code opslaan.
Onderstaande script slaat een achternaam Smith op en haalt het weer op:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check de ondersteuning door de browser
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");}
//als browser het niet ondersteund
else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";}
</script>
</body>
</html>

APPCACHE
AppCache application cache laat de gebruiker een applicatie laden op zijn computer, zodat hij het
offline kan gebruiken en online sneller kan laden bij het volgend gebruik.
In het onderstaande voorbeeld wordt <html manifest="filenaam.appcache"> gebruikt om de
script en bijbehorende informatie in de body te cachen:
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
</body>
</html>

De cache manifest file wordt opgeslagen als filenaam.appcache en ziet er zo uit:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

CACHE MANIFEST - Files onder de header worden gecached na voor het eerst gedownload te zijn
NETWORK - Files hieronder worden niet gecached en vereisen een connectie met de server
FALLBACK - Files hieronder geven de een webpage aan ingeval er geen toegang is tot de page.

Onclick

getElementById() is javascript en het pakt een element a.d.v. zijn id en niet zijn type.

onclick is een event object. Het voert een handeling uit als de gebruiker op een element klikt.
<element onclick="myScript">

Onderstaande voorbeeld zal bij het klikken van een button de functie myfunction() uitgevoerd worden.
myfunction() toont een text.
myfunction is onderin tussen de <script> en </script> tags geplaatst
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {document.getElementById("demo").innerHTML = "Hello World";}
</script>
</body>
</html>