html-Lehrgang zweiter Tag

Was euch bevorsteht:

  • Teil 1:
    • html-Grundgerüst
    • Bilder einfügen
    • Verweise
  • Teil 2:
    • Umlaute und Sonderzeichen
    • Tabellen

Das html - Grundgerüst

Na, habt ihr den ersten Tag gut überstanden? Dann wollen wir gleich weitermachen und uns das html-Grundgerüst anschauen.

Jede html-Seite wird nach einem festgelegten Schema aufgebaut. Dieses Schema besteht aus drei Teilen:

  • durch den Doctype sagen wir dem Browser, nach welchen Regeln die Seite erstellt wurde.
  • In den Head schreiben wir wichtige Informationen, die sogenannten Metainformationen. Hier stehen z.B. die Keywords, also die Schlüsselwörter, eine wichtige Inforamtion für die Suchmaschinen.
  • Im Body steht dann der eigentliche Inhalt der Seite, der im Browserfenster angezeigt wird.

Schauen wir uns nun so ein Minimal-Grundgerüst an:

Das html-Grundgerüst

Nach diesem Schema wollen wir ab sofort jede Webseite aufbauen, ok?

Bilder einfügen

Widmen wir uns nun den Bildern. Verlassen wir den langweiligen Pfad der reinen Textseiten und begeben wir uns in das Paradies der bunten und farbenfrohen Webseiten. Bilder sind auch für das Internat das Salz in der Suppe. Nicht umsonst sagt man:"Ein Bild sagt mehr als 1000 Worte"

Wie aber wird ein Bild in eine Webseite eingefügt? Nun, zunächst teilen wir dem Bowser mit, wo sich das Bild befindet und welchen Dateinamen das Bild hat:

<img src="bilder/giraffe.png" />

Bilder in Webseite einfügen

Und das erscheint im Browser:

img-Tag im Browser

Klasse, ab sofort wird's bunt! <img src="bilder/giraffe.png" /> reicht aus, um ein Bild im Browser anzeigen zu lassen. Jedoch sollten wir jedem Bild noch en paar Attribute mitgeben:

  • alt="alternativer Text" wird z.B. dann angezeigt, wenn der Browser keine Bilder laden kann, weil z.B. der Benutzer diese Funktion abgeschaltet hat.
  • title="Titel des Bildes" sieht man dann, wenn man mit dem Mauszeiger über das Bild fährt.
  • width="700" gibt die Breite des Bildes in Pixel an.
  • height="570" gibt die Höhe des Bildes in Pixel an.
Die Angabe von Breite und Höhe des Bildes hat zwei Gründe:
  1. kann der Browser schon beim Laden der Seite den notwendigen Platz für das Bild im Anzeigefenster bereitstellen.
  2. Zweitens ändert sich der Grundaufbau unserer Webseite nicht, falls das Bild nicht geladen werden kann, da der Browser ja den Platz zur Anzeige festlegen konnte.

Schauen wir uns daher einmal die Anzeige im Browser an, wenn das Bild, warum auch immer, nicht geladen werden konnte:

Bilder-Platzhalter ohne Attributangaben

So sieht es ohne Attributangaben "height", "width" und "alt", und so mit den Angaben:

Bilder-Platzhalter mit Attributangaben

Wir sehen also, dass die Attributangaben durchaus sinnvoll sind, auch wenn es etwas mühevoll ist, dies für jedes Bild zu tun.

Bilder mit Attributangaben

Noch ein paar Tipps zu Bildern:

  • Wir sollten Bilddateien so klein wie möglich halten, da das Laden großer Dateien, auch im Zeitalter von dsl, die Ladezeiten von html-Seiten erhöht.
  • Zur Anzeige im Browser reicht eine Auflösung von 72 dpi aus.
  • Wir schneiden die Bilder mit einem Bildbearbeitungsprogramm so zurecht, wie es angezeigt werden soll und vermeiden das "künstliche Zurechtscheiden" mit Attributangaben.
  • Sollten wir ein Bild auf einer Seite mehrmals benötigen, so können wir dafür die gleiche Bilddatei wieder verweden. So muss der Browser das Bild nur einmal laden und kann es mehrmals anzeigen.

