n00b pro

08. HTML samenvatting

Dit hoofdstuk is onderdeel van de cursus HTML. Andere cursussen in dezelfde reeks: CSS, Javascript, C#, Ontwikkelomgeving.

Op Youtube: praktijkdemo

https://www.youtube.com/watch?v=kIJbahdQqcI

Blocklevel tekst

<p>
 paragraaf 
<h1>...<h6>
 titels 
<blockquote>
 quote, pull quote 
<address>
 primaire contactinformatie (hoeft geen fysiek adres te zijn) 
<ul>
   <li>...</li>
   <li>...</li>
</ul>
ongeordende lijst van gelijkaardige items (ook gebruikt voor menu's) 
<ol>
   <li>...</li>
   <li>...</li>
</ol>
geordende lijst van gelijkaardige items 
<dl>
   <dt>...</dt><dd>...</dd>
   <dt>...</dt><dd>...</dd>
</dl>
definitielijst met term/data paren 

<table>
   <caption>...</caption>
   <colgroup>
      <col>
      <col span="2">
   </colgroup>
   <tr>
      <th scope="col">...</th>
      <th scope="col">...</th>
      <th scope="col">...</th>
   </tr>
   <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
   </tr>
   <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
   </tr>
</table>
 basisstructuur tabel

Inline tekst

<em>
 nieuwe term, spreek trager uit 
<strong>
 belangrijke term, spreek luider uit 
<small>
 meestal in footer: "kleine lettertjes" (voorwaarden, copyright info...) 
<sup>
 superscript, b.v. m2 
<sub>
 subscript, b.v. H2O 
<cite>
 referentie naar een werk: schilderij, boek, publicatie... 
<code>
 code blok, b.v. in programmeerblogs 
<abbr>
 afkorting 
<br>
 line break 
&lt; &gt; &copy; &mdash; ...
 karakter entiteiten: < > © — ...

Links

<a href="...">...</a>
 hyperlink 
<a href="..." title="...">...</a>
 hyperlink met beschrijving 
<a href="mailto:...">...</a>
 email link 
<a href="tel:...">...</a>
 telefoon of gsm link 
<a href="#ref1">...</a>
<p id="ref1">...</p>
 anker (interne link in de pagina) 
<a href="">company name</a>
<a href=""><img src="img/logo.png" alt="logo"></a>
 typische code voor logo 
<ul>
   <li><a href="">home</a></li>
   <li><a href="">projects</a></li>
   <li><a href="">contact</a></li>
</ul>
typische code voor menu

test

Media

<img src="..." alt="...">
 image 
<figure>
   <img src="..." alt="...">
   <img src="..." alt="...">
   <img src="..." alt="...">
   <figcaption>...</figcaption>
</figure>
 one or more images with caption 
<picture>
   <source media="..." srcset="...">
   <source media="..." srcset="...">
   <img src="..." alt="...">
</picture>
 image with alternative sources 
<audio src="tune.mp3">
   audio not supported
</audio>
 audio element 
<audio src="tune.mp3">
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
</audio>
 audio with alternative sources 
<video src="myvideo.mp4">
   video not supported
</video>
 video element 
<video src="media/myvideo.mp4">
   <source src="video_small.mp4" type="video/mp4" media="handheld">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
 video with alternative sources

Structural

document

<!DOCTYPE html>
 HTML document type 
<html>
 HTML document 
<head>
 invisible meta content 
<title>
 document title 
<meta charset="utf-8">
 UTF8 characterset declaration 
<style>...</style>
 internal stylesheet 
<link rel="stylesheet" href="...">
 linked stylesheet 
<script></script>
 internal script 
<script src=""></script>
 linked script 
<head>
 invisible meta content 
<body>
 visible content

divisions

<div>
 blocklevel division (part of document) 
<span>
 inline span (part of text) 
<section>
 groups a title and content 
<nav>
 main navigation block 
<article>
 self-contained independent content 
<main>
 main page content 
<header>
 introductory content (page or section) 
<aside>
 related content (page or section) 
<footer>
 closing content (page or section)

Forms

form structure

<form action="...">...</form>
 basic form 
<div>
   <label for="inp1">...</label>
   <input id="inp1" type="...">
</div>
 control group 
<div>
   <label>...</label>
   <label><input type="checkbox"> option A</label>
   <label><input type="checkbox"> option B</label>
   <label><input type="checkbox"> option C</label>
</div>
 checkboxlist 
<div>
   <label>...</label>
   <label><input name="grp1" type="radio"> option A</label>
   <label><input name="grp1" type="radio"> option B</label>
   <label><input name="grp1" type="radio"> option C</label>
</div>
 radiobutton group

controls

<input type="text">
 text field 
<textarea>...</textarea>
 text area 
<input type="passwoord">
 password field 
<input type="email">
 email field 
<input type="tel">
 telephone field 
<input type="url">
 url field 
<input type="date">
 datepicker field 
<input type="color">
 colorpicker field 
<input type="range" min="1" max="10">
 slider field 
<select>
   <option>value A</option>
   <option>value B</option>
   <option>value C</option>
</select>
 dropdown list

buttons

<input type="submit" value="send">
 submit button 
<button type="submit">send</button>
 submit button, alternative syntax 
<input type="reset" value="clear form">
 reset button

attributes

<input ... placeholder="...">
 set watermark text 
<input ... value="...">
 set input value 
<input ... disabled>
 control is disabled 
<input ... autofocus>
 autofocus on this control 
<input ... required>
 value is required 
<input type="radio" checked>
<input type="checkbox" checked>
 radiobutton is aangevinkt 
<option selected>...</option>
 optie is aangevinkt