Internet
 
Alle Support-Themen im Überblick
  
 

Dreamweaver für Einsteiger

Die Dreamweaver Programmoberfläche
Texte und Bilder formatieren
Seitenlayout mit Tabellen
Bilder und Farben
Einführung in einfache Javascripte
HTML Quellcode
Veröffentlichen von Webprojekten
Gifanimationen, Hintergrundbilder und Imagemaps
Über die Grundlagen hinaus
Literaturhinweise und weiterführende Informationen

 
    HTML Quellcode
 


Eine Webseite ist im Prinzip eine Textdatei. Sie kann mit komfortablen Programmen wie Macromedia Dreamweaver oder Adobe GoLive erstellt werden, ohne dass sich der Anwender um den HTML-Code kümmern muss. Sie kann aber auch mit einem einfachen Texteditor wie Notepad oder SimpleText programmiert werden. Das Schreiben von Hand ist umständlicher, hat aber den Vorteil, dass Sie mit etwas Hintergrundwissen später leichter Fehlerquellen erkennen können und die volle Kontrolle über den Quellcode behalten.
Ein gut gemachtes Nachschlagewerk zu diesem Thema ist "selfhtml" von Stefan Münz: http://de.selfhtml.org/html/index.htm

Die Technik:

Eine Webseite besteht aus zwei Teilen, dem head- und dem body-Bereich. Im body-Bereich sind die eigentlichen Inhalte, die Texte und Bilder untergebracht. Im head finden Sie Angaben zum Dokumenttyp, den Titel der Seite oder die Metaangaben wie Stichworte und Beschreibung der Seite.
Um Objekte zu formatieren gibt es Markierungen, die sogenannten Tags. Das Tag <br> bedeutet zum Beispiel "break" (neue Zeile) oder <p> steht für "paragraph" (Absatz). Wenn Sie ein Wort "fett" schreiben, nehmen Sie dafür das Tag <strong> oder <b>. Im Quellcode sieht das folgendermaßen aus:

<strong>Ich bin ein fetter Text</strong>

Achten Sie darauf, dass das Tag <strong> durch ein </strong> geschlossen wird.

Aufgabe

Bauen Sie in einem Editor wie Simpletext oder Notepad eine einfache HTML-Seite.
Achten Sie genau auf die korrekte Schreibweise. Ein kleiner Tippfehler und der Browser versteht nicht mehr, was Sie von ihm wollen.

Schritt für Schritt

1. Bauen Sie das Dateigerüst wie in der Datei "geruest_vorlage.html".
Dazu müssen Sie sich das Bild "600000familien.gif" kopieren und innerhalb Ihres Projektordners in den Ordner "material" legen, Ihre HTML-Seiten speichern Sie in den Ordner "HTML" innerhalb Ihres Projektordners.

Die ganze Webseite ist umschlossen von den tags

<html></html>

2. Definieren Sie den head- und body-Bereich: der head-Bereich ist umschlossen von <head></head>.
In den head-Bereich schreiben Sie die Angabe

<head>
<title>Dieser Text steht in der Browsertitelleiste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

In den body-Bereich schreiben Sie

<body bgcolor="#ffffff" text="#000000">
</body>

Damit haben Sie das Gerüst der Seite erstellt, nun folgt der Inhalt.

3. Das Bild laden Sie mit dem Tag

<img src="../material/600000familien.gif" width="498" height="242" alt="600.000 Familien besitzen Rat und Hilfe.">

Hier bedeutet die Pfadangabe "../material" vor dem Dateinamen des Bildes, dass der Browser erst in den übergeordneten Ordner und dann in den Ordner "material" springen soll, um das Bild zu finden.

4. Kopieren Sie sich den Text aus der Datei "Rohtext.html" und formatieren Sie die Schrift wie in der Datei "Quellcode_Vorlage.html".

5. Die deutschen Umlaute wie "ä" oder "Ü" müssen maskiert (für den Browser lesbar gemacht) werden. Im Quellcode wird aus dem Umlaut "ä" ein "&auml;".

6. Jetzt wird es noch ein bisschen komplizierter. Erstellen Sie eine eMail-Verknüpfung mit dem Befehl

<a href="mailto:info@gibtesgarnicht.de">Kontakt</a>

7. Speichern Sie die Datei unter dem Namen "von_Hand_geschrieben.html".

8. Betrachten Sie Ihre Datei im Webbrowser. Wenn alles funktioniert: Herzlichen Glückwunsch!

Tipps

In Dreamweaver können Sie mit Fenster > Codeinspektor oder "F10" den Codeinspektor aufrufen und dort den Quelltext direkt bearbeiten.
"HTML" steht für "HyperText Markup Language".

Kontrollfragen und weitere Übungen

Welche Möglichkeiten kennen Sie, um in Dreamweaver den Quelltext direkt zu bearbeiten?
Was bewirkt die Angabe "<body bgcolor="#ffffff" text="#000000">"?

Informationen zum Thema Hyperlinks finden Sie bei selfhtml:
http://de.selfhtml.org/html/verweise/definieren.htm

Informationen zum Thema Sonderzeichen maskieren finden Sie bei Dr. Web: http://www.drweb.de/ressourcen/sonderzeichen.shtml
 
 
[zurück: einfache Javascripte] [nach oben] [weiter: Veröffentlichen von Webprojekten...]
 

Letzte Aktualisierung dieser Datei am: 23.1.2006
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben