Web Engineering 1/Einführung

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
==Hello World==
Die Basis einer jeden Web-App oder Webseite ist ein HTML Dokument, also nichts anderes als eine Datei mit der Endung <tt>.html</tt>. Probiere es einfach mal aus! Erstelle eine neue Textdatei und benenne diese in <tt>Test.html</tt> um. Du wirst sehen, dass dein Browser eine leere Seite anzeigt. Nun schreibe mit einem geeigneten Texteditor "Hello World" in diese Datei. Was wird der Browser wohl damit machen?

{{Wissen|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==
{|
|style="width: 10em"|<code id="584f37983e68c" readonly><!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
</code>
|style="vertical-align:top;padding-left:1em;"|
Das ist 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 <tt><!doctype html></tt> definiert den HTML5 Standard. Der komplette restliche Inhalt der Datei wird in <tt>html</tt> Tags eingefasst. Prinzipiell besteht dieser Inhalt aus den Kopfinformation (<tt>head</tt>) und dem Körper (<tt>body</tt>). Beim obigen Beispiel wurde dieses Gerüst automatisch vom Browser erzeugt. Die Zeichen aus der Textdatei wurden innerhalb der <tt>body</tt> Tags angeordnet. Übernimm das Grundgerüst in deine HTML-Datei und füge im <tt>body</tt> Bereich "Hello World" sein. Gibt es einen Unterschied zu vorher?
|}

{{Wissen|Die sogenannten Tags sind Teil einer Markup-Sprache und folgen dem XML-Schema. Zu jedem öffnenden Tag <tt><name></tt> gibt es einen entsprechenden schließenden Tag <tt></name></tt> mit vorangestelltem Slash. Auf diese Weise wird ein logischer Bereich definiert, der verschiedene Funktionen erfüllen kann. So wird z.B. mit dem <tt>head</tt> Tag ein Bereich definiert in dem Steuerinformationen hinterlegt werden können. Ein Tag <tt><name/></tt>, mit einem Slash am Ende, definiert keinen speziellen Bereich. Es gibt auch bestimmte Tags, wie z.B. <tt>meta</tt>, 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.
}}


==Das Sudoku Projekt==
Während der nun folgenden Themen soll langsam aber sicher eine kleine Web-App entstehen in der die grundlegenden Web-Technologien verwendet werden. Das Ziel ist 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.  Beginnen wir mit der Hilfeseite um einige grundlegende Strukturierungsoptionen kennenzulernen. Folgende Ziele werden in diesem Kapitel verfolgt:
{{Ziele|
* 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
* Überschrift + Tabellarischer Aufbau
* Beschreibende Texte zur Funktionsweise von Sudoku
* Hervorhebung verschiedener Schlagwörter
* Links zu anderen Online-Sudokus
* Bilder von verschiedenen Sudokutypen
}}

{|
|style="width: 20em"|<code id="585077c27f83d" readonly>
<head>
  <title>Mein eigenes Sudoku</title>
  <meta charset="UTF-8">
  <meta name="description" 
        content="Ein Sudoku">
  <meta name="keywords" 
        content="sudoku, html5">
</head>
</code>
|style="vertical-align:top;padding-left:1em;"|
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 Suchmaschinene 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 <tt>=</tt> 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.
|}

{|
|style="width: 26em"|<code id="585077c27f8d6" readonly>
<body>
  <header></header>
  <content>
    <h1>Hilfe für mein Sudoku</h1>
    <p>
      Jede Entwicklung benötigt eine 
      <strong><em>aussagekräftige</em> Doku</strong>
    </p>
  </content>
  <footer></footer>
</body>
</code>
|style="vertical-align:top;padding-left:1em;"|
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 <tt>strong</tt> oder <tt>em</tt> die der Formatierung dienen, also eine reine darstellungstechnische Bedeutung haben. Es gibt aber auch Tags wie <tt>header</tt> oder <tt>footer</tt> 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. <tt>h1</tt> ist sowohl formatierend als auch strukturierend.
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 sein, wie z.B. eine Tabellenzeile in eine Tabelle logisch eingebettet ist.
|}
{{Projekt|Beispiellösung <document>WE1-P1.zip</document>}}