Lektion 1: Einführung HTML

WWW und Hypertext

WWW: World Wide Web

Sir Tim Berners-Lee gilt als Erfinder vom World Wide Web
zum Informationsaustausch am CERN in den 1980er-Jahren

Hypertext

hyper (griech.) über, oberhalb, super
Hypertext ist ein Text, der Links zu anderen Texten enthält.
HyperMedia: Hypertext, der auch Grafiken, Videos oder Klänge enthalten kann

Hypertext-Technologien

HTML Hyper Text Markup Language
HTTP Hyper Text Transfer Protocol

Quelle 1: https://www.itwissen.info/Webserver-web-server.html

Quelle 2: https://wiki.selfhtml.org/wiki/Grundlagen/Hypertext#Hypertext-Technologien_und_Sprachen

Markup Language / Auszeichnungssprache

«Eine Auszeichnungssprache (engl. Markup Language) ist eine Sprache, die Regeln zur Auszeichnung von Textelementen bereitstellt. Beliebigen Textelementen können Eigenschaften zugewiesen werden, wodurch die Bedeutung (= Semantik) dieser Textelemente ausgedrückt werden kann. Zusätzlich ermöglicht dies die maschinelle Weiterverarbeitung.»

Auszeichnungssprachen sind keine eigentlichen Programmiersprachen (wie Java, Python, C++, usw.), sondern lediglich Beschreibungssprachen.

Quelle: Hansen H.R., Mendling J., Neumann G. – Wirtschaftsinformatik (2019) – p. 482, Abs. 10.4.2.

HTML: Hyper Text Markup Language

... die Auszeichnungssprache für Internetdokumente

einzelne Textelemente erhalten spezielle Markierungen
Trennung von "Inhalt" und "Präsentation"

Sprachelemente von HTML

Elemente werden erzeugt durch Tags ("Etiketten")
Beispiel: paragraph-Element
Tags als Paare aus Anfangs- und Endtag
ODER: atomare Tags
- <br/> (Zeilenumbruch, "break")
- <hr/> (Trennlinie)

Grundstruktur HTML-Seite

Grundstruktur HTML-Seite – Bestandteile

Der Rumpf <body> enthält die Texte, die angezeigt werden.
Der Kopf <head> enthält Informationen, die nicht im Fenster angezeigt werden (z.B. der Fenstertitel "<title>").
<!DOCTYPE> legt Document Type Definition (DTD) des Dokuments fest (DTD bestimmt Grammatik und Syntax HTML-Sprache)

HTML-Dateien

HTML-Dokumente haben typischerweise die Dateiendung .htm oder .html, z.B. index.html oder home.htm
- anzeigen im Browser
- bearbeiten mit Texteditor
Zeilenumbrüche müssen explizit gesetzt werden mit <br/>
Kommentare:

HTML Tags

➡ Cheatsheet-HTML-Tags.pdf

Ausblick Webtechnologien

CSS: Cascading Style Sheets, Formatvorlagen für HTML-Files
CSS3: weiterführende Gestaltungsmöglichkeiten (Animationen, Transitions, Farbverläufe, @media, uvm.)

HTML5:
- Multimediaelemente <audio>, <video>
- zeichnen im Browser <canvas>
- ...
JavaScript: Skript-Programmiersprache im Browser (Client)
- Benutzerinteraktionen, dynamische Websites, Berechnungen, Games, uvm.
PHP: Serverseitige Skript-Programmiersprache
- Wird auf dem Server ausgeführt, ermöglicht u.a. Datenbankzugriff (z.B. MySQL)

Literatur

Nachschlagewerke

selfhtml
- Wiki: https://wiki.selfhtml.org
- Originalfassung: https://web.archive.org/web/20190818195028/http://www.schmidma.de/selfhtml/index.htm (archiviert)
w3schools
- https://www.w3schools.com

Lektüre

Hypertext: https://wiki.selfhtml.org/wiki/Grundlagen/Hypertext
Unterschied Internet/WWW: http://www.news.de/medien/855030425/internet-und-world-wide-web-der-unterschied/1/
Internet: https://web.archive.org/web/20191231144745/http://www.matthias-hirsch.de/sol/1theorie/0331b5999c1070721/index.htm
Markup Language: https://wiki.selfhtml.org/wiki/Programmiertechnik/Programmiersprache

Übung 1

➡ Übung 1