HTML Tutorial 1.1 First Steps21-10-02 

Nachfolgendes Tutorial ist für absolute Anfänger geschrieben.
Wer sich schon mit HTML beschäftigt hat brauch sich das hier ganz bestimmt nicht durch lesen.


<!-- HTML Tutorials by Moongate                          21-10-02 -->
<!--  1.1 First Steps                                             -->

<!-- Als erstes werden ich mal ein paar grundlegende HTML         -->
<!-- Functionen erklären. Gebräuchlicher ist der Begriff "Tags"   -->
<!-- im HTML statt functionen                                     -->

<!-- Ein Tag besteht dabei immer aus einem < Tag Parameter > und  -->
<!-- wird in der Regel mit </ Tag > wieder beendet. Das sieht     -->
<!-- dann zum Beispiel so aus:                                    -->

<html>

<!-- Mit diesem Tag sagen wir dem Webbrowser das eine HTML Seite  -->
<!-- kommt. Normalerweise sollte so jede HTML Seite beginnen.     -->
<!-- Als nächstes wollen wir festlegen wie unsere Webseite aus-   -->
<!-- schaut. Die gesamte Seite wird mit dem sogenannten Body-Tag  -->
<!-- beschrieben. Das sieht dann ungefähr so aus:                 -->

<body bgColor=#DDDDDD >

<!-- In diesem Fall haben wir bereits einen Parameter angegeben   -->
<!-- bgColor - dieser legt die Background (Hintergrund) Farbe     -->
<!-- der Webseite fest. Parameter werden immer Name=Wert weise    -->
<!-- hintereinander geschrieben. < tag p1=w1 p2=w2 > </ tag >     -->

<!-- Wir haben bis jetzt noch keinen "tag" beendet.               -->
<!-- Das liegt daran das unsere Seite "body" erst dann beendet    -->
<!-- werden kann wenn die Seite fertig ist - also ganz am Ende.   -->
<!-- Aber da wir ja noch was schreiben wollen behalten wir uns    -->
<!-- das bis zum Schluß vor ;o)                                   -->

<!-- Farben werden in HTML immer mit einem vorrangestelltem #     -->
<!-- gefolgt von der Hexadezimalen Farbe angegenen.               -->
<!-- #FFFFFF ist demzufolge weiß und #FF0000 ist Rot und so       -->
<!-- weiter. Also nach dem Gesetz: # R G B                        -->

<!-- Als nächstes werden wir mal Text und Textformatierung        -->
<!-- behandeln. Erstmal mußt du wissen das alles was nicht als    -->
<!-- Tag gilt (nicht in < > steht) wird als Text interpretiert.   -->
<!-- Dazu gibt es ein paar einfache Formatierungs Tags.           -->
<!-- <b> Text </b>  ergibt fetten Text                            -->
<!-- <i> Text </i>  ergibt kursiven Text (italic)                 -->
<!-- <u> Text </u>  ergibt unterstrichenen Text (underlined)      -->
<!-- <center> Text </center> schreibt den Textabschnitt zentriert -->
<!-- Hier mal ein Paar Beispiele:                                 -->

<b>Das ist mal ein fetter Text</b><br>
<i>Italic <u>(kursiver)</u>Text</i><br>

<!-- Wie man sieht kann man Tags in eineander schachteln.         -->
<!-- Ein Außnahme Tag ist <br> welches ein einfaches Enter dar-   -->
<!-- stelllt. Im Unterschied zu einem Worddocument ist hier ein   -->
<!-- Enter nicht gleich ein Enter - zum Beispiel:                 -->

Das
 ist
  auch
   ein
    Text

<!-- Wenn du dir das ganze im Webbrowser anschaust wirst du       -->
<!-- feststellen das die Worte einfach hintereinander stehen.     -->
<!-- Wenn du aber trotzdem mal den Text genau so ausgeben willst  -->
<!-- wie du ihn geschrieben hast mußt du das <pre> </pre> Tag     -->
<!-- benutzen. Beispiel:                                          -->

<pre>
Preformated  Text
   ist eine
      tolle Sache
</pre>

<!-- Als nächstes werden wir die Schriftart und Farbe ändern      -->
<!-- dazu gibt es das <font ></font> Tag. Beispiel:               -->

<font color=#FF00FF>Dies ist ein rosa Text</font><br>

<!-- Damit haben wir die Schriftfarbe geändert. Nun mal die Größe:-->

<font color=#FF00FF size=5 >Dies ist ein großer rosa Text</font><br>

<!-- Um die Schriftart zu ändern geben wir noch folgenden         -->
<!-- Parameter an:                                                -->

<font color=#FF00FF size=5 face="Arial">
Dies ist ein großer rosa Arial Text
</font><br>

<!-- Dabei sollte man nur auf solche Schriftarten zurückgreifen   -->
<!-- die jeder User auf seinem Rechner hat - sonst wird er etwas  -->
<!-- anderes zu sehen bekommen als auf deinem Rechner.            -->

<!-- Da Text auf Dauer langweilig ist, werden wir mal ein Bild    -->
<!-- einbauen:                                                    -->

<img src="bild.jpg"><br>

<!-- Für Bilder benutzt man also das <img> Tag. Hier gibt es wie  -->
<!-- bei <br> kein end Tag (also </img> gibts nich).              -->
<!-- Als wichtigster Parameter ist beim img Tag src= zu nennen    -->
<!-- scr gibt den Pfad der Bilddatei an. Wenn du ein Bild hast    -->
<!-- welches bild.jpg heißt und im selben Verzeichnis wie deine   -->
<!-- HTML Datei liegt würdest du obige Zeile angeben.             -->
<!-- Dazu kann man noch andere Parameter angeben                  -->

<img src="bild.jpg" width=100 height=100><br>

<!-- Als letztes "Tag" in diesem Tutorial werden ich noch         -->
<!-- erklären was Tabellen sind und wie sie funktionieren.        -->

<!-- An sich ist eine Tabelle immer in Spalten und Zeilen geteilt -->
<!-- die man durch einen <td> </td> bzw. <tr> </tr> Tag ausdrückt -->
<!-- Hört sich vielleicht kompliziert an - also ein Beispiel:     -->

<table>
<tr><td>Text in erster Zelle </td><td>Text in zweiter Zelle</td></tr>
<tr><td>Text in dritter Zelle</td><td>Text in vierter Zelle</td></tr>
</table>

<!-- Was heißt das nun: mit <table> </table> wird eine Tabelle    -->
<!-- angefangen bzw. beendet. Als nächstes wird die erste Zeile   -->
<!-- (englisch Row) angefangen. In ihr wiederrum die erste Spalte -->
<!-- in der unser erster Text zu finden ist. Anschließend wird    -->
<!-- diese Spalte wieder geschlossen (</td>) und die nächste      -->
<!-- angefangen und so weiter. Das Ergebnis ist eine 2 x 2 Felder -->
<!-- große Tabelle so wie sie hier im Quellcode aussieht.         -->

<!-- Aufgabe: Versuche mal die Textformatierungen un Bilder in    -->
<!-- einer Tabellenzelle anzuwenden .                             -->
<!-- So, ich hoffe jetzt kann auch ein absoluter Anfänger etwas   -->
<!-- mit HTML anfangen ;o)                                        -->