fragen zu homepagedownloads

::erste HTML-Grundlagen:: ::Einfügen von Bildern und Tabellen:: ::Layer::

Fragen zu Homepagedownloads

Die Rubrik Homepagedownloads ist auf dieser Seite nicht neu, dafür aber nun endlich im neuen Design.

Für einige die noch keinen Umgang mit der Kreation von eigenen Homepages haben, werde ich hier einen kurzen Exkurs zur Erstellung bzw. der richtigen Handhabung der auf dieser Homepage zur Verfügung stehenden Downloads (es bezieht sich dabei ausschließlich auf die Downloads!!!) geben.

Als erstes öffnet ihr die gewünschte Seite unter der Rubrik Homepagedownloads. Dies ist immer kurz angegeben mit einem Stichwort, wie z.B. Final Fantasy. Darauf soll sich schließen lassen, das dieser Download ein Final Fantasy Cover als Hintergrund hat (welchen Inhalt ihr letztenendes eurer Seite gebt, liegt nicht in meiner Macht; dies sind lediglich Design(!!!)vorschläge).

Auf der geöffneten Seite findet ihr schon die genaue Anleitung wie ihr nun weiter verfahren sollt. Falls ihr doch nicht mit der Materie klarkommen solltet, dann weise ich euch jetzt kurz in die Grundlagen der Homepageprogrammierung ein.

Das Grundgerüst einer Homepage sieht immer wie folgt aus:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Neue Seite 1</title>

</head>

<body> </body>

</html>

Sieht erst mal so aus als würde man nur Bahnhof verstehen, aber ganz so schlimm ist es nun auch wieder nicht. Im Grunde genommen könntet ihr diesen HTML-Code so übernehmen und hättet eine weiße Seite. Nun soll diese Seite ja noch beschrieben werden, aber bevor es richtig losgeht, wird das Teil gespeichert.

<title>Neue Seite 1</title>

Dies ist kein schöner Titel, wie wäre es mit:

<title>schnelle Autos</title>

Nun habt ihr den Titel, jetzt geht es aber richtig ans Eingemachte. Zwischen den Punkten <body> </body> wird nun der Inhalt eurer Seite festgeschrieben. Im Falle der Final Fantasy Seite wird im ersten <body> noch etwas eingefügt. Dies sieht dann so aus:

<body bgcolor=#769CCB background="test%2002.JPG" link="#FF0000">

Was ist das nun wieder??? Ganz einfach, bgcolor heißt übersetzt Hintergrundfarbe (Backgroundcolor) und die Farbe ist jene mit der Codierung 769CCB. In diesem Falle hätte man das auch weglassen können, da der nächste Punkt entscheidend ist. background="test%2002.JPG" bedeutet, das für den Hintergrund das Bild test 02.JPG gewählt wurde. Beachtet hierbei, das Leerzeichen in der HTML-Codierung immer mit %20 dargestellt werden. Sehr wichtig, nicht vergessen!!! Der nächste Punkt ist link="#FF0000", bedeutet, das jeder Link im "body" mit der Farbe der Codierung FF0000 dargestellt wird.

Kurze Zusammenfassung: Wenn ihr eine einfache Homepage haben wollt, ohne aufwendige Hintergrundbilder, dann könnt ihr diesen Punkt background="test%2002.JPG" weglassen und ihr bekommt eine Homepage komplett im Hintergrund mit dieser Farbe.

So nun habt ihr entweder ein Hintergrundbild oder eine Hintergrundfarbe (oder beides) für eure Seite festgelegt. Nun könnt ihr anfangen Text in eure Seite zu schreiben z.b.:

<p><b><font color="#FFFFFF">Hallo, diese Seite handelt über schnelle Autos.</font></b></p>

Der Punkt <p> leitet ein, das ihr einen Text verfassen wollt. Bei <b> wird der Text in Fettschrift geschrieben und <font color="#FFFFFF"> zeigt euch an in welcher Farbe der Text später auf eurer Homepage erscheint (in diesem Fall ist dies die Codierung für weiß). Nun kommt der eigentliche Text: Hallo, diese Seite handelt über schnelle Autos. Wenn euer Text fertig ist, müsst ihr eure Angaben jetzt beenden. Das heißt ihr legt das nur, in diesem Fall, für diesen Satz fest. Deswegen: </font></b></p>

