Allgemein


HTML Grundgerüst
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Vorlage</title>
<meta name="description" content="Beschreibung derWebseite">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>
Kommentare
<!-- Dies ist ein Kommentar -->
Meta Angaben
<meta name="author" content="Fred Fredsen">
<meta name="description" content="Kurzbeschreibung">
<meta name="keywords" content="Stichwort">
<meta name="robots" content="noindex, nofollow">   index: Auslesen erlaubt - noindex: nicht erlaubt; follow: Verweisen folgen erlaubt - sonst nofollow
<meta charset="utf-8">
<meta http-equiv="refresh"content="30"> alle 30 Sekunden neu laden
Zeilenumbruch
<br>
Links
Refernz: http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz
Sonderzeichen (&#9728; Sonnenscheinsymbol): nice-entity.com

Inline Elemente


Bereich innerhalb eines Absatzes
<span></span> Breite von Inline Elementen entspricht ihrem Inhalt. Die Höhe ist durch line-height einstellbar.
Logische Textauszeichnung
<em>betont,bzw. hervorgehoben</em>
<strong>starkbetont</strong>
<code>Quellcode</code>
<samp>Beispieltext</samp>
<cite>Zitat</cite>
<dfn>Definition</dfn>
Physische Textauszeichnung
<b>fett</b>
<i>kursiv</i>
<sup>hochgestellt</sup>
<sub>tiefgestellt</sub>
Element gelöschtanzeigen
<del datetime="2011-10-01">falscher urspünglicherText</del> <ins datetime="2011-06-25T10:59+01:00">Neuer Text</ins>
Abkürzungen mit Text hinterlegen
<abbr title="Hamburger Sport Verein">HSV</abbr>
Verweis
<a href="http://www.eyoo.de" tabindex=x accesskey="z" target="_blank">Verweistext</a>
tabindex: Tabulatorreihenfolge; target="_blank" (für Verweisziel in neuem Fenster), "_parent" (für Verweisziel in übergeordnetem Fensterzustand), "_top" (für Verweisziel im gesamten Anzeigefenster)
Verweisanker
<aid="#name">Ankertext</a>
<a href="#name">Link</a>
E-Mail-Verweise
<a href="mailto:name@mail.de?subject=Thema&cc=sichtbar@mail.de&bcc=unsichtbar@mail.de&body=Text">Verweistext</a>

Blockelemente


Blockelement
<div></div> Blockelement nehmen ganze Breite ein, so breit wie es geht
Überschriften
<h1>Text</h1> 
<h6>Text</h6>
Absatz
<p>Text</p> 
Zitate
<blockquote>  <p>Text</p>   <cite>Quelle:irgendwas.de</cite> </blockquote>
Adresse
<address>Name, Straße ... </address> z.B. unten in der Seite
Präformatierter Text
<pre>alle Whitespace-Zeichen werden im Browser so dargestellt wie im Dokument</pre>
Trennlinien Text
<hr>
Numerierte Listen
<ol> <li>Listeneintrag</li> </ol> ol sind Blockelemente, die li Listblockelemente
Aufzählungslisten
<ul> <li>Listeneintrag</li> </ul>
Verschachtelte Listen
<ul>
<li>Listeneintrag</li>
<li>Listeneintrag <ul type=disc> <li>Listeneintrag</li> </ul> </li>
</ul>
Definitonsliste
<dl> <dt>FAQ</dt> <dd>Häfiggestellte Fragen</dd> </dl> Ein Punkt kombiniert mit einem anderen
Menülisten
<menu> <li>Listeneintrag</li> </menu>
Aufbau Tabelle
<table> 
<thead> <tr> <th>Zelle</th> </tr> </thead>
<tfoot> <tr> <td>Zelle</td> </tr> </tfoot>
<tbody> <tr> <td>Zelle</td> </tr> </tbody>
</table>
colspan=2: über 2 Spalten, rowsapn=2 über 2 Spalten
Grafik
<img src="bild.jpg" alt="BeschreibenderText z.B. für Sehbehinderte">
lowsrc: zuerst laden, dann normale Grafik - width/height: Pixel oder Pozent
Grafik
<img src="URL"usemap="#Mapname">
<map name="Mapname">
<area shape=rect=10,20,90,100 href="URL"> 10 ist Anfang Pixel von links, 20 Anfang oben, 90 Ende links, 100 Ende unten
<area shape=circle=100,150,50 href="URL"> 100 ist Mittelpunkt von links, 150 Kreismittelpunkt von oben, 50 der Kreisradius
<area shape=polygon=10,20,40,30,... href="URL"> 10 ist erste Ecke links in Pixeln, 20 erste Ecke oben, ...</map>

Formular


Formulardefinieren
<form action="script.php" method="get"></form> Blockelement
<form action="mailto:name@domain.de" method=postenctype="text/plain"> Mail Client erforderlich
Zusammenhängende Elemente
<fieldset> <legend> Beschriftung</legend> </fieldset> Formularelemte zusammenhängend gekennzeichnet
Einzeilige Eingabefelder
<input type="name" name="Elementname" value="Text">
required: für Pflichtfelder
placeholder: für Text der erscheint bis selber was eingetragen wurde
size: Anzahl Zeichen
maxlength: maximale Eingabelänge
disabled: ausgrauen
tabindex: Tabreihenfolg
accesskey="z"
readonly: nur lesen
Name eines Inputfelds
<label for="adr">Adresse</label> für alle Input Formen
<input type="text" id="adr"> Verknüpft durch ID
Paßworteingabefeld
<input type="password" name="password">
Mehrzeilige Eingabefelder
<textarea cols="22" rows="5" name="textfeld"> Text</textarea>
wrap: virtual (Automatischen Zeilenumbruch), physical
Radiobuttons
<input type="radio" name="hexen" value="1" checked> Gemeinsame Namen für alle zusammengehörigen Radiobuttons
Checkboxen
<input type="checkbox" name="Name" value="5" checked> Gemeinsame Namen für alle zusammengehörigen Checkboxen
Auswahlliste
<select name="oje">
<option value="0"> Bitte auswählen</option>
<option value="2" selected> Dänemark</option>
<optgroup label="Rotweine"> <option value="chianti">Chianti</option> </optgroup>
</select>
multiple: Attribut multiple für Mehrfachauswahl notieren
Datei Upload
<input type="file"name="Name">
maxlength: Dateigröße begrenzen (Bytes)
accept: Dateityp eingrenzen, z.B. accept="text/*"
Wichtig: im <form>-Tag die Angabe enctype="multipart/form-data" notieren.
Button
<button type="button" name="Name" value="Beschriftung" onClick="">Okay!</button>
<button type="submit">Okay!</button>

Formular HTML 5 Möglichkeiten


Neue HTML 5 Eingabefelder
<input name="test" type="tel"> Telefonnummmer, prüft nix, evtl. kann Browser was mit anfangen, z.B. Autovervollstädigung; nicht alle
<input name="test" type="search"> Suchfeld, kann in unterschiedlichen Browsern z.B. unterschiedlich aussehen; nicht: moz, ie, ope
<input name="test" type="url"> Webadressen, mit Formularvalierung, nur absolute Webadressen werden zugelassen; nicht: saf
<input name="test" type="email"> Emailadressen, mit Formularvalierung, nur absolute Emailadressen werden zugelassen; nicht: saf
<input name="test" type="number" min="14" max="22" step=0.5> nur Zahlen werden zugelassen, mit min und max Grenzen und Eingabenstufen, zusätzlich können im Browser hoch runter angezeigt werden; nicht moz
<input name="test" type="range" min="14" max="22" step=0.5> Rangeinput: Angezeigt als Schieberegler, aber ohne Zahlen angezeigt; nicht: moz

<input name="test" type="date"> Darstellung als Datumspicker; nicht: moz, ie
<input name="test" type="month">
<input name="test" type="week">
<input name="test" type="time">
<input name="test" type="datetime"> mit Zeitzone, nicht: moz, ie, saf

<input name="test" type="color"> Farbauswähler; Aussehen je nach Betriebssystem; Design anpassen schwierig; nicht: moz, ie, saf
HTML 5 Validierung
<input type="text" name="country_code" pattern="[A-Za-z]{3}"> Reguläre Ausdrücke Validierung;

pattern="[0-9]{5}" Postleitzahlen; nicht: saf
min="5" max="11" nicht: moz
required nicht: saf
step="4" in 4er Schritten bewegen mit Pfeilen rechts vom Eingabegerät; nicht moz,saf

Browser gibt Meldung aus; man kann jedes beliebige Feld validieren, Numer, email und url enthalten schon Validierung
HTML 5 weitere Attribute
form="formname" Bezug zu Formular, den id namen des Formulars; dadurch muss ein Element nicht zwischen 2 form tags stehen; nicht ie
formaction="daten.php" Kann im submit Feld url angeben, dadurch mehrere Ziele möglich; nicht. überschreib actin in form: keins
multiple Mehrfachauswahl, z.B. bei file
HTML 5 weitere Elemente
<input list="browsers"> Elementen werden beim draufklicken angeboten; nicht saf
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
Javascript Formularvalidierung
var form = document.getElementById('form1');
var feld = document.getElementById('feld1');

var pruefe = function()
{
alert(feld.validity.valid); // Einige Beispiele: Feldeingabe gültig oder nicht gültig ist.
feld.checkValidity(); // führt Prüfung durch, dadurch tritt Standartfehlermeldung des Browsers in Kraft
alert(feld.validity.rangeOverflow); // prüft ob mehr eingeben als max erlaubt
alert(feld.validity.valueMissing); // Fehler für nicht ausgefülltes Pfichtfeld
}

feld.oninvalid = function(evt) { evt.preventDefault(); alert("Feld falsch!"); } // wenn Feld falsch ausgeüllt, dann eigene Fehlermeldung
Javascript hoch runter zählen
<input type="number" id="foo" value="3" step="2"> 2 Knöpfe zum hoch und runterzählen, anstatt step
<input type="button" value="+1" id="plus">
<input type="button" value="-1" id="minus">

var foo = document.getElementById("foo");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var hoch = function() { foo.stepUp(); }
var runter = function() { foo.stepDown(); }

HTML5 Grundsätzliches


Polifills
Damit Html5 auf Browsern läuft, welche bestimmte Funktionen noch nicht unterstützen; Java Script Bibliotheken.
Liste Github
...
Neue semantische Elemente
<section> für inhaltliche Trennung -- Elemente anstat der divs benutzen
<nav> für Hauptnavigation
<header> für Kopfbereich eines Abschnittes oder der ganzen Seite
<footer> für den Fußbereich
<aside> Seitenbereich
<article>
<time> für Zeitangaben
Semantische Neubedeutung von Elementen
<small> Kleingedrucktes im Vertrag oder Fußnoten
<b> und <k> für Text der eine Hervorhebung bedarf
<hr> Trennung zweier Bereiche
...
Outline Algorithmus
<section>
  <h1>dadurch unendlich viele Überschriftenebenen möglich</h1>
   <section>
   <h1>Das article-Element</h1>
   </section>
</section>

Webapps, Canvas


Canvas Objekt
var zeichnenbereich = document.getElementsByTagName('canvas')[0]; // Zugriff auf Element
if (zeichenbereich.getContext) // hier wird geschaut, ob canvas unterstützt wird
{
var context = zeichenbereich.getContext('2d'); // 2d Kontext ausgewählt
    context.fillStyle="rgb(200,0,0)"; // Füllfarbe ausgewählt
    context.fillRect (15, 15, 155,50); // Rechteck erzeugt: x und y Breite und Höhe
    context.fillStyle = "rgba(0, 20,200, 0.2)";
    context.fillRect (30, 40, 255,250);
}

<canvas width="250" height="150"> <img src="images/b.png"alt="Alternative zu Canvas"> </canvas>
Canvas Element ist erstmal leere Malfläche, wird dann mit Javacript gefüllt
Canvas Linien zeichnen
context.strokeStyle = 'red'; // Linienfarbe
context.lineWidth = 12; // Liniendicke
context.lineCap = 'round'; // abgerundet
context.beginPath(); // Neuer Pfad
context.moveTo(240, 100); // Linie von oben
context.lineTo(240, 200); // nach unten, hier erst soll, mit stroke wird erst gezeichnet
context.lineTo(190, 250); // Malt vom letzten Punkt bis zu diesem
context.stroke(); // jetzt wird gezeichnet
Canvas Beispiele und Anmerkungen
http://www.spielzeugz.de/lab/ Beispiele, z.B. Reaktion auf Mauszeiger oder Daten darstellen, also Interaktion
mit Frameworks und Bibliotheken ist das Canvas Objekt besser nutzbar
Durch canvasquery.js Kurzschreibweise und Verkettung
Bilder und Videos können in ein Canvasobjekt kopiert werden und manipuliert werden.
Videoanitmation sind möglich nicht mit setInterval sondern mit animate, siehe html5 6.4, ähnelt Daumenkino
Audio Api
<audio src="audio.mp3"> zwischen den Audiotags kann Alternativinhalt angegeben werden, z.B. Link</audio>
<audio src="audio.mp3" controls></audio> ohne controls Steuerelemente unsichtbar<br>
<audio src="audio.mp3" loop autoplay preload="none"></audio> loop sorgt für Schleife, preload bittet Browser darum, das Datei vorm abspielen nicht runtergeladen wird, metadata empfiehlt runterladen, auto lässt Browser das entscheiden.
Audio Konstruktor
<input type="button" value="abspielen!" onclick="abspielen()"> Auf Knopfdruck Sound abspielen
<script>
var abspielen = function(){ new Audio('audio.mp3').play(); } // neues Audio Element erstellt
</script>
Video Element
<video src="vid.mp4" controls width="222"></video> Videoelement verhält sich ähnlich wie Bildelement
<video src="vid.mp4" loop autoplay preload="none" poster="voschaubild.jpg"></video> Vorschaubild und weitere Eigenschaften
<video src="vid.mp4" style="opacity:0.5"></video> Man kann auf Videoelemente alle css Eigenschaften anwenden.
Eigener Videoplayer
<video id="film" src="toll.mp4" width="30%"></video> Eigenes Videoplayer gestalten
<input type="button" value="Start/Stop" onclick="start()">
<input type="button" value="Stummschalten" onclick="stumm()">
<input type="button" value="Lauter" onclick="lauter()">
<input type="button" value="Leiser" onclick="leiser()">

<script>
var video = document.getElementById('film');
var start = function() { if (video.paused) { video.play(); } else { video.pause();} } // wenn Video nicht läuft dann play
var stumm = function(){ if(video.muted) { video.muted = false; } else { video.muted = true; } } // Stumm
var lauter = function() { if(video.volume < 1){ video.volume = (video.volume < 0.8) ? video.volume + 0.2 : 1; } }
var leiser = function(){ if(video.volume > 0){ video.volume = (video.volume > 0.2) ? video.volume - 0.2 : 0; } }
// Lautstärke liegt immer zwischen 0 und 1; sonst Javascript Fehler, deshalb sonst 1 und 0
</script>

http://praegnanz.de/html5video/ schon fertige Lösungen
Fortschrittsbalken
<progress id="fortschritts_id" min="0" value="0" max="" style="width:30%"></progress>
sobald das Videogeladen ist, muss das Metadatenevent abgefangen werden um die Länge festzustellen

video.addEventListener('loadedmetadata', function(){ // Wird aufgerufen, sobald die Metadaten des Elements geladen sind
var fortschritts_id = document.getElementById('fortschritt');
fortschritt.setAttribute('max', video.duration); // Wert von Progress max wird auf Länge in Sekunden gesetzt
setInterval(function(){ fortschritt.setAttribute('value', video.currentTime); }, 500); // alle halbe Sekunde wird Valuewert des Fortschrittsbalken neu gesetzt
}, false);

Klickposition über var springeZu = function(zeit){ video.currentTime = zeit;} // Mit Klick auf bestimmte Position zu gelagen, Zusatzscript notwendig Html5 5.4, um Koordinaten herauszufinden
Video Format Problme
<video controls id="video" width="320" height="180"> unterschiedliche Browser unterstützen unterschiedliche Formate
<!-- Große kommerzielle Browser --> <source src="video.mp4" type="video/mp4">
<!-- Moderne kleine & Open-Source-Browser --> <source src="video.webm" type="video/webm">
<!-- Ältere kleine & Open-Source-Browser --> <source src="video.ogv" type="video/ogv">
</video>
Geolokation
function success(position) // Latitude: 52.519171 -- Longitude: 13.406091
{
document.getElementById('karte').innerHTML="Latitude:" + position.coords.latitude+ "<br>Longitude: "+ position.coords.longitude;
}

function error(msg){ document.getElementById('karte').innerHTML=msg; }

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success,error); }
else { alert("Fehler bei der Geolokalisierung!"); }
Geolokation Beispiel
var erfolgCallback = function(position) // Callback, meldet sich wenn Daten bereit stehen
{
var msg = 'Zeit: ' + position.timestamp + "\n" +
'Geographische Breite: ' + position.coords.latitude + "\n" +
'Geographische Länge: ' + position.coords.longitude + "\n" +
'Höhe: ' + position.coords.altitude + "\n" +
'Präzision: ' + position.coords.accuracy + "\n" +
'Präzision der Höhenmessung: ' + position.coords.altitudeAccuracy + "\n" +
'Richtung: ' + position.coords.heading + "\n" +
'Geschwindigkeit: ' + position.coords.speed + "\n";
document.getElementById('ergebnis').innerHTML = msg;
};

