Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

Datum und Zeit mit <time>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Datums- und Zeitangaben sind bei Computern seit jeher problematisch. Nun gibt das HTML5-Element time für Datums- und Zeitangaben die adäquate Antwort darauf.

Transkript

Datum- und Zeitangaben waren in Zusammenhang mit Computern und Computerei schon immer was besonderes. Denn das Lesen von Datumsangaben ist für Menschen schon schwierig genug, da in fast jedem Land auf diesem Planeten ein anderes Format gilt. Da kommen Maschinen natürlich überhaupt gar nicht mit klar. Dafür gibt es in HMTL5 jetzt eine Lösung in Form des Elementes "time", das ich hier einmal kurz vorstellen möchte. Die Zeit, das time-Element "encodes modern dates and times in a machine-readable way". D.h. man hat das beste aus beiden Welten gefunden und hier eingebaut. Ein Beispiel, das hier ist ein schönes Beispiel - time hat das Attribut "datetime", in dem immer dieses Format steht "Jahr-Monat-Tag". Das ist für alle verbindlich, das ist maschinenlesbar, das kann schön sortiert werden. Was zwischen "time" und "/time" steht, das interessiert den Computer an sich überhaupt nicht, das ist für die Menschen, das wird im Browser dargestellt. D.h. also, Sie haben zum einen im Attribut datetime hier einen maschinenlesbares Format und zwischen "time" und "/time" im Browser dargestellt wird das, was Sie dort hinschreiben. Das muss nicht mal ein Datum sein, da kann auch stehen "Mein Geburtstag" oder sonst irgendwas, solange hier im Attribut datetime eben das exakte Format hinterlegt worden ist. Wenn zwischen "time" und "/time" ein maschinenlesbares Format steht, wie hier oben, dann kann datetime auch fehlen, ansonsten sollte das immer dabei sein. Die Möglichkeiten tendieren natürlich wie immer bei Datumsangaben gegen unendlich, ich bringe mal eben hier im Editor ein kleines Beispiel. Hier ist ein Mini-Blogbeitrag, mit einem article-Element und einem "/article" da drin, einem Header, eine Überschrift, kein Header, noch nicht, ein Absatz, ein figure, ein Bild und eine Beschriftung. Jetzt könnte man hier unterhalb der Überschrift noch hinschreiben, wann dieser Artikel veröffentlicht worden ist und dazu bietet sich natürlich das time-Element an. "datetime=" - und jetzt schreiben wir hier dazwischen irgendwas, was uns gefällt "/time", "/p". D.h. hier fehlt natürlich noch das Wichtigste - und hier muss immer dieses Format stehen "JJJJ-MM-DD", wir haben hier den 30-11-2013 und hier ist der 30. November 2013, das ist vom so und sovielten geschrieben. Jetzt haben wir ein neues Problem das mit Zeit gar nichts zu tun hat - diese beiden Angaben gehören eher zusammen als der Rest des Ganzen, also packen wir hier in diesen Artikel ein Header-Element hinein um anzudeuten, dass die beiden Angaben hier zusammen gehören und die anderen darunter den eigentlichen Artikel darstellen. In echt wird da natürlich noch ein bisschen mehr Text kommen. Wir haben also hier oben den Header für die Seite und hier innerhalb des Artikels einen Header nur für diesen Artikel. Das kann natürlich später beim Gestalten Probleme geben, wenn Sie da einfach nur schreiben "header", dann erwischen Sie jetzt beide. Dann geht es jetzt rüber in den Browser, einmal neu laden, dort sehen Sie das Datum und ich sehe noch mal eben natürlich wie immer den Quelltext an. Sie haben hier den article, im Header steht jetzt die Überschrift und im Absatz hier drunter noch mal das Datum. Das ist "time", es gibt natürlich noch Zeitangaben, aber hier eine kleine Zusammenfassung, Zeit und Datum mit time, das Attribut datetime mit maschinenlesbarem Format und dazwischen ein beliebiges String, "line", eine beliebige Zeichenkette. Im Browserfenster wird der Inhalt des Elements dargestellt, da kann also stehen, was will. Angabe der Uhrzeit ist möglich, "

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!