Inhaltsverzeichnis

Einfhrung in HTML............................................................................................................................2 Was ist HTML?................................................................................................................................2 Die erste HTML Seite......................................................................................................................2 Kommentare.....................................................................................................................................5 Schriftformatierung..........................................................................................................................5 berschriften...................................................................................................................................6 Horizontale Linien ..........................................................................................................................7 Zeilenumbruch.................................................................................................................................9 Leerzeile.........................................................................................................................................10 Schriftart........................................................................................................................................11 Tabellen..........................................................................................................................................14 Was ist eine Tabelle?.................................................................................................................14 Zeilen.........................................................................................................................................15 Zellen.........................................................................................................................................15 Kopfzelle...................................................................................................................................15 Zellen verbinden........................................................................................................................16 Bilder.............................................................................................................................................17 Links..............................................................................................................................................20 Frames............................................................................................................................................21 Formulare.......................................................................................................................................23 Textfelder..................................................................................................................................24 Textbereiche..............................................................................................................................24 Checkboxen ..............................................................................................................................25 Radiobuttons.............................................................................................................................26 Auswahllisten............................................................................................................................27 Submit-Buttons.........................................................................................................................28 Passwortfelder...........................................................................................................................28 versteckte Formularfelder.........................................................................................................28 Stiltipps..........................................................................................................................................30

Einfhrung in HTML
In diesem Tutorial mchte ich die wichtigsten Grundlagen von HTML erklren. Fehler knnen natrlich nicht ausgeschlossen werden und fr Tipps bin ich natrlich dankbar. Wenn du HTML lernen willst, gibt es natrlich einen einfachen Tipp. Probiere manche Sachen einfach aus, dadurch kannst du vieles lernen. Durch einfaches testen und ausprobieren kannst du ja nichts kaputt machen. Also nur Mut zum ausprobieren. Denn wie sagt man so schn Probieren geht ber Studieren.

Was ist HTML?

HTML (Hypertext Markup Language) ist die Sprache in der Webseiten geschrieben sind. Diese Sprache beschreibt in Form von Tags, wie eine Seite aussieht. Es gibt z.B. spezielle Tags um Bilder einzubauen etc. HTML, die Sprache des www (WorldWideWeb), wurde von einem Physiker Namens Tim Berners Lee entwickelt. Tim Berners Lee hat 1990 HTML entwickelt um Dokumente mit einander zu verlinken (durch einen Hyperlink), da er sehr vergesslich war. Und wie wir alle Wissen, hat sich das www danach zum grten Dienst des Internets entwickelt. Wie beginne ich mit dem Schreiben einer HTML Seite? Um Homepages zu erstellen gibt es viele verschiedene Software. Zwei Beispiele sind Dreamweaver von Macromedia oder Frontpage von Microsoft. Mit diesen Programmen kann man sich mit einer grafischen Oberflche seine Internetseite zusammen klicken. Grundstzlich ist gegen solche Software nichts zu sagen. Wer allerdings professionell Webseiten erstellen mchte sollte wissen was im Hintergrund passiert. Eine gute Kenntniss in HTML ist also von groem Vorteil. Gerade wenn man spter komplexere Seiten mit Skriptsprachen wie PHP schreiben mchte, sollte man sich mit HTML auskennen. Fr den Anfang ist es also ausreichend wenn man einen einfachen Editor wie Notepad oder einen hnlichen Editor unter Linux verwenden. Fr sptere Projekte kann man sich dann fr einen komplexen Editor entscheiden.

Die erste HTML Seite

Jetzt krpeln wir die rmel hoch, holen uns noch eine Tasse Kaffee und dann geht's los. Wir ffnen den Editor und schreiben folgendes hinein: <html> <head> <title>Hallo Titel</title> </head> <body> Hallo Welt </body>

</html> Diesen Text speichern wir nun z.b. unter meine-erste-htmlseite.htm. Die Endung .htm ist hierbei sehr wichtig. Nun gehen wir ins Dateisystem an die Stelle wo wir unsere Seite gespeichert haben und ffnen diese. Die Datei sollte automatisch mit Ihrem Internetbrowser geffnet werden. Wenn nicht, ffne deinen Browser und ffne die Datei ber Datei -> ffnen. Wenn wir die Datei geffnet haben sollten wir soetwas sehen:

So schnell haben wir unsere erste HTML Seite erstellt. Als Belohnung gnnen wir uns einen groen Schluck aus der Kaffetasse und dann geht es weiter. Du hast dich bestimmt gefragt was diese Dinger in den Klammern sind, oder? Diese Dinger bezeichnet man als Tags. Diese Tags sind Anweisungen fr den Browser, damit er versteht wie er die Seite darstellen muss. Die meisten Tags (aber nicht alle), haben einen Teil zum ffnen und einen Teil zum schliessen. Der Teil zu schlieen wird durch einen Schrgtrich (Slash) gekennzeichnet. HTML Tags kann man ineinander verschachteln. Dadurch sind sehr kreative Kombinationen mglich. Unbekannte Tags werden vom Browser ignoriert, dadurch kann ein alter Bowser auch neue Seiten darstellen ohne das die Tags interpretiert werden. Nun mal eine Erklrung zu den einzelnen Tags: <html> Dieser Tag sagt dem Browser: Hallo Browser, hier beginnt das HTML Dokument. Wie wird dieser Tag wohl beendet? Durch </html>, genau !!! <head> Dieser Tag sagt dem Browser: Lieber Browser, hier beginnt der Kopf des HTML Dokuments. Im Header werden einige Informationen zur Seite abgelegt, wie z.B. ein Titel oder auch Meta Informationen fr Suchmaschinen. <title> Mit <title> wird dem Browser mitgeteilt, dass hier der Titel des HTML Dokuments begint. Dieser Titel erscheint in der Titelleiste des Browsers. Ein beliebter Fehler ist hier statt <title>, <titel> zu schreiben. Das ist jedoch falsch weil die Tags auf Englisch geschrieben werden. Nun folgt, was in unserem Titel eigentlich stehen soll:

Hallo Titel Weil das alles ist, was wir in unseren Titel rein schreiben wollen knnen wir mit dem Tag zum schlieen des Titels den Bereich des Titels beenden. </title> Und weil wir auch in den Kopf (head) des Dokuments nichts mehr rein schreiben wollen, sagen wir dem Browser auch gleich noch, das der Kopf (head) hier zuende ist. </head> Den Kopf unseres Dokuments haben wir jetzt schon fertig. Aber wir wollen ja auch noch unsere eigentliche Seite gestallten. Das geschiet im Krper (body) der Seite. Damit nicht nur wir, sondern auch der Browser das weiss, mssen wir mit <body> den Body beginnen, <body> Aber auf der Seite selber soll ja auch etwas drauf stehen, unsere Nachricht an die Welt des Internets. Weil das unsere erste Seite ist, sagen wir den Leuten dadraussen natrlich erstmal Hallo. Wir schreiben also unsere Nachricht: Hallo Welt Damit ist unsere kurze und knackige Nachricht erstmal vorbei. Mit der Nachricht der Seite ist auch der Krper der Seite zuende. Also mssen wir mit </body> den Krper beenden. </body> Da der Krper (body) unsere Seite zuende ist, ist jetzt auch unser HTML Dokument zuende. Die teilen wir dem Browser mit indem wir den Endtag des HTML Dokuments aufschreiben: </html> Das war die Erklrung zu den Tags. Eigentlich war das doch garnicht schwer. Oder? Hier eine bersicht der Tags die wir eben gelernt haben: Anfang: <html> Ende: </html> Anfang: <head> Ende: </head> Anfang: <body> Ende: </body> Anfang: <title> Ende: </title> Diese Tags kann man schnell wieder vergessen. Es wre ja schn wenn wir uns in unser HTML Dokument mit reinschreiben knnten was sie bedeuten. Aus diesem Grund gibt es Kommentare.