// Zeit: 1364325514565 -- Geographische Breite: 52.516701 -- Geographische Länge: 13.4- -- Höhe: null -- Präzision: 2000
// Präzision der Höhenmessung: null --Richtung: null -- Geschwindigkeit: null


var fehlerCallback = function(e) { var msg = 'Fehler ' + e.code + ': ' + e.message; alert(msg); }
var optionen = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
if(navigator.geolocation){ var ueberwachung = navigator.geolocation.watchPosition(erfolgCallback, fehlerCallback, optionen); } // Daten werden ständig erneuert
var stopWatch = function(){ navigator.geolocation.clearWatch(ueberwachung); }

Mobile Webapps


On- und Offline Event
addEvent(window, 'online', function() { console.log('Ab jetzt Online-Modus'); }); // Online-Event
addEvent(window, 'offline', function(){ console.log('Ab jetzt Offline-Modus'); }); // Offline-Event
addEvent([window, documtent.body], 'online', function() { console.log('Ab jetzt im Online-Modus'); }); // bei Moz dann doppelt

// Es wird gemeldet wann Online, uneinheitlich geregelt, feuert bei manchen auf window, bei manchen aufs body
// funktioniert nicht zuverlässig, je nach Zusammenarbeit mit Betriebsystem, am besten ist pings absenden, es gibt polyfills
On- und Offline
navigator.onLine; // liefert true false zurück
Manifest
Wir können bestimmen das Dateien, wie Bilder, Javascript, Html, runergeladen und gespeichert werden soll.
Hat nicht mit normalen Browser Cache zu tun. Manifest ist Liste von Dateinamen.
Der Firefox fragt, um Erlaubnis, um Application Cache zu erzeugen

In der .htaccess Datei muss folgendes stehen, damit die Dateien mit der Endung .manifest mit ausgeliefert werden:
AddType text/cache-manifest manifest

cache-manifest.manifest, folgend aufgebaut
CACHE MANIFEST
irgendwas.html

<html manifest="cache-manifest.manifest"> in Hauptseite einbinden, die weiteren Dateien werden über das Manifest geladen
Manifest 2
CACHE MANIFEST
irgendwas.html

NETWORK: // nicht runterladen
blog.html
/foo/

FALLBACK:
/ offline.html // durch / für sämtliche Pfade offline.html als Ersatzdatei festgelegt

Cache-Events
addEvent(applicationCache, 'checking', function(){ console.log('Suche Manifest...'); }); // feuert, wenn Browser Manifest sucht
addEvent(applicationCache, 'noupdate', function(){ console.log('Nichts neues im Manifest gefunden.'); }); // wenn keine Änderung im Manifest
addEvent(applicationCache, 'downloading', function(){ console.log('Lade Manifest und Ressourcen...'); }); // wenn Ressourcenrunterladen beginnt
addEvent(applicationCache, 'progress', function(){ console.log('Lade Ressourcen...'); }); // beim runterladen
addEvent(applicationCache, 'cached', function(){ console.log('Application Cache bereit.'); }); // Browser fertig ist mit runterladen
addEvent(applicationCache, 'updateready', function(){ console.log('Cache aktualisiert.'); }); // wenn kein neuer Cache, sondern Aktualisiuerung
addEvent(applicationCache, 'obsolete', function(){ console.log('Cache veraltet.'); }); // wenn Cache fehlerhaft
addEvent(applicationCache, 'error', function(){ console.log('Fataler Fehler beim Anlegen des Caches.'); }); // schwerer Fehler

Web Storage
Name Wert Paare, local oder session; Daten werden nach Domain getrennt gespeichert
Hierdurch kann man Offline speichern und wenn wieder Online dann synchonisieren

localStorage.setItem('foo', 22); // setzt Wert
localStorage.getItem('foo'); // 22
localStorage.length; // 1 Datensatz
localStorage.removeItem('foo'); // Datensatz gelöscht
On und Offline speichern Beispiel
var saveTodo = function(todo, callback)
{
var query = escape(todo);
if(navigator.onLine){ sendRequest('save.php?q=' + query, callback); } // wenn online dann ajax speichern
else // sonst slot erezeugen, item zwischenspeichern, dann callback
{
var slot = 'slot' + localStorage.length;
localStorage.setItem(slot, todo);
callback();
}
}; außerdem ist noch Synchronisierung wichtig html5 6.4
jStorage
jStorage ist ein Plugin, um Browserunterschiede anzupassen.
$.jStorage.set ('foo',22);






Impressum: Gero Zickermann, Geusenstr. 10, 10317 Berlin