Webentwicklung 101 - Teil 2: Erstellung der ersten Webseite

Im ersten Teil dieser Tutorial-Reihe wurde Ihnen WebMatrix vorgestellt und Sie haben gelernt, wie man es installiert und startet. In diesem Kapitel wird Ihnen gezeigt, wie Sie Ihre erste eigene Webseite mit WebMatrix erstellen.

Erstellung der ersten Seite

Wählen Sie nach dem Start von WebMatrix die Option Website aus Vorlage. Daraufhin wird Ihnen das folgende Fenster angezeigt. In diesem werden Ihnen eine Reihe verschiedener Vorlagen zur Auswahl angeboten. Für dieses Tutorial wählen Sie Leere Website und benennen Sie diese mit dem Namen Filme.

webmatrix_101_p2_01_de

Nachdem Sie OK gedrückt haben, erstellt WebMatrix eine neue und leere Website. Diese Website wird dann im WebMatrix Editor geöffnet:

webmatrix_101_p2_02_de

Bevor es mit der Erstellung der Seite weitergeht, ein paar Erklärungen, zu dem was Ihnen gerade alle angezeigt wird. WebMatrix ist deutlich mehr als nur ein einfacher Webeditor. Es bietet auch einen integrierten Webserver mit dem Namen IIS Express. Ein Webserver ist einfach gesagt eine Software die auf Anfragen im Internet wartet und diese mit dem Senden von Daten beantwortet, üblicherweise an einen Browser.

Immer wenn Sie einen Browser wie zum Beispiel den Internet Explorer öffnen und eine Webadresse wie zum Beispiel http://www.microsoft.com eingeben, rufen Sie einen Webserver auf. Dieser Antwortet dann, indem er Code wie HTML, JavaScript, CSS oder Bilder zurückschickt, die dann im Browser die gewünschte Webseite ergeben.

webmatrix_101_p2_03_de

Durch den integrierten Webserver in WebMatrix wird es Ihnen stark erleichtert, einen Webauftritt zu entwickeln, da diese sich wie ein Webserver verhält. Auf dem Screenshot sehen Sie unterhalb des Titels „Filme“, dass der Server in diesem Fall die Adresse http://localhost:24799 benutzt. Das bedeutet, der Host für den Server liegt lokal, zum Beispiel auf Ihrem Entwicklungsrechner.

Von WebMatrix aus können Sie diesen Webserver starten und Ihre Seite starten. Im Moment ergäbe das aber noch eine Fehlermeldung, das die Website noch keine Inhalte hat. Dies folgt nun im nächsten Schritt:

Erstellung der ersten einzelnen Seite

Unten auf der linken Seite können Sie zwischen den verschiedenen Arbeitsbereichen navigieren. Zu Beginn ist der Reiter Site ausgewählt: hier finden Sie alle wichtigen Informationen rund um Ihr Webprojekt, wie zum Beispiel die URL der Website oder den Pfad zu den Dateien Ihres Projektes. Alle Arbeitsbereiche werden im Laufe der Tutorials vorgestellt – gestartet wird zunächst mit dem Reiter Dateien.

 

webmatrix_101_p2_04_de

Im Arbeitsbereich Dateien finden Sie alle Dateien Ihres Projektes. Im Moment herrscht hier noch Leere, daher klicken Sie im nächsten Schritt den Button Neu, um eine neue Datei zu erstellen.

webmatrix_101_p2_05_de

Nachdem Sie auf Neu geklickt haben, stehen Ihnen im Dialog “Wählen Sie einen Dateityp aus” verschiedene Vorlagen zur Verfügung, die üblicherweise bei Webseiten verwendet werden.

webmatrix_101_p2_06_de

Wählen Sie als Dateityp bitte HTML aus und nennen Sie die Datei default.html. Nach dem Klicken von OK öffnet WebMatrix eine einfache HTML-Seite für Sie.

webmatrix_101_p2_07_de

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
</head>
<body>
<h1>Meine Lieblingsfilme</h1>
<ol>
<li>Waynes World</li>
<li>Sonnenallee</li>
<li>Last Boy Scout</li>
<li>Tron</li>
<li>Sissi die junge Kaiserin</li>
</ol>
</body>
</html>

