[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 1: Was ist überhaupt HTML5?

Hier lernst du was man überhaupt unter HTML5 versteht.
Du wirst sicherlich schon wissen dass es sich bei HTML5 um eine Sprache handelt mit der man Webseiten erstellen kann.
HTML ist die Abkürzung für die englische Formulierung HyperText Markup Language.
Die Organisation World Wide Web Consortium (W3C) legt fest welche "Vokabeln" bei der Sprache HTML verwendet werden können und auch welche "Grammatik" verwendet werden muss.
Die Vokabeln dieser Sprache werden als tags bezeichnet - tag steht im Englischen u.a. für kennzeichnen, markieren, auszeichnen. Da HTML solche tags verwendet spricht man in diesem Zusammenhang auch gerne von einer so genannten Auszeichnungssprache.
Das 5 bei HTML5 steht dafür dass es sich um die mittlerweile 5. überarbeitet Version dieser Sprache seit 1992 handelt.
Mit HTML werden so genannte Webseiten (Kurzform: Seiten) erzeugt. Die tags werden dazu mit Hilfe eines EDITORS in eine Datei geschrieben - du kannst das mit einem Textverarbeitungsprogramm vergleichen bei dem man ja auch einen Text eintippt der dann anschließend in eine Datei gespeichert wird.
hallo.html

Die Datei in welche die HTML-tags gespeichert werden haben in der Regel die Endung (Dateierweiterung, extension) - also das was beim Dateinamen nach dem Punkt kommt - html oder viel seltener htm. Ein Beispiel wäre etwa html_grundgeruest.html
Der Inhalt der HTML-Dateien kann von bestimmten Programmen - der Fachbegriff ist hier Browser - angezeigt werden. Beispiele für Browser sind etwa Mozilla Firefox, Google Chrome, Opera und der Microsoft Internet Explorer.
All die tags die man in eine Datei schreibt bezeichnen Programmierer gerne auch als Code, Quelltext oder Listing - Hier unten siehst du ein Beispiel für einen HTML - Code / Listing und auch gleich wie dieser in einem Browser dargestellt wird:
Der Code, der Quelltext / das Listing:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Hallo Welt</title>
    <meta charset="UTF-8">
</head>
<body>
Hallo Welt!
</body>
</html>

Im obigen Listing siehst du gleich mehrere HTML - tags wie z.B. <html><body><head>. Die genauere Bedeutung solcher Tages werde ich im späteren Verlauf dieses Einsteigerskurses genauer erklären.
Dir wird aber sicher schon aufgefallen sein dass diese tags meistens PAARWEISE auftreten - z.B. <html lang="de"></html> Man spricht davon das tags "aufgemacht" und "geschlossen" werden. Das was INNERHALB eines solchen Tagpaares steht wird auf der Webseite in bestimmter Art und Weise ausgegeben... lang="de" im ersten html - tag gibt an, dass die Inhalte der Webseite in deutscher Sprache vorliegen.
Mit einem Doppelklick auf die HTML-Datei oder über Datei / Öffnen im Browser kann man den eigenen Code bzw. die HTML - Datei im Browser öffnen. So sieht unser erster Code in einem Browser - hier im Google Chrome - aus:

Du siehst hier oben das der Browser jenen Text - Hallo Welt - anzeigt der zwischen den tags <body></body> steht. Der Titel der Seite - erzeugt durch die tags <title></title> - wird ebenfalls (Beschriftung der Webseite bzw. des Tabs) eingeblendet.
Wenn du hier unten auf Beispiel klickst siehst du das Hallo Welt - Beispiel in deinem eigenen Browser :-)
[Beispiel zur Lektion]

Du kannst dir aber auch den Code anderer Webseiten im Internet genauer anschauen. Dazu musst du nur mit dem Browser zu einer Seite deiner Wahl surfen und dir dann den so genannten Seitenquelltext anzeigen lassen - wie das z.B. mit dem Google Chrome funktioniert siehst du hier unten - Rechte Maustaste (Kontextmenü) und dann den Eintrag Seitenquelltext anzeigen.
Quelltext in Chrome

Tipp: Wenn man eine Webseite programmiert wird man in der Regel mehrere HTML - Dateien erstellen. Diese werden dann gemeinsam in einem Ordner gespeichert.
Tipp: Jene Seite die man als erstes auf einer Homepage betrachtet wird gerne als Startseite bezeichnet. Der Dateiname jener Startseite lautet meistens index.html.

⇑ Augabenstellung:
1. Wofür ist HTML die Abkürzung?
2. Wofür ist W3C die Abkürzung?
3. Die wievielte Version von HTML wird in diesem Lehrgang besprochen?
4. Nenne 2 typische Dateiendungen von HTML - Dateien!
5. Erkläre mit eigenen Worten (also nicht irgendwo abschreiben :-) was man unter einem Listing versteht!
6. Nenne einen anderen Begriff für "Listing"!
7. Erkläre mit eigenen Worten (also nicht irgendwo abschreiben :-) was man bei HTML unter einem Tag versteht!
8. Erkläre wie man bei einem Browser deiner Wahl sich den Seitenquelltext einer Webseite anzeigen lassen kann!