Man merkt massiv, dass euch keiner gezeigt hat, wie die Spezifikationen von HTML lauten und wie man diese sinnvoll einsetzt.
Zunächst fehlt die Dokumenttypdefinition. Ohne diese kann dein Browser nur raten, welche Spezifikation von HTML verwendet werden soll, was zu den unterschiedlichsten Fehler führen kann und wird.
Du könntest dich entweder direkt auf HTML 5 stürzen, was sicherlich sinnvoll ist wenn du es derzeit lernst und in Zukunft intensiver nutzen möchtst, dann lauet diese:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Beachte jedoch, dass HTML 5 noch kein Standard ist.
Ansonsten würde ich XHTML 1.0 Transitional empfehlen
Eineliste der empfohlenen Dokumenttypdefinitionen findest du hier:
http://www.w3.org/QA/2002/04/valid-dtd-list.html. Die Spezifiaktionen selbst findest du hier:
http://www.w3.org/standards/techs/html
Neben der neueren Möglichkeiten die HTML 5 bietet ist schon die kürzere Dokumenttypdefinition von Vorteil, da jedes weitere Zeichen, welches übertragen werden muss (auch Kommentare), die Aufrufgeschwindigkeit der Webseite verringern, welches direkten Einfluss auf die Geschwindigkeit hat, mir der Spider oder Crawler von Suchmaschinen deine Seite durchstöbern, aber auch das Wohlempfinden der Nutzer beeinträchtigt, denn wer nutzt schon gerne eine langsame Seite.
Je nachdem wofür du dich entscheidest kann man nun weiter fortfahren und raten, wie du es schreiben solltest.
Im Allgemeinen sei jedoch gesagt, dass Tabellen, also Strukturen der Art:
Code:
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
<tr>
<td align="right"> Name: </td>
<td><INPUT type="text" name="nachname" size="30" maxlenght="30"> </td>
</tr>
<tr>
<td align="right"> Vorname: </td>
<td> <INPUT type="text" name="vorname" size="30" maxlenght="30"> </td>
</tr>
</table>
Nur für Tabellen gedacht sind und es somit ein semantischer Fehler ist sie zu Platzierung von anderen Elementen zu verwenden, wenn es sich nicht um tabellarische Daten handelt.
Des Weiteren ist etwas wie
Code:
<td align="right"> Name: </td>
für die meisten Dokumenttypdefinitionen inkorrekt, mir ist derzeit auch keiner bekannt, welcher dies definiert.
Der Gedanke dahinter ist, dass HTML als Auszeichnungssprache ähnlich wie XML lediglich Bereiche defniert. Ein großer Unterschied ist dabei sicherlich, dass einie Bestandteile von HTML vorformatiert sind, wie z.B.
Welches den Text
fett anzeigt. Wenn man nun jedoch nachträglich dieses Verhalten anpassen möchte, so gibt es dazu die Cascading Style Sheets (kurz CSS), welche dies definieren.
Kurz gesagt:
HTML dient dazu Bereiche festzulegen und besitzt für kleinere Aufgaben vordefinierte Anweisungen.
CSS dient dazu die Bereiche zu designen, also etwas zu zentrieren, farblich zu veränden, usw.
JS dient dazu eine HTML-Seite dynamsich zu gestallten.
Zuletzt möchte ich dir folgendes Beispiel an Herz legen, um ein gutes Formular zu schaffen:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Formular</title>
<meta charset="UTF-8">
<style type="text/css">
fieldset
{
width: 300px;
}
input, select
{
float: right;
}
label
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Einfaches Formular</legend>
<label>Vorname: <input type="text" name="vorname" /></label>
<label>Nachname: <input type="text" name="nachname" /></label>
</fieldset>
</form>
</body>
</html>
Näheres zu Formularen findest du hier:
http://www.w3.org/TR/html5/forms.html
Man sollte jedoch noch sagen, dass man die Cascading Style Sheets in eine eigene Datei einfügen und über
Code:
<link rel="stylesheet" href="main.css" type="text/css" />
einbinden sollte.