So nun könnt ihr so viele Sätze schreiben wie ihr wollt, aber immer anfangen mit <p> und enden mit </p>. Es ist euch überlassen ob ihr vorrangig Fettschrift wählt, ihr könntet das ganze doch auch mal Kursiv schreiben?! Dann gebt nach dem <p> bitte <i> und am ende eures Satzes </i> und wieder </p> ein um den Satz zu beenden.

Nun wollt ihr euren Text vielleicht auch noch in verschiedenen Größen angeben?? Kein Problem. Wenn ihr die Farbe für euren Text festgelegt habt, <font color="#FFFFFF"> , dann könnt ihr size="1" noch mit eingeben, sieht dann so aus: <font color="#FFFFFF" size="1"> Der Text erscheint dann bei folgenden Größen so:

size="1" Hallo, diese Seite handelt über schnelle Autos.

size="4" Hallo, diese Seite handelt über schnelle Autos.

size="7" Hallo, diese Seite handelt über schnelle Autos.

Wie ihr recht seht könnt ihr die Schriftgröße bis zu 7 einstellen.
Aber selbstverständlich könnt ihr nicht nur Text eingeben, sondern auch Bilder darstellen. Wie man ein Bild einfügt ist eigentlich recht einfach. Mit einem HTML Editor geht es ganz schnell, aber uns interessiert selbstverständlich der Quelltext.

So sieht das im Editor aus. Hier kommt der Quelltext:

<img border="0" src="Nana%2025.jpg" width="390" height="259">

Nehmen wir das Gekritzel mal wieder auseinander. Jedes Bild lässt sich zusätzlich noch mit einer Umrandung darstellen, in diesem Fall gibt es keine. Dies zeigt uns das hier <img border="0" . Diese Art von Codierung wird später bei den Tabellen noch wichtig sein, aber nun weiter im Text. Wir sehen das das Bild Nana 25.jpg heißt (src="Nana%2025.jpg"). Denkt daran was ich im Vorfeld über Freizeichen gesagt habe, diese werden in der HTML Sprache immer mit %20 dargestellt, so auch hier. Die nächsten beiden Punkte width="390" height="259"> zeigen die Breite (width) und die Höhe (height) und das Ende (>) des Bildes an. Um Breite und Höhe zu ändern ist es besser einen Bildeditor zu rate zu ziehen, oder wenn nicht vorhanden dann nehmt einfach ein normales Zeichenprogramm (z.b. Paint) und vergrößert/verkleinert das Bild. Dies ist deshalb so wichtig, denn wenn ihr die Werte automatisch bei der Programmierung ändert können später auf eurer Seite hässliche Verzerrungen des Bildes auftreten, und das will doch niemand.

Kommen wir nun zur Darstellung von Tabellen. Dies hier ist eine recht einfache und weiter unten findet ihr wieder den Quelltext dazu.

<div align="justify">

<table border="3" width="100%">

<tr>

<td width="50%"> </td>

</tr>

</table>

</div>

Die Codierung <div align="justify"> sagt uns, das die Tabelle ausgerichtet ist. Kommen wir nun zur Umrandung. Diese Tabelle hat die Umrandung mit der Stärke 3 <table border="3" und eine Breite von 100% width="100%">. Wenn ihr ganz clever sein wollt, könnt ihr eure Tabelle unsichtbar machen, indem ihr die Umrandung, wie beim Bild, auf "Null" setzt. Dann wird es etwas komplizierter. Die Tabelle hat eine Zeile mit 2 Spalten.

<tr>

<td width="50%"> </td>

</tr>

Jede Spalte hat natürlich eine Breite von 50% <td width="50%"> (zur Erinnerung die Tabelle hatte eine Gesamtbreite von 100%, selbstverständlich kann dieser Wert geändert werden, aber dann muss auch die Größe der Spalten beachtet werden), dann kommt ein Freizeichen   und die Spalte endet </td>. Nun könnt ihr wieder (wie oben beschrieben) einen Text oder ein Bild anstelle des Freizeichens in eine Spalte setzen.

Wenn nicht mehr Spalten kommen wird die Zeile mit </tr> abgeschlossen. Dann kann wieder eine neue Zeile angefangen werden, wieder mit <tr> und diese muss mit </tr> enden. Die Tabelle schließt ihr mit </table></div> ab. Mit dem selben Anfangsschema kann wieder eine neue Tabelle erstellt werden.

Kommt ihr gut mit??? Dann ist ja gut, denn jetzt ziehen wir noch ein bisschen an der Leine. Nun geht es weiter mit ein paar Spezialitäten; den Layern. Ich liebe Layer, ich arbeite fast ausschließlich mit ihnen, denn dadurch kann man recht einfache Effekte auf ein normales Hintergrundbild zaubern.

