[How to]HTML lernen (um eigene Homepage-Desings zu erstellen)

MrWampsen*** · 02/06/2011, 00:21

Einführung in HTML

In diesem Tutorial möchte ich die wichtigsten Grundlagen von HTML erklären. Fehler können natürlich nicht ausgeschlossen werden und für Tipps bin ich natürlich dankbar.

Wenn du HTML lernen willst, gibt es natürlich 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 schön ?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 miteinander zu verlinken (durch einen Hyperlink), da er sehr vergesslich war. Und wie wir alle Wissen, hat sich das www danach zum größten 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 Oberfläche seine Internetseite zusammen klicken. Grundsätzlich ist gegen solche Software nichts zu sagen.

Wer allerdings professionell Webseiten erstellen möchte sollte wissen was im Hintergrund passiert. Eine gute Kenntniss in HTML ist also von großem Vorteil.

Gerade wenn man später komplexere Seiten mit Skriptsprachen wie PHP schreiben möchte, sollte man sich mit HTML auskennen.

Für den Anfang ist es also ausreichend wenn man einen einfachen Editor wie Notepad oder einen ähnlichen Editor unter Linux verwenden. Für spätere Projekte kann man sich dann für einen komplexen Editor entscheiden.

Die erste HTML Seite

Jetzt kräpeln wir die Ärmel hoch, holen uns noch eine Tasse Kaffee und dann geht's los.

Wir öffnen den Editor und schreiben folgendes hinein:

Quote:

<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 geöffnet werden. Wenn nicht, öffne deinen Browser und öffne die Datei über "Datei -> Öffnen".

Die HTML Tags
So schnell haben wir unsere erste HTML Seite erstellt. Als Belohnung gönnen wir uns einen großen 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 für 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 schließen wird durch einen Schrägtrich (Slash) gekennzeichnet. In XHTML haben alle Tags einen öffnenden und schliessenden Teil, Tags die das bei HTML nicht hatten haben in sich selbst einen schliessenden Tag z.b.
ist dann

HTML Tags kann man ineinander verschachteln. Dadurch sind sehr kreative Kombinationen möglich.
Unbekannte Tags werden vom Browser ignoriert, dadurch kann ein alter Bowser auch neue Seiten darstellen ohne das die Tags interpretiert werden.
Nun mal eine Erklärung 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 für 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 können wir mit dem Tag zum schließen 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 Körper (body) der Seite. Damit nicht nur wir, sondern auch der Browser das weiss, müssen 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 natürlich 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 Körper der Seite zuende. Also müssen wir mit </body> den Körper beenden.

</body>