Kommentare
Kommentare sind Tags die vom Browser nicht angeteigt werden und dem HTML Autor dabei Helfen knnen sich die Struktur besser zu merken. Kommentare sind Tags von der Sorte Tags die keinen schliessenden Tag bentigen.

Ein Beispiel fr ein Kommentar wre: <!-- Kein Kommentar :-) --> Da wir jetzt wissen, wie wir unseren Quelltext kommentieren knnen, machen wir natrlich auch davon gebrauch: <html> <!-- Das HTML Dokument beginnt --> <head> <!-- Der Kopf des HTML Dokuments --> <title> Hallo Titel </title> </head> <body> <!-- Der Inhalt des HTML Dokuments --> Hallo Welt </body> </html> Zugegeben, wir haben an Kommentaren nicht gespart. Das soll dir aber gleich zu Anfang zeigen das Kommentare durchaus sinnvoll sein knnen. Nun ffnen wir unsere Seite wieder im Browser. Wir stellen fest, dass sich durch die Kommentare am Aussehen der Seite nichts verndert hat. Und wenn wir uns die Seite lnger ansehen, fllt uns auf, dass sie ein bisschen langweilig ist. Das soll sich jetzt ndern. Wir wollen ja schlielich das unsere Nachricht jeder lesen kann. Dazu gibt es in HTML mehrere Tags, mit der wir die Schrift formatieren knnen.

Schriftformatierung
In HTML gibt es viele Mglichkeiten das Aussehen der Schrift zu beeinflussen. Man kann z.B. einen Text als berschrift kennzeichnen und durch die Art der berschrift die Struktur des Dokuments wiederspiegeln. Frher gab es tags zur Schriftformatierung wie z.B. den <font> Tag. Dieser sollte jedoch nicht mehr verwendet werden. Stattdessen sollten Stylesheets verwendet werden. Als erstes soll unsere Seite eine berschrift bekommen.

berschriften
HTML sieht fr berschriften einen bestimmten Tag vor. Dieser Tag erfordert auch einen schliessenden Tag. Da berschriften verschieden gro sein knnen und auch zur Gruppierung Textes dienen sollen gibt es 6 grssen fr berschriften.

Hier die 6 verschiedenen Tags fr berschriften an einem Beispiel: <h1> berschrift 1 </h1> <h2> berschrift 2 </h2> <h3> berschrift 3 </h3> <h4> berschrift 4 </h4> <h5> berschrift 5 </h5> <h6> berschrift 6 </h6> Dabei ist h1 dir grsste berschrift. Das benutzen von berschriften macht nur im Bereich des <body> Sinn, da Sie z.B. im Bereich des Titels nichts am aussehen ndern. Um den neuen Tag zu testen bauen wir Ihn in unsere Seite ein und schauen uns an, wie das ganze aussieht. Wir modifizieren den Quelltext wie folgt: <html> <!-- Das HTML Dokument beginnt --> <head> <!-- Der Kopf des HTML Dokuments --> <title> Hallo Titel </title> </head> <body> <!-- Der Inhalt des HTML Dokuments --> <!-- berschrift --> <h1>Meine zweite Seite</h1> </body> </html> Wenn wir unsere Modifikation abspeichern und uns die neue Seite anschauen, sollten wir etwas hliches wie das hier sehen:

Es ist deutlich zu sehen das die Schrift jetzt grer ist. Es sollte mal wieder Zeit fr einen Schluck aus der Kaffeetasse sein. Unsere Seite sieht zwar schon ganz schn aus, aber sie ist irgendwie noch sehr leer. Es wird also Zeit fr mehr Inhalte. Diese Inhalte gehren nicht zur berschrift, sondern sind normaler Text. Wir sollten nach der berschrift eine neue Zeile anfangen. Um das ganze optisch zu trennen bauen wir eine horizontale Linie ein.

Horizontale Linien
Mit horizontalen Linien kann man Elemente optisch ein bisschen trennen. Man sollte diese jedoch nicht zu hufig verwenden. Wie baut man nun eine solche Linie ein? Das ist ganz einfach. In HTML gibt des einen Tag dafr, dieser sieht so aus: <hr> hr bedeutet horizontal rule. Also horizontale Linie. Wir modifizieren unser HTML Dokument wie folgt: <html> <!-- Das HTML Dokument beginnt --> <head> <!-- Der Kopf des HTML Dokuments --> <title> Hallo Titel </title> </head> <body> <!-- Der Inhalt des HTML Dokuments --> <!-- berschrift --> <h1>Meine dritte Seite</h1> <!-- horizontale Linie --> <hr> </body> </html> Wenn wir uns das ganze im Browser anschauen sehen wir folgendes:

Unter die berschrift soll natrlich ein Text. Diese Texte kann man wie in einer Textverarbeitung auch, in abstze Unterteilen. Wenn man mal schnell im Englischwterbuch unter Absatz nachschaut findet man Paragraph. Da wir Computerleute aber schreibfaul sind krzen wird das ganze ab. Das haben sich auch die Leute gedacht die sich HTML berlegt haben. Sie haben einfach als Tag <p> eingefhrt. Dieser Tag sollte auch beendet werden. Wir schreiben also unseren ersten Absatz in unser HTML Dokument: <html> <!-- Das HTML Dokument beginnt --> <head> <!-- Der Kopf des HTML Dokuments --> <title> Hallo Titel </title> </head> <body> <!-- Der Inhalt des HTML Dokuments --> <!-- berschrift --> <h1>Meine vierte Seite</h1> <!-- horizontale Linie --> <hr> <!-- Textabsatz --> <p> Das ist mittlerweile meine vierte HTML Seite. Ich weiss jetzt schon wie ein HTML Dokument aufgebaut ist und was feste Bestandteile sind. Ich kann auch schon berschriften einbauen und horizontale Linien mit einbauen. Im Moment bin ich dabei einen Textabsatz einzubauen. Das macht mir Spa !!! </p> </body> </html>

Wenn wir das ganze im Bowser ffnen sieht es so aus:

Schn und gut, aber der Browser klatsch ja alles hintereinander. Das liegt daran das der Bowser sich automatisch um die Zeilenumbrche kmmert. Denn nicht jeder hat einen Monitor der gleich gro ist. Manchmal will man aber einen Zeilenumruch erzwingen.

Zeilenumbruch
Einen Zeilenumbruch kann man mit dem Tag <br> erzwingen. br steht fr brake row was soviel wie Zeilenumruch heisst. Um in unserem Text Zeilenumbrche einzubauen mssen wir den Absatz folgendermassen ndern: <!-- Textabsatz --> <p> Das ist mittlerweile meine vierte HTML Seite.<br> Ich weiss jetzt schon wie ein HTML Dokument aufgebaut ist und was feste Bestandteile sind. Ich kann auch schon berschriften einbauen und horizontale Linien mit einbauen.<br> Im Moment bin ich dabei einen Textabsatz einzubauen.<br> Das macht mir Spa !!! </p> Nun wird an den stellen wo wir den <br> Tag eingebaut haben ein Zeilenumbruch eingefgt. Jetzt wissen wir, wie wir einen Zeilenumbruch einfgen knnen. Aber was ist mit einer Leerzeile?

Leerzeile
Das ist ein einfacher Trick, der eigentlich keiner ist ;-) Wir unterteilen einfach den Text in mehrere Abstze. Am Beispiel unsere Textes sieht das so aus: <html> <!-- Das HTML Dokument beginnt -->

<head> <!-- Der Kopf des HTML Dokuments --> <title> Hallo Titel </title> </head> <body> <!-- Der Inhalt des HTML Dokuments --> <!-- berschrift --> <h1>Meine fnfte Seite</h1> <!-- horizontale Linie --> <hr> <!-- Textabsatz 1 --> <p> Das ist mittlerweile meine fnfte HTML Seite. </p> <!-- Textabsatz 2 --> <p> Ich weiss jetzt schon wie ein HTML Dokument aufgebaut ist und was feste Bestandteile sind. Ich kann auch schon berschriften einbauen und horizontale Linien mit einbauen.<br> Im Moment bin ich dabei einen Textabsatz einzubauen.<br> Das macht mir Spa !!! </p> <!-- Textabsatz 3 --> <p> Neuerdings kann ich auch Zeilenumbrche<br> und Leerzeilen einfgen </p> </body> </html> Im Browser sieht das ganze so aus:

Schriftart
Um die Schriftart eines Textes zu ndern muss man den Bereich des Textes der gendert werden soll in einen Beriech zusammenfassen. Dazu kann man den <span> Tag benutzen. Dieser Tag erfordert auch einen schlieenden Tag (</span>).

Mit nur durch den <span> Tag hat man jedoch nicht viel bewirkt. Um diesen Beriech zu formatieren gibt es das Attribut style. Darin knnen wir zum Beispiel bestimmen das der Text in der Schriftart Arial dargestellt wird. Ein Beispiel dafr wre: <span style=font-family:Arial> Arial Text </span> Bei Schriftarten die aus mehreren Wrten bestehen wird der Name in einfachen Anfhrunsgzeichen zusammengefasst. Der Grund fr die einfachen Anfhrunsgzeichen ist, dass der Browser bei doppelten Anfhrunsgzeichen mit dem Anfang und Ende des Style Attributes nicht zurechtkommen wrde. Ein Beispiel mit Times New Roman wre: <span style=font-family:'Times New Roman' > Times New Roman Text </span> Da nicht jeder, jede Schriftart auf seinem Computer installiert hat, kann man auch alternativen angeben. Wenn wir also eine Schriftart angeben die es nicht gibt und als alternative Arial htten wir folgenden Tag: <span style=font-family:'gibts net', Arial > Mein Text </span> Nun mchten wir aber auch das unser Text verschiedene gren haben kann. Schriftgre Um die Schriftgre zu bestimmen gibt es fr das style Attribut ebenfalls eine Option. Diese Option heisst font-size. Optionen werden durch ein Semikolon getrennt. Ein Text in Arial Schriftgrsse 20 htte folgenden Tag: <span style=font-family: Arial; font-size: 20 pt> Mein Text </span> Die Angabe der grsse ist in vielen verschiedenen Arten mglich. Hier ein paar Beispiele: grsse in Prozent: <span style=font-family: Arial; font-size: 20 %> Mein Text </span> grsse in Pixel: <span style=font-family: Arial; font-size: 20 px> Mein Text </span> Zustzlich wre es ja auch schn wenn unsere Seite ein bisschen bunt wre. Natrlich ist auch daran gedacht in HTML. Schriftfarbe Die Schriftfarbe ist ebenfalls eine Option im style Attribut. Diese Option heisst color, nicht fontcolor. Einen roten Text in der Schriftart Arial mit der Schriftgrsse 20 wrde man also so erzeugen: <span style="font-family:Arial; font-size: 20 pt; color: red">

Jetzt haben wir nur ein Problem. Unsere Welt ist bunt, sehr bunt. Stell dir vor wir mssten fr jede Farben einen Namen eingeben. Wie wrde man alle diese Farben nennen und wie knnten sich die faulen Computerleute auchnoch alle diese Farben merken? Fr jedes Proble gibt es eine Lsung, die Farben werden einfach gemischt. So wie wir frher in der Grundschule im Farbkasten die Farben gemischt haben. Wer da gut aufgepasst hat, weiss das man alle Farben aus drei Grundfarben mischen kann, nmlich aus folgenden: Rot Gelb Blau Weil Informatiker 2er Potenzen lieben, werden die Farbwerte in Form von Hexadezimalwerten angegeben. Jede Grundfarbe wird in 256 teile unterteilt (von 0 bis 255). 255 als Hexadezimalzahl ist FF. Hierbei wird eine additive Farbmischung verwendet. Das heist wenn wir alle Farben voll darstellen (FF), wird der Text weiss. Beispiel: <span style="font-family:Arial; font-size: 20 pt; color: #FFFFFF">weisser Text </span> schwarzen Text wrden wir mit einem Wert von 000000 darstellen. Beispiel: <span style="font-family:Arial; font-size: 20 pt; color: #000000">schwarzer Text </span> Durch dieses System sind also 256*256*256 Farben mglich. Wenn man das ganze in seinen Taschenrechner eingibt verrt er uns das wir 16777216 Farben darstellen knnen. Das ist schonmal eine ganze Menge. Viele Grafikprogramme geben sogar den HTML Farbwert an wenn man eine Farbe auswhlt. Welche Farbe kommt heraus wenn wir folgenden Farbcode nehmen: #FFFF00 ? Der Text wrde gelb werden. Und bei #999900? Der Text htte immernoch einen gelbstich, aber das gelb ist nichtmehr so intensiv. In diesem Bereich ist es das beste wenn Sie einfach ein bisschen mit den Farben expimeretieren. Manchmal wollen wir in unseren Texten auch Dinge aufzhlen. Statt dumm immer 1. 2. 3. usw. Davor zu schreiben kann man hier jedoch einen speziellen Tag benutzen. Aufzhlungslisten Mit Aufzhlungslisten in HTML hat man einige Mglichkeiten. Man kann nummerierte Listen erzeugen, aber auch Listen die nur einen Punkt vorn haben.

