Eine Webseite, die ist lustig - eine Webseite, die ist schön...
Beim Surfen auf verschiedenen Seiten hast du dir vielleicht schon manchmal gedacht, dass dich einige layouttechnisch mehr und andere weniger ansprechen oder dich gefragt, wie dein Browser die Seite eigentlich anzeigen kann und was sich
hinter dem verbirgt, was du siehst?Dann kann dir unsere Wissenscollage zum Thema "HTML & CSS" vielleicht weiterhelfen.
Sowohl
HTML als auch
CSS sind eine Art
Sprache, die deinem Browser dabei helfen, konkrete Webseiten anzuzeigen. Darum werden wir dir erklären, wie du bei der Erstellung von HTML- und CSS-Dokumenten vorgehen musst.
Bevor es losgeht, noch eine kleine
inhaltliche Übersicht bezüglich dem, was du hier findest:
- die 10 Gebote in der HTML-Programmierung
- grundlegende Informationen zur Erstellung eines wohl strukturierten und mit CSS formatierten HTML-Dokuments am Beispiel einer Gruppenwebvisitenkarte
- weiterführende Links und Videos
Erstellung einer Gruppenwebvisitenkarte
- Anhand der Dokumentation der Erstellung einer Gruppenwebvisitenkarte wollen wir dir Schritt für Schritt erklären, wie du ein HTML- und ein CSS-Dokument erstellst, was du beachten musst und wie du beide miteinander verknüpfst.
- Rechts findest du Screenshots, damit du den Anweisungen besser folgen kannst. Maus wie immer drüber halten.
1. SchrittÖffne den HTML-Editor.
Wähle unter Datei
Neues HTML-Dokument.
Der HTML-Editor quält dich gleich mit einer Reihe von
Fragen.Nach dem Beantworten klickst du auf
Erstellen.Doch zunächst zu den Fragen:
Titel der Seite: Webvisitenkarte KLIK
- Den Titel der Seite findest du über der Navigations-Symbolleiste deines Browsers.
- Die Angabe eines Titels ist wichtig, damit deine Seite thematisch einordbar ist.
Zusätzliche Angaben: Schlüsselwörter, Beschreibung, HTML-Version
Wie du rechts auf dem Screenshot erkennen kannst, hat der HTML-Editor deine Angaben bereits eingeordnet. Dies tut er mithilfe sogenannter Tags (Schlagwörter), die in diesem Falle alle mit meta beginnen. Sie erhalten daher den Namen
Meta-Angaben.
Schlüsselwörter: Die Schlüsselwörter beschreiben den wesentlichen Inhalt deiner Seite.
Suchmaschinen benötigen diese Angaben, um deine Seite bei Suchanfragen zu den Schlüsselwörtern finden zu können.
Beschreibung: Hierbei handelt es sich um eine kurze Darstellung dessen, was auf deiner Seite zu findest ist.
HTML-Version: Dies ist die Angabe über die konkrete verwendete Sprache, die du benutzt. Stelle dir deinen Browser als eine Art Dolmetscher vor, der viele verschiedene Sprachen kann. Diese Angabe teilt ihm dann sozusagen mit, von welcher Sprache er auszugehen hat, um sich dann ans Übersetzen zu machen.
2. Schritt
Wie du in deinem HTML-Dokument sicherlich gesehen hast, hat der Editor neben dem Titel und den Meta-Informationen bereits weitere Angaben automatisch erstellt. Diese beziehen sich auf das
Grundgerüst einer jeden HTML-Datei. Sie sieht wiefolgt aus:
<html>
<head>
</head>
<body>
</body>
</html>
Der
html-Tag öffnet das
HTML-Dokument.
Der
head-Bereich- enthält die von dir eben beantworteten Fragen zu deiner Seite sowie den Titel.
- Das bedeutet, dass die dort enthaltenen Informationen nach der Übersetzung durch deinen Browser, sprich bei der Anzeige der eigentlichen Webseite nicht sichtbar sein werden.
Der
body-Bereich- ist der für uns wichtige, denn dort wird der eigentliche Inhalt unserer Webvisitenkarte Platz finden.
- Dies ist demzufolge der Bereich, der im Browser angezeigt wird.
Um den zweiten Schritt abzuschließen, gehe auf Datei
Speichern unter und wähle einen Ort sowie Namen für dein HTML-Dokument.
3. Schritt
Wir kümmern uns zunächst nur um den
Inhalt des
body-Bereichs.
Achte darauf, auf die bereits in den Geboten hingewiesenen Entitäten zu verwenden.
Zum Inhalt: Da wir eine Webvisitenkarte erstellen, haben wir die Gliederungspunkte
- Gruppe
- Ausgangsidee
- Produkt
- Umsetzung
gewählt.
Wie du siehst, haben wir diese
Gliederungspunkte als auch die
Begrüßungsüberschrift in
<h>-Tags geschrieben. Auf diese Weise werden
Überschriften gekennzeichnet, denen du später in der separaten CSS-Datei Gestaltungseigenschaften zuweisen kannst.
Weitere erklärungsbedürftiges Tags sind
<ul> und
<li>. Beide kennzeichnen
Listen, wobei das erste Tag für die eigentliche Liste steht und das zweite für die Listenpunkte, die die Liste enthalten soll.
Mit dem
<p>-Tag kennzeichnen wir einen
Absatz und das
<br>-Tag stellt die
Zeilenumbrüche dar.
4. Schritt
Wir fügen ein
Bild in den oberen Bereich der Webseite ein, das als eine Art Header fungieren soll. Das einzufügende Bild sollte sich im gleichen Ordner wie die HTML-Datei befinden. Mithilfe einer
relativen Pfadangabe setzen wir nun einen
Hyperlink zu dem Bild.
Diese sieht wiefolgt aus:
<img src="klik.jpg" alt="Gruppenfoto KLIK"></img>
img = Image = Bild
src = source = Quelle
alt = alternativer Text (falls die Grafik nicht angezeigt werden kann, wird es dieser Text)
5. SchrittWir erstellen ein
Menü, das die
Gliederungspunkte enthält und sich direkt unter dem Header befindet. Die Menüpunkte sollen uns durch Anklicken jeweils zu den Gliederungspunkten bringen, d.h. wir verlinken die Menüpunkte mit den Überschriften im Text durch sogenannte
Anker.
Nachdem wir die vier Gliederungspunkte erneut aufgeschrieben haben, funktionieren wir sie zu Ankern, also
Hyperlinks zu den inhaltlichen Teilgebieten unserer Webseite um.
Das sieht wiefolgt aus:
<a href="#anker kapitel1">Gruppe</a>
href = hypertext reference
Nun müssen wir natürlich noch festlegen, wo uns diese Hyperlinks hinführen. Da das Menü sich auf unsere im Text gewählten Überschriften bezieht, verlinken wir die Anker so, dass sie zu den Überschriften führen, im Quelltext also genau über diesen stehen.
Das sieht dann so aus:
<a name="anker kapitel1"></a>
Hinweis: Wir haben jeweils nochmal Anker gesetzt, die uns von den inhaltlichen Teilgebieten zurück zum Menü bringen. Da die Vorgehensweise die Gleiche ist, verzichten wir auf eine erneute detaillierte Erklärung.
6. Schritt
Wir strukturieren unseren Inhalt, indem wir einzelne Teile in
<div class>-Tags setzen. Nur so können wir nachher im CSS-Dokument Eigenschaften für einzelne Bereich festlegen. In unserem Fall beschränken wir uns zunächst auf zwei große Blöcke.
Block 1 (div class="bl1") umfasst Header samt Menü.
Block 2 (div class="bl2") beinhaltet sämtliche Teilbereiche, wobei jeder Gliederungspunkt in eine separate div class="bl2" gesetzt wird.
Zusätlich erstellen wir noch zwei extra Klassen für die
Anker, die uns zum Menü zurückbringen sollen (div class="top") und für das
Menü (div class="navirechts") selbst.
Erstellung einer Gruppenwebvisitenkarte
Widmen wir uns nun der
Gestaltung des HTML-Dokuments.
Wie immer gibt es verschiedene Wege, die zum Ziel führen. Da wir jedoch mehrmals auf die strikte
Trennung von
Layout und
Inhalt hingewiesen haben, werden wir uns auf eine Möglichkeit beschränken, die nun im Folgenden genauer erklärt werden soll.
1. SchrittÖffne den CSS-Editor.
Wähle unter File
New.
Speichere die Datei unter
Save as im gleichen Ordner, in dem sich bereits dein HTML-Dokument befindet.
Bevor wir uns den Gestaltungsangaben zuwenden,
verlinken wir das erstellte CSS-Dokument im
head-Bereich unseres HTML-Dokuments wiefolgt:
<
link rel=
"stylesheet" type=
"text/css" href=
"style.css">
Hinter href muss die gespeicherte CSS-Datei geschrieben werden.
2. SchrittEs gibt die unterschiedlichsten
Tags zur Gestaltung. Der TopStyle Lite 3.0-Editor enthält bereits eine Übersicht über Selbige.
Bevor es weitergeht, möchten wir dir das
Box-Modell vorstellen, welches wir in den Geboten bereits erwähnt haben. Mithilfe der Angaben, die du im Screenshot sehen kannst, haben wir sowohl den Body-Bereich als auch die verschiedenen Klassen gestaltet.
Die Gestaltung besteht in nichts anderem als der
Zuweisung von Eigenschaften.Das bedeutet, dass du den Klassen, die du im HTML-Dokument erstellt hast, nun ganz konkrete Layoutaspekte zuordnest.
Dies geschieht wiefolgt:
- Nennung der Gliederungsebene (Überschriften, Klassen, Absätze...)
- Nennung der Eigenschaften in geschweiften Klammern mit Semikolon hinter der jeweiligen Eigenschaft
Bsp.: body-BereichWir haben zunächst eine
Hintergrundfarbe als auch den
Abstand des Inhalts zu den Seitenrändern sowie die Schriftart festgelegt.
In ähnlicher Weise haben wir den
h1- und
p-Ebenen Eigenschaften zugeschrieben
Achte jedoch darauf, dass bei der
Nennung von Klassen ein
Punkt steht.
(Bsp.:
.bl1 {)
Übrig bleibt die Gliederungsebene der
Links. Diese kannst du in folgende
Unterebenen einteilen:
Quelle: selfhtml.org Hinweis: Eine sehr umfangreiche Farbtabelle findest du u.a.
hier. 