Den letzten Tipp wollen wir einmal ausprobieren. Wir erstellen mit zwei Bilddateien eine schachbrettartige Anzeige:

html Schachbrett mit Bildern html Schachbrett mit Bildern 2

Und so erscheint es im Browser:

html Schachbrett mit Bildern im Browser

Wir haben im Diesem Beispiel ein Schachbrett aus 36 Bildern erstellt, brauchten dafür aber nur 2 Bilder laden lassen.

Verweise

Eine ebenfalls wichtige Sache sind Verweise, d.h. die Verlinkung von Internetseiten sowohl intern als auch extern. Erst durch Verlinkung werden einzelne Webseiten zu einer kompletten Homepage und das Internet zum World Wide Web.

Beginnen wir mit dem Versuch, zwei Seiten untereinander zu verlinken:

Wir erstellen zunächst zwei Dateien:

html Verlinkung von Webseiten 1

Oben Datei 1 und unten Datei 2:

html Verlinkung von Webseiten 2

html Verlinkung von Webseiten 1, Anzeige im Browser

Wenn wir nun die Seite 1 in den Browser laden, sollten wir bei Klick auf den Verweis "Hier geht es zu Seite 2" auf die zweite Seite gelangen:

html Verlinkung von Webseiten 2, Anzeige im Browser

Und siehe da, es funktioniert!

Bei Klick auf den Verweise "Hier geht es zu Seite 1" kommen wir auch wieder auf Seite 2 usw. usf. Wir haben diese beiden Seiten nun untereinander verlinkt.

Bei dieser Verlinkung wird die Seite bei Klick auf den Verweis im aktuellen Browserfenster angezeigt. Nun kann es aber sinnvoll sein, dass für den Verweis auf die neue Seite ein neues Browserfenster geöffnet werden soll. Auch dafür gibt es im html ein entsprechendes Attribut: target="_blank". Probieren wir es einmal aus:

html Verlinkung von Webseiten 1, Anzeige im neuen Fenster

html Verlinkung von Webseiten 2, Anzeige im neuen Fenster

Schauen wir mal, was bei Klick auf den Verweis geschieht:

html Verlinkung von Webseiten 3, Anzeige im neuen Fenster

Und siehe da, der Browser öffnet ein neues Fenster. Da Scriptly anscheinend nicht mehrere Browservorschauen hat, wird unser Standardbrowser geöffnet, in meinem Fall der Internet-Explorer.

Doch Vorsicht, jedes Mal bei Klick auf einen Verweise mit dem Attribut target="_blank" wird ein neues Fenster geöffnet. Dies kann unter Unständen nervig sein, wenn der Besucher X Seiten schließen muss. Daher sollten wir dieses Attribut mit Bedacht einsezten

Eine durchaus sinnvolle Anwendung ist das Öffnen von Dokumenten wie PDFs. Ja, Sie haben richtig gelesen, auch Dateien werden mit <a href> geöffnet. Ein kleiner Test gefällig?

html Dateien öffnen

Bei Klick auf den Verweis passiert folgendes:

html Dateien öffnen, Anzeige im neuen Fenster

Das PDF hat sich in einem neuen Browserfenster geöffnet.

Auf dieser Weise können wir alle erdenklichen Arten von Dateien öffnen.

Verlinkung von externen Websites

Wenn wir eine externe Website verlinken wollen, so gehen wir auf die gleiche Art und Weise vor:

externe Website öffnen

externe Website öffnen, Anzeige im neuen Fenster 1

Nach Klick auf den Verweis geht es zu folgender Seite:

externe Website öffnen, Anzeige im neuen Fenster 2

Die Seite von SELFHTML kann ich euch übrigens wärmstens emfpehlen, da ihr dort viele weitere Informationen zu html & Co. findet.

Bitte beachten: Bei externer Verlinkung muss die vollständige URL angegeben werden:

eine komplette URL

Und wieder haben wir eine ganze Menge gelernt. wir können

  • Bilder einfügen
  • eine Website intern verlinken
  • unsere Website mit externen Sites verlinken
  • Dateien wie PDFs zum Öffnen bereitstellen

Im zweiten Teil des heutigen Tages geht es um Umlaute und Sonderzeichen sowie Tabellen. Und hier geht es weiter zum html-Lehrgang Tag 2 Teil 2.


« zurück