Da der Körper (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 Erklärung 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 wäre ja schön wenn wir uns in unser HTML Dokument mit reinschreiben könnten was sie bedeuten. Aus diesem Grund gibt es Kommentare.

Kommentare in HTML

Kommentare sind Tags die vom Browser nicht angeteigt werden und dem HTML Autor dabei Helfen können sich die Struktur besser zu merken.

Kommentare sind Tags von der Sorte Tags die keinen schliessenden Tag benötigen.

Ein Beispiel für ein Kommentar wäre:

Quote:

Da wir jetzt wissen, wie wir unseren Quelltext kommentieren können, machen wir natürlich auch davon gebrauch:

Quote:

<html>

<head>

<title>
Hallo Titel
</title>
</head>
<body>

Hallo Welt
</body>
</html>

Zugegeben, wir haben an Kommentaren nicht gespart. Das soll dir aber gleich zu Anfang zeigen das Kommentare durchaus sinnvoll sein können.

Nun öffnen wir unsere Seite wieder im Browser. Wir stellen fest, dass sich durch die Kommentare am Aussehen der Seite nichts verändert hat. Und wenn wir uns die Seite länger ansehen, fällt uns auf, dass sie ein bisschen langweilig ist.
Das soll sich jetzt ändern. Wir wollen ja schließlich das unsere Nachricht jeder lesen kann. Dazu gibt es in HTML mehrere Tags, mit der wir die Schrift formatieren können.

Schriftformatierung

In HTML gibt es viele Möglichkeiten 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.

Früher 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 in HTML
HTML sieht für Überschriften einen bestimmten Tag vor. Dieser Tag erfordert auch einen schliessenden Tag.

Da Überschriften verschieden groß sein können und auch zur Gruppierung Textes dienen sollen gibt es 6 grössen für Überschriften.

Hier die 6 verschiedenen Tags für Überschriften an einem Beispiel:

Quote:

<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 grösste Ü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:

Quote:

<html>

<head>

<title>
Hallo Titel
</title>
</head>
<body>


<h1>Meine zweite Seite</h1>
</body>
</html>

HTML Kommentare und Überschriften
Es ist deutlich zu sehen das die Schrift jetzt größer ist.

Es sollte mal wieder Zeit für einen Schluck aus der Kaffeetasse sein.

Unsere Seite sieht zwar schon ganz schön aus, aber sie ist irgendwie noch sehr leer.

Es wird also Zeit für mehr Inhalte.

Diese Inhalte gehören 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 HTML
Mit horizontalen Linien kann man Elemente optisch ein bisschen trennen. Man sollte diese jedoch nicht zu häufig verwenden.

Wie baut man nun eine solche Linie ein?

Das ist ganz einfach. In HTML gibt des einen Tag dafür, dieser sieht so aus:

Quote:

<hr />

hr bedeutet horizontal rule. Also horizontale Linie. Wir modifizieren unser HTML Dokument wie folgt:

Quote:

<html>

<head>

<title>
Hallo Titel
</title>
</head>
<body>


<h1>Meine dritte Seite</h1>

<hr />
</body>
</html>

Absätze in HTML

Unter die Überschrift soll natürlich ein Text. Diese Texte kann man wie in einer Textverarbeitung auch, in absätze Unterteilen.

Wenn man mal schnell im Englischwöterbuch unter Absatz nachschaut findet man "Paragraph". Da wir Computerleute aber schreibfaul sind kürzen wird das ganze ab.

Das haben sich auch die Leute gedacht die sich HTML überlegt haben. Sie haben einfach als Tag
eingeführt.

Dieser Tag sollte auch beendet werden.

Wir schreiben also unseren ersten Absatz in unser HTML Dokument:

Quote:

<html>

<head>

<title>
Hallo Titel
</title>
</head>
<body>


<h1>Meine vierte Seite</h1> <br/>

<hr />
<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>

Schön und gut, aber der Browser klatsch ja alles hintereinander.
Das liegt daran das der Bowser sich automatisch um die Zeilenumbrüche kümmert. Denn nicht jeder hat einen Monitor der gleich groß ist. Manchmal will man aber einen Zeilenumruch erzwingen. Mehr dazu im folgenden Abschnitt

Zeilenumbruch in HTML erzwingen

Einen Zeilenumbruch kann man mit dem Tag
erzwingen. "br" steht für "brake row" was soviel wie Zeilenumruch heisst.

Um in unserem Text Zeilenumbrüche einzubauen müssen wir den Absatz folgendermassen ändern:

Quote:


<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 eingefügt.Jetzt wissen wir, wie wir einen Zeilenumbruch einfügen können. Aber was ist mit einer Leerzeile?

Leerzeile

Das ist ein einfacher Trick, der eigentlich keiner ist ;-) Wir unterteilen einfach den Text in mehrere Absätze. Am Beispiel unsere Textes sieht das so aus:

Quote:

<html>

<head>

<title>
Hallo Titel
</title>
</head>
<body>


<h1>Meine fünfte Seite</h1>

<hr />

<p>
Das ist mittlerweile meine fünfte HTML Seite.
</p>

<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>

<p>
Neuerdings kann ich auch Zeilenumbrüche<br> und Leerzeilen einfügen
</p>
</body>
</html>

Wie verwende ich Formatierungsmöglichkeiten

Es gibt mehrere Möglichkeiten das Aussehen eines Textes zu verändern. Einmal gibt es die Möglichkeit über CSS die Attribute festzulegen und so z.b. Einfluss auf die Schriftgröße oder die Schriftart zu nehmen.

Ausserdem gibt es noch auszeichende Tags wie z.b. "b" "i" oder "strong". Wichtig dabei ist, das diese auszeichnenden Tags auch eine semantische Bedeutung haben. Wenn man einen Abschnitt z.b. mit "strong" kennzeichnet, kann auch eine Maschine erkennen das dies wohl ein eher wichtiger Abschnitt ist.

Bei der Verwendung sollte man also unterscheiden, möchte man aus rein estethischen Gründen einen Abschniit in einer bestimmten Art und Weise Layouten sollte man das mit CSS machen. Möchte man aber einen Text semantisch hervorheben z.b. dadurch das man ihn fett oder kusiv macht, sollte man dafür nicht umbedingt CSS nutzen sondern die dafür vorgesehenen Tags. Dadurch haben auch Maschinen (z.B. Suchmaschinen) die Chance die Semantik des Textes besser zu erkennen.

In diesem Abschnitt geht es um die Gestalltung mit CSS.

Schriftart in einem Absatz zuweisen

Um die Schriftart eines Textes zu ändern muss man den Bereich des Textes der geändert werden soll in einen Beriech zusammenfassen.

Dazu kann man den p Tag benutzen.