Sie haben nun einen Seitentitel in den <title>-Tag eingefügt, sowie einigen Code innerhalb des <body>-Tags: <h1> steht dabei für den Darstellungsstil Überschrift 1, <ol> zeigt dem Browser an, dass hier eine nicht-nummerierte Liste stehen soll und mit <li> werden die einzelnen Listenpunkte gekennzeichnet.

In der Multifunktionsleiste von WebMatrix gibt es einen Ausführen-Button. Betätigen Sie diesen, daraufhin startet Ihr Browser und zeigt den aktuellen Stand der erstellten Webseite auf Ihrem lokalen Server an.

webmatrix_101_p2_08_de

webmatrix_101_p2_09_de

Der Webserver

Werfen Sie einen Blick in die Adressleiste Ihres Browsers: die Webseite wurde nicht von der Festplatte Ihres Rechners gestartet, sondern der Webserver wurde gestartet und eine Anfrage an ihn geschickt, die Seite default.html anzuzeigen.

webmatrix_101_p2_10_de

In der Systemleiste Ihres PCs finden Sie nun auch ein kleines Icon, das den IIS Express anzeigt, der Webserver, der gestartet wurde.

webmatrix_101_p2_11_de

Über einen Rechtsklick sehen Sie, dass Ihre Filme-Seite läuft:

webmatrix_101_p2_12_de

Der Seitentitel

Werfen Sie nun einen genaueren Blick auf das Browser-Tab für Ihre Seite. Dort sollte der von Ihnen gewählte Seitentitel stehen. Zum Vergleich, hier ein paar Screenshots der Seite in verschiedenen Browsern. Der Text, den Sie zwischen den beiden <title>-Tags eingetragen haben, wird von allen Browsern als Seitentitel interpretiert. Die verschiedenen Browser stellen den Seitentitel auf unterschiedliche Weise da.

Internet Explorer:

webmatrix_101_p2_13_de

Chrome:

webmatrix_101_p2_14_de

Opera:

webmatrix_101_p2_15_de

Firefox:

webmatrix_101_p2_16_de

Es ist wichtig, als Webentwickler immer daran zu denken, dass die verschiedenen verfügbaren Browser Webseiten auf unterschiedliche Weise darstellen könnten. Daher sollte man seine Seite bei der Erstellung immer in unterschiedlichen Browsern testen.

Hinweis: So starten Sie Ihre Webseite in verschiedenen Browsern

Ein weiterer interessanter Aspekt bei WebMatrix ist, dass Sie Ihre Seiten schnell und bequem in den verschiedenen Browsern, die Sie auf Ihrem Rechner installiert haben, starten können. Hierzu müssen Sie lediglich auf den Pfeil unterhalb des Ausführen-Buttons klicken und den gewünschten Browser auswählen oder die Seite gleich in allen vorhandenen Browsern öffnen.

webmatrix_101_p2_17_de

Der Seiteninhalt

Im Code Ihrer Seite haben Sie das <h1>-Tag für “Meine Lieblingsfilme” verwendet. Dieser Tag trägt dem Browser auf, einen Text im Stil „Heading 1“, also als Überschrift (große Schriftart, gefettete Schrift) darzustellen.

webmatrix_101_p2_18_de

Außerdem haben Sie die Auflistung Ihrer Lieblingsfilme innerhalb des <ol>-Tags (steht für “Ordered List”) gesetzt und die einzelnen Filme nochmal innerhalb von <li>-Tags (steht für “List Item”) und der Browser hat das Ganze in Form einer Liste dargestellt. Sie müssen keine Aufzählungspunkte bei einer Liste einfügen, dies übernimmt der Browser für Sie. Dies ist die übliche Darstellungsweise für <li>-Tags. Im zweiten Teil dieses Tutorials werden Sie lernen, wie man diese Listenbestandteile anders formatieren kann.

Zusammenfassung

In diesem Teil unseres WebMatrix-Tutorial haben Sie gelernt, wie Sie eine einfache HTML-Seite erstellen können, und haben gesehen, wie der mitgelieferte Webserver arbeitet. Sie haben Ihre erste eigene HTML-Seite erstellt und ein paar HTML-Befehle kennen gelernt. Außerdem wurde Ihnen gezeigt, wie Sie Ihre Webseite in verschiedenen Browsern testen können. Das nächste Tutorial zeigt Ihnen, wie Sie Ihre Anwendung aufstylen können.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!