Wenn wir eine Liste mit Zahlen nummerieren, wollen wir eine gewisse Ordnung hineinbringen. Etwas hnliches haben sich die Macher von HTML wahrscheinlich gedacht. Eine geordnete Liste heisst auf Englisch orderd list, bei Tag wurde wie oft gekrzt und <ol> Daraus gemacht. Dieser Tag erfordert auch einen abschlieenden Tag (</ol>). Wenn wir eine Liste erstellen die vorne nur einen Punkt hat, haben wir es meistens nicht geordnet. Wir haben also eine unorderd list. Wie ist dafr wohl der Tag? Richtig der Tag ist <ul>. Wozu schreibe ich das nur, du weisst es ja schon :-) Unsere Liste braucht natrlich noch Elemente. Elemente werden mit dem Tag <li> eingebaut. Elemente mssen nicht umbedingt abgeschlossen werden da ja nach dem Listenpunkt entweder ein neuer Listenpunkt kommt, oder die Liste mit dem Endetag beendet wird. Ein einfaches Beispiel fr eine geordnete Liste wre: Tabelle der Fussball Bundesliga: <ol> <li>Bayer Mnchen <li>Dortmund <li>keine Ahnung </ol> Ein Beispiel fr eine ungeordnete Liste wre: Ich mag: <ul> <li>Bier <li>Pizza <li>Urlaub </ul> Sonderzeichen Mache Zeichen werden in HTML als Sonderzeichen dargestellt. Das hat den Grund, dass diese Zeichen auch bei Besuchern anderere Lnder korrekt dargestellt werden. Hier eine Tabelle der am hufigsten gebrauchten Sonderzeichen. deutsche Umlaute &auml; &Auml; &ouml; &Ouml; &uuml; &Uuml; &szlig; weitere hufige Zeichen: &quot; " Anfhrungszeichen

&amp; &iexcl; &iquest; &lsquo; &rsquo; &ldquo; &rdquo; &bdquo; &lt; &gt;

& umgekehrtes Ausrufezeichen umgekehrtes Fragezeichen

< >

Tabellen
Oftmals im Leben braucht man Tabellen. Auch in HTML gibt es Tags speziell fr Tabellen. Wie du spter noch erfahren wirst werden Tabellen in HTML sehr hufig auch als Element zu Ausrichtung genutzt und ganze Seiten in Tabellen ausgerichtet.

Was ist eine Tabelle?

Eine Tabelle ist eine Strukturmglichkeit um komplizierte Dinge einfach zu visualisieren. Eine Tabelle besteht aus Zeilen (englisch rows), und aus Spalten (englisch cols). Man kann sich eine Tabelle auch wie ein Regal mit mehreren horizontalen und vertikalen Fchern vorstellen. Aber erstmal mssen wir wissen wie wir dem Browser beibringen knnen das eine Tabelle beginnt. Das geschieht mit dem Tag <table>. Beendet wird die Tabelle mit dem Endtag </table>.

Zeilen
Eine Zeile beginnt mit dem <tr> Tag (table row). Diese Zeile kann mehrere Zellen enthalten und wird mit </tr> beendet.

Zellen
In den verschiedenen Zeilen kann man mit <td> (table data) eine neue Zelle beginnen. <td> muss nicht beendet werden, sollte es aber. Die einfachste Tabelle mit einer Zeile und einer Zelle wrde in HTML also so aussehen: <table> <tr> <td>Meine Tabelle </td> </tr> </table> Wie wrde eine Tabelle mit einer Reihe aber zwei Zellen aussehen?

<table> <tr> <td>Zelle 1 </td> <td>Zelle 2 </td> </tr> </table> Und einer Tabelle mit zwei Zeilen und jeweils einer Zelle? <table> <tr> <td>Zeile 1</td> </tr> <tr> <td>Zeile 2</td> </tr> </table> Bei Tabellen ist einer sehr komplexe verschachtelung mglich. Probier doch mal aus wie man 2 Reihen mit jeweils 2 Zellen erstellt.

Kopfzelle
Statt dem <td> Tag kann man auch den <th> Tag verwenden. <th> bedeutet table header und ist fr die Kopfzeile einer Tabelle gedacht. Zeichen innerhalb des <th> Tag werden anders dargestellt als Zeichen in <td> Tags. Fr den <th> Tag gilt ebenfalls das ein schlieender Tag nicht erfordelich, aber zu empfehlen ist. Manchmal mchten wir aber auch Zellen in einer Tabelle verbinden. Auch daran wurde in HTML gedacht.

Zellen verbinden
Dazu gibt es mehrere Mglichkeiten. Die eine Mglichkeit ist Zellen in einer Zeile zu verbinden, die andere Zellen in einer Spalte zu verbinden. Um das das zu realisieren gibt es fr den <td> Tag ein Attribut. Fr mehrere Zellen in einer Spalten ist das Attribut colspan vorgesehen. Fr Zellen ber mehrere Zeilen das Attribut rowspan. Wie msste man diese Tabelle mit zwei Zeilen und Spalten wohl verndern das, die Zellen der ersten Reihe als eine Zelle dargestellt werden? <table> <tr> <td>Zeile 1 / Zelle 1</td> <td>Zeile 1 / Zelle 2</td> </tr> <tr> <td>Zeile 2 / Zelle 1</td>

<td>Zeile 2 / Zelle 2</td> </tr> </table> Nachdem umschreiben htten wir also folgenden HTML Quelltext: <table> <tr> <td colspan=2>Die erste Zelle ber zwei Spalten</td> </tr> <tr> <td>Zeile 2 / Zelle 1</td> <td>Zeile 2 / Zelle 2</td> </tr> </table> Was mssten wir mit dem ersten Beispiel machen, damit wir die Zellen der ersten Spalte verbinden, die 1. Zelle also ber 2 Zeilen geht? Wir wrden folgenden HTML Quelltext bekommen: <table> <tr> <td rowspan=2>Die erste Zelle ber zwei Zeilen</td> <td>Zeile 1 / Zelle 2</td> </tr> <tr> <td>Zeile 2 / Zelle 2</td> </tr> </table> Es sind noch mehr Kombinationen mglich und wie man sicher sieht kann es kompliziert werden, wenn man so eine Tabelle im Kopf nachvollziehen mchte. Auch hier ist es ein guter Tipp, wenn man das ein oder andere einfach mal ausprobiert. Bis jetzt sind wir zwar schon in der Lage unseren Text bunt zu machen, aber es wre ja auch schn wenn wir Bilder in unsere HTML Seite einbauen knnten.

