Das Prinzip des Html's

 

Einführung in das HTML „Sandwich-Prinzip“

 HTML, die Abkürzung für Hypertext Markup Language, ist das Rückgrat der meisten Webseiten und wird verwendet, um deren Struktur zu definieren. Eine der grundlegenden Konzepte von HTML ist das sogenannte „Sandwich-Prinzip“. Dieses Prinzip hilft, den Aufbau von HTML-Dokumenten zu verstehen und anzuwenden.

 

Die Struktur eines HTML-Elements

 Ein HTML-Element besteht aus drei Hauptbestandteilen: einem öffnenden Tag, einem schließenden Tag und dem Inhalt dazwischen. Diese Struktur ist vergleichbar mit einem Sandwich, bei dem die Brotscheiben die Tags und der Inhalt den Belag darstellt.

 

Die „obere Brotscheibe“: Der öffnende Tag

 Der öffnende Tag markiert den Beginn eines HTML-Elements. Er besteht aus einem Befehl, der in spitze Klammern gesetzt ist. Ein Beispiel hierfür ist der <body>-Tag, der den Hauptinhalt einer HTML-Seite umschließt. Dieser Tag sagt dem Browser, dass der nachfolgende Inhalt zum Hauptteil der Seite gehört.

 

Der „Belag“: Der Inhalt

Der Inhalt eines HTML-Elements befindet sich zwischen dem öffnenden und dem schließenden Tag. Dies kann Text, Bilder oder andere Elemente umfassen. Der Inhalt ist flexibel und hängt von der Art des Tags und der Struktur der Webseite ab.

 

Die „untere Brotscheibe“: Der schließende Tag

Der schließende Tag signalisiert das Ende des HTML-Elements. Er sieht ähnlich aus wie der öffnende Tag, enthält jedoch einen Schrägstrich (slash) unmittelbar nach der öffnenden spitzen Klammer. Für den <body>-Tag wäre dies </body>. Dieser Schrägstrich zeigt an, dass das Element abgeschlossen ist.

 

Die Rolle des Schrägstrichs

Der Schrägstrich im schließenden Tag ist essentiell, um die Struktur eines HTML-Dokuments korrekt zu definieren. Er sorgt dafür, dass der Browser weiß, wann der Inhalt eines Elements endet. Um den Schrägstrich auf der Tastatur zu erzeugen, verwenden Sie die Tastenkombination [Shift] +.

 

Zusammenfassung

Das HTML „Sandwich-Prinzip“ bietet eine einfache und einprägsame Methode, um die grundlegende Struktur von HTML-Dokumenten zu verstehen. Indem man sich die Tags als die Brotscheiben und den Inhalt als Belag vorstellt, wird das Arbeiten mit HTML intuitiver und zugänglicher. Dies ist besonders nützlich für Anfänger, die gerade erst lernen, wie man Webseiten erstellt.

 

 

Die Grundstruktur eines HTML-Dokuments

HTML, die Abkürzung für Hypertext Markup Language, ist die grundlegende Sprache, die zur Erstellung von Webseiten verwendet wird. Ein HTML-Dokument besteht aus verschiedenen Elementen, die als Tags bezeichnet werden. Diese Tags bilden zusammen die Struktur und den Inhalt einer Webseite. Im Folgenden wird die vereinfachte Grundstruktur eines HTML-Dokuments beschrieben.

html

 

HTML-Grundstruktur im Editor

Ein typisches HTML-Dokument wird im Editor, beispielsweise Notepad, wie folgt aufgebaut:

<!DOCTYPE html>

<html> <head>

<title>Meine tolle Webseite</title>

</head> <body> <!-- Der Bereich für den sichtbaren Inhalt --> </body> </html>

 

Erklärung der Struktur

Die HTML-Befehle, auch bekannt als Tags, bestehen meist aus englischen Wörtern, die den Zweck des jeweiligen Abschnitts beschreiben. Hier sind die wichtigsten Bestandteile eines HTML-Dokuments:

  • <!DOCTYPE html>: Diese Zeile definiert den Dokumenttyp und die Version von HTML, die verwendet wird. Heutzutage wird meistens HTML5 verwendet.
  • <html> <head> Dieser Tag umschließt das gesamte HTML-Dokument und zeigt dem Browser an, dass es sich um HTML-Code handelt.
  •  <html> <head> : Dieser Bereich enthält Metadaten über das Dokument, wie den Titel, Links zu Stylesheets oder Skripten und andere Informationen, die nicht direkt im sichtbaren Bereich der Webseite erscheinen.
  •  <title>Meine tolle Webseite</title> Innerhalb des -Bereichs befindet sich der -Tag, der den Titel der Webseite definiert, der in der Titelleiste des Browsers angezeigt wird.
  • <title>Meine tolle Webseite</title> :Hier befindet sich der eigentliche Inhalt der Webseite, wie Text, Bilder, Tabellen und Listen. Alles, was im Bereich steht, wird auf der Webseite sichtbar sein.

Die Bedeutung der Einrückung

Einrückungen in einem HTML-Dokument sind zwar nicht zwingend erforderlich, helfen jedoch, die Struktur des Dokuments klarer und übersichtlicher zu gestalten. Durch die Einrückung der verschachtelten Tags kann man die Hierarchie und die Beziehung zwischen den verschiedenen Teilen eines Dokuments besser erkennen.

Insgesamt bildet diese Grundstruktur das Fundament jeder HTML-Seite. Sobald Sie die Struktur verstanden haben, können Sie weitere Elemente hinzufügen, um Ihre Webseite interaktiv und ansprechend zu gestalten.

 

Leerzeichen und Zeilenschaltungen im HTML-Quellcode

HTML bietet Ihnen die Freiheit, Ihren Quellcode mit Leerzeichen und Zeilenschaltungen so zu formatieren, dass er für Sie logisch und übersichtlich erscheint. Diese Flexibilität hat jedoch keinen Einfluss auf die Darstellung des Inhalts im Browser.

 

Die Bedeutung von Leerzeichen

Im HTML-Quellcode können Sie beliebig viele Leerzeichen verwenden, um Ihren Code zu strukturieren. Der Browser interpretiert jedoch nur ein einziges Leerzeichen aus einer ganzen Folge von Leerzeichen. Alle weiteren werden ignoriert. Das bedeutet, dass Sie Ihren Code einrücken und formatieren können, ohne die Darstellung im Browser zu beeinflussen.

Beispiele:

Ob Sie schreiben:

<p>Das ist ein Text mit Leerzeichen</p>

oder

<p>Das ist ein Text mit Leerzeichen</p>

Der Browser zeigt beide Versionen gleich an. Er fügt lediglich ein Leerzeichen ein, unabhängig davon, wie viele Leerzeichen oder Zeilenumbrüche im Quellcode vorhanden sind.

 

Zeilenumbrüche im Code

Für sehr lange Code-Teile können Sie Zeilenumbrüche mit der Enter-Taste einfügen, um die Lesbarkeit zu verbessern. Der Browser behandelt diese Zeilenumbrüche jedoch wie zusätzliche Leerzeichen, was bedeutet, dass sie keinen Einfluss auf die tatsächliche Darstellung des Textes haben.

 

Fazit

Die Fähigkeit, Leerzeichen und Zeilenumbrüche im HTML-Quellcode frei zu verwenden, ermöglicht es Ihnen, Ihren Code sauber und verständlich zu strukturieren. Dies ist besonders hilfreich, wenn Sie mit umfangreichen Code-Dateien arbeiten. Im Endeffekt bleibt die Darstellung im Browser unverändert, unabhängig davon, wie Ihr Quellcode formatiert ist. Im kommenden Kapitel 4.2 werde ich den Befehl <p> zur Definition von Absätzen genauer erklären.

HTML-Code Schreiben

 

Die Erstellung eines HTML-Dokuments kann ganz einfach mit dem Editor aus den Windows-Bordmitteln erfolgen. Hier sind die Schritte, um ein einfaches HTML-Dokument zu erstellen.

html2

 

Schritt-für-Schritt-Anleitung

  1. Editor öffnen
    Gehen Sie zu Start > Alle Programme > Zubehör > Editor. Dieser Editor ist ein einfaches Programm, das nur die Eingabe von Buchstaben und Zahlen ermöglicht.
  2. HTML-Code eingeben
    Beginnen Sie mit der Eingabe Ihres HTML-Codes. Hier ist ein einfaches Beispiel:
    • : Deklariert das Dokument als HTML5.
    • : Der Beginn des HTML-Dokuments.
    • : Enthält Meta-Informationen über das Dokument.
    • : Der Titel des Dokuments, der im Browser-Tab angezeigt wird.
    • : Der Hauptinhalt des Dokuments.
  3. <!DOCTYPE html> <html> <head> <title>Mein erstes HTML-Dokument</title> </head> <body> <h1>Willkommen zu meinem HTML-Dokument</h1> <p>Dies ist ein einfacher Absatz in HTML.</p> </body> </html>
  4. Datei speichern
    Beim Speichern müssen Sie darauf achten, dass Sie die Datei mit der Endung .html speichern. Dies können Sie tun, indem Sie im Editor auf Datei > Speichern unter klicken und den Dateinamen mit .html enden lassen. Vermeiden Sie die Voreinstellung für Textdateien .txt, um sicherzustellen, dass der Browser die Datei als HTML-Dokument erkennt.

Hinweise

  • Kodierung: Stellen Sie sicher, dass die Datei in UTF-8 kodiert ist, um Zeichenprobleme zu vermeiden.
  • Dateinamen: Verwenden Sie keine Leerzeichen oder Sonderzeichen im Dateinamen, um Komplikationen zu vermeiden.

Mit diesen einfachen Schritten können Sie ein grundlegendes HTML-Dokument erstellen und speichern. Viel Spaß beim Experimentieren mit HTML!

 

Dateiendungen für HTML-Dokumente

Wenn Sie HTML-Dokumente erstellen oder speichern, begegnen Sie möglicherweise unterschiedlichen Dateiendungen. Die beiden häufigsten Endungen sind .html und .htm.

.html vs. .htm

  • .html: Diese Endung ist heutzutage die allgemein übliche und empfohlene Wahl für HTML-Dokumente. Sie ist standardisiert und wird von den meisten modernen Webbrowsern und Editoren problemlos erkannt.
  • .htm: Diese Endung ist eine kürzere Version und war insbesondere in älteren Betriebssystemen wie MS-DOS und frühen Windows-Versionen gebräuchlich, die Dateiendungen auf drei Zeichen beschränkten. Heutzutage ist sie weniger gebräuchlich, aber dennoch funktionsfähig.

Wichtige Hinweise zur Codierung

Beim Speichern von HTML-Dokumenten ist es wichtig, auf die richtige Codierung zu achten, um sicherzustellen, dass alle Zeichen korrekt dargestellt werden. Dies ist besonders wichtig für Sprachen mit speziellen Zeichen, wie zum Beispiel deutsche Umlaute.

  • UTF-8: Wählen Sie im Drop-Down-Menü für die Codierung die Option UTF-8 (8-bit Unicode Transformation Format). Diese Codierung ist weit verbreitet und unterstützt eine Vielzahl von Zeichen aus verschiedenen Sprachen. Sie stellt sicher, dass deutsche Umlaute wie ä, ö, ü sowie das ß korrekt angezeigt werden.

