„Webseite“ – Versionsunterschied

Versionsgeschichte interaktiv durchsuchen

[ungesichtete Version]

[gesichtete Version]

← Zum vorherigen Versionsunterschied

Inhalt gelöscht Inhalt hinzugefügt

VisuellWikitext

Inline

Aktuelle Version vom 31. Mai 2025, 07:35 Uhr

Als Webseite (Wortzusammensetzung aus Web und Seite), Webdokument, Internetseite, Webpage oder kurz Seite wird ein Dokument im World Wide Web bezeichnet, das mit einem Browser unter Angabe eines Uniform Resource Locators (URL) abgerufen und von einem Webserver angeboten werden kann.

Die Gesamtheit der Webseiten eines Internetauftritts wird als Website, Webpräsenz, Webauftritt, Internetpräsenz oder umgangssprachlich auch als Homepage bezeichnet. In der Fachsprache steht Homepage allerdings für die zentrale Seite einer Website, die meist deren Einstiegsseite bildet.

Als Startseite wird die Einstiegsseite einer Website bezeichnet oder auch die Seite, die beim Start eines Webbrowsers geladen wird.

Geschichte

Aufbau

Webseiten bestehen zumeist aus einem Text im Format Hypertext Markup Language (HTML), in dem Bilder, andere Multimediaelemente, Stylesheets, Skripte für dynamische Funktionen der Seiten, Daten u. a. eingebunden sein können. Jede Webseite hat mindestens eine Adresse (URL), über die sie in einem Webbrowser aufgerufen werden kann. Eingebundene Elemente sind oft nicht direkt in die abgerufenen Daten einer Webseite integriert, sondern dort durch Angabe einer eigenen URL referenziert. Die meisten Webbrowser laden diese Elemente ohne weitere Interaktion nach, entweder durch eine neue Anfrage an den entsprechenden Webserver (nicht unbedingt identisch mit dem Server, von die Webseite geliefert wurde) oder aus einem lokalen Cache.

Die angezeigte Seite kann vom Browser auf der Festplatte des Besuchers als HTML-Datei abgespeichert werden. Dabei wird meist ein zur Datei ähnlich benanntes Verzeichnis erstellt, in dem die eingebundenen Elemente untergebracht sind.

Webseiten werden meist aus dem Internet oder einem Intranet geladen, können aber auch auf einem lokalen Speichermedium, zum Beispiel einer Festplatte, abgelegt sein.

Rezeption

Webseiten auf einem Bildschirm werden anders wahrgenommen als gedruckte Textseiten. Englische Eye-Tracking-Versuche, bei denen die Augenbewegung des Lesers verfolgt wird, zeigten, dass die meisten Besucher einer Webseite den Text überfliegen (scannen) und dabei mit den Augen zunächst den oberen Rand und dann den linken Rand des Inhaltsbereichs abtasten. Es entsteht ein F-förmiger Bereich, der von den meisten Besuchern angeblickt wird.^[1] Besucher, die über eine Suchmaschine auf eine Webseite kommen, halten dort vorzugsweise nach ihrem Suchwort (Schlüsselwort) Ausschau.^[2] Aus diesen Tatsachen ergeben sich besondere Anforderungen für den Webtext.

Erstellung

Die Erstellung und Gestaltung von Webseiten wird unter dem Begriff Webdesign zusammengefasst. Basissprache für die Erstellung ist die Auszeichnungssprache HTML, wobei die einheitliche und rationelle Formatierung mehrerer Webseiten durch Formatierungssprachen wie Cascading Style Sheets (CSS) erleichtert werden kann. Vor allem für das Erstellen dynamischer Seiten wurden weitere Sprachen entwickelt, mit deren Hilfe auch komplexe Gefüge aus Webseiten (siehe Website) erstellt werden können.

Dynamische Webseiten