Bilder
Das Internet ist ein weltweites Datennetz, das ist ja kein Geheimnis. Der ein oder andere von euch hat sicher noch einen Anschluss ber ein Modem, oder kann sich an die Zeit mit Modems erinnnern. Damals war teilweise langes warten angesagt wenn man eine Seite aufgerufen hat. Das nervt gewaltig. In 99% der Flle ist daran aber nicht der riesen Text der Seite schuld. Nein, es sind die vielen Bilder auf einer Seite die zu einem langsamen Seitenaufbau fhren. Heute haben zwar viele einen schnelleren Anschluss, doch wir als Webdesigner sollten auch an den rest der Welt denken, dabei sind die gemeint die nur eine langsame verbindung ins Internet haben. Es ist also ratsam es mit Bildern auf einer Seite nicht zu bertreiben. Aus den Grnden der langsamen Datenbertragung wurden im Internet schon immer Bildformate

verwendet die, die Dateigre optimieren. Das kann, muss aber nicht umbedingt auf kosten der Qualtitt des Bildes gehen. Folgende Formate sind gut geeignet um auf Internetseiten verwendet zu werden. JPEG Das JPEG Format ist besonders gut dazu geeignet Fotos zu komprimieren und das, nahezu verlusst frei. Aus diesem Grund wird das JPEG Format heutzutage auch gerne in digitalen Fotoapparaten eingesetzt. GIF Das GIF Format eignet sich besonders gut fr das Speichern von Zeichnungen, Buttons etc, mit nicht ganz so vielen Farben wie in Fotos. Darberhinaus hat das GIF Format ein paar weitere Features. Eines dieser Features ist, transparenz. Mit dem GIF Format kann man einen Bereich im Bild als transparent defnieren. Ein weiteres Feature ist, Animation. Mit dem GIF Format kann man eine Animation aus mehreren einzelnen Bildern erstellen. Aber auch den Einsatz zu vieler animierter GIF's sollte man vermeiden. Es ist kein guter Stil zu viele animierte GIF's zu verwenden und die Bilder sind meistens auch eher Speicherintensiv. Das GIF Format war jedoch umstritten da es einem Patent unterlag. PNG Aus dem Grund das, das GIF Format einem Patent unterlag, wurde ein alternatives Format erschaffen was alle Vorteile und Features des GIF Formats haben sollte. Dieses Format ist das PNG Format. Fr den Einsatz von Bildern, und generell ist es wichtig das man die genaue Schreibweise beachtet. Auch Gro- und Kleinschreibung ist hierbei zu beachten. Wenn du zuhause ein Windows Betriebssystem hast, ist das zwar egal weil unter Windows nicht zwischen Gro- und Kleinschreibung unterschieden wird. Im Internet wird deine Seite aber meist auf einem Unix oder Linux System gespeichert. Unix und Linux sind im Internet deshalb so verbreitet, das das Internet aus diesem Bereich kommt. Diese Betriebssysteme haben ausserdem auch in Punkto Sicherheit groe Vorteile. Doch wie bindet man jetzt so ein Bild ein? Einbinden eines Bild's Um eine Bildquelle (eng Image Source) einzubinden. Gibt es in HTML den Tag: <img src=bild.gif> Mit diesem Tag wird das Bild bild.gif eingebunden. Dieses muss sich in diesem Fall im gleichen Verzeichnis wir die HTML Seite befinden. Es sind hier aber auch realtive, und absolute Pfade im Dateisystmen mglich. Ratsam ist aber ein realtiver Pfad, das es sonst beim berspielen auf dem Webserver Probleme geben kann.

Hier Beipiele fr realtiven und absoluten Pfade. Wir gehen dabei einfach mal von der folgenden Situation aus: Webserver und Arbeitscomputer unter Linux Homeverzeichnis des Webserver /var/www Verzeichnis fr Bilder /var/www/bilder Name des Bildes meinbild.gif. Wenn wir dieses Bild mit einem absoluten Pfad einbinden wollen mssten wir folgenden Tag verwenden: <img src=/var/www/bilder/meinbild.gif> Wenn wir einen relativen Pfad verwenden she der Tag so aus: <img src=./bilder/meinbild.gif> Soweit so gut, aber was ist wenn wir jetzt unsere Seite mal auf einen Server im Internet verschieben, inklusiver aller Unterordner. Du kannst das ja mal ausprobieren. Es wird zwar bei dir funktionieren, wenn du die Seite auf deinem Computer noch nicht gelscht hast. Aber bei anderen nicht, denn der Browser sucht das Bild lokal unter /var/www/bilder/meinbild.gif und dort wird der Bowser in den meisten Fllen nichts finden. Der absolute Pfad ist nur auf deinem Rechner gltig, auf einem anderen Rechner existiert wahrscheinlich unter dem absoltung Pfad garkein Bild. Ausserdem ist auch noch eine URL als Bildadresse mglich, also eine Adresse im Internet. Ein Beispiel dafr wre: <img src=http://www.admin-wissen.de/banner/test.gif> Das ist von Vorteil wenn man Bilder von einer anderen Webseite einbinden mchte, man sollte den Webmaster der Seite aber vorher Fragen. Damit ist es natrlich auch mglich auf die eigene Url zu verweisen. Alternativtext Da man manchmal auf Grafiken etwas warten muss und auch Suchmaschinen eine Berschreibung des Bildes wnschen, weil Sie ja nicht so gut sehen knnen. Gibt es ein Attribut, mit dem man einen alternativen Text fr ein Bild angeben kann. Dieser wird angezeigt wenn das Bild nicht geladen werden kann, oder oft auch wenn man die Maus ber das Bild bewegt. Dieses Attribut ist alt. Hier erstmal ein Beispiel. <img src=test.gif alt=Mein Testbild> Manchmal wnscht man sich fr seine Bilder auch einen Rahmen, dass ist nicht nur Zuhause so. Auch bei HTML knnen wir einen Rahmen einbauen. Rahmen

Um einen Rahmen einzubauen, brauchen wir ein weiteres Attribut. Dieses nennt sich border mit border wird die breite des Ramens in Pixel angegeben. Hier ein Beispiel: <img src=test.gif alt=Mein Testbild border=1> Es wre auch toll wenn wir die gre des Bildes verndern knnten. Gre eines Bildes Es gibt auch Attribute des Bild Tags mit dem man die gre der Grafiken beeinflussen kann. Hierbei sollte man aber vorsichtig sein. Dieses Tag ist nicht dazu gedacht ein 8000 x 4000 Pixel Bild auf 800 x 400 Pixel zu verkleinern. Dieser Tag sollte dazu genutzt werden um dem Browser vor dem laden des Bildes mitzuteilen welche Gre es hat. Denn so kann der Browser genug Platz fr das Bild reservieren und den Text der Seite schonmal vorher ausrichten. Das verkleinern oder vergrssern von Bildern ist zwar mglich aber nicht zu empfehlen. Man sollte vorher lieber die Bilder mit einem Grafikprogramm auf die passende Gre bringen. Hier also die Attribute die man braucht um die Gre des Bildes zu bestimmen: Die Breite kann man mit width festlegen, fr die hhe wird das Attribut height verwendet. Als Angabe der gre sind Pixel und Prozent mglich. Wenn man eine einfache Zahl eingibt geht der Browser von einer eingabe in Pixel aus. Wir modifizieren unseren Tag jetzt so das unser Bild 200 Pixel breit und 300 Pixel hoch ist: <img src=test.gif alt=Mein Testbild border=1 width=200 height=300> Bis jetzt wirst du vielleicht denken, das du das auch alles mit deiner Textverarbeitung machen kannst, was du bis jetzt mit HTML gemacht hast. Doch jetzt kommt dynamik ins Spiel.

