12    Die "Home - Page"

Die Homepage ist die Startseite deines Internetauftrittes. Sie wird mit der Domain angesteuert.

Eine Domain ist die Adresse zu deinem Webspace, den du in die Adresszeile deines Browsers eintippst. Z.B. www.google.de oder www.kompozer.net oder www.gimp-werkstatt.de

Die Homepage wird als Startseite erkannt, wenn sie mit "index" benannt ist.

Also "index.html" , "index.htm" oder "index.php"

Sie kann jedoch nur dann erkannt werden, wenn diese Datei im Wurzelverzeichnis deines Ordner abgelegt ist. Es darf auch nur eine Datei mit der Benennung "index" in diesem Verzeichnis liegen.

Inhaltlich soll sie einen kurzen Überblick darüber geben, um was es auf deinem Webauftritt geht. Außerdem soll sie so gestaltet werden, dass der Leser neugierig wird und weiterlesen möchte, also dazu animiert wird, auch die anderen Unterseiten deiner Homepage zu betrachten.

Für die Übersichtlichkeit wird die Seite in Elemente aufgeteilt.

Elemente

Jedes Element besitzt ein eigenes TAG. Das allgemeine Block-Element Div-Container hast du bereits kennen gelernt. Im Kapitel 8 Header und Footer hast du das Element "Überschrift 1" kennen gelernt. Es gibt aber noch eine ganze Menge mehr.

Das Besondere an Elementen ist, dass sie global formatiert werden können, so dass die Formatierung für dein gesamtes Web gültig ist, z.B.:

Alle Überschriften der 2. Ordnung sollen rot geschrieben werden.

h2  {
    color: #ff0000;
}

Quelltext:

<h2>Überschrift der 2. Ordnung</2>


Du kannst einem Element eine ID, also eine individuelle Formatierung zuweisen. Diese Zuweisung darf nur einmal auf der gesamten Seite verwendet werden. Z.B.:

#rot  {
color: #ff0000;
}

Die ID muss im Quelltext der Überschrift 2 zugewiesen werden

Quelltextzuweisung:

<h2 id="rot">Überschrift der 2. Ordnung in Rot</h2>

So wie du eine individuelle Formatierung zuweisen kannst, kannst du auch eine Klasse zuweisen. Die Klasse kannst du mehreren Elementen auf deiner Seite zuweisen. Z.B.:

Die unterschiedlichen Elemente durch Rotschrift hervorheben:

.rot  {
    color: #ff0000;
}

Die Klasse wird nun den verschiedenen Elementen zugewiesen.

<h2 class="rot">Dies ist eine rot hervorgehobene Überschrift der 2. Ordnung</h2>


Zu den Elementen gehören nicht nur Überschriften.

Hier eine kleine Übersicht:


Element-TAGTAG
<html></html>ganzes Dokument
<body></body>angezeigter Teil des Dokumentes
<div></div>allgemeines Blockelement Div-Container
Überschirft 1. Ordnung
Überschrift 2. Ordnung
Überschirft 3. Ordnung
Überschrift 4. Ordnung
...		<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
...
Absatz<p></p>
Text hervorheben<em></em>
Text stark hervorheben<strong></strong>


Es gibt noch viel mehr Elemente, die du in den folgenden Kapiteln kennen lernen wirst.

Mit allgemeinen Blockelementen, den Div-Container, gliederst du vorrangig die Bereiche einer Webseite. Sie werden hierfür verwendet, da sie keine Vorformatierung besitzen.

Für die Übersichtlichkeit im Inhalt-Bereich sorgen vor allem Absatz- und Überschriften-Definitionen.  Aber auch Hervorhebungen einzelner Wörter innerhalb eines Absatzes.

Auch hier gilt: Absatzformate im HTML-Text definieren und im Stylesheet formatieren.

In der Formatsymbolleiste 1 findest du alle Definitionen, die du für deinen Text benötigst.

formatleiste1.png

Die Absatzformate

Überschriften

KompoZer gibt in den Absatzformaten 6 Überschriften-Definitionen vor:

ueberschriften-gliederung.png

Eine Überschrift wird im HTML-Code mit <h> definiert. Die Zahl dahinter beschreibt, in welcher Hierarchie die Überschrift angegliedert ist. So ist eine Überschrift in der obersten Hierarchie <h1>