Im Gegensatz zu rein statischen Webseiten, die technisch meist ein HTML-Dokument auf dem Webserver darstellen, werden Webseiten häufig auch dynamisch oder aktiv im Moment der Anforderung erzeugt. Das ist dann sinnvoll, wenn eine Webseite sehr aktuelle Informationen wie beispielsweise Börsenkurse oder Wettervorhersagen enthalten soll. In diesem Fall führt der Webserver ein Programm aus, das vorher spezifisch für diese Aufgabe entwickelt wurde. Es trägt die Daten z. B. aus Datenbanken zusammen. Diese werden dann vom Webserver an den Browser übertragen und beim Benutzer angezeigt.

Ein anderer Anwendungsfall ergibt sich aus dem Bedürfnis, auf Eingaben des Benutzers zu reagieren, wie z. B. die Eingabe eines Suchbegriffs in eine Suchmaschine. Die Software der Suchmaschine erstellt anhand des Suchbegriffs eine Liste von passenden Links und erzeugt eine Webseite, die dem Benutzer diese Liste komfortabel darstellt.

Die Möglichkeit, Webseiten dynamisch in Abhängigkeit von Benutzereingaben und Datenbankinhalten zu generieren, machte das Web schnell zu einer universellen Plattform für viele Arten von Anwendungen. Die Vorteile liegen in Unabhängigkeit von Betriebssystemen und anderen Eigenschaften der Clients. Grundvoraussetzungen sind lediglich eine Netzwerkverbindung zum Server und ein Webbrowser.

Zum Generieren von dynamischen Webseiten kommen verschiedene Programme zum Einsatz, wobei sich die Dynamik auf dem Serversystem ausführen lassen muss. Um die Programmierung zu vereinfachen, wurden jedoch Standards wie das Common Gateway Interface (CGI) eingeführt, um Webanwendungen auch unabhängig von der Art des Webservers zu machen. Die Mehrzahl von CGI-Anwendungen wurden und werden in der Programmiersprache Perl geschrieben. Aufgrund des rasant steigenden Bedarfes zum Betrieb von Web-Anwendungen entwickelten sich Technologien wie PHP, J2EE und das .Net-Framework.

Da die Inhalte umfangreicher Websites meist von mehreren Personen eingepflegt werden, wird bei solchen Projekten häufig ein Content-Management-System (CMS) eingesetzt. Weiterer Vorteil sind die größere Flexibilität bei der Gestaltung und kürzere Einarbeitungszeit für die beteiligten Personen. Es drängen mehr und mehr meist PHP- und MySQL-basierte Lösungen in freier Software auf den Markt.

Trennung von Inhalt, Darstellung und Verhalten

Bei der Implementierung von Webseiten wird heutzutage in der Regel ein Technologie-Mix eingesetzt. Dazu gehören HTML, CSS und oft auch JavaScript. Es existieren verschiedene Möglichkeiten diese Techniken innerhalb eines HTML-Dokuments (Webseite) zu kombinieren. Der JavaScript-Code kann z. B. direkt „inline“ in der HTML-Beschreibung platziert werden. Hierzu kann das „Script“-Tag von HTML verwendet werden. Des Weiteren können über HTML-Eventhandler-Attribute, wie „onclick“ oder „ontouchstart“, direkte Verbindungen mit bestimmten JavaScript-Funktionen gesetzt werden. Bei einem solchen Vorgehen wird Logik für die Beschreibung des Inhalts, der Gestaltung und des Verhaltens gemischt. Durch eine Vermischung können spätere Änderungen am Verhalten nicht vorgenommen werden, ohne ebenfalls Inhalte (HTML) und Darstellung (CSS) zu berücksichtigen. Bei der Trennung kann dies separat angepasst und weiterentwickelt werden. Des Weiteren wird das HTML-Dokument vereinfacht und bleibt frei von längeren JavaScript-Bereichen und CSS-Definition. Folgende Trennung sollte erreicht werden:^[3]