Durch die Beachtung dieser Punkte stellen Sie sicher, dass Ihre HTML-Dokumente gut kompatibel sind und auf verschiedenen Plattformen und Geräten korrekt angezeigt werden.

 

TextEdit-Konfiguration für HTML auf Mac

Wenn Sie HTML-Code auf einem Mac erstellen, sollten Sie das Programm TextEdit verwenden. Um sicherzustellen, dass Ihr Code korrekt als reiner Text behandelt wird und nicht als formatierter Text, müssen Sie folgende Einstellungen ändern:

  1. TextEdit-Einstellungen: Öffnen Sie das Menü TextEdit und wählen Sie Einstellungen.
  2. Register „Öffnen und Sichern“:
    • Aktivieren Sie unter „Beim Öffnen von Dateien“ die Option „Formatierungsbefehle in HTML-Dateien ignorieren“.
    • Unter „Optionen für das Sichern von HTML“ wählen Sie:
      • Dokumentart: HTML 4.01 Strict
      • CSS: Kein CSS
      • Codierung: Unicode (UTF-8)
  3. Register „Neues Dokument“:
    • Stellen Sie sicher, dass das Format auf „Reiner Text“ eingestellt ist, um eine korrekte .html-Datei zu erstellen.

Beim Speichern der Dateien achten Sie darauf, die Dateiendung .html hinzuzufügen.

HTML-Dokumente ansehen

Um HTML-Dokumente zu betrachten, verwenden Sie einen Browser wie Firefox, Internet Explorer oder Safari. Beachten Sie dabei Folgendes:

  • HTML-Dokumente tragen das Icon des Standardbrowsers auf Ihrem PC, nicht das des Programms, mit dem sie erstellt wurden.
  • Durch einen Doppelklick öffnen sich HTML-Dokumente im Standardbrowser, nicht im Erstellungsprogramm.
  • Zum Bearbeiten eines HTML-Dokuments in einem Editor wie Notepad ziehen Sie das Dokument in ein offenes Editorfenster oder verwenden den Befehl Datei>Öffnen.

Zusammenfassung

  • HTML funktioniert nach dem „Sandwich-Prinzip“.
  • HTML-Befehle werden als Tags bezeichnet.
  • Zu jedem öffnenden Tag gehört ein schließendes Tag.
  • Leerzeichen und Zeilenumbrüche im Code beeinflussen die Darstellung im Browser nicht, sie dienen der besseren Lesbarkeit des Codes.
  • HTML-Dokumente tragen das Icon des Standardbrowsers und haben die Dateiendung .html (oder .htm).

 

HTML-Dokumente ansehen

Um HTML-Dokumente anzusehen, verwendet man einen Browser wie Firefox, Internet Explorer oder Safari. Beim Umgang mit HTML-Dokumenten gibt es jedoch einige Besonderheiten.

 

Icons und Standardprogramme

Normalerweise sind Sie es gewohnt, dass Dokumente mit dem Icon des Programms dargestellt werden, mit dem sie erstellt wurden. Beispielsweise tragen Word-Dokumente das Word-Icon, und Photoshop-Dokumente das Photoshop-Icon. HTML-Dokumente hingegen verhalten sich anders: Unabhängig davon, ob sie mit einem einfachen Editor oder einem modernen Webdesign-Programm wie Dreamweaver erstellt wurden, tragen sie das Icon des Standardbrowsers, der auf Ihrem PC eingerichtet ist, wie z. B. Internet Explorer oder Firefox.

 

Öffnen von HTML-Dokumenten

Wenn Sie HTML-Dokumente durch einen Doppelklick öffnen, werden sie nicht in dem Programm geöffnet, mit dem sie erstellt wurden. Stattdessen öffnen sie sich im Standardbrowser. Das ist anders als bei anderen Dokumenttypen, bei denen man das Erstellungsprogramm auch zum Betrachten verwendet.

 

Bearbeiten von HTML-Dokumenten

Zum Bearbeiten eines HTML-Dokuments, das beispielsweise mit Notepad erstellt wurde, können Sie es nicht einfach durch einen Doppelklick öffnen. Stattdessen sollten Sie den Befehl Datei > Öffnen im Editor verwenden. Eine noch einfachere Methode ist, das Icon des Dokuments in ein leeres Editorfenster zu ziehen.

Diese Methoden ermöglichen es Ihnen, HTML-Dokumente effizient zu bearbeiten und anzusehen, ohne die Besonderheiten der Dateiverwaltung aus den Augen zu verlieren.

Bildschirmfoto vom 2024 12 21 07 06 52

Bildschirmfoto vom 2024 12 21 07 10 09

 

Textfluss und Zeilenumbruch

HTML-Dokumente sind so gestaltet, dass sie auf unterschiedlichen Bildschirmgrößen und in variablen Fenstergrößen optimal dargestellt werden können. Dies wird durch den flexiblen Textfluss und die automatische Anpassung der Zeilenumbrüche ermöglicht. Schauen wir uns die beiden Abbildungen an, die dasselbe HTML-Dokument in zwei unterschiedlich großen Browserfenstern zeigen.

Abbildung 1: Großes Browserfenster

In einem größeren Browserfenster hat der Text mehr Platz, sich horizontal auszubreiten. Dies führt dazu, dass die Zeilen länger sind und weniger Zeilenumbrüche erforderlich sind. Der Textfluss ist flüssig und sorgt dafür, dass der Inhalt übersichtlich und leicht lesbar bleibt.

Bildschirmfoto vom 2024 12 21 07 12 43

Vorteile bei großen Fenstern:
  • Weniger Zeilenumbrüche: Längere Zeilen bedeuten weniger Unterbrechungen im Lesefluss.
  • Besserer Überblick: Mehr Text kann auf einmal angezeigt werden, was das Lesen und Scrollen erleichtert.
  • Mehr Raum für Gestaltungselemente: Bilder und andere multimediale Inhalte können größer dargestellt werden.

Abbildung 2: Kleines Browserfenster

In einem kleineren Browserfenster wird der verfügbare Platz horizontal eingeschränkt, was zu häufigeren Zeilenumbrüchen führt. Der Textfluss passt sich dynamisch an, um sicherzustellen, dass der gesamte Inhalt sichtbar bleibt, ohne dass horizontal gescrollt werden muss.

Herausforderungen bei kleinen Fenstern:
  • Häufigere Zeilenumbrüche: Kürzere Zeilen können das Lesen verlangsamen, da der Leser häufiger die Zeile wechseln muss.
  • Eingeschränkter Überblick: Weniger Text ist auf einmal sichtbar, was häufigeres Scrollen erforderlich macht.
  • Platzmangel für Gestaltungselemente: Bilder und andere Inhalte müssen oft verkleinert oder anders angeordnet werden.

Fazit

Der flexible Textfluss und die dynamischen Zeilenumbrüche in HTML-Dokumenten sind entscheidend für die Benutzerfreundlichkeit und Zugänglichkeit von Webseiten. Sie sorgen dafür, dass Inhalte auf einer Vielzahl von Geräten und Bildschirmgrößen konsistent und ansprechend dargestellt werden. Ein gutes Webdesign berücksichtigt diese Aspekte, um eine optimale Benutzererfahrung zu gewährleisten.

Der Dokumenttitel

 

Vielleicht ist es Ihnen ja schon aufgefallen, dass der Titeltext in dem Befehl <title>...</title> nicht im eigentlichen Seiteninhalt auftaucht. Stattdessen taucht dieser Titel an drei anderen Stellen auf. In unserem Beispiel heißt dieser Text „Beispielseite“ (sehen Sie sich dazu bitte nochmal Abb. 5 und Abb. 6 an):

  • Er erscheint als Name des Browserfensters oben in der blauen Fensterleiste. (Hatten Sie das in der Übung zu Kapitel 3 schon selbst herausgefunden?)
  • Gleichzeitig taucht er unten in der Task-Leiste von Windows auf (beim Mac im Dock).
  • Er erscheint als Name des „Lesezeichens“ (Firefox) bzw. „Favoriten“ (Internet Explorer), wenn ein Besucher der Seite diese Funktion seines Browsers verwendet.

Eine wichtige Bedeutung hat der Seitentitel auch im Zusammenhang mit Suchmaschinen: Diese werten den Titel bei der automatischen Indizierung einer Webseite aus. Deshalb ist es auf jeden Fall notwendig, den Seitentitel sinnvoll zu formulieren.

5.2 Der Dateiname

Lassen Sie uns gleich auch noch ein weiteres Thema im Zusammenhang mit den Suchmaschinen betrachten: den Dateinamen. Auch dieser sollte sinnvoll gewählt werden, denn auch er spielt bei der Indizierung durch Suchmaschinen eine wichtige Rolle. Für die Wahl des Dateinamens gelten folgende Regeln:

  1. Verwenden Sie ausschließlich Buchstaben, Zahlen, Unterstrich „_“ und Minus „-“.
  2. Obwohl prinzipiell auch Großbuchstaben erlaubt sind, empfehle ich die Beschränkung auf Kleinbuchstaben. Sie ersparen sich womöglich viel Ärger!
  3. Verwenden Sie auf keinen Fall Umlaute, „ß“ oder andere Sonderzeichen („&, $, §“ usw.).
  4. Im Dateinamen darf auf keinen Fall ein Leerzeichen vorkommen.
  5. Der Dateiname sollte „sprechend“ sein, d. h., er sollte etwas mit dem Inhalt der Seite zu tun haben.
  6. Vermeiden Sie zu lange Dateinamen. Kurze und prägnante Namen sind nicht nur übersichtlicher, sondern reduzieren auch das Risiko von Fehlern bei der Eingabe oder beim Verlinken.
  7. Nutzen Sie thematisch relevante Schlüsselwörter. Diese können die Auffindbarkeit der Datei durch Suchmaschinen verbessern.

Durch die Einhaltung dieser Regeln können Sie die Effektivität Ihrer Webseite in Bezug auf Suchmaschinenoptimierung und Benutzerfreundlichkeit erheblich steigern.

 

6 Die vollständige HTML-Grundstruktur 

Einführung in HTML 5.0

HTML, die Hypertext Markup Language, hat sich seit ihren Anfängen in den frühen 90er-Jahren stark weiterentwickelt. Während die ursprünglichen HTML-Strukturen recht einfach und simpel gehalten waren, bietet HTML 5.0 eine moderne und umfassendere Grundlage für die Erstellung von Webdokumenten. In diesem Abschnitt möchte ich Ihnen die vollständige Grundstruktur eines HTML 5.0-Dokuments vorstellen.

Die „ganze Wahrheit“ über HTML 5.0

Die Grundstruktur eines HTML-Dokuments hat sich im Laufe der Jahre weiterentwickelt, um den Anforderungen moderner Webentwicklung gerecht zu werden. HTML 5.0 ist die aktuellste Spezifikation, die viele neue Elemente und Attribute eingeführt hat. Diese Neuerungen ermöglichen es Entwicklern, semantisch korrekte und zugängliche Webseiten zu erstellen.

Grundstruktur eines HTML 5.0-Dokuments

