ZiB`s kleiner HTML Einsteiger-Kurs
Werbung
ZiB’s kleiner HTML Einsteiger-Kurs 1) Erstellen einer ersten HTML-Datei Dateien, die eine Internetseite bilden sind .html-Dateien (man kann das L in der Dateiendung übrigens auch weglassen). Diese Dateien enthalten den "Quelltext"- und das ist viel mehr als auf der Site später zu sehen ist, denn man muss z.B. genau sagen wo ein Absatz oder Bild hinsoll oder was fett sein soll. Jede einzelne Datei enthält EINEN Quelltext mit dem Inhalt für EINE Internetseite, also wirklich nur EINER angezeigten Seite im Browser. Erst mehrere Dateien zusammen bilden miteinander verlinkt eine komplette Website. - Öffne Notepad, du hast jetzt eine leere Schreibfläche für deinen ersten Quelltext vor dir - Gib folgendes ein (das ist ein Grundgerüst was JEDER HTML-Quelltext enthalten muss!!! Fange immer so an!): <html> <head> </head> <body> </body> </html> HTML-Befehle werden immer in diese Klammern gesetzt (wie beim BB-Code die eckigen). Ein Schrägstrich bedeutet immer wie im BB-Code "Ende eines Befehls". Die eben verwendeten Befehle bewirken folgendes: <html> = Beginnt einen HTML-Quelltext JEDER HTML-Quelltext ist in zwei Teile gegliedert, die nennt man "Head" und "Body" <head> = Beginnt den "Head" eines HTML-Quelltexts (merke dir erst mal nur: Der "Head" muss da sein, aber am Anfang wirst du sonst nichts damit zu tun haben) <body> = Beginnt den "Body eines HTML-Quelltexts (Im "body" steht der Inhalt der Site, das was im Browser später angezeigt wird) Jetzt kommt der eigentliche Inhalt. Schreibe etwas in den Body (also da, wo ich eine Leerzeile freigelassen habe). <html> <head> </head> <body> lalala </body> </html> Das neu eingefügte "lalala" würde nun im Internet zu sehen sein, denn alles was ohne eckige Klammern drumrum im Body steht wird als Seiteninhalt angezeigt. Wie deine erste Seite im Internet aussieht kannst du folgendermaßen herausfinden: - Klicke auf "Datei", "Speichern unter..." - Wähle bei "Dateityp" "Alle Dateien *.*" aus - Gib einen Dateinamen mit der Endung .htm ein (zum Beispiel: test1.htm) - Wähle einen Ort und klicke auf "Speichern" Tipp: Du solltest die Dateinamen am besten klein schreiben und keine Leer- und Sonderzeichen verwenden. Jetzt kannst du das Editor-Fenster mit deinem Quelltext schließen. Doppelklicke dann auf die Datei "test1.htm" und sie wird mit deinem Browser geöffnet. Da steht jetzt der Text den du im Quelltext eingegeben hast, nämlich "lalala". Wenn du jetzt den Text erneut ändern willst gehe folgendermaßen vor: - Klicke im Internetexplorer während du deine Seite ansiehst auf "Ansicht", "Quelltext" - Der Editor wird automatisch geöffnet und du kannst den Quelltext der test1.htm-Datei verändern 2) Die wichtigsten Befehle zum gestalten einer Homepage Die folgenden Beispiele müssen immer in der Rohform deiner HTML-Datei zwischen <body> und </body> geschrieben werden, ich erwähne das nicht mehr extra. ZEILENUMBRUCH : <br> Eine neue Zeile im Quelltext bedeutet leider nicht automatisch auch eine neue Zeile auf der Website. Du musst also immer wenn du eine neue Zeile anfangen willst einen entsprechenden Befehl anwenden. Wichtig dabei: Man kann um größere Zeilenabstände zu erzielen nicht mehrere <br>-Befehle ohne Text dazwischen aneinanderreihen (es würde dann trotzdem nur eine Zeile Abstand werden). Das geht nur durch einen Trick: setze hinter jeden ein &nbsp; :-) <br> muss nicht durch ein </br> beendet werden!! Quelltext-Beispiel: Hallo, mein Name ist Janina! <br>Das hier ist meine erste Homepage. <br>&nbsp;<br>Ich hoffe, sie gefällt dir. LINKS : <a> Links sind einfach nur Verweise von einer HTML-Datei auf eine andere HTML-Datei. Man kann auch auf eine andere Datei linken, zum Beispiel auf eine MP3- diese könnte dann runtergeladen werden. Man weist im Quelltext einem kurzen Text eine Datei zu mit der er dann verlinkt ist. Wie mit [url] im BB-Code. <a> muss man durch ein </a> beenden!! Quelltext-Beispiel: Hier geht es zu den anderen Teilen meiner Homepage: <br><a href=fotos.htm>Mein Foto-Album</a> <br><a href=gedichte.htm>Gedichte von mir</a> <br><a href=http://www.sp-forum.de>Mein Lieblingsforum</a> Wie du siehst sieht der HTML-Befehl für einen Link immer so aus: <a href=Dateiname>Linkname</a>. Die beiden Dateien müssen sich natürlich im selben Ordner befinden, wie die Datei von der du darauf linkst. BILDER: <img> Bilder einzufügen ist ziemlich einfach, der Befehl hier für lautet <img src=Dateiname>. <img> muss nicht durch ein </img> beendet werden!! Quelltext-Beispiel: <img src=bild.jpg> Wieder muss das Bild im selben Ordner liegen (oder du musst die gesamte URL eingeben, falls es sich woanders im Internet befindet). Text verändern Hier sind ein paar Beispiele, wie du Text anders darstellen kannst. Man kann diese HTML-Befehle auch kombinieren (z.B. <b><i>Hallo</i></b>. Diese Befehle müssen immer beendet werden!! Quelltext-Beispiel: <b>Fetter Text</b> <i>Kursiver Text</i> <u>Unterstrichener Text</u> <h1>Eine große Überschrift</h1> <h2>Eine mittlere Überschrift</h2> <h3>Eine kleine Überschrift</h3> <font color=red>Rote Schrift</font> 3) Body-Einstellungen Bisher ging es nur um den Inhalt der Seite an sich, also den Body. Man kann dem Body auch direkt Befehle zuweisen, die dann die komplette Seite betreffen (z.B. um die Hintergrundfarbe zu ändern). Dafür ändert man den <body>-Befehl, und das kann dann so aussehen: <html> <head> </head> <body text=blue bgcolor=white link=gray alink=gray vlink=black background=bild.gif> lalala </body> </html> Wenn du dir das nun im Browser ansiehst wirst du feststellen dass die Farben sich geändert haben. Die Befehle bewirken folgendes: text = legt die Textfarbe fest (normaler Text) bgcolor = legt die Hintergrundfarbe fest link = bisher noch nicht angeklickte Links alink = gerade aktiver Link vlink = schon besuchte Links background = legt ein Hintergrundbild fest (mach das besser nicht... die Seite lädt sonst zu lange bei Modem-Benutzern. Wenn, dann nimm nur ein kleines Bild, das dann als Muster angezeigt wird) Farben Die Farbangaben in HTML kann man zwar anfangs am einfachsten durch Eingabe der englischen Wörter machen, aber da gibt es nur 16 Farben. Willst du andere Farben benutzen, musst du deren HexadezimalCode kennen. Diesen findest du am schnellsten mit Hilfe von Flash raus raus, da steht er nämlich bei jeder Farbe die du auswählst dabei. Es gibt aber auch extra Tabellen dafür im Internet. Du kannst also z.B. statt "text=red" auch "text=#ff0000" schreiben. 4) Tabellen Vielleicht fragst du dich wozu du Tabellen auf Websites überhaupt brauchst. Oft sieht man sie gar nicht, aber sie sind enorm wichtig, wenn du ein ordentliches Design auf die Beine stellen willst. Dabei werden meistens unsichtbare Tabellen benutzt, das heißt ihre Rahmenbreite wird einfach auf 0 gesetzt oder ihre Rahmenfarbe entspricht der Hintergrundfarbe. Ihr Zweck ist, die Site ganz genau nach deinen Vorstellungen einzuteilen. Mit Hilfe von Tabellen kannst du angeben, das oben links Text sein soll, rechts daneben ein Bild und darunter wieder Text. Ohne Tabellen könntest du alles immer nur untereinander setzen. Folgende Tabellen-Befehle sind für uns erst mal wichtig: <table>...</table> = Beginnt/beendet eine Tabelle <tr>...</tr> = Beginnt/beendet eine Tabellenzeile <td>...</td> = Beginnt/beendet eine Tabellenzelle Zwischen <td> und </td> steht immer der Inhalt einer Tabellen-Zelle. Tabellen werden IMMER nach dem gleichen Schema aufgebaut, nämlich ineinander verschachtelt: beliebig viele Zellen ("<td>...</td>") zwischen "<tr>" und "</tr>"! Beliebieg viele Zeilen ("<tr>...</tr>") zwischen "<table>" und "</table>"! Es ist eigentlich ganz logisch: Erst beginnst du eine Tabelle. In diese setzt du dann erst mal eine Zeile rein. In diese Zeile setzt du nun beliebig viele Tabellenzellen. Willst du weitere Zeilen einfügen dann müssen die immer genausoviele Zellen enthalten wie die erste Zeile! Denn Tabellen sind immer wie ein Gitter aufgebaut. Es gilt: - übereinanderliegende Zellen sind gleich breit - nebeneinanderliegende Zellen sind gleich hoch - jede Zeile enthält gleih viele Zellen Nachdem du also weitere Zeilen mit Zellen eingefügt hast (jede Zeile und jede Zelle muss beendet werden bevor eine neue kommt!) kannst du die Tabelle beenden. Genug geredet, das Beispiel macht es vielleicht deutlicher: Eine Tabelle mit 3 Tabellen-Zeilen mit je 2 Zellen. <table> <tr><td>Text</td><td>Mehr Text...</td></tr> <tr><td>Nochm mehr Text</td><td>Lalala</td></tr> <tr><td>Dum<br>Dum</td><td><img src=bild.jpg></td></tr> </table> Und noch ein Beispiel, dieses soll ein paar Möglichkeiten verdeutlichen um Tabellen als Layout-Methode zu benutzen. Man kann nämlich festlegen, wie breit und hoch eine Tabelle oder Tabellenzelle sein soll. <table border=0 width=500> <tr><td width=300>...</td><td width=200>...</td></tr> <tr><td>...</td><td valign=bottom align=right>...</td></tr> </table> Man kann den Tabellen-Befehlen also noch zusätzliche Attribute zuweisen- wie dem <body>-Befehl. Erklärung: - border=0 (die Tabelle soll keinen Rand haben) - width=500 (die Breite der Tabelle soll 500 Pixel betragen, die erste Zelle soll 300, die nächste 200 Pixel breit sein) - valign=bbottom (in der letzten Zelle soll der Inhalt unten in der Zelle angezeigt werden (normal wäre er oben)... außer "bottom" kannst du "top" oder "middle" angeben) - align=right (In der letzten Zelle soll der Inhalt rechtsbündig angezeigt werden (normal wäre links)... außer "right" kannst du "left" oder "center" angeben) Untereinanderliegende Zellen sind wie gesagt automatisch gleich breit. Daher brauchst du nur in den Zellen der ersten Tabellenzeile die Breite anzugeben, der Rest wird daran angepasst. 5) Center Ich hab noch einen wichtigen Befehl vergessen, der aber ganz einfach ist. <center>...</center>. Alles was dazwischen steht (Bilder, Tabellen, Text) wird zentriert statt linksbündig auf der Site dargestellt.