HTML-Content: Das HTML-Dokument sollte lediglich den darzustellenden Inhalt aufbewahren. Die hierzu verwendeten HTML-Tags sollten frei von Eventhandler-Attributen und Inline-JavaScript-Code sein. Styling-Attribute mit CSS-Inhalten sollten zudem nicht im HTML-Markup verwendet werden.
Visuelle Darstellung: Die visuelle Darstellung des Contents der View sollte in separaten CSS-Dateien definiert werden. Die dort definierten Styles werden von der Rendering-Engine des Webbrowsers beim Aufbau der View angezogen. Die separate Definition der visuellen Darstellung erlaubt zusätzlich eine leichtere Anpassung der Präsentation für verschiedene Ausgabemedien. So kann beispielsweise ein responsives Webdesign umgesetzt werden, welches sich automatisch an die technischen Gegebenheiten des Endgerätes anpasst, wie zum Beispiel die Bildschirmgröße. Die Einbindung der CSS-Datei in dem HTML-Dokument sollte hierbei lediglich über ein „Link“-Tag im Kopfbereich des Dokuments erfolgen. Ältere HTML-Tags für die Anpassungen visueller Darstellungen, wie font oder center, sollen nicht mehr verwendet werden und wurden mit HTML5 als veraltet (eng. „deprecated“) gekennzeichnet.
Verhalten: Das clientseitige Verhalten einer Webseite und die Registrierung auf Eingabeereignisse sollten allein im JavaScript-Code erfolgen. Dieser Code sollte zudem in separaten JavaScript-Dateien untergebracht sein. Die Einbindung der JavaScript-Datei in das HTML-Dokument erfolgt hierbei ebenfalls mit dem Script-Tag. Allerdings wird mit dem src-Attribut eine externe Datei adressiert. Bei der Einbindung von JavaScript-Dateien in ein HTML-Dokument hat sich zudem die Strategie durchgesetzt, alle Script-Tags am Ende des HTML-Dokuments zu definieren. Grund hierfür ist das Renderingverhalten von Webbrowsern. Sobald der Webbrowser einen Script-Tag findet, wird das Script heruntergeladen und ausgeführt. Erst nach diesem Vorgang wird das eigentliche Rendering des restlichen Inhalts des HTML-Dokuments fortgesetzt. Wenn nun der Kopfbereich des HTML-Dokuments bereits mehrere Scripts definiert, bleibt die Webseite blockiert, bis alle Scripts geladen wurden. Alternativ kann das async- oder defer-Attribut von HTML5 für das Script-Tag verwendet werden. Allerdings dürfen dann die zuladenden Script-Dateien keine Abhängigkeiten aufweisen, da die genaue Reihenfolge des Ladens nicht mehr definiert ist.

Wenn die beschriebene Trennung von Inhalt, Verhalten und Darstellung berücksichtigt wird, sind zudem die verwendeten Techniken für die Implementierung von Webseiten in einzelne Bereiche aufgeteilt. Es kommt zu keiner direkten Vermischung. Durch die strikte Separierung erhöht sich die Wartbarkeit und Anpassbarkeit des Dokuments.

Als ein Haupthindernis für eine breite Verwendung dieser wesentlich erweiterten Möglichkeiten bzgl. Darstellung und Datenvorhaltung galt lange der Microsoft Internet Explorer, der als langjähriger Marktführer erst mit der 2009 erschienenen Version 8 auch hinsichtlich CSS ausreichende Standardkonformität bietet.

Weblinks

Wiktionary: Webseite – Bedeutungserklärungen, Wortherkunft, Synonyme, Übersetzungen

SELFHTML – HTML-Referenz

Einzelnachweise

↑ Jakob Nielsen (2006): F-Shaped Pattern For Reading Web Content
↑ Jakob Nielsen (1997): How Users Read On the Web
↑ Wartbare Javascript-lastige Webanwendungen. Präsentation, 2014. W3L AG. Auf W3L.de (PDF; 716 kB), abgerufen am 6. Dezember 2020.

[1] Jakob Nielsen (2006): F-Shaped Pattern For Reading Web Content

[2] Jakob Nielsen (1997): How Users Read On the Web

[3] Wartbare Javascript-lastige Webanwendungen. Präsentation, 2014. W3L AG. Auf W3L.de (PDF; 716 kB), abgerufen am 6. Dezember 2020.

[1]

[2]

[3]

