Hallöchen,
so nun soll es losgehen und ich werde mich heute mit einigen grundlegenden Tags beschäftigen. Ich will nun die Startseite programmieren. Darauf soll natürlich ein Titel zu finden sein, das Menü und ein einleitender Text.
Den Titel will ich mit einer Graphik gestalten, da diese noch nicht fertig ist werde ich diese erstmal außen vor lassen.
Das Menu mit allen Untermenüs werde ich als Liste erstellen. Dazu benutze ich eine ungeordnete Liste deren Tag ist <UL> </UL>. Natürlich gibt es auch eine geordnete Liste. Der Tag dafür ist <OL></OL>. Der Unterschied zwischen beiden Formen ist, daß die geordnete Liste automatisch durch numeriert wird während die ungeordnete nur Listenpunkte vorangestellt bekommt. Die Form der Numerierung bzw. der Stil (römisch Zahlen, Dezimalzahlen, Großbuchstaben, usw.) kann selbst definiert werden, genauso wie das aussehen der Listenpunkte (Kreis, Quadrat, usw.). Jeder Listenpunkt wird durch das <LI></LI> Tag gekennzeichnet. Das <LI> Tag kann wiederum Listen, Texte, Bilder usw. beinhalten. Die Möglichkeit Listen zu verschachteln werden wir gleich mal nutzen. Es gibt noch eine weitere Listenart, die sich Definitionsliste nennt, dazu kommen wir später wenn ich sie benötige.
Mein Menü soll nun auf weitere Dokumente in diesem Projekt verweisen. Dafür benötigen wir das <A> Tag, welches als Anker Tag bezeichnet wird. Um auf andere Dokumente zu Verweisen brauche ich noch das href-Attribut (hyper-reference). Der Anker zum Dokument Geschichte in dieser Seite müßte dann so aussehen :
<a href=“geschichte.htm“>Geschichte</a>
Die möglichen Attribute eines Tags werden immer innerhalb des Starttags gesetzt. Für das href –Attribut wir immer der vollständige Pfad zum referenzierten Dokument benötigt. Um z.B. auf die PC.Techniker Seite zu referenzieren würde man folgendes schreiben:
<a href=”http://www.pc-techniker.org“>PC-Techniker Portal</a>
Eine weitere nette Möglichkeit mit Ankern zu arbeiten ist die Navigation innerhalb langer Texte. Dazu gibt man dem Anker ein name-Attribut und verweist an gewünschter Stelle auf den Namen.
<h1><a name=“Anfang“>Überschrift</a></h1>
langer text
<p><a href=“#Anfang“>zum Anfang</a></p>
So nun habe ich auch noch schnell die beiden letzten neuen Tags für heute eingeführt. Das Tag <p></p> wird für einfache Textabsätze gebraucht. Dieses Tag ist ausschließlich für Text gedacht. Innerhalb dieses Tags dürfen keine sog. blockerzeugenden Tags wie Überschriften, Listen usw. stehen.
Apropos Überschriften; Dazu verwendet man die Tags <h1></h1> bis <h6></h6>. Man kann also 6 verschieden Überschriften deklarieren. Diese haben schon Textgrößen und Stile vorgegeben und sind hierarchisch zu verstehen h1 ist immer die Überschrift mit der höchsten Ordnungszahl. H6 immer die niedrigste.
Ups, ein Tag hätte ich fast vergessen. Das <div></div> Tag. Dies bezeichnet einen allgemeines Blockelement ohne nähere Inhaltsfestlegung. Jedes andere Tag kann darin enthalten sein. Dieses Tag wird hauptsächlich dazu verwendet Bereich einzuteilen, die man dann separat mit CSS gestalten kann.
Alle aufgeführten Tags kann man natürlich schön Gestalten, mit Farben versehen usw. Doch dazu möchte ich CSS verwenden. Also werde ich mich nun erstmal auf die funktionellen Dinge beschränken und später das Styling bearbeiten. Der Weg ist also noch lang und steinig.
So sieht nun der Code aus:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stephans Whiskey-Seite </title>
</head>
<body>
<div>
<ul>
<li><a href="Whiskyhome.htm">Home </a>
<li><a href="geschichte.htm">Geschichte </a>
<li><a href="herstellung.htm"> Herstellung</a>
<ul>
<li><a href="herablauf.htm">Herstellungsablauf </a>
<li><a href="hersteller.htm">Hersteller </a>
<li><a href="abfueller.htm">Abfüller </a>
</ul>
<li><a href="regionen.htm">Regionen </a>
<ul>
<li><a href="high.htm">Highlands </a>
<li><a href="spey.htm">Speyside </a>
<li><a href="low.htm">Lowlands </a>
<li><a href="islay.htm">Islay </a>
<li><a href="campbell.htm">Campbelltown </a>
</ul>
<li><a href="mtasti.htm">Meine Tastings </a>
<ul>
<li><a href="besuche.htm">Tasting-Besuche </a>
<li><a href="sammlung.htm">Meine kleine Sammlung </a>
</ul>
<li><a href="links.htm">Links </a>
<li><a href="gast.htm">Gästebuch </a>
</ul>
</div>
<div >
<h1>Wilkommen auf meiner Whiskey-Seite </h1>
<p >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</body>
</html>Wie die Seite nun aussieht folgt mit dem nächsten Kapitel
gruß madcat
Thema: Wie erstelle ich eine Homepage unter Html (1) (Gelesen 16474 mal)