<h1>Dies ist eine &Uuml;berschrift der 1. Ordnung</h1>

Diese Hierarchie wird in der Regel für die Überschrift im Header verwendet.

Als Überschrift für deinen Text solltest du nun also die nächste Überschriften-Definition verwenden: <h2> 

Für weitere Untergliederungen deines Textes verwendest du die jeweils hierarchisch folgende Überschrift.

Alle Überschriften besitzen bereits Formatierungen. Sie sind grundsätzlich dem folgenden Text abgesetzt.

Die Gliederung der Überschriften ist sehr wichtig, da sie Auswirkungen auf spätere Suchergebnisse in Suchmaschinen haben. Die Überschriften werden vorrangig durchsucht.

Der Absatz

Normaler Text besitzt keine Elementenbeschreibung. Eine einfache Zeilenschaltung beginnt eine neue Zeile und wird im Quelltext mit einem <br> markiert. Ein doppelte Zeilenschaltung wird häufig als Absatzmarkierung verwendet. Dies solltest du nach Möglichkeit vermeiden.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animid est laborum. <br>

<br> Sed ut perspiciatis unde omnisiste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quiaconsequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,consectetur, adipisci velit, sed quia non numquam eius modi temporaincidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br>

Dies ist die Ausgangsform von KompoZer Text auf eine Seite einzufügen.

KompoZer unterscheidet zwischen Normalem Text und Absatz.

Ein Absatz wird mit einer Zeilenschaltung im Text abgeschlossen. Im Quelltext wird ein Absatz mit einem <p> eingeleitet und mit einem schließenden </p> abgeschlossen.

<p>Dies ist ein Absatz</p>

Der Absatz muss jedoch von dir festgelegt werden. So wie in einem Textverarbeitungsprogramm markierst du hierzu deinen Text und wählst über Menü  Format - Absatz  Absatz oder noch einfacher über das erste Drop-Down-Feld deiner Formatsymbolleiste 1:

format1-absatzformat.png

Dieses Feld verrät dir, in welchem Absatzelement du dich mit deinem Cursor gerade befindest.

Elementen-Formatierung

Beim Formatieren der Absätze kannst du auf das <p> zugreifen.

Möchtest du eine globale Formatierung anlegen, die alle Absätze deines gesamten Internetauftrittes betreffen, legst du eine Style-Regel für <p> fest. Z.B. einen Abstand zum nachfolgenden Element von 20px.

Dafür legst du die Styleregel p fest: Boxeigenschaften: Außenabstand unten 20px.

Im Stylesheet sieht das so aus:

p {
   margin-bottom: 20px;
}

Klassen zuweisen

Möchtest du einem Absatz eine besondere Formatierung geben, legst du für diese Formatierung eine Klasse fest. Zum Beispiel:

Der Absatz soll einen Abstand zum linken und rechten Rand von 50px haben.

Die Schriftfarbe soll eine andere sein und der Absatz soll farbig hinterlegt werden.

Zusätzlich soll der Absatz einen Rahmen von einem Pixel Breite bekommen.

Lege eine Klasse an, z.B. .kasten

Der Name der Klasse muss mit einem Punkt als Zeichen für Klasse beginnen. Die Benennung selber muss mit einem Buchstaben beginnen.

Anschließend fügst du die Formatierung über die Register im Stylesheet-Editor an.

Im Stylesheet würde das so aussehen:

.kasten {
   margin-left: 50px;
   margin-right: 50px;
   background-color: #CCCCCC;
   color: #ff0000;
   border: solid1px #0000ff
}

Die Klasse kannst du nun jedem <p> Element, also jedem Absatz zuweisen den du möchtest.

Dazu klickst du in den Absatz, den du über diese Klasse formatieren möchtest und wählst in der Statusleiste mit linker Maustaste das <p> aus.

In der Auswahl, die sich öffnet, wählst du Klasse. Eine weitere Auswahl öffnet sich, in der deine Klassen aufgeführt sind. In diesem Fall "kasten". Klick sie an, um sie dem Absatz zuzuweisen.

in der Statuszeile wird das Element nun so dargestellt:

<p class="kasten">

Eine weitere Möglichkeit, eine Klasse zuzuweisen, findest du in der Formatsymbolleiste1.