Die vollständige Grundstruktur eines HTML 5.0-Dokuments sieht wie folgt aus:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mein HTML5 Dokument</title> </head> <body> <!-- Ihr Inhalt hier --> </body> </html>

Erklärung der Struktur
  • <!DOCTYPE html>: Dies ist die Dokumenttyp-Deklaration, die dem Browser mitteilt, dass es sich um ein HTML 5.0-Dokument handelt.
  • <html lang="de">: Das <html>-Element umschließt den gesamten Inhalt eines HTML-Dokuments. Das lang-Attribut gibt die Sprache der Seite an, in diesem Fall Deutsch.
  • <head>: Der Kopfbereich enthält Metadaten über das Dokument, wie z.B. den Zeichensatz (<meta charset="UTF-8">) und die Sichtbarkeits-Einstellungen (<meta name="viewport" content="width=device-width, initial-scale=1.0">).
  • <title>: Der Titel des Dokuments, der in der Titelleiste oder dem Tab des Browsers angezeigt wird.
  • <body>: Dieser Bereich enthält den sichtbaren Inhalt der Webseite.

Bedeutung der neuen Spezifikation

HTML 5.0 bringt nicht nur eine vereinfachte Syntax und neue semantische Elemente (wie <header>, <footer>, <article>, <section>) mit sich, sondern auch verbesserte Unterstützung für Multimedia-Inhalte und APIs für komplexe Webanwendungen. Diese Fortschritte ermöglichen es Entwicklern, interaktivere und ansprechendere Webseiten zu erstellen, die auf einer Vielzahl von Geräten gut funktionieren.

Mit HTML 5.0 sind Sie bestens gerüstet, um moderne, effiziente und benutzerfreundliche Webseiten zu entwickelt.

neu1

 

6.2 XHTML

 

Einführung in XHTML

In den letzten Jahren hat sich im Bereich des Webdesigns eine besondere Form von HTML etabliert, die als XHTML (EXtensible Hyper Text Markup Language) bekannt ist. Dieser "HTML-Dialekt" leitet sich von der Sprache XML (EXtensible Markup Language) ab. Vielleicht haben Sie bereits von XML gehört; es lässt sich einfach so beschreiben: genau wie HTML, aber mit der Möglichkeit, eigene Tags zu definieren.

Bedeutung von XML und XHTML im Webdesign

XML spielt im modernen Webdesign eine bedeutende Rolle, insbesondere im Kontext von Cross-Media-Projekten, bei denen Inhalte sowohl online als auch in Printmedien veröffentlicht werden. Daher ist es wahrscheinlich, dass Sie sich in Ihrer Ausbildung und beruflichen Praxis mit XML intensiver auseinandersetzen werden.

Strenge Syntax von XML und XHTML

XML und somit auch XHTML unterliegen wesentlich strengeren syntaktischen Regeln als herkömmliches HTML. Die Syntax einer Sprache kann mit den Rechtschreibregeln im Deutschen verglichen werden. Die Grundstruktur eines XHTML-Dokuments ist detaillierter und erfordert mehr Sorgfalt, insbesondere im head-Bereich, der im Vergleich zu HTML 5.0 komplexere Elemente enthält.

Relevanz von XHTML im heutigen Web

Obwohl HTML 5.0 eine vereinfachte Struktur bietet, wird XHTML weiterhin in einem Großteil der heute existierenden Webseiten verwendet. Die Umstellung auf HTML 5.0 erfolgt schrittweise, weshalb Sie in der Praxis wahrscheinlich noch mit XHTML-Seiten arbeiten werden, insbesondere wenn Sie bestehende Web-Projekte bearbeiten.

Unterstützung durch Webeditoren

Webeditoren wie Adobe Dreamweaver und Microsoft Expression Web unterstützen nach wie vor die XHTML-Spezifikation. Es ist hilfreich, die neuen Elemente im head-Bereich eines XHTML-Dokuments zu verstehen, auch wenn es in der Praxis oft genügt, diesen Bereich bei bestehenden Seiten unverändert zu lassen oder direkt zu kopieren.

Praktische Tipps für den Umgang mit XHTML

  • Keine Panik: Es ist hilfreich, die Elemente des head-Bereichs einmal erklärt zu bekommen, aber in der Praxis sollten Sie bei bestehenden Seiten diesen Bereich nicht ändern.
  • Kopieren Sie den head-Bereich: Bei der Erstellung neuer XHTML-Seiten für ein bestehendes Projekt ist es sinnvoll, den head-Bereich exakt zu kopieren oder ein Duplikat einer bestehenden Seite zu erstellen.

Zusammenfassend ist XHTML eine wichtige Technologie im Webdesign, die zwar von HTML 5.0 abgelöst wird, aber dennoch in vielen bestehenden Projekten eine Rolle spielt. Ein grundlegendes Verständnis von XHTML und seinen syntaktischen Anforderungen ist daher wertvoll für Ihre zukünftige Arbeit im Webdesign.

 

Warum XHTML noch wichtig ist

Obwohl HTML 5.0 immer mehr Verbreitung findet, wird XHTML nach wie vor in einer Vielzahl von Webseiten verwendet. Der Grund dafür ist, dass die Umstellung auf HTML 5.0 nicht überall gleichzeitig erfolgt. Viele bestehende Webseiten und Webprojekte basieren noch auf XHTML. Wenn Sie in der Webentwicklung tätig sind, ist es wahrscheinlich, dass Sie auf XHTML stoßen werden, insbesondere bei der Aktualisierung oder Pflege älterer Webprojekte.

Komplexität des head-Bereichs in XHTML

Der head-Bereich in XHTML kann im Vergleich zu HTML 5.0 komplexer sein und mehr Elemente enthalten. Diese Komplexität ist notwendig, um die ältere Spezifikation und die damit verbundenen Anforderungen zu erfüllen.

Wichtig zu beachten:
  • DOCTYPE-Deklaration: Diese muss in einer einzigen Zeile ohne Umbruch im Code geschrieben werden, auch wenn sie aus Gründen der Lesbarkeit in Dokumentationen oft auf mehrere Zeilen verteilt wird.
  • Editor-Kompatibilität: Viele Webeditoren wie Adobe Dreamweaver und Microsoft Expression Web unterstützen weiterhin die XHTML-Spezifikation. Dies erleichtert die Arbeit an bestehenden Projekten, die auf XHTML basieren.

Umgang mit bestehenden XHTML-Seiten

Es ist wichtig, dass Sie beim Arbeiten mit bestehenden XHTML-Seiten vorsichtig sind:

  • Berühren Sie vorhandene head-Bereiche nicht unnötig. Diese sollten unverändert bleiben, um die Integrität der Seite zu gewährleisten.
  • Kopieren Sie vorhandene Strukturen. Bei der Erstellung neuer Seiten für bestehende Projekte sollten Sie den head-Bereich genau so kopieren, wie er ist, oder ein Duplikat der vorhandenen Seite erstellen.

Fazit

Das Verständnis von XHTML und seiner Struktur ist auch heute noch von Bedeutung. Es kann Ihnen helfen, nahtlos an bestehenden Projekten zu arbeiten und sicherzustellen, dass Ihre Webseiten mit älteren Standards kompatibel bleiben. Lassen Sie sich nicht von der Komplexität abschrecken – mit der richtigen Herangehensweise und Praxis wird der Umgang mit XHTML zur Routine.

neu3

 


7 Bilder und Grafiken

HTML-Bilder und der img-Tag

Wenn Sie bisher hauptsächlich mit Office-Programmen wie Microsoft Word oder PowerPoint gearbeitet haben, sind Sie es gewohnt, dass Bilder direkt in Ihr Dokument eingefügt und mit diesem gespeichert werden. Beim Öffnen des Dokuments auf einem anderen Rechner werden die zuvor eingefügten Bilder angezeigt. In HTML funktioniert dies jedoch anders.

Der img-Tag in HTML

In HTML werden nicht die Bilder selbst eingefügt, sondern Platzhalter in Form eines HTML-Befehls. Dieser Befehl informiert das Dokument darüber, wo sich die einzufügenden Bilder befinden. Der Befehl, der dafür verwendet wird, heißt img (vom englischen image).

Aufbau des img-Tags
  • Der img-Tag ist kein typischer „Sandwich-Befehl“. Er besteht nur aus einem einzelnen Tag ohne ein abschließendes Gegenstück.
  • Der wesentliche Bestandteil des img-Tags ist das src-Attribut (vom englischen source = Quelle).
  • Das src-Attribut informiert den Browser darüber, wo sich das gewünschte Bild befindet, indem es einen Pfad zu diesem angibt.
Syntax des src-Attributs
  • Attributname="Attributwert": Beachten Sie, dass Attributwerte immer in Hochkommas stehen müssen. Ein vergessenes Hochkomma kann dazu führen, dass die Seite falsch dargestellt wird.

Der Pfad zum Bild

Der Attributwert, z. B. images/central-park.jpg, ist ein sogenannter Pfad. Er teilt dem Browser mit, wo sich das Bild befindet. In unserem Beispiel bedeutet dies:

  • Das Bild befindet sich im Unterordner images und heißt central-park.jpg.
  • Dies ist ein relativer Pfad. Mehr dazu erfahren Sie im Kapitel über Hyperlinks.

Das Bild wird außerhalb des HTML-Dokuments aufbewahrt und erst vom Browser „geholt“, wenn die Seite angezeigt werden muss.

Namenskonventionen für Ordner

Es ist weltweit üblich, den Ordner für Bilder images zu nennen. Obwohl dies nicht verpflichtend ist, kann es hilfreich sein, diesem Quasi-Standard zu folgen, um die Verständlichkeit und Konsistenz Ihrer Webprojekte zu erhöhen.

<img src="/images/central-park.jpg">

Durch das Einhalten dieser Strukturen und Konventionen wird das Arbeiten mit HTML effizienter und Fehler beim Laden der Bilder können vermieden werden.

7.1 Der Pfad zum Bild

 

Umgang mit Pfaden im Webdesign

Beim Erstellen von Webseiten ist es essentiell, den Umgang mit verschiedenen Pfaden zu verstehen, insbesondere wenn es um das Einbinden von Bildern geht. In unserem Fallbeispiel sehen wir den Attributwert images/central-park.jpg, der als sogenannter Pfad fungiert.

Relativer Pfad

Ein relativer Pfad, wie in unserem Beispiel, gibt dem Browser an, wo sich eine Ressource, wie ein Bild, relativ zum aktuellen Dokument befindet. Das bedeutet, dass der Browser das Bild central-park.jpg im Unterordner images sucht, der sich im gleichen Verzeichnis wie das HTML-Dokument befindet. Diese Art von Pfad ist besonders nützlich, wenn Sie Ihre Webseitenstruktur übersichtlich halten möchten und oft mit mehreren Dateien arbeiten.

Wie der Browser den Pfad interpretiert

Man kann sich vorstellen, dass der Befehl dem Browser mitteilt: „Bitte die Zeile mit dem img-Befehl durch ein Bild ersetzen. Dieses befindet sich im Unterordner images und heißt central-park.jpg.“ Der Browser lädt das Bild erst, wenn die Seite angezeigt wird, was die Ladezeiten optimiert und Ressourcen spart.

Bedeutung des Ordnernamens

