Archiv

HTML5 und CSS3

Globalen Attribute in HTML5

Attribute und Beschreibungen

    Neu

  • contextmenu Spezifiziert zusammenhängendes Menü für ein Element. Das Kontextmenü erscheint, sobald der Nutzer mit einem Rechtsklick auf das Element drückt.
  • contenteditable Spezifiziert ob ein Element bearbeitbar ist oder nicht
  • draggable Spezifiziert ob ein Element verschiebbar ist oder nicht
  • dropzone Spezifiziert ob die Daten kopiert, verschoben oder verlinkt wurden, wenn das Element benutzt wurde (z.B. gedrückt)
  • hidden Zeichnet ein Element aus, das jetzt nicht mehr oder nicht mehr länger relevant ist.
  • spellcheck <element spellcheck=“true|false“>Zeigt an, ob ein Element auf Grammatik und Rechtschreibung geprüft wurde oder nicht

    Bereits vorhandene

  • accesskey Spezifiziert einen Shortcut – Schlüssel um ein Element zu aktiveren oder fokussieren
  • class Spezifiziert einen oder mehrere Klassen für ein Element (die Referenz bzw. die Auszeichnung erfolgt hier in einem Stylessheet)
  • dir Spezifiziert den Text – Richtung f&uul; den Inhalt eines Elementes.
  • id Spezifiziert eine einzelne spezielle Id für eine Element, im Gegensatz zu class
  • lang Zeichnet die Landessprache des Inhaltes aus
  • style Zeichnet ein Inline Style für ein Element aus.
  • tabindex Bestimmt die Tabulator-Reihenfolge für Verweise
  • title Zeichnet den Titel eines Elementes aus

Eigenes Interface für Videos und Audios mittels der JavaScript API der neuen Elemente programmieren

<!DOCTYPE html>
<video id="film" src="vido.mp4" width="50%">
<input type="button" value="Start/Sop" oncklick="start()">
<script>
var video=document.getElementById('film');
 var start = function(){
if(video.paused){
video.play();
}
else {video.pause();
}}
var stumm = function (){
if (video.stumm){
video.stumm =false;
}
else{video.stumm = true;
}
}
</script>

Als erstes wird ein Video mit dem Video Element und einige Eckdaten notiert.
Dann wird ein Start/Stop Button hinzugefügt. Auf dem Button mit dem Wert Start/Stop wird ein Onclick – Händler definiert.

< input type="button" value="Start/Stop" onclick="start()">

Jetzt wird noch die Funktion für diesen Button gebraucht.
Im Scriptblock wird die Variable Video gleichgesetzt mit document.getElementById – nehme das Element ins Dokument über die ID. Hiermit wird der Zugriff auf das Video geschaffen.

var video = document.getElementById('');
var start = function();

Nun muss noch die Play- und Pause – Funktion des Elementes aufgerufen werden

 video.play();
video.pause();

Jetzt muss nur noch abgefragt werden, ob das Video grade pausiert oder abspielt.

if(video.paused){
video.play();}
else{ 
video.pause();}

Wenn das video pausiert if (video.paused), dann spiele video.play as Video ab, wenn (es)nicht (abspielt) dann pausiere.
else{
video.pause();}

<!DOCTYPE html>
<p>
<video id="film" src="video.mp3" width="50%"></pre>
<input type="button" value="Start/Stop" onclick="start()">
<pre><input type="button" value="stumm schalten" oncklick="stumm()">
<script>
var video=document.getElementById('film');
 var start = function(){
if(video.paused){
video.play();
}
else {video.pause();
}}
var stumm = function (){
if (video.stumm){
video.stumm =false;
}
else{video.stumm = true;
}
}
</script>

In HTML5 ist es möglich, weitere Strukturierungen als h1 – h6 durchzuführen.
UM dieses schnell nach zu vollziehen, kann der H20 – outline- analysierer im Browser implementiert werden.
In der Browser leiste auf das outline-Symbol klicken und schon erscheint die Struktur der Seite.