Klicke zunächst in den Absatz und markiere ihn mit einem klick auf das <p> in der Statuszeile. dann wählst du die Klasse über die zweite Drop-Down-Liste in der Symbolleiste. Auch hier sind alle Klassen aufgeführt, die du in deinem Stylesheet angelegt hast.

Text hervorheben

Häufig möchte man keinen ganzen Absatz, sondern nur ein Wort oder einen Satz hervorheben. Mit Fettschrift oder kursiv.

Hierzu brauchst du keine neue Klasse anzulegen. KompoZer besitzt zwei Schaltflächen in der Formatsymbolleiste 1

Einfaches Hervorheben format1-einfach-hervorheben.png  und starkes Hervorheben format1-starkhervorheben.png

Diese beiden Hervorheben-Arten besitzen bereits eine Formatierung. Einfaches hervorheben formatiert deinen Text in kursiv, starkes Hervorheben in fett. Die Elementen-Definitionen sind:

 <em></em> für einfaches Hervorheben und

<strong></strong> für starkes Hervorheben.

Du kannst diese Elemente global für dein gesamtes Web über die Definitionen formatieren oder ihnen eine Klasse zuweisen.

Auf keinen Fall solltest du einfach eine Textstelle markieren und ihr so eine Klasse zuweisen!

Nach so viel Theorie kommt nun der


Praktische Teil

Öffne deine "index.html" mit KompoZer und ändere den Titel deiner Seite von "Vorlage" auf "Home". Öffne hierzu Menü Format - Seitentitel- und Einstellungen:

seiteneinstellungen.png

Die Informationen, die du in den im oberen Teil der Seiteneigenschaften angibst, findest du im Quelltext-Headbereich als META-TAGS wieder. Die Informationen dienen den Suchmaschinen.

Die Einstellung: Vorlage

speichert deine Seite nicht als HTML-Seite ab, sondern als HTML-Vorlage *.mzt. Öffnest du eine Vorlage, blendet KompoZer eine Nachricht ein, dass du eine Vorlage geöffnet hast.

Die Ländereinstellungen sind wichtig für den Browser beim Anzeigen der Seite.

Ändere den Titel und füge einen Autor und eine kurze Beschreibung über den Inhalt dieser Seite ein. Die Sprache kannst du über den Button "Sprache wählen" einstellen. Legst du keine Sprache fest, übernimmt KompoZer die Spracheinstellung deines Systems. Schließe den Seiteneigenschaften-Assistenten wieder.

Schreibe eine Einleitung zu deiner Webseite:

Eine Einleitung, also ein grober Überblick, um was es geht und ein bisschen allgemeine Info. Für genauere Infos ist die Unterseite "hobby.html" da.

Schreibe den Text in den Inhalt-Div, ohne ihn zu formatieren.

Verwende eine Zeilenschaltung, wo du einen Absatz setzen möchtest. Erst wenn dein ganzer Text geschrieben ist, markierst du den ganzen Text. Klicke hierzu in der Statuszeile auf <div id="inhalt">. Im Drop-Down-Feld der Formatsymbolleiste1 wählst du "Absatz". Somit ist dein gesamter Text in die Absatzform umgewandelt. Überall dort, wo du einen Zeilenwechsel gemacht hast, hast du nun einen deutlich erkennbaren Abstand zwischen den Zeilen.

Als nächstes klickst du in die Zeilen, die du als Überschriften definieren möchtest. Bedenke die Hierarchie. Es gibt nur eine Überschrift 1 auf der Seite und die steht bereits im Header. Beginne also mit Überschrift 2 für die Haupt-Überschrift deiner Seite.

Markiere auch Textstellen, die du hervorheben oder stark hervorheben möchtest.

Als nächstes lege 2 Klassen an:

Die Infobox sollte sich deutlich vom restlichen Text unterscheiden z.B. in der Schriftart und mit einem Rahmen abheben.

Diese Klasse sollte den Text nur am linken Rand ein wenig einrücken.

Lege eine allgemeine Formatierung für eines der Elemente an. Ändere hierfür z.B. die Eigenschaften von p oder von einer der Überschriften, die du verwendest.

Solltest du einmal nicht weiterkommen, schaue dir meine Beispiel-Dateien im KompoZer an.

Nimm die Elemente in dein Glossar auf.

Ergebnis

index.html