Es ist eine weit verbreitete Praxis unter Webdesignern, den Ordner für Bilder images zu nennen. Zwar gibt es keine verpflichtenden Regeln, jedoch hat es sich als Quasi-Standard etabliert. Dies erleichtert die Verständigung und Zusammenarbeit unter Webentwicklern, da solche Konventionen die Struktur und Organisation einer Webseite klarer machen.

Fazit

Der richtige Umgang mit Pfaden, insbesondere relativen Pfaden, ist ein grundlegender Bestandteil effektiven Webdesigns. Es erleichtert nicht nur die Navigation und Organisation von Dateien, sondern sorgt auch dafür, dass Ihre Webseite effizient und benutzerfreundlich ist. Indem Sie sich an bewährte Konventionen wie das Benennen des Bildordners halten, können Sie zudem die Zusammenarbeit in größeren Entwicklerteams erleichtern.

7.2 Ein Beispiel

 

Einfache HTML-Seite mit Bildbeispiel

Im Folgenden zeigen wir, wie eine einfache HTML-Seite mit einem Bild im body-Bereich aussehen könnte. Dies beinhaltet den Gebrauch von HTML-Tags, die Sie bereits kennen, sowie den img-Befehl, um ein Bild einzufügen. In der Regel wird das Verzeichnis für Bilder "images" genannt.

 

neu4

HTML-Code-Beispiel

Stellen Sie sich vor, wir haben eine HTML-Seite mit folgendem Quellcode im body-Bereich:

<body> <h1>Willkommen auf meiner Webseite!</h1> <p>Dies ist ein einfaches Beispiel einer HTML-Seite.</p> <img src="/images/beispielbild.jpg" alt="Beispielbild" width="300" height="200"> <p>Oben sehen Sie ein Beispielbild, das in die Seite eingebettet wurde.</p> </body>

Erklärung der Elemente

  • <h1>-Tag: Definiert die Hauptüberschrift der Seite.
  • <p>-Tag: Wird verwendet, um Absätze zu erstellen und Textinhalte darzustellen.
  • <img>-Tag: Dient dazu, Bilder in die Webseite einzufügen. Die Attribute src, alt, width und height spezifizieren die Bildquelle, den Alternativtext, die Breite und die Höhe des Bildes.

Darstellung im Browser

Wenn Sie diesen Code in einem Webbrowser wie Firefox anzeigen, würden Sie Folgendes sehen:

  • Eine Hauptüberschrift, die den Besucher willkommen heißt.
  • Einen Absatz mit einleitendem Text.
  • Ein Bild, das von der angegebenen Quelle geladen wird.
  • Einen weiteren Absatz, der das Bild beschreibt.

Dieses Beispiel zeigt, wie einfach es ist, Text und Bilder auf einer Webseite zu kombinieren. Mit weiterem Wissen über HTML und CSS können Sie noch ansprechendere und komplexere Webseiten gestalten.

neu5

 

Der img-Befehl in HTML

Der img-Befehl ist ein wesentlicher Bestandteil von HTML, der verwendet wird, um Bilder in Webseiten einzubinden. Obwohl er auf den ersten Blick einfach erscheint, gibt es wichtige Details und Attribute, die beachtet werden müssen, um professionellen und barrierefreien HTML-Code zu schreiben.

Syntax des img-Befehls

Der grundlegende img-Befehl sieht wie folgt aus:

<img src="/images/central-park.jpg" alt="Central Park" width="200" height="150">

Wichtige Attribute
  • src: Dieses Attribut gibt den Pfad zur Bilddatei an. Es ist zwingend erforderlich, da es dem Browser mitteilt, welches Bild geladen werden soll.
  • alt: Der Alternativtext ist entscheidend für barrierefreies Webdesign. Er beschreibt den Inhalt des Bildes für Screenreader, die von sehbehinderten oder blinden Menschen verwendet werden. Ein guter Alternativtext ist prägnant und beschreibt das Bild genau.
  • width und height: Diese Attribute geben die Breite und Höhe des Bildes in Pixeln an. Sie sollten die tatsächlichen Abmessungen des Bildes widerspiegeln und nicht zur Skalierung verwendet werden. Durch Angabe dieser Attribute kann der Browser den benötigten Platz auf der Seite reservieren, bevor das Bild geladen wird, was die Ladezeit für den Text verbessert.

Tipps zur Verwendung des img-Befehls

  • Bildbearbeitung: Skalieren Sie Bilder mit einem Bildbearbeitungsprogramm auf die gewünschte Größe, bevor Sie sie auf Ihrer Webseite einfügen. Dies verhindert unerwünschte Artefakte und sorgt für eine bessere Bildqualität.
  • Barrierefreiheit: Das Einfügen von Alternativtexten ist unerlässlich für barrierefreie Webseiten und gehört zum guten Ton in der Webentwicklung.
  • Editoren: Einige HTML-Editoren wie Dreamweaver fügen automatisch die Attribute width und height hinzu, wenn ein Bild eingefügt wird. Wenn Sie jedoch mit einem einfachen Texteditor arbeiten, müssen Sie diese Werte selbst eingeben.

Vorteile von width und height

Die Angabe von width und height hat den Vorteil, dass der Browser den Platz für die Bilder auf der Webseite reservieren kann, bevor sie vollständig geladen sind. Dies ermöglicht es, den Textinhalt schneller anzuzeigen und verbessert die Nutzererfahrung, da Besucher nicht warten müssen, bis alle Bilder geladen sind, um mit dem Lesen zu beginnen.

Durch die Beachtung dieser Details können Sie sicherstellen, dass Ihre Webseiten nicht nur professionell, sondern auch inklusiv und benutzerfreundlich sind.

 

Die Grafikformate im Web

Grafikformate für das Web

Nicht alle Bildformate sind für die Darstellung im Browser geeignet. Im Folgenden werden die gebräuchlichsten Pixelformate vorgestellt, die sich für den Einsatz im Web eignen. Vektorgrafiken sind derzeit noch im Entwicklungsstadium für die standardisierte Darstellung in Browsern. Bis zur vollständigen Implementierung sollten wir uns auf Pixelformate konzentrieren.

Grafikformate und Kompression

Alle Web-Grafikformate zielen darauf ab, durch geeignete Kompressionsverfahren die Bilddateien möglichst klein zu halten, um eine schnelle Übertragung über das Internet zu ermöglichen.

GIF (Graphics Interchange Format)

Das Graphics Interchange Format (GIF) ist eines der gebräuchlichsten Formate für nicht-fotografische Grafiken im Web. Hier sind einige wichtige Eigenschaften:

  • Farbmodus: Indizierte Farben mit maximal 256 Farben.
  • Kompression: LZW-Kompression, die verlustfrei ist.
  • Dateiendung: .gif
  • Anwendungsbereich: Ideal für Logos, Zeichnungen, grafische Überschriften und Strichzeichnungen.
  • Interlaced Option: Ermöglicht eine progressive Anzeige durch Übertragung in Blöcken. Dies kann bei großen Dateien sinnvoll sein, um eine schnelle Vorschau zu bieten.
Kompressionstechnik

Die LZW-Kompression verwendet Mustererkennungstechniken, um horizontale Sequenzen gleichfarbiger Pixel durch eine Zahl zu ersetzen, die die Sequenzlänge angibt. Dadurch wird eine durchschnittliche Kompressionsrate von etwa 4:1 erreicht. Längere gleichfarbige Pixelreihen ermöglichen eine bessere Kompression.

Verwendungsempfehlungen

Verwenden Sie GIFs vor allem für Grafiken mit vielen Volltonfarben. Der Verlust an Bildqualität bei der Umwandlung in indizierte Farben macht das GIF-Format für Fotos ungeeignet.

Interlacing

GIF-Grafiken können mit der Interlaced-Option gespeichert werden, was bedeutet, dass die Bilddaten in mehreren Durchgängen geladen werden. Dies zeigt zunächst eine grobe Vorschau und verbessert sich mit jedem weiteren Durchgang. Diese Option ist jedoch nur bei größeren Dateien sinnvoll, da sie die Dateigröße leicht erhöht.

Für weitere Details zu Pixel- und Vektorgrafiken wird auf spezialisierte Fachliteratur verwiesen, die diese Themen umfassend behandelt.

 

Das GIF-Format

Das GIF-Format (Graphics Interchange Format) ist bekannt für seine Fähigkeit, Transparenz zu unterstützen. Diese Eigenschaft erlaubt es, dass eine bestimmte Farbe in einem GIF-Bild als transparent definiert werden kann. Dadurch kann der Hintergrund durch das Bild hindurch scheinen, was die Flexibilität in der Bildgestaltung erhöht und nicht auf rechteckige Formen beschränkt. Diese Transparenz ist ein Grund für die anhaltende Beliebtheit von GIFs im Web.

Animationen in GIFs

Eine der Hauptattraktionen des GIF-Formats in der Anfangszeit des Internets war die Möglichkeit, Animationen zu erstellen. Durch das Einbetten mehrerer Bilder in eine einzige GIF-Datei konnte Bewegung simuliert werden. Ähnlich wie in einem Daumenkino werden die einzelnen Bilder nacheinander abgespielt, um eine Animation darzustellen. Obwohl animierte GIFs heutzutage weniger verbreitet sind, da sie oft als störend empfunden werden, waren sie ein wichtiger Schritt in der Entwicklung von Webanimationen. Heutzutage werden für komplexere Animationen meist Programme wie Flash verwendet.

Das JPEG-Format

Das JPEG-Format, entwickelt von der Joint Photographic Experts Group, ist optimal für die Komprimierung fotografischer Bilder. Im Gegensatz zu GIFs, die eine begrenzte Farbpalette verwenden, arbeitet JPEG mit Truecolor und nutzt die vollständige Farbvielfalt von 16,7 Millionen Farben, die moderne PCs darstellen können.

Verlustbehaftete Kompression

JPEG verwendet eine verlustbehaftete Kompressionstechnik. Das bedeutet, dass beim Komprimieren eines Bildes feine Details entfernt werden, um die Dateigröße zu reduzieren. Einmal komprimierte JPEG-Bilder können nicht mehr in ihre ursprüngliche Qualität zurückversetzt werden, selbst bei der höchsten Qualitätsstufe. Die Dateierweiterung für JPEG-Bilder ist üblicherweise .jpg.

Farb- und Helligkeitsinformationen

Das menschliche Auge nimmt Helligkeitsunterschiede besser wahr als Farbunterschiede. JPEG nutzt diese Eigenschaft, indem es Farbabweichungen vereinfacht. Der Grad der Komprimierung kann eingestellt werden, indem man definiert, wie groß die zulässigen Farbabweichungen sein dürfen. Die Kompressionsrate kann je nach gewählter Qualitätsstufe zwischen 10:1 und 100:1 liegen.

Anwendung von JPEG

JPEG eignet sich hervorragend für Fotos, bei denen es auf eine hohe Anzahl von Farben und feine Farbverläufe ankommt. Für Strichzeichnungen oder Text ist dieses Format jedoch ungeeignet.

Progressive JPEG

Der Progressive-Modus in JPEG-Dateien ähnelt dem Interlaced-Modus bei GIFs. Progressive JPEGs werden so gespeichert, dass sie beim Laden im Browser allmählich detaillierter angezeigt werden. Diese Dateien sind in der Regel etwas größer als normale JPEGs, bieten jedoch den Vorteil, dass Bilder schneller wahrgenommen werden können, während sie vollständig geladen werden.