Nehmen wir uns mal wieder den Quelltext vom Homepagedownload Final Fantasy zu Gemüte. Dort lautet der 1te Layer:

<div id="Layer1" style="width: 798; height: 423; position: absolute; left: 0; top: 0; z-index: 1">

<img src="test%2001.JPG" width="741" height="423"></div>

Nun haben wir wieder, wie bei der Tabelle diesen TAG (Beschreibung eines Dokumenteninhaltes, wie z.B.: <p> oder <table>) <div id="Layer1" diesmal bezieht er sich auf den 1ten Layer. Dann werden nur die Größe style="width: 798; height: 423;, die Position innerhalb des HTML position: absolute; und die Entfernung zum linken Rand left: 0; wie auch zum Anfang top: 0; gesetzt. Zum Schluss nur noch mal die Indexierung des Layer z-index: 1">. Ihr könnt euren Layer positionieren wo ihr wollt, ändern müsst ihr dabei nur die Werte hiervon left: 0; top: 0; . Ihr könnt den Layer ganz weit rechts stehen haben und etwas vom oberen Rand abgesetzt, ausschauen tut es dann so: left: 650; top: 30;. Probiert es einfach mal aus.

Innerhalb dieses Layer wurde ein Bild gesetzt (es kommt wieder die selbe Schreibweise, wie schon oben beim Einfügen von Bildern erwähnt) <img src="test%2001.JPG" width="741" height="423">. Auffällig ist, das das Bild nicht ganz so breit ist wie der Layer (Bild: width="741" Layer: width: 798), aber so schlimm ist das nicht. Den Layer beendet ihr mit </div>.

Natürlich kann man nicht nur Bilder in einen Layer setzen, sondern auch komplette Seiten. Dies wird dann so dargestellt (anstelle der Codierung für ein Bild, also nach z-index: 1">):

<iframe framespacing=0 framepadding=0 frameborder=0 allowtransparency="true" marginwidth=0

marginheight=0 width=129px height=510 src="navi.htm"></iframe>

Wichtig für euch sind nur diese Punkte width=129px height=510 src="navi.htm">, sonst bleibt es bei der Verlinkung einer Seite immer bei dieser Codierung:

<iframe framespacing=0 framepadding=0 frameborder=0 allowtransparency="true" marginwidth=0 marginheight=0

Oben angegeben habt ihr wieder die Breite width=129px und die Höhe height=510 der darzustellenden Seite. Dann erfolgt die Verlinkung src="navi.htm">. Diese Seite soll in dem Layer aufgelistet werden. Bei dieser Verlinkung ist es nicht wichtig, das die Seite in einem neuen Fenster geöffnet wird (sonst Codierung src="navi.htm" target="_new">). Beachten solltet ihr nur bei der Darstellung der Seite navi.htm, das diese auch genau in den Layer passt wenn nicht, werden unten und an der rechten Seite des Layer, Scrollfunktionen erscheinen. Den Layer beendet ihr einmal mit </iframe> und dann wie gehabt mit </div>.

Ihr könnt so viele Layer in eure Seite packen wie ihr lustig seit, beachtet aber die Nummerierung

<div id="Layer1" style="width: 798; height: 423; position: absolute; left: 0; top: 0; z-index: 1"><img src="test%2001.JPG" width="741" height="423"></div>

und der nächste Layer wäre dann

<div id="Layer2" style="width: 798; height: 423; position: absolute; left: 0; top: 510; z-index: 2"><iframe framespacing=0 framepadding=0 frameborder=0 allowtransparency="true" marginwidth=0 marginheight=0 width=129px height=510 src="navi.htm"></iframe></div>.

Oder ihr nutzt einen Layer einfach nur um einen Text rein zuschreiben. Dies macht ihr wieder wie oben beschrieben. Fall ihr keinen Plan mehr habt, dann hier ein Beispiel:

<div id="Layer3" style="width: 798; height: 423; position: absolute; left: 20; top: 940; z-index: 3"><p><b><font color="#FFFFFF">Ich bin müde und habe Hunger!!!</font></b></p></div>

Wenn ihr Euch jetzt die Quelltexte der angebotenen Seiten reinzieht, blickt ihr hoffentlich etwas klarer drein, sonst meldet euch noch mal.

Dies war mein kleiner Exkurs. Viel Spaß auf meinen Seiten.

Eure
Katzura Hoji