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>
|
| 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.
In einigen Tags können sogenannten Attribute definiert
}}

{|
|style="width: 30em"|<code id="584f37983e720" readonly><!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <header></header>
    <content>
      <p>Hello <strong>World</strong>!</p>
      <a href="http://www.programmingwiki.de">Home</a>
    </content>
    <footer></footer>
  </body>
</html>
</code>
<html>
<p>Hello <strong>World</strong>!</p>
<a href="http://www.programmingwiki.de">Home</a>
</html>
|
| Es gibt viele neue Tags zu entdecken! Alles Mist... doch wieder nur ein Tutorial
| }