HTML-Tutorial: Die Grundlagen (5)
Zwischenstand, Zusammenfassung und Übung
Das lernen Sie hier:
Mit den ersten vier Lektionen verfügen Sie bereits über fast alle wirklich wichtigen Grundlagen, um eine vollständige Internetseite aufbauen zu können. Sehen wir uns das bisher Gelernte also noch einmal an und ergänzen es durch ein paar noch nicht erwähnte Kleinigkeiten.
Mit den ersten vier Lektionen verfügen Sie bereits über fast alle wirklich wichtigen Grundlagen, um eine vollständige Internetseite aufbauen zu können. Sehen wir uns das bisher Gelernte also noch einmal an und ergänzen es durch ein paar noch nicht erwähnte Kleinigkeiten.
Eine kleine Übungsseite
Hier ist eine kleine HTML-Seite, auf der die meisten Anwendungen enthalten sind, die wir bisher besprochen haben. Zuerst also der HTML-Code:
<html> <head> <title>Eine Übungsseite</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> </head> <body> <h1 align="center">Eine HTML-Übungsseite</h1> <p>Nach den ersten vier Lektionen können Sie jetzt schon eine ganze Menge. Sie kennen inzwischen:</p> <ol> <li>den grundsätzlichen Aufbau einer HTML-Seite</li> <li>Textformatierungen wie <b>fett</b> und <i>kursiv</i></li> <li>Absätze (Stichwort: p-Tag)</li> <li>Überschriften (Stichwort: h-Tags)</li> <li>Attribute</li> <li>Bilder einbinden</li> <li>Links</li> <li>Tabellensatz</li> </ol> <p>Das ist zwar noch nicht alles, was es in HTML gibt, aber Sie können damit bereits eine ganz stattliche und tadellos funktionierende Seite aufbauen, die jeder aktuelle Browser richtig darstellen wird. Wenn Sie diese Seite dann auf einen Webserver hoch laden (Bilddateien nicht vergessen!), ist sie ganz normal im Internet abrufbar.</p> <table border="1" cellpadding="10" rules="rows"> <tr align="left" valign="middle"> <td><img src="pics/raichberg.jpg"></td> <td width="300"><b>Infrarot-Aufnahme:</b><br> Auf dem Raichberg kurz vor einem Gewitter</td> </tr> <tr align="left" valign="middle"> <td><img src="pics/friedhof.jpg"></td> <td width="300"><b>Infrarot-Aufnahme:</b><br> Der Friedhof im Tübinger Ortsteil Kilchberg</td> </tr> <tr> <td colspan="2" align="center">Hier geht es zu meiner <a href="http://eye.de">Foto-Homepage</a></td> </tr> </table> </body> </html>
Einige Ergänzungen
Im HTML-Code oben sind ein paar Neuigkeiten versteckt, die wir bisher noch nicht hatten, die aber nicht schwer zu verstehen sind:
- Das Attribut rules in der Tabelle.
Damit kann man beeinflussen, welche Trennlinien angezeigt werden und welche nicht. Ich habe hier rules="rows" verwendet. Probieren Sie aber statt rows auch mal cols, groups und none aus. - Das width-Attribut in der Tabelle.
Damit können Sie die Breite einer Zelle beeinflussen (hier in Pixel). Aber Vorsicht: Wenn Sie einer Zelle eine bestimmte Breite zuweisen, macht das nur Sinn, wenn nicht in derselben Spalte eine Zelle mit anderer Breitenangabe gefunden wird. Sonst wird die größere von beiden Breitenangaben genommen und der ganzen Spalte zugewiesen. - Das <br>-Tag.
Damit beginnen Sie eine neue Zeile, bleiben aber im selben Absatz. Es ist also ein so genannter weicher Umbruch.
Klicken Sie hier, wenn Sie sich anschauen wollen, wie die von diesem HTML-Code erzeugte Internetseite in Ihrem Browser aussieht.