HTML verstehen; Ein Einstieg in HTML! (Teil3)

HTML verstehen

Heute kommen wir endlich zu der Darstellung einer ganzen HTML-Seite!

Jede HTML-Seite sollte neben dem Doctype einen Header einen Dokumentkopf und einen Dokumentrumpf besitzen.
Dieser wird in ordentlichem HTML eingeschlossen durch die Anweisung
<html>…….</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head> 
   <meta http-equiv="Content-Type" content="text/html; 
       charset=iso-8859-15" />
    <title>Titel der Webseite</title>
    Hier werden weitere Headeranweisungen definiert
  </head>
  <body>
    Hier beginnt der sichtbare Bereich der Webseite
  </body>
 </html>

HTML-Tag

Im <html>-Tag wird Mr. Browser mitgeteilt, welches HTML verwendet wird, außerdem die Sprache der Seite mitgeteilt.
Das <html>-Tag beinhaltet auch den Header und den Rumpf der Seite. Letzte Anweisung der Seite ist dann </html>

Machen Sie doch mal den Test, und rufen Sie die im <html>-Tag angegebene Seite auf! Also http://www.w3.org/1999/xhtml. Sie gelangen zu W3C dem Internet Konsortium, das wie in Teil 2 angesprochen die Normierung des Internets übernommen haben.

Wie Sie sehen, wird die ganze Seite in den <html>-Tag „eingeschachtelt“. Das ist das Richtige Vorgehen für eine Seite. Was passiert aber, wenn man das alles weg lässt? Nun in unserem Sprachraum eigentlich nichts! Denn Mr. Browser weiß, wo er ist und stellt die Seite trotzdem richtig dar. Das kann er deshalb, weil er auf einem Rechner läuft, der in Deutschland mit dem deutschen Windows installiert wurde. Mr. Browser holt sich seine Informationen nicht nur durch den Link im <html>-Tag, sondern auch vom Betriebssystem. Wie eine derartige Seite allerdings in China aussieht, müsste man durch eine Dienstreise nach China herausbekommen.

 

Dokumentkopf (Einführung)

Der Dokumentkopf beinhaltet neben sog. meta-Anweisungen auch den Titel der Seite.
Der Titel der Seite wird in die Tags <title> und </title> eingestellt.
Es ist für Sie sehr wichtig, der Seite einen Titel zu geben, denn dieser Titel erscheint auf dem Fensterbalken des Browserfensters.

Fenstertitel

Außerdem wird er als Titel der Seite bei google übernommen. Neben der Seitenadresse ist diese Information die wichtigste, die google zur Beurteilung der Seite verwendet. Der Seitentitel sollte also wohlüberlegt sein und nie fehlen

Neben dem <title>-Tag ist für Sie noch ein sog. Meta-Tag (<meta ……. />) interessant.

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-15″ />

Hier geben Sie an, mit welchem sog. Charakterset die Seite arbeiten soll. Sie wählen die Schriftsprache für die Seite aus. Es gibt unterschiedliche Charaktersets, der iso-8859-15 ist der Deutsche mit allen Umlauten.

Oftmals, gerade bei Blogs, sehen Sie hier das UFT-8 – Charakterset! Das ist der sog. uni-code auf 8 Bit, und er enthält nur die englische Tastatur. Umlaute müssen Sie hier mit sogenannten Ersatzzeichen wie &uuml; für ü schreiben. Wenn Sie also eine Seite voll in deutsch schreiben wollen, müssen Sie den iso-8859-15 angeben.

Es gibt noch eine ganze Menge Meta-Tags, die den Suchmaschinen zur Beurteilung Ihrer Seite dienen. All diese Daten werden im <head> angegeben.

Auf die sinnvollen und weniger sinnvollen Meta-Tags werden wir noch später eingehen müssen, ebenso, was hier im Header sonst noch so geschrieben werden kann. Darauf werde ich Sie nach und nach hinweisen. Kommen wir zum interessanteren Teil der Seite dem Rumpf!

 

Dokumentrumpf (Einführung)

Der Rumpf einer Seite beginnt mit dem Tag-Paar <body>….. </body> Dieser Body-Tag kann auch noch sogenannte Parameter haben, auf die wir aber erst später eingehen werden. Immer langsam mit die Pferde 🙂

Der Body-Tag läutet sozusagen den sichtbaren Teil der Seite ein. Ab jetzt sehen Sie die Inhalte der Seite!

