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

Ein Grundgerüst in HTML5

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Gegenüber XHTML 1.0 haben sich DOCTYPE, Grundstruktur, Zeichensatz, Seitentitel und -beschreibung zum Teil deutlich vereinfacht.

Transkript

Jede Webseite hat ein HTML-Grundgerüst, ein Skelett, in das die Inhalte eingebettet werden. Hier habe ich eine Webseite vom W3C, vom World Wide Web Consortium, vom April 2002, in dem ein solches Grundgerüst vorgeschlagen wird für XHTML 1.0. Ich möchte das mal nehmen, hier unten auch noch ein paar Doctypes der alten Schule, und das vergleichen mit dem, was heute in HTML5 so üblich ist - unter dem Gesichtspunkt, dass HTML5 sich eine Vereinfachung auf die Fahnen geschrieben hat. Hier ist das Grundgerüst in XHTML 1.0, mit einem langen Doctype, hier mit einem langen Stamm-Element HTML, mit Titel, mit Zeichensatzdeklaration und allem drum und dran. Diese Doctypen kennen Sie vielleicht noch von früher. Es geht los im Editor. Hier ist ein solches Dokument, XHTML 1.0 Strict mit der Sprachendeklaration - die habe ich hier hinzugefügt - XML-kompatibel, so sah das aus vor wenigen Jahren. Jetzt werde ich dieses Dokument mal nehmen und Stück für Stück herüberkopieren in ein neues Dokument und das mal eindampfen, so dass man das sieht. Das ist ein alter Doctype. In HTML5 ist die Sache etwas einfacher geworden. Ich glaube, ich habe in meinem ganzen Webseitenschreiber-Leben nicht einmal dieses Ding von Hand geschrieben. Das hat sich jetzt schon geändert durch HTML5, denn das ist alles, was von dem alten Doctype übergeblieben ist: "DOCTYPE HTML". Sie können das Doctype auch klein schreiben, wenn Sie wollen, das spielt keine Rolle. Das reicht, um den Browser in den Standardmodus zu versetzen und das ist alles, was diese Zeile tun soll. Sie muss nur ganz am Anfang stehen. Danach geht es weiter mit dem Stamm-Element, auch das ist hier etwas länger. Ich lasse hier mal eine Zeile frei, der Übersichtlichkeit halber. Hier sieht die Geschichte ähnlich aus. Ich fange hier mal an, der Namespace kann weg, die XML-Angabe kann weg, alles, was übrig bleibt, ist das hier: "", für die Sprache des Dokumentes und natürlich gibt es dann auch ein "" unten dran, das setzen wir hier gleich mal dahinter. Wieder rüber, das ist das Stamm-Element. Der Head ist sehr ähnlich geblieben, der Title ist auch geblieben. Ich kopiere mal den ganzen Block hier und füge das hier ein. Den Title werde ich natürlich ein bisschen ändern, "HTML5 für Webdesigner". "Titel der Seite" schreibe ich da mal hin. Die Zeichensatzdeklaration - nach wie vor wichtig, aber auch die ist etwas einfacher. "charset=utf-8" und diese schließenden Slashes sind nicht mehr nötig. Man kann sie nach wie vor machen, wenn man gerne möchte, aber notwendig sind sie nicht mehr. Dafür setze ich hier mal noch einen Meta drunter. "", der streng genommen nicht zum Grundgerüst gehört, der aber sinnvoll ist. Unter "Suchmaschinen" - "Aspekte", nämlich die Seitenbeschreibung, wir werden noch sehen, wozu die gebraucht wird. "", Titel, der könnte auch vor dem Titel stehen, das ist egal. Aber Sie sehen, HTML5 ist jetzt schon etwas übersichtlicher als früher XHTML 1.0. Dann hole ich noch eben den Rest rüber, da hat sich nichts geändert, ich füge das hier ein. Einen Body brauchen wir nach wie vor und auch wenn wir hier noch nicht ganz viel Inhalt haben, ist hier schon angedeutet: "Your HTML content here". Das P-Element gibt es nach wie vor. Einmal rüber in einen Browser, zum Checken, und das ist alles, was Sie hier sehen: "HTML5 für Webdesigner", "Titel der Seite", das ist der Seitentitel. Und hier das bisschen, was bis jetzt im Body steht. Ansonsten hat sich da nichts geändert. Noch einmal einen letzten Blick, wenn wir das direkt vergleichen, ist das doch sehr viel einfacher geworden. Dazu gehe ich hier in meinem Editor mal in den Befehl "View layout", schiebe den auf zwei Columns und dann können wir das hier sehr schön vergleichen. Sie sehen, der Doctype ist um Längen kürzer, das Stamm-Element HTML ist kürzer, Head ist kürzer, wenn man das hier mit dem Zeichensatz betrachtet. Dafür habe ich hier die Beschreibung hinzugefügt - und hier unten der Body, das bleibt vorerst gleich.

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!