Einstieg in die Frontend-Entwicklung > 1. HTML-Grundlagen
Der erste Teil der Reihe "Einstieg in die Frontend-Entwicklung". Hierbei werden Grundlagen von HTML vermittelt und Bezug auf den späteren Verlauf der Frontend-Entwicklung mithilfe weiterer Web-Technologien genommen.
oder Dokumenttypdefinitionen (DTD) sichergestellt ‣ Ein HTML- bzw. XML-Dokument ist gültig, wenn es die Vorgaben des XML-Schemas oder DTD erfüllt → man spricht dann auch von „Wohlgeformtheit“ ‣ HTML/XML gibt lediglich die Struktur eines Dokumentes an, nicht dessen Erscheinungsbild HTML-Grundlagen > Einführung 26. September 2018 Einführung
auszugeben ‣ Browser rendern die HTML-Dokumente mithilfe einer eingebauten HTML-Render-Software ‣ Namenskonvention: – Webseite: Mithilfe einer HTML-Render-Software einzeln verarbeitetes HTML-Dokument – Website: Gesamter Internetauftritt, der aus mehreren Webseiten besteht HTML-Grundlagen > Einführung 26. September 2018 Einführung
Dokumenttypdefinition (DTD) – Basiselement (html-Element): umgibt alle anderen Elemente – Dokumentkopf (head-Element): enthält technische Informationen und Verweise auf externe Dateien, die im Dokument genutzt werden sollen (wird nicht im Browser ausgegeben) – Dokumentkörper (body-Element): enthält die Ausgabe des Dokuments im Browser ‣ Element = engl. tag, man spricht daher auch oft von HTML-Tags HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Aufbau eines HTML-Dokuments
‣ Bezeichnung des Elements gibt im Optimalfall an, welche Ausgabe in diesem Bereich zu erwarten ist ‣ Elemente können ineinander verschachtelt werden, solange dies über die DTD zulässig ist (nicht jedes Element darf beliebige andere Elemente beinhalten!) ‣ Durch Verschachtelung entsteht eine Hierarchie mit verschiedenen Hierarchieebenen → jedes Element innerhalb eines anderen Elements eröffnet eine neue Hierarchieebene HTML-Grundlagen > Aufbau eines HTML-Dokuments > Elemente 26. September 2018 Aufbau eines HTML-Dokuments > Elemente
– Elementbezeichnung, z. B.: html – schließende spitze Klammer: > ‣ Es gibt öffnende und schließende Elemente – öffnende Elemente geben an, dass ein Bereich beginnt – schließende Elemente beenden einen zuvor geöffneten Bereich HTML-Grundlagen > Aufbau eines HTML-Dokuments > Elemente 26. September 2018 Aufbau eines HTML-Dokuments > Elemente <html>
einen Schrägstrich: </html> ‣ Jeder geöffnete Bereich muss auch wieder geschlossen werden! ‣ Ausnahmen sind sog. leere Elemente – geben in der Regel keinen Inhalt wieder – öffnende Elemente erhalten dann zusätzlich zur schließenden spitzen Klammer noch einen Schrägstrich: <br /> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Elemente 26. September 2018 Aufbau eines HTML-Dokuments > Elemente </html> <br />
eigenen Bereich eröffnen, der es ermöglicht, dort weitere Elemente zu platzieren ‣ Leere Elemente kommen immer dann zum Einsatz, wenn deren Inhalt nicht bearbeitbar sein soll ‣ Innerhalb von nicht-leeren Elementen können in der Regel beliebig viele weitere Elemente platziert werden ‣ Alle innerhalb eines Elements platzierten Elemente sind Kind-Elemente diesen Elements; das Element selbst wird dann als Eltern-Element bezeichnet HTML-Grundlagen > Aufbau eines HTML-Dokuments > Elemente 26. September 2018 Aufbau eines HTML-Dokuments > Elemente
html> (wird weder geöffnet noch geschlossen; gibt lediglich an, um welchen Dokumenttyp es sich handelt, damit der Browser das Dokument korrekt validieren kann) – Element: <html>...</html> – Leeres Element: <br /> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Elemente 26. September 2018 Aufbau eines HTML-Dokuments > Elemente
‣ Funktionen von Attributen: – Angabe verschiedener Zustände des Elements (disabled, required etc.) – Erweiterung um spezielle Eigenschaften, die anderweitig ausgelesen und verarbeitet werden können (CSS-Klassen, IDs, JavaScript-Events etc.) – Angaben, welche die Ausgabe des Elements beeinflussen (value, placeholder etc.) HTML-Grundlagen > Aufbau eines HTML-Dokuments > Attribute 26. September 2018 Aufbau eines HTML-Dokuments > Attribute
B.: id – Verknüpfung mittels Gleichzeichen: = – Attributwert, eingeschlossen in einfachen oder doppelten Anführungszeichen, z. B.: "page" (doppelte Anführungszeichen sind zu bevorzugen) ‣ Teilweise kann der Attributwert auch weggelassen werden, z. B.: <input type="text" required disabled /> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Attribute 26. September 2018 Aufbau eines HTML-Dokuments > Attribute <html id="page">
‣ IDs: – können für fast alle Elemente im Dokument vergeben werden – Attributname: id – Attributwert darf nur ein Mal im gesamten Dokument vorkommen, d. h. eine bestimmte ID darf höchstens ein Mal pro Dokument vergeben werden HTML-Grundlagen > Aufbau eines HTML-Dokuments > Attribute 26. September 2018 Aufbau eines HTML-Dokuments > Attribute <body id="page">
überall vergeben werden – Attributname: class – Attributwert: Klassenname(n) – Mehrere Klassennamen können mit Leerzeichen voneinander getrennt werden – Klassennamen können mehrfach in einem Dokument verwendet werden ‣ Gemeinsame Verwendung: <body id="intranet" class="page page--full"> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Attribute 26. September 2018 Aufbau eines HTML-Dokuments > Attribute <body class="page page--full">
Werden vom Browser und anderen Diensten, welche eine Webseite auslesen, ausgelesen (z. B. Google-Bot, Facebook beim Teilen der Seite etc.) ‣ Übliche Angaben: HTML-Grundlagen > Aufbau eines HTML-Dokuments > Meta-Angaben 26. September 2018 Aufbau eines HTML-Dokuments > Meta-Angaben – Seitentitel – Beschreibung – Autor – Schlagwörter – Zeichenkodierung – Favicon – Anweisungen für mobile Geräte – andere Datenformate
<style type="...">...</style> – Einbindung von externen Dateien: <link href="..." rel="..." /> – Skripte: <script type="...">...</script> ‣ Skripte werden häufig auch vor dem schließenden Element des Dokumentkörpers (</body>) platziert, damit sie nicht sofort geladen werden → Ladezeit wird damit geringer gehalten HTML-Grundlagen > Aufbau eines HTML-Dokuments > Dokumentkopf 26. September 2018 Aufbau eines HTML-Dokuments > Dokumentkopf
‣ Leerzeile zwischen Elementen, die aus mehreren Hierarchien bestehen ‣ Leerzeichen zwischen Attributen eines Elements ‣ Attribute immer mit doppelten Anführungszeichen HTML-Grundlagen > Code-Qualität 26. September 2018 Code-Qualität
Eintragen zusätzlicher, wichtiger Informationen für den Entwickler direkt an der notwendigen Stelle im HTML-Dokument ‣ Werden nicht im Browser ausgegeben ‣ Achtung: Kommentare erscheinen im Browser-Quellcode, können also von allen Besuchern der zugehörigen Webseite eingesehen werden, wenn diese den Quellcode betrachten HTML-Grundlagen > Code-Qualität > Kommentare 26. September 2018 Code-Qualität > Kommentare
eines Kommentars nach dem schließenden Element gekennzeichnet ‣ Als Basis für die Kennzeichnung dienen Klassenname(n) und/oder die ID <section id="page" class="page"> <div>...</div> </section> <!-- end: #page .page --> HTML-Grundlagen > Code-Qualität > Kommentare 26. September 2018 Code-Qualität > Kommentare CSS-Selektoren (mehr dazu später)