Nur durch den Tag hat man jedoch nicht viel bewirkt. Um diesen Bereich zu formatieren gibt es das Attribut "style". Darin können wir zum Beispiel bestimmen das der Text in der Schriftart Arial dargestellt wird.

Ein Beispiel dafür wäre:

Quote:

<p style="font-family:Arial"> Arial Text </p>

Bei Schriftarten die aus mehreren Wörten bestehen wird der Name in einfachen Anführunsgzeichen zusammengefasst. Der Grund für die einfachen Anführunsgzeichen ist, dass der Browser bei doppelten Anführunsgzeichen mit dem Anfang und Ende des Style Attributes nicht zurechtkommen würde.

Ein Beispiel mit Times New Roman wäre:

Quote:

<p style="font-family:'Times New Roman' "> Times New Roman Text </p>

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 hätten wir folgenden Tag:

Quote:

<p style="font-family:'gibts net', Arial "> Mein Text </p>

Nun möchten wir aber auch das unser Text verschiedene größen haben kann.

Schriftgröße mit CSS festlegen
Um die Schriftgröße zu bestimmen gibt es für das style Attribut ebenfalls eine Option.

Diese Option heisst font-size. Optionen werden (bei CSS) durch ein Semikolon getrennt.

Ein Text in Arial Schriftgrösse 20 hätte folgenden Tag:

Quote:

<p style="font-family: Arial; font-size: 20 pt"> Mein Text </p>

Die Angabe der grösse ist in vielen verschiedenen Arten möglich.

Hier ein paar Beispiele:

grösse in EM:

Quote:

<p style="font-family: Arial; font-size: 3em"> Mein Text </p>

grösse in Pixel:

Quote:

<p style="font-family: Arial; font-size: 20 px"> Mein Text </p>

Zusätzlich wäre es ja auch schön wenn unsere Seite ein bisschen bunt wäre. Natürlich ist auch daran gedacht in HTML.

Schriftfarbe mit CSS festlegen

Die Schriftfarbe ist ebenfalls eine Option im style Attribut. Diese Option heisst "color", nicht "fontcolor".Einen roten Text in der Schriftart Arial mit der Schriftgrösse 20 würde man also so erzeugen:

Quote:

<p style="font-family: Arial; font-size: 20pt; color: red"> Mein Text </p>

Jetzt haben wir nur ein Problem. Unsere Welt ist bunt, sehr bunt.

Stell dir vor wir müssten für jede Farben einen Namen eingeben.

Wie würde man alle diese Farben nennen und wie könnten sich die faulen Computerleute auch noch alle diese Farben merken?

Für jedes Proble gibt es eine Lösung, die Farben werden einfach gemischt. So wie wir früher in der Grundschule im Farbkasten die Farben gemischt haben.

Wer da gut aufgepasst hat, weiss das man alle Farben aus drei Grundfarben mischen kann, nämlich 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:

Quote:

<p style="font-family:Arial; font-size: 20pt; color: #FFFFFF">weisser Text </p>

schwarzen Text würden wir mit einem Wert von 000000 darstellen.Beispiel:

Quote:

<p style="font-family:Arial; font-size: 20pt; color: #000000">schwarzer Text </p>

Durch dieses System sind also 256*256*256 Farben möglich. Wenn man das ganze in seinen Taschenrechner eingibt verrät er uns das wir 16777216 Farben darstellen können.

Das ist schonmal eine ganze Menge. Viele Grafikprogramme geben sogar den HTML Farbwert an wenn man eine Farbe auswählt.

Welche Farbe kommt heraus wenn wir folgenden Farbcode nehmen: #FFFF00 ?
Der Text würde gelb werden.

Und bei #999900?

Der Text hätte 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 aufzählen. Statt dumm immer 1. 2. 3. usw.

Davor zu schreiben kann man hier jedoch einen speziellen Tag benutzen.

geordnete und ungeordnete Aufzählungslisten

Mit Aufzählungslisten in HTML hat man einige Möglichkeiten. 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 gekürzt und

Quote:

<ol>

Daraus gemacht. Dieser Tag erfordert auch einen abschließenden Tag:

Quote:

</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 dafür wohl der Tag?

Richtig der Tag ist

Quote:

<ul>

# Wozu schreibe ich das nur, du weisst es ja schon :-) Unsere Liste braucht natürlich noch Elemente(Items). Elemente werden mit dem Tag (List Items) eingebaut.Ein einfaches Beispiel für eine geordnete Liste wäre:Tabelle der Fussball Bundesliga:

Quote:

<ol>
<li>Metin 2</li>
<li>WoW</li>
<li>Flyff</li>
</ol>

Ein Beispiel für eine ungeordnete Liste wäre:
Ich mag:

Quote:

<ul>
<li>Bier</li>
<li>Pizza</li>
<li>Urlaub</li>
</ul>

Sonderzeichen in HTML

Mache Zeichen werden in HTML als Sonderzeichen dargestellt. Das hat den Grund, dass diese Zeichen auch bei Besuchern anderere Länder korrekt dargestellt werden.

Hier eine Tabelle der am häufigsten gebrauchten Sonderzeichen.

deutsche Umlaute
ä ä
Ä Ä
ö ö
Ö Ö
ü ü
Ü Ü
ß ß
weitere häufige Zeichen:
" " Anführungszeichen
& &
¡ ¡ umgekehrtes Ausrufezeichen
¿ ¿ umgekehrtes Fragezeichen
‘ ?
’ ?
“ ?
” ?
&bdquo; ?
< <
> >

Tabellen

Oftmals im Leben braucht man Tabellen. Auch in HTML gibt es Tags speziell für Tabellen.

Wie du später noch erfahren wirst werden Tabellen in HTML sehr häufig auch als Element zu Ausrichtung genutzt und ganze Seiten in Tabellen ausgerichtet.
Heutzutage findet diese Technik jedoch weniger Anwendung, da für die Ausrichtung kompletter Webseiten div Tags genutzt werden sollen, die nicht wie table eine andere semantische Bedeutung haben.

Was ist eine Tabelle?

Eine Tabelle ist eine Strukturmöglichkeit 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 Fächern vorstellen.

Aber erstmal müssen wir wissen wie wir dem Browser beibringen können das eine Tabelle beginnt.

Das geschieht mit dem Tag <table>. Beendet wird die Tabelle mit dem Endtag </table>.

Zeilen in HTML - Tabellen

Eine Zeile beginnt mit dem <tr> Tag (table row). Diese Zeile kann mehrere Zellen enthalten und wird mit </tr> beendet.
Zellen in HTML Tabellen
In den verschiedenen Zeilen kann man mit <td> (table data) eine neue Zelle beginnen.

<td> muss nicht beendet werden, sollte es aber (bei XHTML erstrecht).

Die einfachste Tabelle mit einer Zeile und einer Zelle würde in HTML also so aussehen:

Quote:

<table>
<tr>
<td>Meine Tabelle </td>
</tr>
</table>

Wie würde eine Tabelle mit einer Reihe aber zwei Zellen aussehen?

Quote:

<table>
<tr>
<td>Zelle 1 </td>
<td>Zelle 2 </td>
</tr>
</table>

Und einer Tabelle mit zwei Zeilen und jeweils einer Zelle?

Quote:

<table>
<tr>
<td>Zeile 1</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
</table>

Bei Tabellen ist einer sehr komplexe verschachtelung möglich. 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 für die Kopfzeile einer Tabelle gedacht. Zeichen innerhalb des <th> Tag werden anders dargestellt als
Zeichen in <td> Tags.

Für den <th> Tag gilt ebenfalls das ein schließender Tag nicht erfordelich, aber zu empfehlen ist.

Manchmal möchten wir aber auch Zellen in einer Tabelle verbinden. Auch daran wurde in HTML gedacht.
Zellen verbinden
Dazu gibt es mehrere Möglichkeiten. Die eine Möglichkeit ist Zellen in einer Zeile zu verbinden, die andere Zellen in einer Spalte zu verbinden.

Um das das zu realisieren gibt es für den Tag ein Attribut. Für mehrere Zellen in einer Spalten ist das Attribut ?colspan? vorgesehen. Für Zellen über mehrere Zeilen das Attribut ?rowspan?.

Quote:

<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 hätten wir also folgenden HTML Quelltext:

Quote:

<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 müssten wir mit dem ersten Beispiel machen, damit wir die Zellen der ersten Spalte verbinden, die 1. Zelle also über 2 Zeilen geht?
Wir würden folgenden HTML Quelltext bekommen:

Quote:

<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 möglich und wie man sicher sieht kann es kompliziert werden, wenn man so eine Tabelle im Kopf nachvollziehen möchte. 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 wäre ja auch schön wenn wir Bilder in unsere HTML Seite einbauen könnten.

DIV und SPAN

In den frühen Jahren des www gab es wenige Möglichkeiten große Seiten gut zu strukturieren. Ein Ansatz war es das Browserfenster in verschiedene Abschnitte (Frames) zu unterteilen. Jeder dieser Frames hat eine einzelne Seite repräsentiert. Diese Art der erstellung hatte den Vorteil das z.b. eine Navigation auf der linken Seite nur als einzelne HTML Datei existieren musste.

