Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Einstieg in die Frontend-Entwicklung > 1. HTML-Grundlagen

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.

Elias Häußler

September 26, 2018
Tweet

More Decks by Elias Häußler

Other Decks in Programming

Transcript

  1. Inhalte ‣ Einführung ‣ Aufbau eines HTML-Dokuments – Elemente und

    Attribute – Verschachtelung – Meta-Angaben ‣ Code-Qualität ‣ Hilfreiche Links HTML-Grundlagen > Inhalte 26. September 2018
  2. ‣ HTML = Hypertext Markup Language ‣ Basiert auf XML

    (= Extensible Markup Language) ‣ „Markup Language“ = Auszeichnungssprache ≠ Programmiersprache! ‣ Auszeichnung (engl. markup) erfolgt durch sog. Elemente, die eine Hierarchie darstellen HTML-Grundlagen > Einführung 26. September 2018 Einführung
  3. ‣ Gültigkeit von HTML- und XML-Dokumenten wird über sog. XML-Schemas

    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
  4. ‣ HTML-Dokumente werden im World Wide Web genutzt, um Webseiten

    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
  5. ‣ Ein HTML-Dokument besteht immer aus: – Dokumenttypdeklaration: bestehet aus

    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
  6. ‣ Elemente werden genutzt, um bestimmte Bereiche des Dokuments auszuzeichnen

    ‣ 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
  7. ‣ Elemente bestehen immer aus: – öffnende spitze Klammer: <

    – 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>
  8. ‣ Schließende Elemente erhalten zusätzlich zur öffnenden
 spitzen Klammer noch

    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 />
  9. ‣ Leere Elemente werden als „leer“ bezeichnet, da sie keinen

    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
  10. ‣ Es gibt verschiedene Arten von Elementen: – Dokumenttypdeklaration: <!DOCTYPE

    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
  11. ‣ Elemente können durch Attribute um zusätzliche Angaben erweitert werden

    ‣ 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
  12. ‣ Attribute bestehen in der Regel aus: – Attributname, z.

    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">
  13. ‣ IDs und Klassen stellen spezielle Attribute von Elementen dar

    ‣ 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">
  14. ‣ Klassen: – können außer für Elemente im <head> fast

    ü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">
  15. ⓪ <!DOCTYPE html> ⓪ <html> ➊ ....<head> ➋ ........<title>...</title> ➊

    ....</head> ➊ ....<body> ➋ ........<header>...</header> ➋ ........<main>...</main> ➋ ........<footer>...</footer> ➊ ....</body> ⓪ </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Verschachtelung 26. September 2018 Aufbau eines HTML-Dokuments > Verschachtelung Einrückung!
  16. ⓪ <!DOCTYPE html> ⓪ <html> ➊ ....<head> ➋ ........<title>...</title> ➊

    ....</head> ➊ ....<body> ➋ ........<div class="page"> ➌ ............<section id="main-section"> ➍ ................<div>...</div> ➌ ............</section> ➋ ........</div> ➊ ....</body> ⓪ </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Verschachtelung 26. September 2018 Aufbau eines HTML-Dokuments > Verschachtelung Einrückung!
  17. ‣ Meta-Angaben stellen Merkmale über die Webseite zur Verfügung ‣

    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
  18. ‣ Meta-Angaben werden im Dokumentkopf (<head>) platziert ‣ Bestehen in

    der Regel aus einem name- und content-Attribut: – <meta name="description" content="..." /> – <meta name="author" content="..." /> – <meta name="keywords" content="..." /> ‣ Sonderfall: Zeichenkodierung – <meta charset="..."/> HTML-Grundlagen > Aufbau eines HTML-Dokuments > Meta-Angaben 26. September 2018 Aufbau eines HTML-Dokuments > Meta-Angaben
  19. ‣ Weitere Inhalte des <head>: – Dokumenttitel: <title>...</title> – Stylesheets:

    <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
  20. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018
  21. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Dokumenttyp- deklaration mit DTD
  22. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Basiselement
  23. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Dokumentkopf
  24. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Seitentitel
  25. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Meta-Angaben
  26. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Einbindung von externen Dateien
  27. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Dokumentkörper
  28. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Wesentliche Seiteninhalte
  29. <!DOCTYPE html> <html> ....<head> ........<title>...</title> ........<meta charset="utf-8" /> ........<meta name="description"

    content="..." /> ........<meta name="keywords" content="..." /> ........<meta name="author" content="..." /> ........<link rel="stylesheet" href="..." /> ....</head> ....<body> ........<div>...</div> ........<script src="..."></script> ........<script></script> ....</body> </html> HTML-Grundlagen > Aufbau eines HTML-Dokuments 26. September 2018 Skripte
  30. ‣ Kommentare ‣ Einrückung: jede zusätzliche Hierarchieebene muss eingerückt werden

    ‣ 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
  31. ‣ Helfen bei der Strukturierung eines HTML-Dokuments ‣ Ermöglichen das

    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
  32. ‣ Aufbau von Kommentaren in HTML: – Öffnender Kommentarblock: <!--

    – Kommentar, kann ein- oder mehrzeilig sein – Schließender Kommentarblock: --> ‣ Jeder schließende Kommentarblock beendet einen Kommentar!
 Beispiel: <!-- Kommentar --> außerhalb -->
 erzeugt folgende Ausgabe: außerhalb --> HTML-Grundlagen > Code-Qualität > Kommentare 26. September 2018 Code-Qualität > Kommentare
  33. ‣ Elemente, die viele weitere Elemente beinhalten, werden üblicherweise mithilfe

    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)
  34. ‣ w3schools.com: https://bit.ly/2A1Lr6T ‣ Liste der HTML5-Elemente (MDN): https://mzl.la/13RCWd4 ‣

    W3C Markup Validation Service: https://bit.ly/1XXQI7M ‣ How to build a HTML5 website from scratch: https://bit.ly/2R61V5f ‣ Frontend Roadmap: https://bit.ly/2EDpnoT HTML-Grundlagen > Hilfreiche Links 26. September 2018 Hilfreiche Links
  35. Elias Häußler Herzlichen Dank für Ihre Aufmerksamkeit! · elias-haeussler.de ©

    2018 Elias Häußler. All rights reserved. HTML-Grundlagen Einstieg in die Frontend-Webentwicklung 26. September 2018