Da ich gestern Spaß daran hatte eine einfache Seite mit HTML aufzubauen, füge ich heute noch einen 2. Teil hinzu.
So sieht es aus Um den HTML Code zu sehen, beim Firefox oder IE die rechte Maustaste betätigen und im Kontextmenü “Seitenquelltext anzeigen” oder “Quelltext anzeigen” auswählen.
Ich habe die Seite dahin verändert daß nun Zeitbanner eingebunden sind.
Änderungen:
1. Am Anfang der Datei folgendes eingefügt für XHTML 1.0
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
2. Der Titel, Beschreibung und Keywords wurden angepasst an die neue Seite
3. Stil der Seite verändert. Ich verwende für meine Seiten immer einen externe CSS Datei. Hier habe ich es in die Seite integriert. Fortgeschrittene User können hier viele Anpassungen vornehmen.
<style type=“text/css“> Kommentar: einleitendes Tag für den Stil. Definition der Stylesheet Sprache.
body{ Style für den Inhalt der Seite
border: 2px solid black; Ich verwende eine Umrandung die 2 Pixel breit ist und die Farbe schwarz hat.
text-align: center; Text mittig
margin: auto; Kommentar: Abstände zum Außenrand automatisch anpassen
text-align: left; Text linksbündig. Die letzten 3 CSS Angaben bewirken, daß die gesamte Seite zentriert wird.
width: 800px; Die Seite hat eine Breite von 800px, da das Bild auch 800 Pixel breit ist.
}
</style> Style Tag wird geschlossen
Die Style Einstellungen können auch weggelassen werden, wenn Ihr keine Umrandung verwendet.
4. <p> Absatz
<b>60 – 20160 Minuten</b> Solange wird das Banner eingeblendet, fett dargestellt.
<br /> Zeilenumbruch
<iframe name=“stundenbanner“ height=“90″ width=“468″ marginwidth=“0″ marginheight=“0″ scrolling=“no“ border=“0″ frameborder=“0″ src=“http://www.andivista.com/stunde/stundenbanner2.php?id=6″> Ihr Browser unterstützt Inlineframes nicht. </iframe>
Mit dem Iframe ( Inline Frame ) werden externe Inhalte in die Seite eingebunden. In dem Fall von der Seite andivista.com. Der Rahmen ( frame) ist 468 Pixel hoch und hat eine Höhe von 90 Pixeln, der Inhalt des Rahmens beginnt in der oberen linken Ecke ( marginwidth=“0″ marginheight=“0″) Es soll kein Scrollbalken erscheinen ( scrolling=“no“ ) und keine Umrandung ( border=“0″ ). Bei Browsern die keine Iframes unterstützen wird der Text „Ihr Browser ünterstützt Inlineframes nicht“ angezeigt. Könnte auch weggelassen werden, da Ich keinen kenne der dies nicht ünterstützt. Ausser textbasierte Browser aber die würden auch keine Bilder anzeigen.
</p>
Dieser Schritt wiederholt sich für alle 8 Banner. Um anderen die Möglichkeit zu geben die Banner bzw. den Quelltext mitzunehmen habe Ich dann eine Tabelle erstellt.
<table border=“1″ width=“550″> Tabelle mit Umrandung mit einer Breite von 550 Pixel erzeugen.
<tr> erzeugt eine Zeile in einer Tabelle
<td> Erzeugt eine Zelle wo die Inhalte stehen
Dazwischen habe Ich Text eingetragen. Diesen habe Ich mit einem HTML Editor bearbeitet. Das musste sein, da sonst HTML z.B. den Text <center> als Befehl ausführen würde.
</td> schließen des Tags
</tr> schließen des Tags
</table> schließen des Tags Tabelle
Hinweis Iframe: Viele Anbieter bieten Ihre Inhalte an, die dann an der Stelle wo bei meinem Script das Iframe beginnt ( siehe 4. ) eingesetzt werden können. Verwende Ich oft um z.B. das Wetter oder Nachrichten einzubinden. Einige bieten auch Javascript zum einbinden an.
Beispiele:
Webfan Zeitbanner 4 U
Swinging Cook – Zeitbanner zum mitnehmen
Tipp: Beim Besuch einer Webseite den Quelltext aufrufen um zu sehen wie die Seite aufgebaut ist. Rechte Maustaste drücken und „Quelltext anzeigen“
Abkürzungen HTML Teil 1 und 2 / Bedeutung
<HTML> / Hyper Text Markup Language
<H1> / Heading
<A HREF > / Anchor Hyper Reference
<IMG SRC > / Image Source
<b> / Bold
<P> / Paragraph
<TR> / Table Row
<TD> / Table Data
<BR /> / Break
<Iframe> / Inline Frame
Frohe Pfingsten !
Nachtrag: Da ich einen Hinweis bekommen habe (siehe Kommentare), ist hier eine zweite HTML Datei die von http://validator.w3.org/ als XHTML 1.0 Transitional validiert ( überprüft) wurde. In der Tabelle sind jetzt andere Inhalte. Die Prüfsiegel habe ich unten an die Seite gestellt. Beim IE Version 6 ist der Rahmen jetzt nicht mehr vorhanden.