Links
Links sind das, was das Internet eigentlich aussmacht. Durch Links kann man auf andere Seiten verweisen, und ermglicht dem Benutzer eine einfache Bedienung. Doch wie erstellen wir einen solchen Link? Ganz einfach, mit dem Tag <a href=test2.htm>Linktext</a> Dieser Link verweist auf auf die HTML Seite test2.htm, also einer weiteren Seite von dir. Manchmal mchtest du aber auch auf andere Seiten im Internet veweisen. Sehr wahrscheinlich willst du einen Link zu uns auf admin-wissen.de setzen. Fr solche Flle kann man als Linkziel die URL der Seite angeben auf die man Verweisen mchte. Ein Beispiel: <a href=http://www.admin-wissen.de>Meine lieblings Computerseite</a>

Diese einfachen Links haben einen unangenehmen Nebeneffekt, die Seite auf die du verweist wird im selben Fenster geffnet wie deine Seite. Dadurch verlsst der Besucher deine Seite. Es gibt eine Lsung fr dieses Problem. Der Linktag hat als Attribut ein Zielfenster eines Links. Dieses Attribut heisst target, dort wird der Name des Zielfensters eingegeben. Wir heisst neue nicht geffnete Fester eigentlich, wirst du dich jetzt vielleicht Fragen. Die Lsung hierfr ist, einfach einen Namen einzusetzen den es nicht gibt. <a href=http://www.admin-wissen.de target=gibtsnet>Meine lieblings Computerseite</a> Wrde die Seite also in einem neuen Fenster ffnen. Hierbei hat sich aber eingebrgert, als target _new zu nehmen. Besser wre also:
<a href=http://www.admin-wissen.de target=_new>Meine lieblings Computerseite</a>

Wichtig wird dieses Target spter nochmal wenn wir uns mit Frames beschftigen. Bilder als Link Natrlich kann man mehrere Tags, wie fast immer in HTML, kombinieren und verschachteln. So knnen wir auch ein Bild als Link benutzen. Wir mssen ganz einfach um unseren Bilder Tag einen Link Tag herumsetzen: <a href=http://www.admin-wissen.de target=_new><img src=tolltseite.gif></a> Jetzt kannst du schon Links auf andere Seiten setzen. Aber was ist, wenn man einen Link zu einer bestimmten Stelle in einem Text setzen mchte? Anker Links Manchmal mchten wir im Text einer Seite auf eine ganz bestimmte Stelle verweisen. Zu diesem Zweck gibt es in HTML Anker Links. Um auf einen Ankerlink zuverweisen, muss man erstmal an der Zielstelle einen Anker setzen. Das machen wir mit dem folgenden Tag: <a name="MeinAnker">Anker Inhalt</a> Veweisen tuen wir auf diesen Anker mit folgendem Tag: <a href=#MeinAnker>Linktext</a> oder von einer anderen Seite mit: <a href=seite.htm#MeinAnker>Linktext</a>

Frames
Mit Frames hat man die Mglichkeit eine Seite in mehrere Bereiche aufzuteilen, die jeweils aus einer seperaten Seite bestehen. Das kann ntzlich sein, wenn man eine Seite die aus Navigation und Inhalt besteht. Heute werden Frames zwar nicht mehr so hufig eingesetzt, weil man mit

dynamischen Skripten in kombination mit Tabellen bessere Ergebnisse erzielen kann als mit Frames. Ich mchte euch dennoch hier Frames vorstellen, weil man damit als Einsteiger schnell gute Ergebnisse erzielen kann. Fr ein einfaches Beispiel mit Navigationsbereich und Inhalt sind 3 Dateien notwendig: 1. Die Seite die das Frameset speichert. Wir geben dieser den Namen index.htm Wir schreiben folgendes in diese Datei hinein: <html> <head> <title>Meine Homepage</title> </head> <!-- Beginn des Framesets --> <frameset cols="200,*"> <!-- Elemente des Framesets --> <frame src="navi.htm" name="navi"> <frame src="main.htm" name="main"> <noframes> Ihr Browser kann keine Frames! </noframes> </frameset> </html> Mit diesem Code erzeugen wir ein Frameset mit 2 Spalten (cols). Die linke Spalte enthlt die Seite navi.htm und hat den Namen navi, diese Spalte ist 200 Pixel breit. Die rechte Spalte enthlt die Seite main.htm und hat auch den namen main, diese Spalte nimmt den Rest der Bildschirmbreite ein. In den noframes Bereich das reingeschrieben was erscheinen soll wenn der Browser Frames nicht untersttzt. Die Seite mit dem Frameset enthlt keinen body, das ist ein beliebter Fehler. 2. Wie aus dem Text oben hervorgeht brauchen wir eine Datei, navi.htm. In diese schreiben wir unseren Navigationsbereich. <html> <!-- Navigationsbereich im linken Frame --> <head> <title>Navigation</title> </head> <body> <!-- Link zu admin-wissen.de --> <a href=http://www.admin-wissen.de target=main>Meine Lieblingsseite</a> </body> </html> Wenn du diesen Workshop aufmerksam gelesen hast, fllt dir auf das wir hier wieder unser target aus dem Linkkapitel wiederfinden. Dieses target, sagt dem Browser, das das Ziel im Bereich main, also dem rechten Beriech angezeigt werden soll. 3. Zustzlich brauchen wir noch unsere Seite Main, diese wird im rechten Beriech angezeigt wenn wir die Seite ffnen. Der Inhalt der Datei main.htm sieht also so aus: <html>

<!-- Startseite im rechten Frame --> <head> <title>Main</title> </head> <body> <h1>Mein erstes Frameset</h1> </body> </html> Wenn wir alles fertig haben, und die Datei index.htm in unserem Browser ffnen, sollten wir folgendes sehen:

Wenn wir auf den Link in der Navigation klicken, wir unsere Seite im rechten Frame aufgerufen. Frames kann man natrlich auch Zeilenweise gestallten. ndere doch mal in der Datei index.htm folgende Zeile: <frameset cols="200,*"> in <frameset rows="200,*"> Du wirst dann folgendes sehen:

Das Frameset ist in mehrere Zeilen geteilt. Diese Frames kann man natrlich auch wieder beliebig verschachteln. Rafinierte Kombinationen sind deiner Fantasie berlassen.

