Einführung

Aus ProgrammingWiki

Wechseln zu: Navigation, Suche

Hello World

Die Basis einer jeden Web-App oder Webseite ist ein HTML Dokument, also nichts anderes als eine Datei mit der Endung .html. Probieren Sie es einfach mal aus! Erstellen Sie eine neue Textdatei und benennen Sie diese in Test.html um. Sie werden sehen, dass Ihr Browser eine leere Seite anzeigt. Nun schreiben Sie mit einem geeigneten Texteditor "Hello World" in diese Datei. Was wird der Browser wohl damit machen?

Dieses einfache Beispiel zeigt schon so einiges an Grundlagen. Dass HTML-Dateien standardmäßig mit dem Browser geöffnet werden, übernimmt noch das Betriebssystem. Der Browser selbst versucht nun den Inhalt der Datei auf geeignete Weise zu interpretieren. So wie ein Bildbetrachter den Inhalt einer Bilddatei als farbige Pixel für den Bildschirm interpretiert, so macht es der Browser auf seine eigene Weise mit der HTML-Datei. Wenn man die Regeln verstanden hat, nach denen ein Browser arbeitet, ist man in der Lage das volle Potential dieser "Maschine" zu nutzen, ganz einfach indem man entsprechendes Material zur Interpretation bereitstellt.

Das HTML5 Grundgerüst

Im folgenden Codefragment sehen Sie das Gründgerüst einer HTML-Datei. Mit der ersten Zeile wird dem Browser der Standard mitgeteilt, nach welchem er den folgenden Inhalt interpretieren soll. Der Ausdruck <!doctype html> definiert den HTML5 Standard. Der komplette restliche Inhalt der Datei wird in html Tags eingefasst. Prinzipiell besteht dieser Inhalt aus den Kopfinformation (head) und dem Körper (body). Beim obigen Beispiel wurde dieses Gerüst automatisch vom Browser erzeugt. Die Zeichen aus der Textdatei wurden innerhalb der body Tags angeordnet.

  • Übernehmen Sie das Grundgerüst in Ihre HTML-Datei und fügen Sie im body Bereich "Hello World" ein. Gibt es einen Unterschied zu vorher im Browser?
  • Fügen sie in einer neuen Zeile "Heute ist ein guter Tag um HTML5 zu lernen." ein und beobachten Sie die Reaktion des Browsers!
  • Recherchieren Sie, wie Sie den Browser dazu bringen, den eingefügten Text auf einer neuen Zeile darzustellen
Die sogenannten Tags sind Teil einer Markup-Sprache und folgen dem XML-Schema. Zu jedem öffnenden Tag <name> gibt es einen entsprechenden schließenden Tag </name> mit vorangestelltem Slash. Auf diese Weise wird ein logischer Bereich definiert, der verschiedene Funktionen erfüllen kann. So wird z.B. mit dem head Tag ein Bereich definiert in dem Steuerinformationen hinterlegt werden können. Ein Tag <name/>, mit einem Slash am Ende, definiert einen leeren Bereich. Es gibt auch bestimmte Tags, wie z.B. meta, die niemals einen Bereich definieren und somit auch kein Ende-Tag irgendeiner Art benötigen. Es gibt nur die durch den jeweiligen Interpreter-Standard unterstützten Tags. Jeder dieser möglichen Tags hat eine ganz eigene Bedeutung und löst unterschiedliche Interpretationen beim Browser aus.


Grundlagen

Die folgendene Seiten sollen Sie während Ihres Studiums dabei unterstützen die in den Vorlesungen gehörten Techniken zu verstehen und richtig anzuwenden. Die Themen der Vorlesungen werden hier noch einmal aufbereitet und mit funktionalen Beispielen und Übungen hinterlegt. Außerdem soll langsam aber sicher eine kleine Web-App entstehen in der die grundlegenden Web-Technologien verwendet werden. Das Ziel ist dabei ein Online-Sudoku Spiel. Neben der eigentlichen Spieloberfläche und der entsprechenden Logik dahinter wird es eine Hilfeseite, eine Highscore Liste, eine Chat-Funktion und vieles mehr geben. Den eigenen Vorstellungen sind hier keine Grenzen gesetzt, denn für die verschiedenen Herausforderungen gibt es niemals nur eine einzige Lösung.

Folgende Ziele werden im ersten Kapitel verfolgt:

