3 < 4 Webdesign | start | Webdesign 4 > 5

Einfache Werkzeuge zur Webseitenerstellung und Betrachtung

Jeder einfache Texteditor kann als Werkzeug genutzt werden, um HTML-Code zu erstellen. Empfehlenswert sind Editoren, die den HTML-Code erkennen und zum Beispiel durch farbige Markierung hervorheben können.

Empfehlenswert ist zum Beispiel der Editor Notepad++. Das Programm ist kostenlos und kann auch aus portable Version heruntergeladen und ohne Installtion genutzt werden. Link zum Download der mehrsprachigen portablen Version.

Aufgabe:

1. Sprache der Oberfläche einstellen

Installieren Sie Notepad++ zum Beispiel auf Ihrem Stick und stellen Sie über Settings -> Preferences -> General die Oberfläche auf die Sprache Ihrer Wahl ein.

notepad++ Kodierung utf8

2. Einstellen der Kodierung

Damit die Umlaute Ihrer Texte von jedem Browser richtig interpretiert werden, stellen Sie die Kodierung auf UTF-8 ein.

3. Startseite index.html erstellen

Speichern Sie über das Menü Datei -> Speichern unter -> Ihre erste Datei unter dem Namen index.html in einem neuen Ordner Ihrer Wahl ab. Öffnen Sie anschließend die leere Datei mit dem Internetbrowswer Firefox und stellen Sie beide Fenster, das geöffnete Fenster der Datei index.html in Notepad++ und die geöffnete Ansicht im Browswer Firefox.

Sie haben jetzt eine komplette Entwicklerumgebung. Im Fenster von Notepad++ können Sie HTML-Text eingeben und speichern. Im Browser können Sie durch Auffrischen der Browseransicht (Klick auf die Taste F5 in der oberen Reihe der Tastatur), die Auswirkung der Angabe anzeigen lassen.

Testen Sie Ihre Entwicklerumgebung. Schreiben Sie Ihre erste Überschrift in HTML:

<h1>Bindung ist nicht alles</h1>

notepadd++ Demotest

4. Aufgabe: Erstellen Sie einen HMTL-Text mit den Strukturelementen h1, p, br.

Achten Sie auf den Unterschie von Zeilenumbruch und Absatz!

Bindung ist nicht alles
Drum prüfe...
Drum prüfe, wer sich ewig bindet,
Ob sich das Herz zum Herzen findet.
Der Wahn ist kurz, die Reu' ist lang.
Schiller: Das Lied von der Glocke

<h1>Bindung ist nicht alles</h2>
<h2>Drum prüfe...</h2>
<p>Drum prüfe, wer sich ewig bindet,<br>
Ob sich das Herz zum Herzen findet.<__>
<__>Der Wahn ist kurz, die Reu' ist lang.</p>
<__>Schiller: Das Lied von der Glocke<__>

5. Aufgabe: Erstellen Sie einen HMTL-Text mit den Strukturelementen h1, p, br. Achten Sie auf den Unterschie von Zeilenumbruch und Absatz.

Gruselett
Der Flügelflagel gaustert
durchs Wiruwaruwolz.
Die rote Fingur plaustert
und grausig gutzt der Golz
Christian Morgenstern

<h1>Gruselett</h1>
<p>Der Flügelflagel gaustert</br>
durchs Wiruwaruwolz</p>
...

Aufgabe: Beschreiben Sie den Unterschied zwischen Absatz und Zeilenumbruch

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).