Formulare
Hier mchte ich euch Formulare in HTML vorstellen. Zugegen, mit HTML alleine gibt es sehr wenige Einsatzbereiche fr Formulare. Du solltest dich trotzdem damit beschftigen. Denn spter, wenn du mit Skriptsprachen programmierst, oder Formulare mit JavaScript auswertes, sind Formulare das A und O. Also nochmal einen Schluck Kaffee getrunken und dann geht's los. Ich mchte euch hier Formulare am Beispiel eines einfachen Mailformulares erklren. Wenn du dich mal mehr mit HTML und z.B. PHP beschftigt hast, wirst du herausfinden das es fr diesen Zweck bessere Lsungen gibt. Bei diesem Beispiel geht es also nur ums Prinzip. Um ein Formular zu erstellen mssen wir erstmal einen Formularbereich erstellen. In diesem Anfangs Tag mssen wir festlegen, was mit dem Formular passieren soll, wenn der Benutzer es abschickt. Wir mssen uns also eine Aktion berlegen, genauso heisst auch das Attribut des form Tags, nmlich action. Mit method wird die Art der bertragung festgelegt. Man kann bei method zwischen post und get whlen. Was das zu bedeuten hat werden wir irgendwann spter klren. Mit enctype legen wir in diesem Fall fest um weche Art von Mail es sich handelt. Das enctype Attribut wird aber normal nicht so hufig verwendet. <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> </form> Wenn wir dieses Formular in eine unserer Seiten einbauen, sehen wir, das wir nix sehen. Ist auch ganz klar, denn wir mssen ja noch unsere Felder eintragen. Aber auch hier gibt es viele Mglichkeiten. Wir fangen erstmal mit dem einfachsten an, nmlich mit dem Textfeld.

Textfelder
Das Textfeld benutzen wir immer wenn Zeichen eingegeben werden sollen. Dazu zhlen auch Zahlen. Ein Textfeld integrieren wir indem wir unser Formular folgendermassen erweitern: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> <!-- Textfeld fr ein Formular zur Eingabe des Namen--> Name: <input type=text name=name value=Ihr Name> </form> Wir benutzen fr unser Textfeld also den <input> Tag. Dieser Tag hat das type Attribut, indem wir hier festlegen das es sich um ein Textfeld handelt. Mit dem Attribut name legen wir den Namen des Feldes fest. Wenn du spter komplexe Skripte schreibst, ergibt sich aus diesem Namen ein Variablenname. Mit dem value Attribut kann man einen Text der im Textfeld steht vorgeben.

Textbereiche
Manchmal braucht man einen groen Bereich, wo ein Benutzer lange Texte eingeben kann. Speziell fr diesen Zweck gibt es <textarea>. In eine Textarea kann man mehrere Zeilen schreiben. Wir erweitern also unser Formular um einen Bereich wo der Besucher seine Meinung schreiben kann: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> <!-- Textfeld fr ein Formular zur Eingabe des Namen--> Name: <input type=text name=name value=Ihr Name> <!-- Mehrzeiliger Textbereich fr das Formular --> Deine Meinung:<textarea name=meinung>Schreib in dieses Feld deine Meinung zu unserer Internetseite. </textarea> </form> Wie du siehst bentigt Textarea einen Tag der die Textarea beendet. Das liegt daran das der value Bereich zu gross werden wrde, wenn man den Inhalt hineinschreiben wrde.

Checkboxen
In manchen Fllen brauchen wir auch nur eine Box, die ein Benutzer ankreuzen kann oder nicht. Diese Box nennen wir checkbox. Checkboxen haben die eigenschaften, das ein Benutzer mehrere auswhlen kann. ber folgenden Tag bauen wir eine Checkboxen ein: <input type="checkbox" name="kenntnisse" value="bilder"> Bilder<br> <input type="checkbox" name="kenntnisse" value="frames"> Frames<br> <input type="checkbox" name="kenntnisse" value="tabellen"> Tabellen<br> <input type="checkbox" name="kenntnisse" value="formulare"> Formulare<br> Alle Felder haben den gleichen Namen, das kann bei Skripten spter ein Problem werden, aber PHP z.B. kennt Hier mglichkeiten diese Werte zu gruppieren. Wir geben also allen den gleichen Namen und jeweils als value einen Bezeichner durch den wir wissen was angekickt wurde. Nun bauen wir das ganze in unser Mailformular ein: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> <!-- Textfeld fr ein Formular zur Eingabe des Namen--> <p>Name: <input type="text" name="name" value="Ihr Name"></p> <!-- Mehrzeiliger Textbereich fr das Formular --> <p>Deine Meinung:<textarea name="meinung">Schreib in dieses Feld deine Meinung zu unserer Internetseite</textarea></p>

<!-- Checkboxen fr Mehrfachauswahl --> <p>Das weiss ich ber HTML:<br> <input type="checkbox" name="kenntnisse" value="bilder"> Bilder<br> <input type="checkbox" name="kenntnisse" value="frames"> Frames<br>
<input type="checkbox" name="kenntnisse" value="tabellen"> Tabellen<br>

<input type="checkbox" name="kenntnisse" value="formulare"> Formulare<br> </p> </form> Jetzt wissen wir wie wir unseren Benutzern eine mehrfach Auswahl anbieten knnen, aber wie knnen wir bestimmen das der Benutzer nur eine Option whlen kann?

Radiobuttons
Ihren Namen haben die Radiobuttons von alten Radios. Bei diesen Radios war es so, dass wenn man einen Knopf getdrckt hat, die anderen Knpfe rausgesprungen sind. Genauso ist das auch in HTML mit den Radiobuttons. Ein gutes Beispiel fr Radiobuttons ist die Auswahl des Geschlechts, den jeder ist entweder mnnlich oder weiblich oder ? ;-) So sieht es aus wenn wir einen Radiobutton einbauen wollen: <input type="radio" name="geschlecht" value="maennlich"> Mnnlich<br> <input type="radio" name="geschlecht" value=weiblich"> Weiblich<br> Dabei ist wichtig, dass im Attribut name der gleiche Wert steht. Nur dann kann der Browser die gewnschte Funktion realisieren. Wir bauen das ganze also in unser Formular ein: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> <!-- Textfeld fr ein Formular zur Eingabe des Namen--> <p>Name: <input type="text" name="name" value="Ihr Name"></p> <!-- Mehrzeiliger Textbereich fr das Formular --> <p>Deine Meinung:<textarea name="meinung">Schreib in dieses Feld deine Meinung zu unserer I nternetseite. </textarea></p> <!-- Checkboxen fr Mehrfachauswahl --> <p>Das weiss ich ber HTML:<br> <input type="checkbox" name="kenntnisse" value="bilder"> Bilder<br> <input type="checkbox" name="kenntnisse" value="frames"> Frames<br> <input type="checkbox" name="kenntnisse" value="tabellen"> Tabellen<br> <input type="checkbox" name="kenntnisse" value="formulare"> Formulare<br> </p> <!-- Radiobuttons zur Auswahl des Geschlechts --> <p>Geschlecht:<br> <input type="radio" name="geschlecht" value="maennlich"> mnnlich<br>
<input type="radio" name="geschlecht" value=weiblich"> weiblich<br>