Wissen Können Projekt
  • Grundaufbau eines HTML Dokuments
  • Verständnis der Tag-Syntax
  • Erfassen der Bedeutung von Tags und Attributen
  • Erstellung von HTML Dokumenten
  • Intuitive Nutzung der Tag-Syntax
  • Arbeiten mit Tabellen, Links und Bildern
  • HTML Start-Dokument als Hilfeseite für das Sudoku
  • Überschrift + Tabellarischer Aufbau
  • Beschreibende Texte zur Funktionsweise von Sudoku
  • Links zu anderen Online-Sudokus
  • Bilder von verschiedenen Sudokutypen

Im Kopfbereich können verschiedene Dinge festgelegt werden, die nur hintergründig mit der Funktionsweise der Web-App zu tun haben. Elemente die hier definiert sind, werden nicht direkt im Browser angezeigt, können aber durchaus die Darstellung beeinflussen. Neben Informationen die das Dokument betreffen, können hier z.B. auch Schlüsselwörter festgelegt werden, die in Suchmaschinen eingetragen werden sollen. In diesem Beispiel kann man auch erkennen wie Attribute verwendet werden. Es handelt sich hier immer um ein Name-Wert-Paar, wobei der Wert dem Bezeichner mit einem = zugewiesen wird. Jeder Tag hat eine eigene Liste von möglichen Attributen die es erlauben die Interpretation des Tags in einem gewissen Rahmen zu steuern.

  • Ändern Sie den Titel und stellen Sie fest wo dieser angezeigt wird!
  • Machen Sie sich klar, warum der Titel nicht auf der HTML Seite selbst angezeigt wird
  • Recherchieren Sie weitere Möglichkeiten für meta-Angaben und welchen Einfluss diese haben

Was alle Tags gemeinsam haben ist: sie markieren einen Bereich oder eine Position. Was bei jedem Tag anders ist: der markierte Bereich wird für eine bestimmte Verwendung vorgesehen. Es gibt Tags wie strong oder em die der Formatierung dienen, also eine reine darstellungstechnische Bedeutung haben. Es gibt aber auch Tags wie header oder footer die gar keinen Einfluss auf die Darstellung haben und nur eine strukturiende Funktion haben. Allerdings kann man die Tags nicht einfach in diese zwei Gruppen einteilen, denn z.B. p ist sowohl formatierend (ein neuer Absatz wird erzeugt) als auch strukturierend (der enthaltene Text gehört zusammen). Tags werden sehr oft ineinander verschachtelt. Auch diese Verschachtelung kann sowohl strukturierend als auch formatierend wirken. Die eigentliche Wirkung ist immer abhängig von den verschachtelten Elementen. Formatierungen werden z.B. an eingeschlossene Elemente weitergereicht. Strukturierungen betten ein eingeschlossenes Element logisch ein, wie z.B. eine Tabellenzeile in eine Tabelle logisch eingebettet ist.

  • Erproben Sie dieses Beispiel! Welche Wirkung haben die verwendeten Tags?
  • Recherchieren Sie den table Tag und erproben Sie dessen Möglichkeiten zur Strukturierung von Tabellen
  • Ermitteln Sie die Optionen zur Formatierung von Auflistungen
  • Finden Sie eine Möglichkeit Links zu anderen Webseiten zu realisieren
  • Betten Sie Grafiken in die HTML Seite ein
  • Kombinieren Sie um beim Klick auf eine Grafik einen externen Link zu öffnen

Projekt und weitere Übungen

Beginnen Sie das Projekt durch Erstellung einer einfachen HTML Seite die als Dokumentation und Hilfe-Seite dienen soll. Legen Sie fest wie die Seite strukturiert sein soll und füllen Sie die Seite mit allerlei wichtigen Informationen die das Sudoku-Spiel betreffen. Fügen Sie auch Bilder, Links und evtl. auch Videos und Sounds ein.

Beispiellösung
WE1-P1.zip (0.1 MB)
  1. Installieren Sie mehrere Browser (z.B. Firefox, Chrome)
  2. Installieren Sie einen Editor (z.B. Notepad++) oder eine IDE (z.B. Webstorm)
  3. HTML-Dateien müssen nicht zwangsläufig durch Personen hergestellt werden. Auch Programme können sie erzeugen. Modellieren Sie den Übersetzungsvorgang von Rohdaten (z.B. im CSV-Format) in HTML mit Hilfe eines T-Diagramms. Benutzen Sie VCC zur Herstellung des entsprechenden Compilers. Entscheiden Sie selbst, wie Sie die Rohdaten im HTML-Dokument einbetten möchten.
Von „https://programmingwiki.de/Web_Engineering_1/Einf%C3%BChrung“
Persönliche Werkzeuge