Toll! Ab jetzt können Sie drauf los schreiben, alles was zwischen <body> und </body> kommt wird Mr. Browser auf den Bildschirm ausgeben. Machen Sie doch mal einen Test:

  1. Schreiben Sie einen einfachen Text in einen Editor
  2. Stellen Sie in die 1. Zeile ein <body> und in die letzte Zeile ein </body>.
  3. Speichern Sie den Text auf ein Verzeichnis – sagen wir Temp – und benennen Sie die Datei Beispiel1.html
  4. Rufen Sie Ihren Datei-Explorer auf! Suchen Sie die Datei im Verzeichnis Temp und klicken Sie doppelt auf die Datei
  5. Der Browser wird aufgerufen und es erscheint in der Adresszeile des Browsers file:///D:/TEMP/beispiel.html
  6. Jetzt sehen Sie Ihren geschriebenen Text völlig unformatiert wie Sie ihn geschrieben haben, aber ohne Zeilenvorschübe

Glückwunsch Sie haben Ihre 1. HTML-Seite geschrieben und im Browser angezeigt.

OK! Ich gebe es zu, ich habe ein wenig geschummelt: Den Body-Tag hätten Sie nicht gebraucht! Auch so hätte der Browser die Seite dargestellt. Denn wenn weder Seitenkopf noch body angegeben ist, füllt der Browser intern das alles selbst mit seinem Hirn! Aber wir wollen ja hier richtiges HTML schreiben.

Jetzt werden Sie ganz professionell mit Ihrem Text, wenn Sie sich die Beispieldatei lorem_ipsum.txt herunterladen, dann haben Sie einen Teil eines Beispieltextes, den die ganz Großen im Geschäft des Webdesigns immer benutzen.
Klicken Sie einfach auf den Link und speichern Sie mit Ihrem Browser diese Datei als txt- oder html-Datei auf Ihren Rechner. Dann haben Sie genau den Text, der Ihnen in der Literatur auch immer begegnet. (Es ist kein Latein, aber was ähnliches). Wir werden diesen Text auch immer für die folgenden Beispiele benutzen.

Jetzt geht’s los

Wenn Sie sich den lorem ipsum-Text als html-Datei gespeichert haben, dann stellt der Browser ihn in einer oder 2 Zeile(n) dar. Mit dem ersten Tag, den wir lernen wollen, werden wir den Text nun ein wenig übersichtlicher gestalten.

<br />

Dieser Tag macht nichts anderes als Mr. Browser zu sagen, „mache hier bitte einen Zeilenvorschub“! Ändern Sie also den Text in Ihrem Editor wie folgt um:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quam lacus, <br />
feugiat eget, auctor a, ullamcorper nec, risus. Lorem ipsum dolor sit amet,<br />
consectetuer adipiscing elit. Fusce adipiscing velit eget ligula. Cras eu quam. <br />
Pellentesque cursus placerat felis. Curabitur vel lacus vitae orci pellentesque feugiat. <br />

Speichern Sie die Datei wieder als HTML-Datei und rufen Sie sie wie oben gezeigt auf! Sie erhalten folgendes Bild:
Fenstertitel
So können Sie einen Text auf einzelne Zeilen aufbereiten.

Bitte führen Sie das Beispiel aus! Denn Übung macht den Meister 🙂

Das Zeilenvorschubs-Tag ist ein Single-Tag! Es wird zwar in reinem HTML 4.01 als <br> dargestellt, in XHTML ist es aber ein Single-Tag und sollte als <br /> geschrieben werden. Dann ist es syntaktisch richtig.

[Übrigens: Solange es irgendwie Sinn macht, können Sie alle Beispiele über normale Windows-Dateien nachvollziehen. Gehen Sie dabei immer über den Datei-Explorer, dann brauchen sie nicht die vielen / – Zeichen im Browser einzutippen.! Erst wenn es um komplexere Dinge geht, werden wir wohl oder übel die Datei in den Webspace stellen müssen, bis dorthin ist es aber noch Zeit]

Im Übrigen beglückwünsche ich Sie, dass Sie jetzt schon eine ganze Seite angezeigt haben, bleibt eigentlich nur noch die Seite richtig in XHTML fehlerfrei zu schreiben.
Das habe ich Ihnen schon abgenommen! Schauen Sie sich bitte die folgende Datei an, indem Sie sie hier herunterladen und in ein Verzeichnis „MYHTML“ (oder so ähnlich) speichern.

Alle Dateien, die ich Ihnen zum Herunterladen anbiete, sind als txt-Datei im Web gespeichert. Rufen Sie den Link auf und speichern Sie mit dem Browser über das Menü „Datei | speichern unter“ die Datei als .html in ein Verzeichnis ab. Dann können Sie die Datei als html mit dem Browser aufrufen.

Tja dann können wir ja mit unserem Text das nächste Mal weiter machen und Absätze, Fett- und Kursivdruck einfügen!

Bis dann
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar