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-ElementsEin 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 TagDer ö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 InhaltDer 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 TagDer 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ägstrichsDer 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] +.
ZusammenfassungDas 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-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. Schritt-für-Schritt-Anleitung
Hinweise
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:
- TextEdit-Einstellungen: Öffnen Sie das Menü TextEdit und wählen Sie Einstellungen.
- 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)
- 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 ansehenUm 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 StandardprogrammeNormalerweise 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-DokumentenWenn 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-DokumentenZum 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.
|
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.
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:
- Verwenden Sie ausschließlich Buchstaben, Zahlen, Unterstrich „_“ und Minus „-“.
- Obwohl prinzipiell auch Großbuchstaben erlaubt sind, empfehle ich die Beschränkung auf Kleinbuchstaben. Sie ersparen sich womöglich viel Ärger!
- Verwenden Sie auf keinen Fall Umlaute, „ß“ oder andere Sonderzeichen („&, $, §“ usw.).
- Im Dateinamen darf auf keinen Fall ein Leerzeichen vorkommen.
- Der Dateiname sollte „sprechend“ sein, d. h., er sollte etwas mit dem Inhalt der Seite zu tun haben.
- 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.
- 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.0HTML, 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.0Die 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-DokumentsDie 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
Bedeutung der neuen SpezifikationHTML 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.
6.2 XHTML
Einführung in XHTMLIn 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 WebdesignXML 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 XHTMLXML 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 WebObwohl 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 WebeditorenWebeditoren 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
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 istObwohl 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 XHTMLDer 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:
Umgang mit bestehenden XHTML-SeitenEs ist wichtig, dass Sie beim Arbeiten mit bestehenden XHTML-Seiten vorsichtig sind:
FazitDas 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.
|
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.
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.
Der img-Befehl in HTMLDer 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-BefehlsDer grundlegende img-Befehl sieht wie folgt aus: <img src="/images/central-park.jpg" alt="Central Park" width="200" height="150"> Wichtige Attribute
Tipps zur Verwendung des img-Befehls
Vorteile von width und heightDie 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 WebNicht 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 KompressionAlle 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:
KompressionstechnikDie 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. VerwendungsempfehlungenVerwenden 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. InterlacingGIF-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 WebsiteDas 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:
Die Struktur einer WebsiteDie 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 StartseiteJede 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. |
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.
Dieses Beispiel zeigt die grundlegende Verwendung des <a>-Tags, um eine einfache, aber funktionale Webseite zu erstellen.
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 hrefDas 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 LinktextIn 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 LinksLinks 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 LinksEin 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:
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.
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.
Tabellen Einführung in die Verwendung von CSS für WebdesignDie Geschichte der Tabellen im WebdesignIn 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 CSSHeute 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:
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 TabellenObwohl 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:
Ein einfaches BeispielLassen 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. |
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
|
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:
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.
|