Durch den Einsatz von Skriptsprachen und Programmiersprachen war es jedoch möglich auch so Abschnitte einer Seite zu generieren und in den Quelltext einzufügen. Da es esthetisch besser aussah und auch z.b. für Suchmaschinen besser war wurde versucht alles auf einzelnen Seiten statt mit Frames zu generieren. Als mittel zur Strukturierung wurden dafür HTML Tabellen verwendet. Wenn man HTML Tabellen ohne Rahmen verwendet, eignene sich diese optimal zum Strukturieren und Layouten.

Doch diese Vorgehensweise hat einen großen Nachteil:

Die Tabellen werden in einem semantisch falschen Kontext benutzt. Tabellen sind eigentlich dafür da, Daten strukturiert in Zeilen und Spalten auszugeben.

Zur Strukturierung verwendet man deshalb heute div und span Tags. Diese div und span Tags kann man über Cascading Style Sheets (CSS) formatieren.

Ein DIV ist ein Blockelement (display:block), das bedeutet das nach jedem DIV ein Zeilenumbruch erzeugt wird. Es gruppiert größere Abschnitte. Der SPAN dagegen ist ein inline Element, dieses ist für kleinere abschnitte gedacht. Inline Elemente (z.b. SPANs) dürfen keine Blockelement (DIVs) enthalten.

Es wird vom W3C geraten über die Klassennamen einen semantischen Bezug herzustellen.

Beispiel:

Quote:

<div id="main-menu">
<ul>
<li class="menu-item"></li>
</ul>
</div>

id und class

Wie oben bereits erwähnt erfolgt eine Formatierung der div und span Element über CSS. dazu gibt es verschiedenen Möglichkeiten.

1. Man kann über das Attribut style direkt CSS Style angeben
2. Man kann über id eine eindeutige id für dieses Element vergeben. Diese id darf also nicht nochmal im Dokument vorkommen. Diese IDs kann man in einem externen CSS File oder in Inline CSS formatieren
3. Man kann Element in Klassen gruppieren. Ein Element kann mehreren Klassen angehören und eine Klasse kann auch für mehrere Element verwendet werden. Zuordnung erfolgt über das Attribut class.

Webfähige Bildformate

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 Fälle ist daran aber nicht der riesen Text der Seite schuld.

Nein, es sind die vielen Bilder auf einer Seite die zu einem langsamen Seitenaufbau führen.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 Gründen der langsamen Datenübertragung wurden im Internet schon immer Bildformate verwendet die, die Dateigröße optimieren. Das kann, muss aber nicht umbedingt auf kosten der Qualtität 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 für das Speichern von Zeichnungen, Buttons etc, mit nicht ganz so vielen Farben wie in Fotos. Darüberhinaus 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.

Für 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 große Vorteile.Doch wie bindet man jetzt so ein Bild ein?

Einbinden eines Bildes

Um eine Bildquelle (eng Image Source) einzubinden. Gibt es in HTML den Tag:

Quote:

<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 möglich. Ratsam ist aber ein realtiver Pfad, das es sonst beim überspielen auf dem Webserver Probleme geben kann.

Hier Beipiele für 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 für Bilder "/var/www/bilder"
Name des Bildes meinbild.gif.

Wenn wir dieses Bild mit einem absoluten Pfad einbinden wollen müssten wir folgenden Tag verwenden:

Quote:

<img src="/var/www/bilder/meinbild.gif">

Wenn wir einen relativen Pfad verwenden sähe der Tag so aus:

Quote:

<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 gelöscht 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 Fällen nichts finden.

Der absolute Pfad ist nur auf deinem Rechner gültig, auf einem anderen Rechner existiert wahrscheinlich unter dem absoltung Pfad garkein Bild.
Ausserdem ist auch noch eine URL als Bildadresse möglich, also eine Adresse im Internet.Ein Beispiel dafür wäre:

Quote:

<img src="http://www.admin-wissen.de/banner/test.gif">

Das ist von Vorteil wenn man Bilder von einer anderen Webseite einbinden möchte, man sollte den Webmaster der Seite aber vorher Fragen. Damit ist es natürlich auch möglich auf die eigene Url zu verweisen.

Alternativtext

Da man manchmal auf Grafiken etwas warten muss und auch Suchmaschinen eine Berschreibung des Bildes wünschen, weil Sie ja nicht so gut "sehen" können. Gibt es ein Attribut, mit dem man einen alternativen Text für 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.

Quote:

<img src="test.gif" alt="Mein Testbild">

Manchmal wünscht man sich für seine Bilder auch einen Rahmen, dass ist nicht nur Zuhause so.

Auch bei HTML können 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:

Quote:

<img src="test.gif" alt="Mein Testbild" border="1">

Alternativ kann auch über das style Attribut mit css ein Rahmen festgelegt werden

Quote:

<img src="test.gif" alt="Mein Testbild" style="border: solid 1px;">

Es wäre auch toll wenn wir die größe des Bildes verändern könnten.

Links einfügen

Links sind das, was das Internet eigentlich aussmacht. Durch Links kann man auf andere Seiten verweisen, und ermöglicht 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 möchtest du aber auch auf andere Seiten im Internet veweisen.Sehr wahrscheinlich willst du einen Link zu uns auf admin-wissen.de setzen. Für solche Fälle kann man als Linkziel die URL der Seite angeben auf die man Verweisen möchte.Ein Beispiel:

Quote:

<a href="http://www.xyz.de">
Meine lieblings Computerseite
</a>

Diese einfachen Links haben einen unangenehmen Nebeneffekt, die Seite auf die du verweist wird im selben Fenster geöffnet wie deine Seite. Dadurch verlässt der Besucher deine Seite.

Es gibt eine Lösung für 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 geöffnete Fester eigentlich, wirst du dich jetzt vielleicht Fragen.

Die Lösung hierfür ist, einfach einen Namen einzusetzen den es nicht gibt.

Quote:

<a href="http://www.xyz.de" target="gibtsnet">
Meine lieblings Computerseite
</a>

Würde die Seite also in einem neuen Fenster öffnen. Hierbei hat sich aber eingebürgert, als target "_new" zu nehmen. Besser wäre also:

Quote:

<a href="http://www.xyz.de" target="_new">
Meine lieblings Computerseite
</a>

Wichtig wird dieses Target später nochmal wenn wir uns mit Frames beschäftigen.

Bilder als Link

Natürlich kann man mehrere Tags, wie fast immer in HTML, kombinieren und verschachteln. So können wir auch ein Bild als Link benutzen.

Wir müssen ganz einfach um unseren Bilder Tag einen Link Tag herumsetzen:

Quote:

<a href="http://www.xyz" 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 möchte?

Anker Links

Manchmal möchten 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:

Quote:

<a name="MeinAnker">Anker Inhalt</a>

Veweisen tuen wir auf diesen Anker mit folgendem Tag:

Quote:

<a href="#MeinAnker">Linktext</a>

oder von einer anderen Seite mit:

Quote:

<a href="seite.htm#MeinAnker">Linktext</a>

Formulare

Zugegebenn,
mit HTML alleine gibt es sehr wenige Einsatzbereiche für Formulare. Du solltest dich trotzdem damit beschäftigen. Denn später, 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 möchte euch hier Formulare am Beispiel eines einfachen Mailformulares erklären.Wenn du dich mal mehr mit HTML und z.B. PHP beschäftigt hast, wirst du herausfinden das es für diesen Zweck bessere Lösungen gibt.

Bei diesem Beispiel geht es also nur ums Prinzip. Um ein Formular zu erstellen müssen wir erstmal einen Formularbereich erstellen.In diesem Anfangs Tag müssen wir festlegen, was mit dem Formular passieren soll, wenn der Benutzer es abschickt. Wir müssen uns also eine Aktion überlegen, genauso heisst auch das Attribut des form Tags, nämlich "action".

Mit "method" wird die Art der Übertragung festgelegt. Man kann bei method zwischen "post" und "get" wählen. Was das zu bedeuten hat werden wir irgendwann später klären. Mit enctype legen wir in diesem Fall fest um weche Art von Mail es sich handelt. Das enctype Attribut wird aber normal nicht so häufig verwendet.

Quote:

<form action="mailto:"
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 müssen ja noch unsere Felder eintragen. Aber auch hier gibt es viele Möglichkeiten.

Wir fangen erstmal mit dem einfachsten an, nämlich mit dem Textfeld.

Textfelder in HTML Formularen

Das Textfeld benutzen wir immer wenn Zeichen eingegeben werden sollen. Dazu zählen auch Zahlen.

Ein Textfeld integrieren wir indem wir unser Formular folgendermassen erweitern:

Quote:

<form action="mailto:" method="post"
enctype="text/plain">

Name: <input type="text" name="name" value="Ihr Name">
</form>

Wir benutzen für 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 später komplexe Skripte schreibst, ergibt sich aus diesem Namen ein Variablenname. Mit dem "value" Attribut kann man einen Text der im Textfeld steht vorgeben.

Textbereiche (textareas)

Manchmal braucht man einen großen Bereich, wo ein Benutzer lange Texte eingeben kann. Speziell für 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:

Quote:

<form action="mailto:" method="post"
enctype="text/plain">

Name: <input type="text" name="name" value="Ihr Name">

Deine Meinung:
<textarea name="meinung">
Schreib in dieses Feld deine
Meinung zu unserer
Internetseite.
</textarea>
</form>