8.3 PNG

PNG (ausgesprochen „ping“) steht für Portable Network Graphic und vereint die Vorteile des GIF- und JPEG-Formats. Diese beziehen sich auf die Komprimierungsfähigkeit, Farben und Transparenz. Das PNG-Format hat sich im Web nie besonders durchgesetzt, obwohl es volle Alpha-Transparenz unterstützt. Das bedeutet, dass jedes Pixel einen Transparenzwert zwischen 0 und 255 annehmen kann. Im Gegensatz dazu kennt GIF nur eine Entweder-Oder-Transparenz, bei der ein Pixel entweder transparent ist oder nicht.

Ein herausragendes Merkmal des PNG-Formats ist die automatische Gammakorrektur, die als einziges Grafikformat die Helligkeitsunterschiede der Monitore auf verschiedenen Plattformen (PC, Mac, UNIX) ausgleicht. PNG-Bilddateien tragen die Dateiendung .png. Wie GIF verwendet PNG einen verlustfreien Kompressionsalgorithmus, wobei die Kompressionsrate die von GIF um 5 bis 25 % übersteigt (bei kleineren Bildern sogar häufig um 30 bis 40 %).

Im Gegensatz zu GIF erlaubt PNG Bit-Tiefen von 24 und 32 Bit, was bedeutet, dass statt der Palette von 256 Farben die volle Bandbreite der RGB-Farben genutzt werden kann. Die Dateien sind jedoch meistens größer.

8.4 Zusammenfassung

GIF

  • Farben: Beschränkt auf 256 Farben (indizierte Farben).
  • Kompression: Verlustfreie Kompression.
  • Dateiendung: .gif.
  • Modus: Kann im Interlaced-Modus gespeichert werden (blockweise Übertragung).
  • Transparenz: Kann eine transparente Farbe haben.
  • Eignung: Geeignet für Grafiken mit Volltonfarben, Logos, Strichzeichnungen, Schriften, Infografiken etc.

JPEG

  • Farben: Basierend auf dem RGB-Farbmodell, keine Beschränkung hinsichtlich der Anzahl von Farben.
  • Kompression: Verlustbehaftete Kompression.
  • Dateiendung: .jpg.
  • Modus: Kann im Progressive-Modus gespeichert werden.
  • Eignung: Vor allem für Fotos geeignet.

PNG

  • Vorteile: Verbindet die Vorteile von GIF und JPEG.
  • Dateiendung: .png.
  • Transparenz: Volle Alpha-Transparenz möglich.
  • Kompression: Verlustfreie Kompression mit höherer Effizienz als GIF.
  • Farben: Unterstützt volle RGB-Farben mit Bit-Tiefen von 24 und 32 Bit.

 

 9 Webseite und Website

Eine Webseite ist ein einfaches HTML-Dokument, das man im Browser ansehen kann. Mit Webseiten befassen wir uns ja schon die ganze Zeit. Doch was genau ist eine Website?

Definition und Bestandteile einer Website

Das englische Wort Site bedeutet Abladestelle, Bauplatz, Grundstück usw. Mit einer Website ist die Gesamtheit aller für einen Internetauftritt benötigten Dokumente gemeint. Eine Website besteht aus verschiedenen Dateitypen, die gemeinsam die Struktur und Funktionalität der Seite bestimmen. Dazu gehören typischerweise:

  • HTML (.html): Struktur und Inhalt der Webseite
  • CSS (.css): Design und Layout der Webseite
  • JavaScript (.js): Interaktivität und dynamische Funktionen
  • Grafiken (.gif, .jpg, .png): Visuelle Elemente
  • PDF (.pdf): Dokumente zum Download oder zur Ansicht
  • Flash (.swf): Animierte Inhalte (heutzutage weniger gebräuchlich)
  • PHP (.php): Serverseitige Skripte zur Erstellung dynamischer Webseiten

Die Struktur einer Website

Die Struktur einer Website wird oft in einer hierarchischen Baumstruktur organisiert. Diese Struktur kann man sich gut im Dateimanagement-Bedienfeld von Programmen wie Dreamweaver ansehen. Hier sieht man, wie die verschiedenen Dateien und Ordner einer Website organisiert sind.

Beispiel: Website „Beispiele“

In einem Ordner für die Website namens „Beispiele“ könnte es mehrere Dateien geben, wie z.B. ein JPEG-Bild und eine zusätzliche HTML-Datei. Diese Dateien arbeiten zusammen, um die Inhalte und das Erscheinungsbild der Website zu gestalten.

Was ist eine Sitemap?

Ein weiterer wichtiger Begriff in diesem Zusammenhang ist die Sitemap. Viele Websites bieten ihren Besuchern eine Sitemap an, die oft eine grafische Darstellung dieser hierarchischen Baumstruktur ist. Die einzelnen Elemente der Sitemap sind als Links ausgelegt, sodass Benutzer schnell zu den gewünschten Seiten navigieren können.

Eine Sitemap hilft den Besuchern, sich besser auf der Website zurechtzufinden und schnell die gesuchten Informationen zu finden. Sie ist ein nützliches Werkzeug sowohl für die Benutzerfreundlichkeit als auch für Suchmaschinenoptimierung.

 

Homepage und Startseite

Jede Website hat eine Homepage, die als Startseite dient. Diese sieht man, wenn man die Webadresse eines Internetauftritts in die Adresszeile des Browsers eingibt, beispielsweise http://www.uebung.de. Bei statischen Webseiten – auf die wir uns in diesem Studienheft konzentrieren – muss die Startseite den Namen index.html tragen, damit sie automatisch angezeigt wird.

Der Mechanismus funktioniert folgendermaßen: Nachdem der Benutzer die Adresse eingegeben und mit der Enter-Taste bestätigt hat, wird eine Anforderung an den entsprechenden Server gesendet, ihm die Startseite zu schicken. Der Server überprüft, ob im Stammverzeichnis für diese Adresse eine Datei namens index.html vorhanden ist und sendet diese an den Benutzer, der die Anforderung gestellt hat. Ohne diesen automatischen Ablauf müsste jeder Benutzer den genauen Namen der Startseite kennen und eingeben, wie z. B. http://www.uebung.de/anfang.html, was sehr umständlich wäre.

Diese Startseite wird traditionell auch als Homepage bezeichnet. Viele Menschen nutzen diesen Begriff jedoch fälschlicherweise im Sinne von Website und beziehen sich auf den gesamten Internetauftritt, wenn sie sagen: „Mein Freund Fritz hat jetzt auch eine Homepage.“

Was bedeutet "http"?

An dieser Stelle möchte ich Ihnen erklären, was das http in Webadressen bedeutet: http steht für Hypertext Transfer Protocol. Dieses Protokoll bezeichnet das Verfahren, mit dem HTML-Dokumente zwischen Server und Client übertragen werden. Als Client bezeichnet man den Rechner des Besuchers einer Webseite. Der Doppelpunkt mit den beiden Schrägstrichen ist Bestandteil der für Webadressen festgelegten Syntax.

neu23

10 Verweise (Hyperlinks)

Einführung in das <a>-Tag

Das <a>-Tag im HTML wird verwendet, um Hyperlinks zu definieren. Es leitet sich von dem englischen Wort anchor (deutsch „Anker“) ab. Hyperlinks sind ein zentrales Element des Webs, da sie es ermöglichen, von einer Seite zu einer anderen zu navigieren. Hier konzentrieren wir uns auf die grundlegende Verwendungsweise des <a>-Tags, ohne auf spezielle Fälle wie Links zu Ankern einzugehen.

Struktur einer HTML-Startseite

Nehmen wir an, Sie haben eine Startseite namens index.html. Diese Seite sollte eine Überschrift und ein Foto enthalten und mindestens einen Link zu einer untergeordneten Seite, um die Funktionalität einer Homepage zu erfüllen. Im folgenden Code-Beispiel sehen Sie, wie das <a>-Tag in einem vollständigen HTML-Dokument verwendet wird.

Beispiel eines HTML-Dokuments

Hier ist ein einfaches Beispiel, wie ein HTML-Dokument mit einem <a>-Tag aussehen könnte:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Startseite</title> </head> <body> <h1>Willkommen auf unserer Startseite</h1> <img src="/bild.jpg" alt="Ein schönes Bild"> <p>Besuchen Sie unsere <a href="/unterseite.html">Unterseite</a> für mehr Informationen.</p> </body> </html>

Erklärung des Codes

  • <!DOCTYPE html>: Deklariert das Dokument als HTML5.
  • <html lang="de">: Gibt an, dass die Sprache des Dokuments Deutsch ist.
  • <head>: Enthält Metadaten wie den Zeichensatz und den Seitentitel.
  • <body>: Der Hauptinhalt der Seite, einschließlich Überschrift, Bild und Link.
  • <a href="/unterseite.html">: Definiert einen Hyperlink, der zur unterseite.html führt.

    neu22

Dieses Beispiel zeigt die grundlegende Verwendung des <a>-Tags, um eine einfache, aber funktionale Webseite zu erstellen.

 

neu30 

 Das Attribut href im Detail

Das Attribut href ist ein zentraler Bestandteil von HTML-Links und bestimmt, wohin ein Link führt. Hier sehen wir ein Beispiel für einen vollständigen Link-Befehl:

<a href="/new-york.html">Central-Park</a>

Bedeutung von href

Das href-Attribut ist bei Links vergleichbar mit dem src-Attribut bei Bildern: Es handelt sich um einen relativen Pfad. In diesem Fall weist href den Browser an, welche Seite angezeigt werden soll, wenn der Link angeklickt wird. Hierbei verweist href auf die Datei "new-york.html".

Der Linktext

In unserem Beispiel ist „Central-Park“ der Linktext. Dieser Text ist das sichtbare Element des Links, das Benutzer anklicken können. Der Linktext kann theoretisch ein ganzes Satz sein, jedoch wird in der Praxis häufig versucht, ihn auf ein Wort oder einen kurzen Halbsatz zu beschränken. Dies optimiert die Lesbarkeit und Nutzererfahrung.

Darstellung von Links

Links werden im Webbrowser in der Regel automatisch unterstrichen und in einer blauen Textfarbe dargestellt. Wenn der Mauszeiger über den Link bewegt wird, ändert sich der Cursor zu einer Hand mit ausgestrecktem Zeigefinger, was signalisiert, dass der Text anklickbar ist.

Farbänderung bei besuchten Links

Ein weiteres bekanntes Merkmal von Links ist die Änderung ihrer Farbe, nachdem sie angeklickt wurden. Diese sogenannten "visited links" erscheinen üblicherweise in violetter Farbe. Diese Funktion hilft Benutzern, den Überblick darüber zu behalten, welche Links sie bereits besucht haben.

Diese Mechanismen tragen dazu bei, die Navigation und Benutzerfreundlichkeit von Webseiten zu verbessern.

Relative und absolute Pfade in HTML

Was ist ein relativer Pfad?