@@ Zeile 1: / Zeile 1: @@
+{{Dieser Artikel|beschreibt das Wort ''Webseite'', nicht zu verwechseln mit [[Website]].}}
-Eine '''Webseite''' (engl. ''webpage'') ist ein Dokument im [[World Wide Web]], das mit einem [[Webbrowser]] von einem [[Webserver]] abgerufen und auf dem Monitor dargestellt werden kann. Ein [[Umgangssprache|umgangssprachliches]] [[Synonym]] ist '''Internetseite'''. Der Begriff „Webseite“ wird fälschlicherweise oft wegen der großen klanglichen Ähnlichkeit zum englischen Begriff ''[[Website]]'' für die gesamte [[Webpräsenz]] einer Firma, Organisation oder Privatperson benutzt.
+[[Datei:De Wikipedia Hauptseite (hochauflösend).png|mini|hochkant|Startseite der Website der deutschsprachigen [[Wikipedia]], März 2023]]
-Das wesentliche Merkmal von Webseiten ist, dass sie Verweise ([[Hyperlink]]s) auf andere Webseiten enthalten und somit einen [[Hypertext]] darstellen. Jede Webseite hat eine Adresse ([[Uniform Resource Locator|URL]]), über die sie aufgerufen werden kann.
+Als '''Webseite''' (Wortzusammensetzung aus ''[[World Wide Web|Web]]'' und ''Seite''), '''Webdokument''', '''Internetseite''', '''Webpage''' oder kurz '''Seite''' wird ein Dokument im [[World Wide Web]] bezeichnet, das mit einem [[Webbrowser|Browser]] unter Angabe eines [[Uniform Resource Locator]]s (URL) abgerufen und von einem [[Webserver]] angeboten werden kann.
-Die Gesamtheit der Webseiten einer Organisation wird als [[Webpräsenz]] oder auch [[Internetpräsenz]] bezeichnet (engl. [[Website]]). Meistens entspricht sie der Gesamtheit der Webseiten, die unter einer [[Domain]] erreichbar sind.
+Die Gesamtheit der Webseiten eines Internetauftritts wird als ''[[Website]]'', ''Webpräsenz'', ''Webauftritt'', ''Internetpräsenz'' oder umgangssprachlich auch als ''Homepage'' bezeichnet. In der Fachsprache steht [[Homepage]] allerdings für die zentrale Seite einer Website, die meist deren Einstiegsseite bildet.
+Als [[Startseite]] wird die Einstiegsseite einer Website bezeichnet oder auch die Seite, die beim Start eines Webbrowsers geladen wird.
-Webseiten können statische (feste) Inhalte haben oder auch dynamische (d. h. die Inhalte werden bei jedem Aufruf neu generiert). Es kann auch eine Variante der Webseite erstellt und aufrufbar gemacht werden, z.B. eine Seite ohne [[Frame_(HTML)|Frames]] oder eine [[Druckversion]].
+== Geschichte ==
-Webseiten bestehen zumeist aus strukturiertem Text, in den auch Bilder und andere [[Multimedia]]elemente eingebunden sein können. Webseiten werden meist aus dem [[Internet]] oder einem [[Intranet]] geladen, können aber auch auf einem lokalen [[Datenspeicher|Speichermedium]], zum Beispiel einer [[Festplatte]], abgelegt sein.
+{{Hauptartikel|World Wide Web#Geschichte|titel1=World Wide Web → Geschichte}}
+== Aufbau ==
-Die [http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html erste Webseite] wurde am [[13. November]] [[1990]] von [[Tim Berners-Lee]] auf einem [[NeXT]]-Rechner verfasst und veröffentlicht – einen Tag, nachdem dieser gemeinsam mit [[Robert Cailliau]] ein neugefasstes Konzept für ein weltweites Hypertext-Projekt veröffentlicht hatte.
+Webseiten bestehen zumeist aus einem Text im Format [[Hypertext Markup Language|Hypertext Markup Language (HTML)]], in dem Bilder, andere [[Multimedia]]elemente, [[Cascading Style Sheets|Stylesheets]], [[JavaScript|Skripte]] für dynamische Funktionen der Seiten, Daten u.&nbsp;a. eingebunden sein können. Jede Webseite hat mindestens eine Adresse ([[Uniform Resource Locator|URL]]), über die sie in einem [[Webbrowser]] aufgerufen werden kann. Eingebundene Elemente sind oft nicht direkt in die abgerufenen Daten einer Webseite integriert, sondern dort durch Angabe einer eigenen URL referenziert. Die meisten Webbrowser laden diese Elemente ohne weitere Interaktion nach, entweder durch eine neue Anfrage an den entsprechenden Webserver (nicht unbedingt identisch mit dem Server, von die Webseite geliefert wurde) oder aus einem lokalen [[Browser-Cache|Cache]].
+Die angezeigte Seite kann vom Browser auf der [[Massenspeicher|Festplatte]] des Besuchers als HTML-Datei abgespeichert werden. Dabei wird meist ein zur Datei ähnlich benanntes Verzeichnis erstellt, in dem die eingebundenen Elemente untergebracht sind.
-Um Webseiten zu erstellen, kommt hauptsächlich die Beschreibungssprache [[HTML]] zur Anwendung, was jedoch langsam von [[Extensible Hypertext Markup Language|XHTML]] abgelöst wird. Zusätzliche Technologien wie [[Cascading Style Sheets|CSS]] und [[JavaScript]] werden in vielen aktuellen Webdokumenten verwendet, um die Darstellung im [[Webbrowser]] weiter zu beeinflussen.
+Webseiten werden meist aus dem [[Internet]] oder einem [[Intranet]] geladen, können aber auch auf einem lokalen [[Datenspeicher|Speichermedium]], zum Beispiel einer Festplatte, abgelegt sein.
-== Dynamische Webseiten! ==
-Im Gegensatz zu statischen Webseiten, die technisch eine einfache Datei auf dem Webserver darstellen, werden Seiten auch häufig dynamisch im Moment der Anforderung erzeugt. Das ist dann sinnvoll, wenn eine Webseite sehr aktuelle Informationen wie z.B. Börsenkurse oder das Wetter von morgen enthalten sollten. In diesem Fall führt der Webserver ein Programm aus, das vorher spezifisch für diese Aufgabe entwickelt wurde. Es trägt die Daten z.B. aus [[Datenbank]]en zusammen und erstellt das HTML-Dokument. Dieses wird dann vom Webserver an den Browser übertragen und beim Benutzer angezeigt.
+== Rezeption ==
-Ein anderer Anwendungsfall ergibt sich aus dem Bedürfnis, auf Eingaben des Benutzers zu reagieren. Diese Eingabe kann z.B. ein Suchbegriff in einer Suchmaschine sein. Die Software der Suchmaschine erstellt anhand des Suchbegriffs eine Liste von passenden Links und erzeugt eine Webseite, die dem Benutzer diese Liste komfortabel darstellt.
+Webseiten auf einem Bildschirm werden anders wahrgenommen als gedruckte Textseiten. Englische [[Eye-Tracking]]-Versuche, bei denen die Augenbewegung des Lesers verfolgt wird, zeigten, dass die meisten Besucher einer Webseite den Text überfliegen (scannen) und dabei mit den Augen zunächst den oberen Rand und dann den linken Rand des Inhaltsbereichs abtasten. Es entsteht ein F-förmiger Bereich, der von den meisten Besuchern angeblickt wird.<ref>[http://www.useit.com/alertbox/reading_pattern.html Jakob Nielsen (2006): F-Shaped Pattern For Reading Web Content]</ref> Besucher, die über eine [[Suchmaschine]] auf eine Webseite kommen, halten dort vorzugsweise nach ihrem Suchwort ([[Keyword (Online-Marketing)|Schlüsselwort]]) Ausschau.<ref>[http://www.useit.com/alertbox/9710a.html Jakob Nielsen (1997): How Users Read On the Web]</ref> Aus diesen Tatsachen ergeben sich besondere Anforderungen für den [[Webtext]].
+== Erstellung ==
-Die Möglichkeit, Webseiten dynamisch in Abhängigkeit von Benutzereingaben und Datenbankinhalten zu generieren, machte das Web schnell zu einer universellen Plattform für alle Arten von Anwendungen. Die Vorteile liegen in Unabhängigkeit von Betriebssystemen und anderen Eigenschaften der [[Client]]s. Grundvoraussetzungen sind lediglich eine Netzwerkverbindung zum Server und ein Webbrowser.
+Die Erstellung und Gestaltung von Webseiten wird unter dem Begriff [[Webdesign]] zusammengefasst. Basissprache für die Erstellung ist die [[Auszeichnungssprache]] [[Hypertext Markup Language|HTML]], wobei die einheitliche und rationelle Formatierung mehrerer Webseiten durch Formatierungssprachen wie [[Cascading Style Sheets]] (CSS) erleichtert werden kann. Vor allem für das Erstellen dynamischer Seiten wurden weitere Sprachen entwickelt, mit deren Hilfe auch komplexe Gefüge aus Webseiten (siehe [[Website]]) erstellt werden können.
+== Dynamische Webseiten ==
-Zum Generieren von dynamischen Webseiten kommt jedes Programm in Frage, das sich auf dem Serversystem ausführen lässt. Um die Programmierung zu vereinfachen, wurden jedoch Standards wie das ''[[Common Gateway Interface]]'' eingeführt, um [[Webanwendung|Webanwendungen]] auch unabhängig von der Art des Webservers zu machen. Aufgrund des rasant steigenden Bedarfes nach sehr leistungsfähigen Servern zum Betrieb von Web-Anwendungen entwickelten sich Technologien wie [[PHP]], [[J2EE]] und [[.NET]].
+{{Quellen}}
+Im Gegensatz zu rein [[Statische Webseite|statischen Webseiten]], die technisch meist ein HTML-Dokument auf dem Webserver darstellen, werden Webseiten häufig auch dynamisch oder [[Aktive Inhalte|aktiv]] im Moment der Anforderung erzeugt. Das ist dann sinnvoll, wenn eine Webseite sehr aktuelle Informationen wie beispielsweise Börsenkurse oder Wettervorhersagen enthalten soll. In diesem Fall führt der [[Webserver]] ein Programm aus, das vorher spezifisch für diese Aufgabe entwickelt wurde. Es trägt die Daten z.&nbsp;B. aus [[Datenbank]]en zusammen. Diese werden dann vom Webserver an den Browser übertragen und beim Benutzer angezeigt.
+Ein anderer Anwendungsfall ergibt sich aus dem Bedürfnis, auf Eingaben des Benutzers zu reagieren, wie z.&nbsp;B. die Eingabe eines Suchbegriffs in eine Suchmaschine. Die Software der Suchmaschine erstellt anhand des Suchbegriffs eine [[Liste]] von passenden Links und erzeugt eine Webseite, die dem Benutzer diese Liste komfortabel darstellt.
-== Siehe auch ==
-{{Wiktionary|Webseite}}
+Die Möglichkeit, Webseiten dynamisch in Abhängigkeit von Benutzereingaben und Datenbankinhalten zu generieren, machte das Web schnell zu einer universellen Plattform für viele Arten von Anwendungen. Die Vorteile liegen in Unabhängigkeit von Betriebssystemen und anderen Eigenschaften der [[Client]]s. Grundvoraussetzungen sind lediglich eine Netzwerkverbindung zum Server und ein Webbrowser.
-* [[World Wide Web Consortium|World Wide Web Consortium (W3C)]]
-* [[Webdesign]]
+Zum Generieren von dynamischen Webseiten kommen verschiedene Programme zum Einsatz, wobei sich die Dynamik auf dem Serversystem ausführen lassen muss. Um die Programmierung zu vereinfachen, wurden jedoch Standards wie das ''[[Common Gateway Interface]]'' (CGI) eingeführt, um [[Webanwendung]]en auch unabhängig von der Art des Webservers zu machen. Die Mehrzahl von CGI-Anwendungen wurden und werden in der [[Programmiersprache]] [[Perl (Programmiersprache)|Perl]] geschrieben. Aufgrund des rasant steigenden Bedarfes zum Betrieb von Web-Anwendungen entwickelten sich Technologien wie [[PHP]], [[Java Platform, Enterprise Edition|J2EE]] und das [[.Net-Framework]].
-* [[Webdesigner]]
-* [[Webframework (Liste)]]
+Da die Inhalte umfangreicher Websites meist von mehreren Personen eingepflegt werden, wird bei solchen Projekten häufig ein [[Content-Management-System]] (CMS) eingesetzt. Weiterer Vorteil sind die größere Flexibilität bei der Gestaltung und kürzere Einarbeitungszeit für die beteiligten Personen. Es drängen mehr und mehr meist PHP- und [[MySQL]]-basierte Lösungen in [[Freie Software|freier Software]] auf den Markt.
-* [[Webtemplate]]
+{{Siehe auch|Dynamisches HTML|Active Server Pages|Servlet}}
+== Trennung von Inhalt, Darstellung und Verhalten ==
+Bei der Implementierung von Webseiten wird heutzutage in der Regel ein Technologie-Mix eingesetzt. Dazu gehören [[HTML]], [[Cascading Style Sheets|CSS]] und oft auch [[JavaScript]]. Es existieren verschiedene Möglichkeiten diese Techniken innerhalb eines HTML-Dokuments (Webseite) zu kombinieren. Der JavaScript-Code kann z.&nbsp;B. direkt „inline“ in der HTML-Beschreibung platziert werden. Hierzu kann das „Script“-Tag von HTML verwendet werden. Des Weiteren können über HTML-Eventhandler-Attribute, wie „onclick“ oder „ontouchstart“, direkte Verbindungen mit bestimmten JavaScript-Funktionen gesetzt werden. Bei einem solchen Vorgehen wird Logik für die Beschreibung des Inhalts, der Gestaltung und des Verhaltens gemischt. Durch eine Vermischung können spätere Änderungen am Verhalten nicht vorgenommen werden, ohne ebenfalls Inhalte (HTML) und Darstellung (CSS) zu berücksichtigen. Bei der Trennung kann dies separat angepasst und weiterentwickelt werden. Des Weiteren wird das HTML-Dokument vereinfacht und bleibt frei von längeren JavaScript-Bereichen und CSS-Definition. Folgende Trennung sollte erreicht werden:<ref>''Wartbare Javascript-lastige Webanwendungen.'' Präsentation, 2014. W3L&nbsp;AG. Auf W3L.de ([https://www.w3l.de/de/fileadmin/user_upload/Wartbare_Javascript-lastige_Webanwendungen_2014.pdf PDF]; 716&nbsp;kB), abgerufen am 6.&nbsp;Dezember 2020.</ref>
+; HTML-Content
+: Das HTML-Dokument sollte lediglich den darzustellenden Inhalt aufbewahren. Die hierzu verwendeten HTML-Tags sollten frei von Eventhandler-Attributen und Inline-JavaScript-Code sein. Styling-Attribute mit CSS-Inhalten sollten zudem nicht im HTML-Markup verwendet werden.
+; Visuelle Darstellung
+: Die visuelle Darstellung des Contents der View sollte in separaten CSS-Dateien definiert werden. Die dort definierten Styles werden von der Rendering-Engine des Webbrowsers beim Aufbau der View angezogen. Die separate Definition der visuellen Darstellung erlaubt zusätzlich eine leichtere Anpassung der Präsentation für verschiedene Ausgabemedien. So kann beispielsweise ein [[Responsive Webdesign|responsives Webdesign]] umgesetzt werden, welches sich automatisch an die technischen Gegebenheiten des Endgerätes anpasst, wie zum Beispiel die Bildschirmgröße. Die Einbindung der CSS-Datei in dem HTML-Dokument sollte hierbei lediglich über ein „Link“-Tag im Kopfbereich des Dokuments erfolgen. Ältere HTML-Tags für die Anpassungen visueller Darstellungen, wie font oder center, sollen nicht mehr verwendet werden und wurden mit [[HTML5]] als veraltet (eng. „deprecated“) gekennzeichnet.
+; Verhalten
+: Das clientseitige Verhalten einer Webseite und die Registrierung auf Eingabeereignisse sollten allein im JavaScript-Code erfolgen. Dieser Code sollte zudem in separaten JavaScript-Dateien untergebracht sein. Die Einbindung der JavaScript-Datei in das HTML-Dokument erfolgt hierbei ebenfalls mit dem Script-Tag. Allerdings wird mit dem src-Attribut eine externe Datei adressiert. Bei der Einbindung von JavaScript-Dateien in ein HTML-Dokument hat sich zudem die Strategie durchgesetzt, alle Script-Tags am Ende des HTML-Dokuments zu definieren. Grund hierfür ist das Renderingverhalten von Webbrowsern. Sobald der Webbrowser einen Script-Tag findet, wird das Script heruntergeladen und ausgeführt. Erst nach diesem Vorgang wird das eigentliche Rendering des restlichen Inhalts des HTML-Dokuments fortgesetzt. Wenn nun der Kopfbereich des HTML-Dokuments bereits mehrere Scripts definiert, bleibt die Webseite blockiert, bis alle Scripts geladen wurden. Alternativ kann das async- oder defer-Attribut von HTML5 für das Script-Tag verwendet werden. Allerdings dürfen dann die zuladenden Script-Dateien keine Abhängigkeiten aufweisen, da die genaue Reihenfolge des Ladens nicht mehr definiert ist.
+Wenn die beschriebene Trennung von Inhalt, Verhalten und Darstellung berücksichtigt wird, sind zudem die verwendeten Techniken für die Implementierung von Webseiten in einzelne Bereiche aufgeteilt. Es kommt zu keiner direkten Vermischung. Durch die strikte Separierung erhöht sich die Wartbarkeit und Anpassbarkeit des Dokuments.
+Als ein Haupthindernis für eine breite Verwendung dieser wesentlich erweiterten Möglichkeiten bzgl. Darstellung und Datenvorhaltung galt lange der [[Microsoft]] [[Internet Explorer]], der als langjähriger Marktführer erst mit der 2009 erschienenen Version 8 auch hinsichtlich CSS ausreichende Standardkonformität bietet.
 == Weblinks ==
+{{Wiktionary}}
-* [http://de.selfhtml.org/ de.selfhtml.org - die HTML-Referenz]
+* [https://wiki.selfhtml.org/wiki/SELFHTML SELFHTML] – HTML-Referenz
-* [http://www.drweb.de/ drweb.de - kommerzielles Web-Magazin mit Tipps zum Erstellen von Webseiten]
-* [http://www.meine-erste-homepage.com/ meine-erste-homepage.com - Einsteigerportal mit Linksammlung zur Webseiten-Erstellung]
-* [http://www.ta7.de/txt/internet/inte0030.htm 10 Regeln zum Entwerfen bedienerfreundlicher Webseiten ] von der Uni Chemnitz
+== Einzelnachweise ==
+<references />
+{{Normdaten|TYP=s|GND=4356308-9}}
-[[Kategorie:World Wide Web]]
+[[Kategorie:World Wide Web]]
-[[an:Pachina web]]
-[[ca:Pàgina web]]
-[[da:Webside]]
-[[el:Ιστοσελίδα]]
-[[en:Web page]]
-[[es:Página web]]
-[[eu:Web orrialde]]
-[[fi:Verkkosivu]]
-[[fr:Page Web]]
-[[gl:Páxina Web]]
-[[he:דף אינטרנט]]
-[[hu:Weblap]]
-[[ia:Pagina web]]
-[[is:Vefsíða]]
-[[it:Pagina Web]]
-[[ja:ウェブページ]]
-[[lt:Tinklalapis]]
-[[lv:Tīmekļa lappuse]]
-[[mk:Веб-страница]]
-[[nl:Webpagina]]
-[[no:Nettside]]
-[[pt:Página web]]
-[[ro:Pagină Web]]
-[[ru:Веб-страница]]
-[[simple:Webpage]]
-[[sv:Webbsida]]
-[[ta:இணையப் பக்கம்]]
-[[th:เว็บเพจ]]
-[[tl:Pahinang Web]]
-[[uk:Веб-сторінка]]
-[[vi:Trang web]]
-[[zh:網頁]]
-[[zh-min-nan:Bāng-ia̍h]]