Wie du siehst benötigt Textarea einen Tag der die Textarea beendet. Das liegt daran das der "value" Bereich zu gross werden würde, wenn man den Inhalt hineinschreiben würde.

Checkboxen

In manchen Fällen 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 auswählen kann.

Über folgenden Tag bauen wir eine Checkboxen ein:

Quote:

<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 später ein Problem werden, aber PHP z.B. kennt Hier möglichkeiten 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:

Quote:

<form action="mailto:" method="post"
enctype="text/plain">

<p>Name: <input type="text" name="name" value="Ihr Name"></p>

<p>Deine Meinung:<textarea name="meinung">Schreib in dieses Feld deine Meinung zu
unserer Internetseite</textarea></p>

<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 können, aber wie
können wir bestimmen das der Benutzer nur eine Option wählen kann?

Radiobuttons

Ihren Namen haben die Radiobuttons von alten Radios. Bei diesen Radios war es so, dass wenn man einen Knopf getdrückt hat, die anderen Knöpfe rausgesprungen sind.

Genauso ist das auch in HTML mit den Radiobuttons.

Ein gutes Beispiel für Radiobuttons ist die Auswahl des Geschlechts, den jeder ist entweder männlich oder weiblich oder ? ;-)

So sieht es aus wenn wir einen Radiobutton einbauen wollen:

Quote:

<input type="radio" name="geschlecht" value="maennlich"> Männlich<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 gewünschte Funktion realisieren. Wir bauen das ganze also in unser Formular ein:

Quote:

<form action="mailto:" method="post"
enctype="text/plain">

<p>Name:
<input type="text" name="name" value="Ihr Name"></p>

<p>Deine Meinung:<textarea name="meinung">Schreib in dieses Feld deine Meinung zu
unserer I nternetseite.
</textarea></p>

<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>

<p>Geschlecht:<br />
<input type="radio" name="geschlecht" value="maennlich"> männlich<br />
<input type="radio" name="geschlecht" value="weiblich"> weiblich<br />
</p>
</form>

Manchmal wollen wir sehr viele Auswahlmöglichkeiten anbieten, ohne das diese sehr viel Platz
brauchen.
Die Lösung hierfür sind Auswahllisten

Auswahllisten
Mit Listen können wir große Mengen an Auswahloptionen kompakt darstellen. Ein Beispiel wäre das Bundesland aus dem unser Benutzer kommt.

Quote:

<select name="bundesland" size="1">
<option value="nichts">nicht aus Deutschland</option>
<option value="Baden-Wuerttemb">Baden-Württemberg</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 Platzgründen hab ich mir den Rest der Bundesländer gesparrt, aber ich denke das Prinzip wird klar.

Das ganze bauen wir natürlich auch in unser Formular ein:

Quote:

<form action="mailto:" method="post" enctype="text/plain">

<p>Name: <input type="text" name="name" value="Ihr Name"></p>

<p>Deine Meinung:
<br />
<textarea name="meinung">
Schreib in dieses Feld deine Meinung
zu unserer Internetseite.
</textarea>
</p>

<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>

<p>
Geschlecht<br>
<input type="radio" name="geschlecht" value="maennlich"> Männlich<br />
<input type="radio" name="geschlecht" value=?weiblich"> Weiblich<br />
</p>

<p>
Aus welchem Bundesland kommst du? <br />
<select name="bundesland" size="1">
<option value="nichts">nicht aus Deutschland</option>
<option value="Baden-Wuerttemb">Baden-Württemberg</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:

Quote:

<input type="submit" value="EMail versenden">

Wir müssen also als Attribut type "submit" angeben. Um die Beschriftung des Buttons zu ändern, müssen 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 können zuschauer das eingegebene Passwort nicht lesen.

Tag für ein Passwortfeld:

Quote:

<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:

Quote:

<input type="hidden" name="filled" value="true">

Damit kann der Programmierer später abfragen ob das Formular abgesendet wurde. Versteckte Felder können also nützlich sein um z.b. statusvariablen etc zu übermitteln. Man sollte sie jedoch niemals dazu nutzen Sicherheitsrelevante Informationen vom Server zum Client zu übertragen um diese nach dem abschicken des Formulars wieder zu nutzen. Denn der Quelltext ist beim Client lesbar und veränderbar.

In unserem Mailformular habe ich auf ein verstecktes Feld verzichtet.

Unser Formular ist jetzt Soweit fertig und der Quelltext sieht so aus:

Quote:

<form action="mailto:" method="post" enctype="text/plain">

<p>Name: <input type="text" name="name" value="Ihr Name"></p>

<p>Deine Meinung:
<br />
<textarea name="meinung">
Schreib in dieses Feld deine Meinung
zu unserer Internetseite.
</textarea>
</p>