Ein relativer Pfad ist ein Wegweiser, der innerhalb einer Website angibt, wo sich bestimmte Dokumente oder Dateien im Verhältnis zu einer bestimmten Datei befinden. Stellen Sie sich vor, Sie sind die Datei index.html. Ihre "Welt" ist das Verzeichnis, in dem alle Dateien Ihrer Website gespeichert sind. Ein relativer Pfad beschreibt aus Ihrer Sicht, wo sich andere Dateien befinden.

Beispiel für einen relativen Pfad

Wenn die Datei new-york.html im selben Verzeichnis wie index.html liegt, ist der relative Pfad einfach der Dateiname selbst: new-york.html. Dieser Pfad wird als Wert des Attributs href in einem HTML-Link verwendet.

Für ein Bild, das in index.html angezeigt wird und sich im Unterordner images befindet, sieht der relative Pfad wie folgt aus: src="/images/brooklyn-bridge.jpg". Hierbei wird der Unterordner vor dem Bildnamen angegeben.

Was ist ein absoluter Pfad?

Ein absoluter Pfad gibt den vollständigen Speicherort einer Datei im gesamten Dateisystem eines Computers an. Er beschreibt exakt, wo sich eine Datei befindet, unabhängig von der Datei, in der der Pfad verwendet wird.

Beispiel für einen absoluten Pfad

Ein absoluter Pfad könnte so aussehen: D:/Uebung/HTML/Beispiel-Website/images/brooklyn-bridge.jpg. Dieser Pfad zeigt den exakten Ort der Datei brooklyn-bridge.jpg auf dem Computer an.

Vor- und Nachteile

Vorteile relativer Pfade
  • Flexibilität: Relative Pfade sind flexibel, weil sie sich nicht ändern, wenn der gesamte Ordner der Website verschoben wird.
  • Einfachheit: Sie sind kürzer und leichter zu handhaben, da sie keine vollständige Verzeichnisstruktur benötigen.
Nachteile absoluter Pfade
  • Starrheit: Absolute Pfade sind unflexibel. Sie müssen angepasst werden, wenn Dateien oder Verzeichnisse innerhalb des Computers verschoben werden.
  • Nicht übertragbar: Auf einem anderen Computer funktioniert ein absoluter Pfad nicht, es sei denn, die Verzeichnisstruktur ist identisch.

Lokales Stammverzeichnis

Der Begriff lokales Stammverzeichnis bezieht sich auf das Verzeichnis auf Ihrer Festplatte, in dem alle Dateien Ihrer Website gespeichert sind. Es ist der Ausgangspunkt für relative Pfade. Neben dem lokalen Verzeichnis gibt es auch Remote-Verzeichnisse, die sich auf Servern befinden, auf denen Websites gehostet werden.

Lokale und entfernte Verzeichnisse (Ordner)

 

Entwicklung und Veröffentlichung einer Website

Wenn Sie eine Website entwickeln, tun Sie dies zunächst auf Ihrem eigenen PC. Sobald Sie mit dem Ergebnis zufrieden sind, möchten Sie die Website veröffentlichen, damit sie für andere zugänglich wird. Hierbei müssen Sie den gesamten Inhalt des lokalen Stammordners Ihrer Website in den entsprechenden Stammordner auf Ihrem Webserver kopieren. Dieser wird auch als entfernter Stammordner bezeichnet.

Webadresse und URL

Ein wichtiger Aspekt dieses entfernten Ordners ist, dass er mit der Webadresse Ihrer Website verknüpft ist. Diese Webadresse wird als URL (Uniform Resource Locator) bezeichnet, z. B. http://www.meine-website.de. Ein wesentlicher Bestandteil dieser URL ist die Domain, in diesem Fall meine-website.de. Wenn jemand diesen URL in die Adresszeile seines Browsers eingibt, wird ihm die zugehörige Startseite, typischerweise index.html, angezeigt, wie wir in Kapitel 9.1 besprochen haben.

Absolute und relative Pfade

Ein weiterer wichtiger Punkt betrifft die Pfade zu den Dateien. Solange Sie auf Ihrem PC arbeiten, kann ein Bild korrekt angezeigt werden, selbst wenn sein Speicherort über einen absoluten Pfad angegeben wird. Auf dem Server jedoch gibt es keine Laufwerke wie D:\ oder spezifische Ordnernamen wie "Uebung", außer dem gemeinsam genutzten Ordner wie "images". Daher ist es üblich, mit relativen Pfaden zu arbeiten. Diese relativen Pfade bleiben auch nach der Übertragung der Dateien auf den Server gültig und sorgen dafür, dass alle Inhalte korrekt verlinkt sind.

 

Externe Links

Externe Links in HTML

Externe Links sind ein wesentlicher Bestandteil des Webdesigns und ermöglichen es Nutzern, von einer Webseite zu einer ganz anderen Domain zu wechseln. Diese Links sind besonders nützlich, um auf zusätzliche Informationen, Partnerseiten oder Ressourcen zu verweisen, ohne die aktuelle Webseite zu verlassen.

Syntax von externen Links

Ein externer Link wird in HTML häufig mit dem <a>-Tag und dem href-Attribut erstellt. Ein typisches Beispiel könnte wie folgt aussehen:

<a href="http://www.firma-xy.de" target="_blank">Zur Firma XY</a>

Erläuterung der Attribute
  • href: Dieses Attribut gibt die URL der Zielseite an. In unserem Beispiel verweist der Link auf die Homepage der Firma XY.
  • target="_blank": Das target-Attribut bestimmt, wie der Link geöffnet wird. Mit dem Wert _blank wird die Zielseite in einem neuen Fenster oder Tab geöffnet. Dies ist besonders nützlich, um den Benutzer auf eine externe Seite zu führen, während die ursprüngliche Seite weiterhin zugänglich bleibt.

Bedeutung und Verwendung

Die Verwendung des target="_blank"-Attributs hat sich als gängige Praxis etabliert, um die Benutzererfahrung zu verbessern. Nutzer können auf eine neue Seite zugreifen, ohne die aktuelle Webseite zu verlassen, was besonders praktisch ist, wenn sie zu der ursprünglichen Webseite zurückkehren möchten.

Historischer Kontext

Das target-Attribut hat seine Wurzeln in der inzwischen veralteten Frame-Technik, bei der es zur Steuerung der Anzeige verschiedener Seiten in Frames verwendet wurde. Trotz der zwischenzeitlichen Überlegungen zur Abschaffung ist es in der aktuellen HTML5-Spezifikation ausdrücklich erlaubt und gehört wieder zum Standard.

Vorteile externer Links

  • Erweiterte Informationsbereitstellung: Sie ermöglichen es, zusätzliche Informationen oder Ressourcen bereitzustellen.
  • Verbesserte Benutzererfahrung: Der Nutzer kann neue Inhalte entdecken und gleichzeitig zur Ausgangsseite zurückkehren, ohne sie erneut suchen zu müssen.
  • Kollaboration und Vernetzung: Externe Links fördern die Vernetzung von Inhalten und Webseiten im Internet.

Zusammenfassend lässt sich sagen, dass das richtige Setzen und Verwenden von externen Links ein wichtiges Werkzeug im Webdesign ist, das sowohl die Funktionalität als auch die Benutzerfreundlichkeit einer Webseite erheblich verbessern kann.

 

Bilder als Links

Verlinkungen auf Webseiten

Bild-Links

Bestimmt haben Sie schon oft auf Webseiten Bilder gesehen, die man anklicken kann, genau wie Textlinks. In solchen Fällen fungiert ein Bild als „Linktext“. So kann ein Bild-Link im HTML-Code aussehen:

<a href="/neue-seite.html"><img src="/meinbild.gif"></a>

Aus Gründen der Übersichtlichkeit wurden in diesem Beispiel die weiteren Attribute des img-Tags (wie width, height, alt) weggelassen. Diese Attribute sollten jedoch immer angegeben werden, um die Barrierefreiheit und die Benutzerfreundlichkeit zu gewährleisten.

Mail-Links

Eine spezielle Form der Verlinkung sind Mail-Links. Diese ermöglichen es den Besucher*innen einer Website, per E-Mail Kontakt mit dem Betreiber aufzunehmen. Im href-Attribut erscheint hier das Schlüsselwort mailto:, gefolgt von einer E-Mail-Adresse:

<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Kontakt</a>

Wenn man den Linktext „Kontakt“ anklickt, öffnet sich das E-Mail-Programm des Benutzers und erstellt eine neue Nachricht, die bereits die im href-Attribut angegebene E-Mail-Adresse als Empfänger enthält.

Einschränkungen bei Mail-Links

Es ist wichtig zu beachten, dass Mail-Links nicht immer zuverlässig funktionieren. Diese Methode setzt voraus, dass auf dem Computer des Benutzers ein E-Mail-Programm (wie Outlook oder Thunderbird) installiert und korrekt konfiguriert ist. Aus diesem Grund ist es oft besser, für die Kontaktaufnahme ein Kontaktformular zu verwenden. Mehr dazu finden Sie im Kapitel über Formulare.

Listen

Einführung in Listen in HTML

Listen sind ein grundlegendes und einfaches Thema in der Welt der Webentwicklung. Sie sind jedem Benutzer von Textverarbeitungsprogrammen wie Microsoft Word vertraut, wo es spezielle Icons gibt, um Aufzählungslisten und nummerierte Listen zu erstellen. In HTML unterscheidet man zwischen ungeordneten Listen (unordered lists) und geordneten Listen (ordered lists). Diese Begriffe erklären auch die Abkürzungen für die entsprechenden Tag-Namen.

Ungeordnete Listen (unordered lists)

Ungeordnete Listen sind besonders nützlich, wenn die Reihenfolge der Elemente keine Rolle spielt. In HTML wird eine ungeordnete Liste mit dem <ul>-Tag erstellt, und jedes Listenelement wird mit dem <li>-Tag gekennzeichnet.

Beispiel einer ungeordneten Liste:

<ul> <li>Apfel</li> <li>Banane</li> <li>Kirsche</li> </ul>

Geordnete Listen (ordered lists)

Geordnete Listen werden verwendet, wenn die Reihenfolge der Elemente wichtig ist. Sie werden in HTML mit dem <ol>-Tag erstellt, wobei ebenfalls jedes Element mit dem <li>-Tag markiert wird.

Beispiel einer geordneten Liste:

<ol> <li>Erster Schritt</li> <li>Zweiter Schritt</li> <li>Dritter Schritt</li> </ol>

Fazit

Listen sind ein einfaches, aber leistungsfähiges Werkzeug in HTML, das es Ihnen ermöglicht, Inhalte strukturiert und übersichtlich darzustellen. Ob Sie nun eine Einkaufsliste oder eine Schritt-für-Schritt-Anleitung erstellen, HTML-Listen sind dafür ideal geeignet.

 

bild 40

HTML-Listen: Ein Überblick

HTML bietet zwei grundlegende Typen von Listen, die jeweils eine spezielle Struktur aufweisen. Diese beiden Typen sind geordnete Listen (ordered lists) und ungeordnete Listen (unordered lists). Beide Listen sind wie ein „Doppelsandwich“ aufgebaut, bei dem eine äußere Struktur eine innere Struktur umschließt.

Geordnete Listen (Ordered Lists)

Die äußere Struktur einer geordneten Liste wird durch das <ol>-Tag definiert:

<ol> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> </ol>

