Die Arbeit mit Html-Editoren
Sie haben den Composer von SeaMonkey oder NVU geöffnet. Zunächst sehen Sie eineleere Seite. Oben befindet sich die Menü-Leiste mit allen Funktionen, die Ihnen aus Wordprogrammen sicherlich vertraut sind.
Unten befindet sich eine Leiste mit Tabs, bei denen Sie unterschiedliche Ansichten anklicken können.
Im Moment befinden Sie sich bei Normal. Wenn Sie auf Quelltext klicken, sehen Sie den Quelltext, der Website. Alles, was Sie als Inhalte unter Normal einfügen wird im Quelltext automatisch in eine Programmiersprache umgewandelt.
Unter der Ansicht HTML-Tags sehen Sie kleine gelbe Kästchen mit der jeweiligen Formatierung. Im Quelltext stehen die Tags in Klammern:
Der einleitende Tag: <h1> Damit wird die Formatierung beendet: </1>
Z.B.: <h1>Viel Erfolg!</h1>
Dies ist eine Schrift-Formatierung. h1 wird für Überschriften verwendet (die Farbe und Größe wird im "Stylesheet" festgelegt). Zwischen den Tags steht der Text, in diesem Fall "Viel Erfolg".
Achtung! Die Formatierungen beginnen immer
mit einen einleitenden Tag <> und enden mit </>
Am besten experimentieren Sie erst einmal munter los.
Erkunden Sie die vielfältigen Formatierungen.
Wichtige Angaben im Quelltext
Damit Sie sich unnötige Arbeit und aufwendige Berichtigungen ersparen:
Erstellen Sie zunächst mit einem Text-Editor ein Stylesheet, in dem Sie zumindest die Hintergrundfarbe sowie Schriftart, Schriftgröße und Schriftfarbe festlegen.
Wie das geht, erfahren Sie hier: Ein Stylesheet erstellen
Damit nun die Angaben aus dem Stylesheet übernommen werden,
müssen Sie im Quelltext ihrer Website zwischen <head> und </head> folgendes eintragen:
<link rel="STYLESHEET" type="text/css" href="buero-meier.txt">
Das sieht dann so aus:
<html>
<head>
Diverse Meta-Elemente
darunter kommt der Link für das Stylesheet hin
</head>
Damit Sie sich unnötige Arbeit und aufwendige Berichtigungen ersparen:
Erstellen Sie zunächst mit einem Text-Editor ein Stylesheet, in dem Sie zumindest die Hintergrundfarbe sowie Schriftart, Schriftgröße und Schriftfarbe festlegen.
Wie das geht, erfahren Sie hier: Ein Stylesheet erstellen
Damit nun die Angaben aus dem Stylesheet übernommen werden,
müssen Sie im Quelltext ihrer Website zwischen <head> und </head> folgendes eintragen:
<link rel="STYLESHEET" type="text/css" href="buero-meier.txt">
Das sieht dann so aus:
<html>
<head>
Diverse Meta-Elemente
darunter kommt der Link für das Stylesheet hin
</head>
Wichtig für die erste erstellte Html-Seite sind die Angaben im Quelltext.
Ganz oben ist die Doctype Declaration (Dokumententyp) schon vorhanden.
Zwischen den Tags <head> und </head>
stehen die Meta-Elemente. Das sind Daten, die das Durchsuchen im World Wide Web verbessern.
Beispiel für die Angabe der Meta-Elemente
Sie haben eine erste Seite kreiert
Speichern Sie die erste Seite auf Ihrem PC mit dem Namen index
Die Startseite muss den Namen index haben!!!
Alle folgenden Seiten sollten nach dem Inhalt der Seite benannt werden!!!
z. B.: Reise-Tagebuch_Griechenland_Korfu
Im Namen der Seiten darf kein Leerzeichen stehen!!!
Umlaute, wie ä, ö, ü umwandeln in ae, oe, ue ...
Aufbau einer einfachen Website
Wir beginnen mit einer ganz einfach gestalteten Seite
damit Sie das Programm kennen lernen!
Richten Sie auf Ihrem PC einen Ordner für die Website ein
in dem die fertigen HTML-Seiten dann gespeichert werden.
Gleich auch einen Unterordner mit dem Namen img.
Dort werden die Bilder gespeichert.
Aufbau der Seite
Klicken Sie im NVU-KompoZer im
oberen Menü auf Tabelle
Wählen Sie Einfügen > Tabelle > Präzise
wählen Sie Zeilen 3, Spalten 2, Breite 600 px (schalten Sie von % auf px), Rand 1 px
So sieht nun diese Tabelle aus.
Die Tabelle hat nun zwei gleich breite Spalten.
Die
Breite der Spalten ändern
Klicken Sie in die Tabelle. Die Tabelle ist nun markiert.
Klicken Sie im oberen Menü auf Tabelle und wählen Sie Tabellen-Eigenschaften.
Hier können Sie die Eigenschaften für die Tabelle ändern.
Rand, Außenabstand, Innenabstand der Tabelle, Ausrichtung der Tabelle (links, zentriert, rechts)
Ganz oben, wo Tabelle steht, ist ein weiterer Tab Zellen.
Klicken Sie auf Zellen.
Geben Sie bei der markierten Zelle die Breite 150 px an.
Klicken Sie auf nächste Zelle, Geben Sie dort Breite 450 px an.
Klicken Sie mit der rechten Maustaste in die erste linke Spalte der Tabelle.
Es öffnet sich ein Fenster > wählen Sie Tabelle verbinden mit rechter Zelle
Die zwei oberen Spalten sind nun verbunden.
Das wiederholen Sie mit der unteren Zeile
Huch, jetzt hat die mittlere Zeile wieder zwei gleiche Spalten!
Das liegt daran, dass im vorhergehenden Schritt, die Breite der einzelnen Zelle nur für die obere Zeile festgelegt worden ist.
Ändern Sie in der mittleren Zeile die Breite der Zellen.
Nun können Sie direkt in die Tabelle Texte und Bilder einfügen
Bilder für den Kopf- und Fußbereich:
Gestalten Sie zwei Bilder so,
dass sie eine
Breite von 600 px haben (Breite der Tabelle).
Geben Sie den Bildern relevante
Namen. Also nicht
Bild1, Bild2 ...
sondern z.B.: Plataria_Berge, Plataria_Strand ... Wichtig für die Suchmaschinen!
Speichern Sie die Bilder in dem Unterordner img.
Die Bilder in die Tabelle einfügen:
Klicken Sie in die obere Zeile
der Tabelle
Klicken Sie dann in der oberen Menü-Leiste des KompoZers auf Einfügen
Klicken sie auf Grafik > es öffnet sich ein Fenster mit Grafik-Eigenschaften
Klicken Sie auf das rechte Ordner-Symbol
"durchsuchen"
Öffnen Sie damit den Ordner img wählen Sie das Bild für den Kopfbereich.
Tragen Sie bei "Tooltip" und "Alternativtext" eine Beschreibung für das Bild ein.
Z.B: In den Bergen von Plataria
Zum Abschluss auf OK klicken ... und schon erscheint das Bild in der Tabelle.
Das wiederholen Sie
für die untere Zeile mit dem
2. Bild.
Na, Prima!!!
Wenn Sie bei Tabellen-Eigenschaften > Füllung 10 px angeben, sieht das doch schon ganz gut aus.
... In Kürze weitere Tipps
Wir beginnen mit einer ganz einfach gestalteten Seite
damit Sie das Programm kennen lernen!
Richten Sie auf Ihrem PC einen Ordner für die Website ein
in dem die fertigen HTML-Seiten dann gespeichert werden.
Gleich auch einen Unterordner mit dem Namen img.
Dort werden die Bilder gespeichert.
Aufbau der Seite
Klicken Sie im NVU-KompoZer im
oberen Menü auf Tabelle
Wählen Sie Einfügen > Tabelle > Präzise
wählen Sie Zeilen 3, Spalten 2, Breite 600 px (schalten Sie von % auf px), Rand 1 px
So sieht nun diese Tabelle aus.
Die Tabelle hat nun zwei gleich breite Spalten.
Die
Breite der Spalten ändernKlicken Sie in die Tabelle. Die Tabelle ist nun markiert.
Klicken Sie im oberen Menü auf Tabelle und wählen Sie Tabellen-Eigenschaften.
Hier können Sie die Eigenschaften für die Tabelle ändern.
Rand, Außenabstand, Innenabstand der Tabelle, Ausrichtung der Tabelle (links, zentriert, rechts)
Ganz oben, wo Tabelle steht, ist ein weiterer Tab Zellen.
Klicken Sie auf Zellen.
Geben Sie bei der markierten Zelle die Breite 150 px an.
Klicken Sie auf nächste Zelle, Geben Sie dort Breite 450 px an.
Klicken Sie mit der rechten Maustaste in die erste linke Spalte der Tabelle.
Es öffnet sich ein Fenster > wählen Sie Tabelle verbinden mit rechter Zelle
Die zwei oberen Spalten sind nun verbunden.
Das wiederholen Sie mit der unteren Zeile
Huch, jetzt hat die mittlere Zeile wieder zwei gleiche Spalten!
Das liegt daran, dass im vorhergehenden Schritt, die Breite der einzelnen Zelle nur für die obere Zeile festgelegt worden ist.
Ändern Sie in der mittleren Zeile die Breite der Zellen.
Nun können Sie direkt in die Tabelle Texte und Bilder einfügen
| oberer
Bereich für den
Kopf (Haeder) der Seite Hintergrundbild und Firmenlogo |
|
| Platz
für die
Navigation Haupt-Menü |
Hier
ist
Platz für die Vorstellung, was es alles auf Ihrer Webseite zu entdecken gibt. |
| unterer
Bereich (Footer) z. B.: für Hinweise wie Impressum, oder einfach nur farbig oder mit Hintergrundbild gestaltet als Abschluss der Seite |
|
Bilder für den Kopf- und Fußbereich:
Gestalten Sie zwei Bilder so,
dass sie eine
Breite von 600 px haben (Breite der Tabelle).Geben Sie den Bildern relevante
Namen. Also nicht
Bild1, Bild2 ...sondern z.B.: Plataria_Berge, Plataria_Strand ... Wichtig für die Suchmaschinen!
Speichern Sie die Bilder in dem Unterordner img.
Die Bilder in die Tabelle einfügen:
Klicken Sie in die obere Zeile
der TabelleKlicken Sie dann in der oberen Menü-Leiste des KompoZers auf Einfügen
Klicken sie auf Grafik > es öffnet sich ein Fenster mit Grafik-Eigenschaften
Klicken Sie auf das rechte Ordner-Symbol
"durchsuchen"Öffnen Sie damit den Ordner img wählen Sie das Bild für den Kopfbereich.
Tragen Sie bei "Tooltip" und "Alternativtext" eine Beschreibung für das Bild ein.
Z.B: In den Bergen von Plataria
Zum Abschluss auf OK klicken ... und schon erscheint das Bild in der Tabelle.
Das wiederholen Sie
für die untere Zeile mit dem
2. Bild. |
|
| Griechenland Plataria Sivota Parga Korfu Impressum |
Reise-Tagebuch Griechenland Von Oktober 2008 bis Ende April 2009 war ich zum Überwintern in Griechenland. Für meine Familie und meine Freunde schrieb ich - fast täglich - über riskante Küsten-Wanderungen, Meeresstimmung auf der Wiese, Kühe am Strand, schnelle Schwalben, scheue Eidechsen und wie ich in dem kleinen Fischerdorf Plataria trotz zweideutiger Männer-Domäne als Frau überlebte. Es ist mehr als ein Tagebuch. Sie finden dort Informationen über Griechenland, Anekdoten und eine Foto-Galerie von Plataria und seiner Umgebung. |
 |
|
Na, Prima!!!
Wenn Sie bei Tabellen-Eigenschaften > Füllung 10 px angeben, sieht das doch schon ganz gut aus.
... In Kürze weitere Tipps