<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>

<p>
Geschlecht<br />
<input type="radio" name="geschlecht" value="maennlich"> Männlich<br />
<input type="radio" name="geschlecht" value=?weiblich"> Weiblich<br />
</p>

<p>
Aus welchem Bundesland kommst du?<br />
<select name="bundesland" size="1">
<option value="nichts">nicht aus Deutschland</option>
<option value="Baden-Wuerttemb">Baden-Württemberg</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>

<p>
<input type="submit" value="EMail senden">
</p>
</form>

Die aus diesem Feld generierte Mail würde so aussehen:

name=Timo Schmidt
meinung=Tolle Internetseite
kenntnisse=bilder
kenntnisse=frames
kenntnisse=tabellen
kenntnisse=formulare
geschlecht=maennlich
bundesland="Hamburg"

!!! Ich hab das TuT nich selber geschrieben sondern beim Surfen entdeckt und mir gedacht das ich euch das nich vorenthalten kann!!

~~Perfection-~~ · 02/06/2011, 00:24

sry aber hat nicht wirklich viel mit MT2 zutuhen und da ich keiner von diesen "Report" leuten bin mache ich es auch nicht und lasse es einem anderen machen

~~CranK™~~ · 02/06/2011, 00:26

Jop,
mich zum Beispiel.
Passt hier nicht in die Section aber danke das du dir die Mühe gegeben hast deshalb haste nen thx von mir

#reported falsche section

MrWampsen*** · 02/06/2011, 00:29

wow in welche section kommt das dann ?

~~Perfection-~~ · 02/06/2011, 00:31

kommt in die coding section deswegen,

#moverequest

~~CranK™~~ · 02/06/2011, 00:32

Bin mir nicht sicher in welche section der thread kommt...
Aber ein Moderator wird den Thread schon in die richtige Section verschieben.
Sollte eigentlich nicht gelöscht werden.

MrWampsen*** · 02/06/2011, 00:36

ok danke

paggle · 02/06/2011, 00:39

Quote:

Diesen Text speichern wir nun z.b. unter "meine-erste-htmlseite.htm".

Die Endung ".html" ist hierbei sehr wichtig.

Da wird ein Fehler sein^^ sonst top :> mir fehlt sowas wie "Warum sollte ich HTML lernen/wählen?"

MrWampsen*** · 02/06/2011, 00:42

danke für den hinweis ;D

wenn man das lernt dann weis man warum xD

aber wenn du willst kann ich das gerne nach vollendigung des tut's ergänzen^^

♥John_Dorian · 02/06/2011, 01:02

Danke, bin/war ein html noob

bringt viel, gut erklärt und danke

henpii · 02/06/2011, 01:18

Wenn man ein HTML tutorial schreibt, sollte mann es schon richtig machen..
sry aber jeder der Html KANN, weiß das viele Fehler bei dir drinne sind.

Allgemein fängt jedes Html Dokument mit dem Doctype an....

alles weiter kein Bock zu erklären.. weil wegen würde zu lange sein..

Jag deine Scripte mal hier durch

Das W3C sagt was richtig und was falsch ist in html, xhtml und CSS.
da wird einem schon ziemlich viel gesagt.

was auch sehr Hilfreich ist:

LG

H3npi

sonylein · 02/06/2011, 01:18

viel arbeit? copy&paste habs auf vielen seiten gefunden u.a. admin-wissen.de (

)

MrWampsen*** · 02/06/2011, 01:27

Quote:

Originally Posted by henpii

Wenn man ein HTML tutorial schreibt, sollte mann es schon richtig machen..
sry aber jeder der Html KANN, weiß das viele Fehler bei dir drinne sind.

Allgemein fängt jedes Html Dokument mit dem Doctype an....

alles weiter kein Bock zu erklären.. weil wegen würde zu lange sein..

Jag deine Scripte mal hier durch

Das W3C sagt was richtig und was falsch ist in html, xhtml und CSS.
da wird einem schon ziemlich viel gesagt.

was auch sehr Hilfreich ist:

LG

H3npi

hab das obere gemacht 0 Errors, 4 Warnings

~~.Sh4rk~~ · 02/06/2011, 01:28

Google mal nach HTML für Anfänger und du findest Tuts die genau den selben Satzaufbau haben wie deins hier, also schätze ich mal alles C & P

Und du arbeitest schon mit Div ohne die CSS Funktionen zu erklären o0

€: Sind mir einige zuvor gekommen

MrWampsen*** · 02/06/2011, 01:44

Quote:

!!! Ich hab das TuT nich selber geschrieben sondern beim Surfen entdeckt und mir gedacht das ich euch das nich vorenthalten kann!!

Aber egal...