Die Homepage wird als Startseite erkannt, wenn sie mit den Dateinamen index trägt. Also index.html, index.htm oder index.php.
Sie
kann jedoch nur dann erkannt werden, wenn sie im Wurzelverzeichnis des
Servers abgelegt ist. Auch darf nur eine Datei mit dem Namen index in
diesem Verzeichnis liegen.
Inhaltlich soll sie einen kurzen
Überblick darüber geben, um was es auf deiner Webseite geht. Gestaltet
sie so, dass der Leser neugierig - und zum Weiterlesen animiert wird.
Hierzu gehören angenehme Farben, Grafiken, überschaubares Layout und gut
lesbarer Text.
Um einen Text schnell und einfach erfassen zu
können, sollte er übersichtlich gegliedert sein. Kurze Sätze, Absätze,
Überschriften, Listen ... .
Jedes Element besitzt ein eigenes
TAG. Das allgemeine Block-Element Div Container hast du bereits
kennengelernt. Im Kapitel Kopf und Fuß hast du das Element Überschrift 1
eingesetzt. Es gibt aber noch viele Elemente, die du zur Gestaltung
deiner Seite nutzen kannst.
Das Besondere an Elementen ist, dass
sie global formatiert werden können, sodass die Formatierung für alle
Elemente der gleichen Art im ganzen Web gleich ist. z.B.
Alle Überschriften der 2. Ordnung sollen rot geschrieben werden:
Code:
h2 {color: #ff0000;}
Im Quelltext:
Code:
<h2> Überschrift der 2. Ordnung</h2>
Du
kannst einem Element eine ID, also eine individuelle Formatierung
zuweisen. Diese Zuweisung darf nur einmal auf der gesamten Seite
verwendet werden. z.B.
Code:
#rot {color: #ff0000;}
Die ID muss jetzt noch der Überschrift zugewiesen werden
Code:
<h2 id ="rot">Pberschrift 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 Rotschfit hervorheben:
Code:
.rot {color: #ff0000}
Die Klasse wird nun den verschiedenen Elementen zugewiesen. z.B. einer Überschrift 2 und einem Absatz.
Code:
<h2 class="rot">Dies ist eien rot hervorgehbene Überschrift der 2. Orndung>/h2> <p class="rot">dieser nachfolgende Absatz wird auch rot geschrieben.</p>
Zu den Elementen gehören nicht nur Überschriften. Hier eine kleine Übersicht:
html
<html></html>
Umschließt das gesamte Dokument.
body
<body></body>
Umschließt den gesamten Bereich, der im Browser dargestellt wird.
div
<div></div>
allgemeines Blockelement Div-Container. Wird zum Zusammenfassen mehrerer Elemente verwendet.
h1
<h1></h1>
Überschrift der 1. Ordnung
h2
<h2></h2>
Überschrift der 2. Ordnung
h3
<h3></h3>
Überschrift der 3. Ordnung
h4 <h4></h4>
h5 <h5></h5>
h6 <h6></h6>
p
<p></p>
Absatz, zur Gliederung von Fließtext.
em
<em></em>
Text hervorheben
strong
<strong></strong>
Text stark hervorheben
Elemente in KompoZer
Mit KompoZer kannst du diese Text-Elemente einfügen.
Über das DropDown-Menü in der Formatsymbolleiste 1:
Überschriften
h1, h2, h3...
Überschriften werden zur thematischen Gliederung des Textes
verwendet. Geht es auf deiner Seite zum Beispiel um Aquaristik, könnte
eine Gliederung so aussehen:
Absatz p
Ein
Absatz umfasst einen thematisch zusammenhängenden Bereich. Ein Text
wird in mehrere sinngemäß zusammenpassende Absätze aufgeteilt. Dies
erhöht die Lesbarkeit des Textes.
Adressen adress
Eine Adresse im Internet sollte auch als Adresse gekennzeichnet werden. Zum Beispiel:
Max Mustermann, Musterstraße 1, 12345 Musterhausen
Vorformatierter Text
kopierst du einen Text, wird er mitsamt der ursprünglichen Formatierung eingefügt.
In den folgenden Kapiteln wirst du weitere Elemente kennenlernen.
Absatzformate
Normaler
Text besitzt keine Elementenbeschreibung. Eine einfache Zeilenschaltung
beginnt eine neue Zeile und wird im Quelltext mit einem <br>
dargestellt. Eine doppelte Zeilenschaltung wird häufig als Absatzmarke
verwendet. Dies solltest du jedoch nach Möglichkeit vermeiden.
Dies ist die Ausgangsform von KompoZer einen Text auf eine Seite einzufügen.
KompoZer unterscheidet zwischen Normaltext und Absatz.
Ein
Absatz wir mit einer Zeilenschaltung im Text abgeschlossen. Im
Quelltext wird ein Absatz mit einem <p> eingeleitet und mit
</p> abgeschlossen.
Der
Absatz muss jedoch von dir festglegt werden. So wie in einem
Textverarbeitungsprogramm markierst du hierzu deinen Text und wählst
über Menü Format - Absatz - Absatz oder noch einfach über das
DropDown-Menü in der Formatleiste 1.
Du fragst dich jetzt bestimmt, wo der große Unterschied liegt.
Nun
ja, ein Absatz ist ein Element, du kannst ihm eine Klasse oder ID
zuweisen. Ein Zeilenumbruch bricht nur den Text um und ein doppelter
Zeilenumbruch stellt eine Lücke zwischen den Zeilen dar.
Die
KompoZer-Einstellung für Textformate steht generell auf "Normaler Text".
Du kannst den Text erst einmal so eingeben, dann anschließend den Text
markieren und in Absätze umwandeln. Wenn du jedoch gerne während der
Texteingabe schon Kontrolle über die Formatierung haben möchtest,
solltest du bereits zu Anfang die Einstellung auf "Absatz" umstellen.
Du kannst die Absätze in KompoZer sichtbar machen. Wähle im Menü Ansicht - Bereichskonturen. Jedes Element wird nun mit einer dünnen schwarzen Linie umfasst.
Übung
Bevor du beginnst, speichere deine index.html für alle anderen Links ab:
Öffne
deine index.html mit KompoZer und ändere den Titel deiner Seite von
"Vorlage" auf "Home" oder "Start". Öffne hierzu das Menü [col]Format -
Seitentitel- und einstellungen[/col]. - ändere den Titel der Seite und
bestätige den Assistenten mit OK.
Schreibe nun die Einleitung zu deiner Webseite:
Eine
Einleitung, also ein grober Überblick, um was es geht und ein bisschen
allgemeine Info. Um umfangreichere Informationen zu bekommen, soll der
Leser auf die weiterführenden Seiten deines Webs umschalten.
Überlege
dir, welche Stichworte ein Besucher deiner Seite wohl in eine
Suchmaschine eingeben würde, um die Informationen auf deiner Seite
finden zu können. Verwende diese Stichwörter bei deiner Formulierung für
die Startseite. Versuche sie auch in Überschriften unterzubringen.
Gliedere deinen Text in Absätze. Lege zwei Klassen an, mit denen du einzelne Absätze besonders hervorhebst:
.infobox
Die Infobox sollte sich deutlich vom restlichen Text unterscheiden. z.B. in der Schriftfarbe, mit Rahmen ...
.einruecken
Diese Klasse soll den Text am linken Rand ein wenig einrücken.
Lege
eine allgemeine Formatierung für einen Absatz an. Ändere die
automatischen Eigenschaften, sodass z.B. ein von dir festgelegter
Abstand nach jedem Absatz eingehalten wird.
</div>
<div id="navi">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="hobby.html">Hobby</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="glossar.html">Glossar</a></li>
<li><a href="termine.html">Termine</a></li>
<li><a href="gaestebuch.html">Gästebuch</a></li>
<li><a href="wegbeschreibung.html">Wegbeschreibung</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Überschrift 2</h2>
<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
</p>
<p class="einruecken">Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. </p>
<h3>Überschrift 3 <br>
</h3>
<p>perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
<h3>Überschrift 3 <br>
</h3>
<p>sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. </p>
<p class="infobox">Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>
</body></html>