</p> </form>

Manchmal wollen wir sehr viele Auswahlmglichkeiten anbieten, ohne das diese sehr viel Platz brauchen. Die Lsung hierfr sind Auswahllisten

Auswahllisten
Mit Listen knnen wir groe Mengen an Auswahloptionen kompakt darstellen. Ein Beispiel wre das Bundesland aus dem unser Benutzer kommt. <select name="bundesland" size="1"> <option value=nichts>nicht aus Deutschland</option> <option value=Baden-Wuerttemb>Baden-Wrttemberg</option> <option value=Bayer>Bayer</option> <option value=Berlin>Berlin</option> <option value=Brandenburg>Brandenburg</option> <option value=Bremen>Bremen</option> <option value=Hamburg>Hamburg</option> </select> Aus Platzgrnden hab ich mir den Rest der Bundeslnder gesparrt, aber ich denke das Prinzip wird klar. Das ganze bauen wir natrlich auch in unser Formular ein: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain"> <!-- Textfeld fr ein Formular zur Eingabe des Namen--> <p>Name: <input type="text" name="name" value="Ihr Name"></p> <!-- Mehrzeiliger Textbereich fr das Formular --> <p>Deine Meinung:<br><textarea name="meinung">Schreib in dieses Feld deine Meinung unserer Internetseite. </textarea></p> <!-- Checkboxen fr Mehrfachauswahl --> <p>Das weiss ich ber HTML:<br> <input type="checkbox" name="kenntnisse" value="bilder"> Bilder<br>
<input type="checkbox" name="kenntnisse" value="frames"> Frames<br>

zu

<input type="checkbox" name="kenntnisse" value="tabellen"> Tabellen<br> <input type="checkbox" name="kenntnisse" value="formulare"> Formulare<br> </p> <!-- Radiobuttons zur Auswahl des Geschlechts --> <p>Geschlecht<br> <input type="radio" name="geschlecht" value="maennlich"> Mnnlich<br> <input type="radio" name="geschlecht" value=weiblich"> Weiblich<br> </p> <!-- Auswahlliste zur Auswahl des Bundeslands --> <p>Aus welchem Bundesland kommst du?<br> <select name="bundesland" size="1">

<option value=nichts>nicht aus Deutschland</option> <option value=Baden-Wuerttemb>Baden-Wrttemberg</option> <option value=Bayer>Bayer</option> <option value=Berlin>Berlin</option> <option value=Brandenburg>Brandenburg</option> <option value=Bremen>Bremen</option> <option value=Hamburg>Hamburg</option> </select> </p> </form> Nun ist unser Formular fast schon komplett, aber ein entscheindendes Element fehlt noch. Dieses Element ist der Button zum abschicken.

Submit-Buttons
Einen Submit Button bauen wir mit folgendem Tag ein: <input type=submit value=EMail versenden> Wir mssen also als Attribut type submit angeben. Um die Beschriftung des Buttons zu ndern, mssen wir den Wert des Value Attributs bearbeiten. Ein Element habe ich in unserem Mailformular nicht verwendet, das ist das Passwortfeld.

Passwortfelder
Mit einem Passwortfeld kann man ein Feld einbauen in dem alle eingaben in Form von Sternchen dargestellt werden. Dadurch knnen zuschauer das eingegebene Passwort nicht lesen. Tag fr ein Passwortfeld: <input type=password name=feldname> Ausserdem kann man noch versteckte Felder in ein Formular einbauen.

versteckte Formularfelder
Ein verstecktes Formularfeld dient zu reinen Datentransport. Bei PHP Skripten kann man z.B. soetwas manchmal finden: <input type=hidden name=filled value=true> Damit kann der Programmierer spter abfragen ob das Formular abgesendet wurde. In unserem Mailformular habe ich auf ein verstecktes Feld verzichtet. Unser Formular ist jetzt Soweit fertig und der Quelltext sieht so aus: <form action="mailto:webmaster@keine-ahnungs-obs-das-gibt.de" method="post" enctype="text/plain">

<!-- Textfeld fr ein Formular zur Eingabe des Namen--> <p>Name: <input type="text" name="name" value="Ihr Name"></p> <!-- Mehrzeiliger Textbereich fr das Formular --> <p>Deine Meinung:<br><textarea name="meinung">Schreib in dieses Feld deine Meinung unserer Internetseite. </textarea></p> <!-- Checkboxen fr Mehrfachauswahl --> <p>Das weiss ich ber HTML:<br> <input type="checkbox" name="kenntnisse" value="bilder"> Bilder<br>
<input type="checkbox" name="kenntnisse" value="frames"> Frames<br>

zu

<input type="checkbox" name="kenntnisse" value="tabellen"> Tabellen<br> <input type="checkbox" name="kenntnisse" value="formulare"> Formulare<br> </p> <!-- Radiobuttons zur Auswahl des Geschlechts --> <p>Geschlecht<br> <input type="radio" name="geschlecht" value="maennlich"> Mnnlich<br> <input type="radio" name="geschlecht" value=weiblich"> Weiblich<br> </p> <!-- Auswahlliste zur Auswahl des Bundeslands --> <p>Aus welchem Bundesland kommst du?<br> <select name="bundesland" size="1"> <option value=nichts>nicht aus Deutschland</option> <option value=Baden-Wuerttemb>Baden-Wrttemberg</option> <option value=Bayer>Bayer</option> <option value=Berlin>Berlin</option> <option value=Brandenburg>Brandenburg</option> <option value=Bremen>Bremen</option> <option value=Hamburg>Hamburg</option> </select> </p> <!-- Einbau des Submit Buttons zu abschicken des Formulars --> <p> <input type=submit value=EMail senden> </p> </form> Die aus diesem Feld generierte Mail wrde so aussehen: name=Timo Schmidt meinung=Tolle Internetseite kenntnisse=bilder kenntnisse=frames kenntnisse=tabellen kenntnisse=formulare geschlecht=maennlich bundesland="Hamburg"

Stiltipps
Hier nochmal ein paar Tipps fr einen guten Stil: verwende nicht zu viele animierte Gifs Denke ber den Einsatz von Tabellen statt Frames nach gewhne dir an Kommentare in den Quelltext zu schreiben komprimiere Grafiken wenn es geht's gebe bei Bildern einen alternativen Text an, Suchmaschinen werden es dir danken. Schluss Jetzt sind wir schon am Ende unseres HTML Einsteigerkurses, ich hoffe du konntest dabei etwas lernen und es hat dir Spa gemacht. Eine fortsetzung dieses Kurses ist schon geplant. Zum Schluss noch ein paar Links wo du mehr Informationen zu HTML findest. Der Klassiker http://selfhtml.teamone.de Bei Selfhtml findest du alles was du zu HTML wissen musst. Unser Bereich http://www.admin-wissen.de/tutorial-req-viewlink-cid-36.html bietet auch Links zu vielen HTML Tutorials und Workshops.