Zu beachten ist das nur neuere Browser wie der ie9 und neuere Chrome, firefox, opera und Safarie Browser diese Struktur richtig interpretieren können zudem funktioniert sie nur mit nav, section, article und aside.

Die Strukurierung der Elemente mit Hmtl5 ist nicht nur für die eigene Ordnung wichtig, sondern ist diese Auszeichnung Maschienenlesbar, daher sie kann von Suchmaschienen optimal bewertet und von Screenreadern gut erfasst werden.

Beispiel einer Verschachtelung mit Outline Elementen

Einführung

Artikel

diese ist der erste Artikel der Seite

Zweiter Artikel

diese ist der zweite Artikel der Seite

<section>
<h2>Einführung</h2>

<article>
<h3>Artikel</h3>
diese ist der erste Artikel der Seite
</article>

<article>
<h3>Zweiter Artikel</h3>
diese ist der zweite Artikel der Seite
</article>

</section>

<section id="sidebarleft"> 
<aside>
<h3 >
 Linke Sidebar 
</h3>
Werbung 
</aside >
</section >

 

Hier wird verdeutlicht, wie die h1- h6 Schriftauszeichung in den einzelnen Elementen dargestellt wird.


<!DOKTYPE HTML>

<html>
<head>
</head>

<section>
<h1>H1 des Section Elementes</h1>
<article><h1>h1 im Artikel unter dem Element section</h1> </article>
</section>
<h6>diese H6 kommt als erstes im Source - Code.</h6>

<h1>diese H6 kommt als letztes im Source - Code</h1>
<aside>
<h1>das ist eine H1 in aside - Element</h1>
<article><h1>h1 im Artikel</h1> </article>

</html>

dastellung der Schriftgroessen h1 - h6

<!DOCTYPE html>

<form action="xx.html">

<input type="tel" name="test" value="Telefonummer eintragen">

<input type="submit"  value="absenden">

</form>

Der Vorteil der Verwendung des Typen „tel“ ist das damit die Browser etwas anfangen könnten zum Beispiel zur aut. Vervollständigung oder bei Mobiltelefonen, könnte man auf das Adressbuch zugreifen.

<!DOCTYPE html>

<form action="input-url.html">

<input type="url" name="test" value="Web -adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier macht das Formularfeld schon mehr, es lässt nur absolute Web – Adressen zu. (nicht valide: google.de – nicht valide: http://www.google.de – valide: http://www.google.de)

<!DOCTYPE html>

<form action="email-url.html">

<input type="email" name="test" value="Email -Adresse eintragen">

<input type="submit"  value="absenden">

</form>

Hier läßt der Type email nur Email- Adressen zu.

<!DOCTYPE html>

<form action="number-url.html">

<input type="number" name="test" max="7" min="0" step="o.5"
value=" Nr. eintragen">

<input type="submit"  value="absenden">

</form>

Der Type Number läßt nur Zahlen zur, zudem lassen sich diese Zahlen mit den neuen Attributen min und max einschränken. Mit step, lassen sich die gültigen Schritte bestimmen. Zum Beispiel wäre 6,5 eine Gütige Nummer, 6,2 nicht.

<!DOCTYPE html>

<form action="input-range.html">

<input type="range" name="test" max="7" min="0" step="2">

<input type="submit"  value="absenden">

</form>

Zum Number gibt es noch die Alternative und zwar das Range – Input. Hier stellt sich die
Formulare HTML automatische Formular- Validierung nicht. Im Grunde ist es ein einfacher Schieberegler, dem man die Schritt-zahl mitgibt. Im Gegensatz zum Type Number, sind beim Range – Input die Zahlen nicht sichtbar.

<!DOCTYPE html>
<!--<style>p {font-site:1.5em;} input {margin-zop:1em; 
font-size:inherit;}</style>-->

<form action="input-date.html">

<input type="date" name="test1">

<input type="month" name="test2">

<input type="week" name="test3">

<input type="time" name="test4">

<input type="datetime" name="test5">

