n00b pro

08. HTML samenvatting

Op Youtube: praktijkdemo

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

Blocklevel tekst

<p> paragraaf
<h1>...<h6> titels
<blockquote> quote, pull quote 
<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: < > © — ...
<address> primaire contactinformatie (hoeft geen fysiek adres te zijn)

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

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