Hierbei wird jedem Listenelement eine Nummer zugewiesen, die automatisch generiert wird. Dies ist besonders nützlich, wenn die Reihenfolge der Elemente wichtig ist, wie zum Beispiel bei Anleitungen oder Rezepten.

Ungeordnete Listen (Unordered Lists)

Im Gegensatz dazu steht die ungeordnete Liste, die mit dem <ul>-Tag gekennzeichnet wird:

<ul> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> </ul>

Bei einer ungeordneten Liste werden die Elemente mit einem Aufzählungszeichen, wie einem Punkt oder einem anderen Symbol, dargestellt. Diese Art von Liste eignet sich hervorragend für Aufzählungen, bei denen die Reihenfolge der Punkte keine Rolle spielt.

Der gemeinsame Nenner: Listenelemente

Unabhängig davon, ob Sie eine geordnete oder ungeordnete Liste verwenden, bleibt die innere Struktur der Liste gleich. Jedes Listenelement wird durch das <li>-Tag kenntlich gemacht, was für list item steht.

Unterschied der äußeren Struktur

Der Hauptunterschied zwischen den beiden Listentypen liegt im Namen des Tags für die äußere Struktur:

  • Geordnete Liste: <ol>
  • Ungeordnete Liste: <ul>

Darstellung im Browser

In einem Browser wie Firefox wird dieser HTML-Code korrekt interpretiert und in einer strukturierten Form angezeigt. Die geordnete Liste zeigt nummerierte Punkte, während die ungeordnete Liste mit Aufzählungszeichen dargestellt wird.

HTML-Listen sind ein grundlegendes, aber sehr nützliches Werkzeug in der Webentwicklung, um Informationen strukturiert und übersichtlich darzustellen.

neu41

Tabellen

Einführung in die Verwendung von CSS für Webdesign

Die Geschichte der Tabellen im Webdesign

In der frühen Geschichte des Webdesigns waren Tabellen das wichtigste Werkzeug, um Webseiten ein Layout zu geben. Durch geschicktes Anpassen der Tabellenattribute wurden sie so modifiziert, dass die Begrenzungen der Zellen für den Leser unsichtbar wurden. Dieses Verfahren ermöglichte Webdesignern, komplexe Layouts zu schaffen, die den Anforderungen ihrer Kunden entsprachen.

Der Übergang zu CSS

Heute hat sich die Praxis des Webdesigns erheblich weiterentwickelt. Für professionelle Webdesigner ist es mittlerweile Standard, Layouts mithilfe von CSS (Cascading Style Sheets) zu gestalten. CSS bietet zahlreiche Vorteile gegenüber Tabellenlayouts, darunter:

  • Flexibilität: CSS ermöglicht es, das Layout einer Webseite unabhängig von der HTML-Struktur zu ändern.
  • Wartbarkeit: Änderungen im Design können einfacher und effizienter durchgeführt werden.
  • Performance: Webseiten mit CSS laden in der Regel schneller, da sie weniger HTML-Code erfordern.

Trotz dieser Vorteile gibt es immer noch einige Webdesigner, die sich nicht die Mühe gemacht haben, die moderne CSS-Technologie zu erlernen. Diese Designer verkaufen ihren Kunden nach wie vor veraltete Tabellenlayouts. Es ist jedoch ratsam, von Anfang an konsequent auf CSS zu setzen, um den Anforderungen moderner Webstandards gerecht zu werden.

Der richtige Einsatz von Tabellen

Obwohl CSS der bevorzugte Weg für Layouts ist, bleiben Tabellen ein geeignetes Mittel zur Darstellung bestimmter Inhalte. Es gibt Inhalte, die ihrer Natur nach tabellarisch sind und am besten in Tabellenform präsentiert werden. Beispiele hierfür sind:

  • Preislisten: Eine klare Darstellung von Preisen und Produktoptionen.
  • Adressverzeichnisse: Geordnete Auflistungen von Kontaktdaten.
  • Messwerte: Strukturiertes Anzeigen von statistischen Daten.

Ein einfaches Beispiel

Lassen Sie uns mit einem einfachen Beispiel beginnen, um den Unterschied zwischen Tabellenlayouts und CSS-Layouts zu verdeutlichen. Nehmen wir an, Sie möchten eine Preisliste auf Ihrer Webseite darstellen:

Mit Tabellen:

<table> <tr> <th>Produkt</th> <th>Preis</th> </tr> <tr> <td>Apfel</td> <td>1,00 €</td> </tr> <tr> <td>Banane</td> <td>0,50 €</td> </tr> </table>

Mit CSS:

<div class="preisliste"> <div class="produkt">Apfel</div> <div class="preis">1,00 €</div> <div class="produkt">Banane</div> <div class="preis">0,50 €</div> </div>

.preisliste { display: grid; grid-template-columns: auto auto; } .produkt, .preis { padding: 8px; }

Wie ersichtlich, ermöglicht CSS eine flexiblere und modernere Gestaltung und ist damit das bevorzugte Mittel für das Layout von Webseiten. Tabellen behalten ihren Wert für die strukturierte Darstellung von Daten.

Bildschirmfoto vom 2024 12 27 15 53 56

neu62

Verbesserungen und Anpassungen in HTML-Tabellen

Beim Erstellen und Anpassen von HTML-Tabellen gibt es einige wichtige Änderungen und Verbesserungen, die vorgenommen werden können, um die Struktur und Darstellung zu optimieren. Hier sind einige der wichtigsten Punkte:

1. Tabellenbeschriftung

  • Beschriftung: Eine Tabellenbeschriftung kann innerhalb des caption-Tag-Paares hinzugefügt werden. Dies ist ein optionales Element innerhalb der table-Struktur, das jedoch dazu beiträgt, die Tabelle besser zu beschreiben und die Benutzerfreundlichkeit zu erhöhen.

2. Kopfzeilen

  • Verwendung von th-Tags: Die erste Tabellenzeile sollte th-Tags (table header) anstelle von td-Tags verwenden. Diese dienen nicht nur der semantischen Strukturierung, sondern bewirken auch, dass der Text in diesen Zellen automatisch mittig und fett dargestellt wird. Dies ist besonders für Spaltenbeschriftungen vorteilhaft.

3. Semantische Strukturen

  • Verwendung von p-Tags: In den Zellen sollten Absätze mit Text immer in p-Tags eingefügt werden. Auch wenn es oft vorkommt, dass Texte direkt in das td-Tag geschrieben werden, ist dies nicht semantisch korrekt. Der Einsatz von p-Tags oder von anderen semantisch passenden Strukturen wie h1, h2 usw. ist wichtig, um den HTML-Code sinnvoll und inhaltlich bedeutungsvoll zu gestalten.

4. Textausrichtung

  • Horizontale Ausrichtung: Standardmäßig sind Inhalte in den Zellen linksbündig ausgerichtet. Um beispielsweise Bestellnummern in der zweiten Spalte mittig auszurichten, kann das Attribut align="center" verwendet werden.

5. Vertikale Ausrichtung

  • Zeilenumbrüche und Zellenhöhe: In der zweiten Zeile kann ein Zeilenumbruch beim Produktnamen „Decke“ dazu führen, dass die Zelle höher wird als die anderen. Standardmäßig ist der Inhalt vertikal mittig ausgerichtet, was an der Position der Preise gut erkennbar ist. Wenn eine andere vertikale Ausrichtung gewünscht ist, sollte das Attribut valign verwendet werden. Beispielsweise kann mit valign="top" erreicht werden, dass der Text oben bündig steht.

Durch die Berücksichtigung dieser Anpassungen kann die Lesbarkeit und Struktur von HTML-Tabellen erheblich verbessert werden. Die Anwendung dieser Praktiken trägt zu einer besseren Benutzererfahrung und einer semantisch korrekten HTML-Darstellung bei.

Spaltenbreiten in Tabellen

Bei der Gestaltung von Tabellen in Webbrowsern wie Firefox gibt es einige interessante Aspekte zu berücksichtigen, insbesondere wenn es um die Breite der Spalten geht.

Beispielanalyse

In unserem Beispiel ist die gesamte Tabelle 400 Pixel breit. Die Breite der einzelnen Spalten wird durch das längste Wort in den jeweiligen Spalten bestimmt, unabhängig davon, in welcher Zeile es steht. In diesem Fall sind die Wörter „Bestell-Nummer“ und „Sonderposten“ die maßgeblichen Faktoren.

Verteilung der Spaltenbreiten
  • Zweite Spalte („Bestell-Nummer“)
    • Diese Spalte erhält den meisten Platz zugeteilt, da „Bestell-Nummer“ das längste Wort in der gesamten Tabelle ist.
    • Obwohl der Rest der Zellen in dieser Spalte nur kurze Zahlen enthält, ist die Breite durch dieses eine Wort dominiert.
  • Erste Spalte („Sonderposten“)
    • Diese Spalte erhält die zweitmeiste Breite, da „Sonderposten“ das zweitlängste Wort ist.
  • Dritte Spalte
    • Diese Spalte erhält den wenigsten Platz, da sie keine besonders langen Wörter enthält.

Gleichmäßige Spaltenbreiten

Vielleicht bevorzugen wir eine Tabelle, in der alle Spalten gleich breit sind. Dies kann ästhetisch ansprechender sein und die Lesbarkeit verbessern. Eine gleichmäßige Verteilung der Spaltenbreiten kann durch CSS-Einstellungen wie table-layout: fixed; erreicht werden. Hierbei wird der zur Verfügung stehende Platz gleichmäßig auf alle Spalten verteilt, unabhängig von der Länge der darin enthaltenen Wörter.

Fazit

Die Wahl der Spaltenbreite hängt von den spezifischen Anforderungen und ästhetischen Vorlieben ab. Während längere Wörter in einer Spalte die Breite beeinflussen können, bietet CSS Flexibilität, um das gewünschte Layout zu erreichen. Eine bewusste Entscheidung über die Spaltenbreiten kann die Lesbarkeit und das Design der Tabelle erheblich verbessern.

 Formulare

neu100Einführung in HTML-Formulare

Formulare sind ein wesentlicher Bestandteil vieler Webseiten und ermöglichen es Benutzern, Daten einzugeben und an den Server zu senden. In diesem Abschnitt lernen Sie, wie Sie einfache HTML-Formulare erstellen können, die aus einem Texteingabefeld, einem Absenden-Button und einem Löschen-Button bestehen.

HTML-Formularstruktur

Ein einfaches HTML-Formular besteht aus verschiedenen Elementen, die zusammenarbeiten, um die Eingabe und Übertragung von Daten zu ermöglichen. Hier ist ein einfaches Beispiel, das Sie als Ausgangspunkt nutzen können:

<form action="/submit" method="post"> <label for="eingabe">Text eingeben:</label> <input type="text" id="eingabe" name="eingabe" placeholder="Geben Sie hier Ihren Text ein"> <button type="submit">Absenden</button> <button type="reset">Löschen</button> </form>

neu101

Erklärung der Elemente

<form>

Das <form>-Tag markiert den Anfang und das Ende eines Formulars. Es enthält zwei wichtige Attribute:

  • action: Diese URL gibt an, wohin die Formulardaten gesendet werden sollen.
  • method: Dieses Attribut gibt an, welche HTTP-Methode (z.B. post oder get) verwendet wird, um die Daten zu senden.