<input type="datetime-local" name="test6">

<input type="submit"  value="absenden">

</form>

weitere Links:
http://www.heise.de/ix/artikel/Auswahlscheibe-1667689.html

www.drweb.de/magazin/formulare-gestalten-und-validieren-mit-html5-und-css3/

ähnliche Links:
http://www.drweb.de/magazin/ideal-forms-2-0-html5-formular-framework-auf-jquery-basis-34469/
http://www.usability-tipps.de/info/index.php/formulare-fur-mobilgerate-optimieren-mit-html5/
http://www.html5rocks.com/de/tutorials/forms/html5forms/
http://www.selfhtml5.org/html5-tag-systematik/

Deutsche Übersetzung

Wenn das Element ein  “ href Attribut“ hat, dann repräsentiert das einen Hyperlink für diesen Inhalt.

Wenn das Elemte kein href Attribut hat , dann reprentiert das einen Platzhalter.

(If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.)

Die Attribute targetrelmediahreflang und type , könnne nicht eingesetzt werden, wenn das hrf Element fehlt.

(The targetrelmediahreflang, and type attributes must be omitted if the href attribute is not present.)

Wenn eine Seite eine kontinuierliche Navigation auf jeder Seite verwendet wirs, dann  kann der Link der auf diese Seite führt, als Element verwendet werden.

<nav>

<ul>

<li> <a href="/" > Home </a></li>

<li> <a href="" > </a> </li>

<li> <a href=""> </a> </li>

</ul>

</nav>

Um eine weitere Navigation für zum Beispiel Werbung einzufügen wird das aside angewendet

<aside>

<ul>

<li> <a href="" > Zum onlineshop </a> </li>

<li> <a href=""> Peter Walz</a> </li>

<li> <a href=""> Irgenwas </a> </li>

</ul> 

</aside>

oder so

<aside>
 <h1>Werbung</h1>
 <a href="http://">
  <section>
   <h1 >Online kurs</h1>
   <p>Lerne HTML5
   <p>Für nur 60€
  </section>
 </a>
 <a href="http://">
  <section>
   <h1>Die Online Schule </h1>
<p>Einfach online lernen.
<p>Schnell erfolge notieren
  </section>
 </a>
</aside>

Ein auklappbares Menue mit details und summary

Nach  Detail  steht das Summary. Im Summary stehen dann die Informationen, die erscheinen wenn man es aufklappt.

<details> <summary> Schuhe </summary>

<ul> <li> <a href="stiefel.html"> Stiefel </a></li>

<li> <a href="zu dem Inhalt"> Turnschuhe </a> </li>

<li> <a href="zu dem Inhalt"> Pumps </a> </li>

</ul>

</details>

Teste:

Schuhe


 

zum Aufklappen auf das kleine Dreieck neben Schuhe drücken

<head> Definiert Informationen über das Dokument

<header> Definiert den oberen Bereich oder eine Sektion der Seite

<nav> Definiert die Hauptnavigation

<section> Definiert einen Bereich der Seite

<article> Definiert einen Artikel

<aside> Definiert beigefügt Inhalte, die vom Hauptinhalt abweichen

<footer> Definiert den Fußbereich einer Seite

<audio> Definiert einen Sound – Inhalt

<bdi> Isoliert einen Teil des Textes, der anderes formatiert wird als der Haupttext.

<canvas> Das Canvas – Element erzeugt eine Zeichenoberfläche. via scripting (JavaScript)

<figure> Gruppiert Medienhalte

<hgroup> Gruppiert Überschriften h1 bis h6, wenn diese im Kontext zu einander stehen, bzw wenn eine Überschrift mehrere Ebenen hat. Siehe article ect.

<time> Metaauszeichnung von Zeitangaben zur maschinellen Erfassung
 

http://www.w3schools.com/tags/default.asp

http://html5-webdesign.de/Element-Referenz/bdi.html

http://winfwiki.wi-fom.de/index.php/Webdesign_mittels_HTML5_und_CSS(3)