<label>

Das <label>-Element ist für die Benutzerfreundlichkeit wichtig, da es die Zuordnung zwischen einem Eingabeelement und dessen Beschreibung erleichtert. Durch die Verwendung des for-Attributs kann es mit dem entsprechenden Eingabefeld verknüpft werden.

<input>

Das <input>-Element wird verwendet, um ein Eingabefeld zu erstellen. In diesem Beispiel verwenden wir type="text", um ein einzeiliges Texteingabefeld zu erzeugen. Weitere Attribute sind:

  • id: Eine eindeutige Kennzeichnung des Eingabefeldes, die auch zur Verknüpfung mit dem <label> genutzt wird.
  • name: Der Name des Eingabefeldes, der beim Senden der Daten an den Server als Schlüssel verwendet wird.
  • placeholder: Ein kurzer Hinweistext, der im Eingabefeld angezeigt wird, solange es leer ist.
<button>

Es gibt zwei Buttons in diesem Formular:

  • Absenden-Button (type="submit"): Dieser Button sendet die Formulardaten an den Server.
  • Löschen-Button (type="reset"): Dieser Button setzt alle Eingabefelder des Formulars auf ihren Anfangszustand zurück.

Was passiert beim Absenden?

Beim Klicken auf den Absenden-Button werden die Daten, die der Benutzer in das Formular eingegeben hat, an die im action-Attribut angegebene URL geschickt. Der Server kann diese Daten dann verarbeiten und eine entsprechende Antwort zurücksenden oder eine neue Seite laden.

Mit diesem Wissen sind Sie nun in der Lage, einfache Formulare auf Ihrer Webseite zu erstellen. Experimentieren Sie mit verschiedenen Eingabetypen und Attributen, um die Interaktivität Ihrer Webseite zu erhöhen.

 

Einführung in HTML-Formulare und deren Verarbeitung

HTML-Formulare sind ein zentrales Element der Webentwicklung, um Benutzerdaten zu sammeln und an einen Server zu übermitteln. In diesem Abschnitt werden wir die grundlegenden Attribute von HTML-Formularen und ihre Bedeutung erläutern.

Grundlegende Formularattribute

HTML-Formulare werden durch das <form>-Tag erstellt, das verschiedene Attribute enthält, die das Verhalten des Formulars bestimmen:

  • id: Eine eindeutige Kennzeichnung für CSS-Formatierungen. Beispiel: id="form1".
  • name: Eine Kennzeichnung, die zur Verarbeitung der Formulardaten auf dem Server genutzt wird. Beispiel: name="form1".
  • method: Bestimmt, wie die Daten gesendet werden. Die Optionen sind post (Daten werden als separates Paket gesendet) und get (Daten werden an die URL angehängt).
  • action: Gibt an, was nach dem Absenden des Formulars geschehen soll. Fehlt diese Angabe, wird keine Aktion ausgeführt. Beispiel: action="formcheck.php".

Verarbeitung der Formulardaten

Wenn ein Formular abgesendet wird, werden die Daten an den Server gesendet, von dem die Webseite stammt. Dort muss eine Software installiert sein, die die Daten verarbeitet, beispielsweise durch Speicherung in einer Datenbank. Die gängigen Technologien zur Erstellung von Serverprogrammen sind:

  • PHP (Hypertext Preprocessor)
  • ASP/ASP.NET (Active Server Pages)
  • JSP (Java Server Pages)
  • CGI-Programmierung (z. B. mit PERL)

Die Serverprogrammierung wird in diesem Rahmen nicht weiter behandelt, da sie über die HTML-Erstellung hinausgeht.

Formulare per E-Mail versenden

Es ist möglich, Formulare so zu konfigurieren, dass die Inhalte per E-Mail an eine bestimmte Adresse gesendet werden, indem das action-Attribut mit mailto: verwendet wird. Beispiel:

action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it."

Probleme beim E-Mail-Versand

Der Versand von Formularen per E-Mail ist sehr unzuverlässig, da viele Browser kein eigenes Mail-Modul besitzen und auf externe Mailprogramme angewiesen sind. Dies kann zu Problemen führen, wie z. B. einem leeren Mail-Fenster. Zudem werden die Daten standardmäßig im MIME-Typ application/x-www-form-urlencoded kodiert, was zu schwer lesbaren Texten führt. Durch das Attribut enctype="text/plain" kann dies vermieden werden, jedoch wird es nicht von allen Browsern unterstützt.

Hinweis: Verwenden Sie den E-Mail-Versand nur als Notlösung. Für wichtige Daten ist die Verarbeitung durch serverseitige Programme wesentlich zuverlässiger.

Beschriftung von Formularelementen

Für die Beschriftung von Formularelementen kann das <label>-Tag verwendet werden, um einen logischen Bezug zwischen dem Formularelement und seinem Beschriftungstext herzustellen, z. B.:

<label for="name">Name:</label> <input type="text" id="name" name="name">

Dies sorgt für eine bessere Benutzerfreundlichkeit und Zugänglichkeit.

Zusammenfassung: HTML-Formulare sind ein mächtiges Werkzeug zur Datensammlung. Die Verarbeitung der Daten sollte jedoch zuverlässig über serverseitige Programme erfolgen. Der E-Mail-Versand von Formulardaten ist nur eine unzuverlässige Notlösung.

 
 

103Erstellung eines Bestellformulars für einen fiktiven Internet-Shop

Bei der Gestaltung eines Bestellformulars für einen Internet-Shop sind einige grundlegende Prinzipien zu beachten, um sicherzustellen, dass das Formular sowohl funktional als auch benutzerfreundlich ist. Im Folgenden wird erläutert, wie Sie ein solches Formular mit verschiedenen Formularelementen erstellen können.

Einfache Formularelemente

Um ein Formular zu erstellen, müssen Sie jedem Formularelement eine eindeutige ID zuweisen. Diese ID darf keine Leerzeichen oder Umlaute enthalten und muss mit einem Buchstaben beginnen. Danach sind auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.) erlaubt.

Verwendung von Labels

Das label-Tag wird verwendet, um den logischen Bezug zwischen einer Beschriftung und einem Formularelement herzustellen. Dies geschieht durch das Attribut for, dessen Wert genau der ID des Formularelements entsprechen muss, auf das sich das Label bezieht. Das Label selbst ist auf dem Bildschirm nicht sichtbar.

Typen von Eingabefeldern

Die Formularelemente werden häufig durch den Befehl input erstellt, wobei der Wert des Attributs type ihre Funktionalität bestimmt:

  • type="text": Erstellt ein Textfeld zur Eingabe von Daten.
  • type="submit": Erstellt einen anklickbaren Button mit der Funktion „Senden“. Der sichtbare Text auf dem Button wird durch das Attribut value festgelegt. Beim Anklicken wird die action des Formulars ausgeführt.
  • type="reset": Erstellt einen Button mit der Funktion „Zurücksetzen“, der alle bereits vorgenommenen Eingaben löscht. Auch hier wird die Beschriftung durch value festgelegt.

Attribute von Formularelementen

Neben der ID ist das Attribut name ein weiteres wichtiges Attribut für Formularelemente. Diese sollten sinnvoll und „sprechend“ gewählt werden, um die spätere Verarbeitung der Formulardaten zu erleichtern.

Beispiel eines Bestellformulars

Wir erstellen nun ein größeres und realistischeres Formular: das Bestellformular für einen fiktiven Internet-Shop für Sportartikel. Dieses Formular enthält eine Reihe wichtiger Formularelemente und ist so gestaltet, dass es im Browser, z.B. Firefox, gut aussieht.

Wichtige Elemente des Bestellformulars
  1. Kundendaten:
    • Vorname
    • Nachname
    • E-Mail-Adresse
  2. Produktwahl:
    • Dropdown-Menü zur Auswahl der Sportartikel
    • Anzahl der gewünschten Artikel
  3. Zahlung:
    • Auswahlmöglichkeit der Zahlungsmethode
  4. Abschließen der Bestellung:
    • Button zum Absenden der Bestellung
    • Button zum Zurücksetzen des Formulars

Diese Struktur ermöglicht es den Nutzern, alle notwendigen Informationen einfach einzugeben und sicherzustellen, dass die Bestellung korrekt verarbeitet wird.

Einführung in zusätzliche Formularelemente

In diesem Abschnitt werden wir einige häufig verwendete Formularelemente betrachten, die über die grundlegenden Textfelder hinausgehen. Diese Elemente helfen dabei, Benutzern verschiedene Auswahlmöglichkeiten zu bieten und Informationen effizienter zu sammeln.

Auswahlbox (Drop-Down-Menü)

Eine Auswahlbox, oft auch als Drop-Down-Menü bezeichnet, ähnelt in ihrer Struktur einer Liste. Der Befehl select ersetzt hier das, was bei Listen als ul oder ol bekannt ist. Jedes Element innerhalb dieser Auswahlbox wird durch option-Tags definiert, ähnlich wie die li-Elemente in Listen. Diese Struktur ist besonders nützlich, wenn Sie eine übersichtliche Auswahl an Optionen bereitstellen möchten.

Optionsschalter (Radiobuttons)

Optionsschalter, im Englischen als "Radiobuttons" bekannt, werden ebenfalls mit dem input-Tag erzeugt, wobei das Attribut type="radio" ihre Form und Funktion bestimmt. Diese Schalter sind ideal, wenn nur eine einzige Antwort auf eine Frage möglich ist, wie zum Beispiel die Angabe des Geschlechts.

Ein entscheidendes Attribut für Radiobuttons ist name. Damit immer nur einer der Buttons in einer Gruppe ausgewählt werden kann, müssen alle Buttons in dieser Gruppe denselben Namen tragen, z. B. name="Geschlecht". Beachten Sie, dass zunächst keiner der Buttons aktiv ist und erst durch Benutzerinteraktion ausgewählt werden kann.

Das Attribut id spielt ebenfalls eine wichtige Rolle, nicht nur für die Verbindung mit label-Tags, sondern auch für die spätere CSS-Formatierung der Elemente. Verwenden Sie für name, value und id möglichst aussagekräftige Werte, die sich jedoch voneinander unterscheiden sollten, um Verwechslungen zu vermeiden.

Auswahlkästchen (Checkboxes)

Auswahlkästchen werden ebenfalls mit dem input-Tag erstellt, allerdings mit type="checkbox". Diese Kästchen sind nützlich, wenn mehrere Antworten möglich sind. Ein Benutzer könnte beispielsweise mehrere Benachrichtigungsoptionen auswählen oder auch keine.

Die Attribute für Checkboxes sind denen der anderen Formularelemente sehr ähnlich, und daher müssen wir sie hier nicht erneut im Detail durchgehen.

Das Attribut value ist besonders wichtig, wenn die Formulardaten weiterverarbeitet werden sollen, wie beim Versenden per E-Mail. Jeder Optionsschalter und jedes Auswahlkästchen sollte einen eindeutigen Wert für value haben, um die Auswahl des Benutzers korrekt identifizieren zu können.

Durch das Verständnis dieser Formularelemente und ihrer Attribute können Sie effektivere und benutzerfreundlichere Formulare erstellen.

 

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.