Warning: getimagesize(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /kunden/570892_85640/proceed-it/wordpress/wp-content/plugins/blog2social/includes/Meta.php on line 215

Warning: getimagesize(https://proceed-it.com/wp-content/uploads/2020/08/Blog-Beitragsbild-Webdesign-Grundbegriffe.jpg): failed to open stream: no suitable wrapper could be found in /kunden/570892_85640/proceed-it/wordpress/wp-content/plugins/blog2social/includes/Meta.php on line 215

Webdesign Grundbegriffe: Frontend, Backend, HTML und CSS

Sobald Sie sich mit dem Thema Webseitenerstellung beschäftigen beginnen, begegnen Sie paar Grundbegriffe, die Sie bestimmt schon gehört haben, die aber oft nicht ganz verstanden oder gewusst sind.

Das Frontend - der sichtbare Teil einer Webseite

Das, was Sie im Internet Browser von einer Webseite sehen können, ist das Frontend.

Dies ist die Darstellungs- oder Präsentationsebene, der sichtbare Teil einer Webseite. Sie sehen den Design der Webseite, u. a. formatierten Texte, Bilder und Formulare.

Das Frontend

Das Backend - was Sie nicht sehen können, aber immer da ist

Hinter dem Frontend steckt das Backend, der Hintergrund der Webseite. Im Backend wird festgelegt welche Texte und Bilder gezeigt werden und wie sie aussehen sollen. Im Backend findet man die Programmierung, hier werden Funktionen hinterlegt, was die Webseite in bestimmten Fällen machen soll und hier wird definiert, welches Design die Teile haben sollen.

Das Backend

Woraus besteht eine Webseite im Backend?

Wenn Sie eine Webseite im Internet Browser anschauen, dann sehen Sie das Frontend, die formatierten Texte und die grafische Gestaltung einer Webseite.

Im Backend verwendet man Programmiersprachen, die ein Internet Browser versteht und für uns in die sichbare grafische Gestaltung übersetzt.

Was heißt HTML?

HTML ist die Sprache des World Wide Webs (bekannt als das Internet).

HTML ist die Abkürzung des Begriffs “Hypertext Markup Language“, was man ins Deutsche mit “Hypertext-Auszeichnungssprache” übersetzt.

Die meisten von uns steigen bei dem Begriff Auszeichnungssprache aus, denn was ist das denn?

Unter Auszeichnungssprache versteht man eine maschinenlesbare Sprache, die einer Maschine verrät, wie Texte und andere Daten gegliedert und formatiert sind.

HTML ist also eine Sprache, die eine Maschine lesen kann und von der die Maschine erfährt, wie ein Text oder andere Daten geordnet und angezeigt werden müssen.

Mit HTML legt man die Inhalte einer Webseite fest.

HTML-Dokumente bestehen aus kleineren Teilen. Diese nennt man Elemente. So wie ein Roman aus einem Deckblatt, Inhaltsverzeichnis, mehreren Kapiteln und darunter aus Absätzen, Sätzen und Buchstaben besteht, gliedert man ein HTML-Dokument auch in kleinere Teile. Sonst würden wir im Internet einen Buchstabensalat sehen.

Elemente sind zum Beispiel:

  • Kopfbereich (obere Teil der Website)
  • Fußzeile (untere Teil der Website)
  • Absatz
  • Bild
  • Tabelle
  • Überschrift
  • Zitat, und viel mehr

Alle Elemente habe einen eigenen Code.

Wir verwenden z. B. diese Codes:

  • für den Kopfbereich: <header>
  • für die Fußzeile (untere Teil der Website): <footer>
  • für einen Absatz: <p>
  • für ein Bild: <img>
  • für eine Tabelle: <table>
  • für eine Überschrift <h1>
  • für ein Zitat <blockquote>

Im folgenden Beispiel sehen Sie die Verwendung von Überschrift <h1>, Absatz <p>, Zitat <blockquote> und Bild <img>:

Was ist CSS?

CSS ist die Abkürzung von “Cascading Style Sheets“, was man ins Deutsche als “gestufte Stilvorlagen” übersetzen kann.

CSS ist eine Gestaltungs- und Formatierungssprache, die das Aussehen von HTML-Dokumenten bestimmt. Während es bei HTML um die Inhalte geht, geht es bei CSS um Design oder Stil. CSS in die Vorlage, in dem Sie zum Beispiel Schriftarten, Farben, Linien, Höhen und Breiten von Elementen auf einer Webseite definieren können.

In HTML definieren Sie zum Beispiel, dass ein Satz als Überschrift gemeint ist. In CSS können Sie den verwendeten Schrift, die Größe der Schrift, die Farbe und alles Weitere definieren, die sich auf das aussehen der Überschrift bezieht.

Durch die Verwendung von CSS wird der Inhalt vom Design getrennt. Dies ermöglicht uns, den Design an mehreren Stellen gleichzeitig zu ändern, ohne etwas an dem HTML-Dokument zu ändern.

Beispiel für CSS

Stellen Sie sich vor, dass Sie fünf Seiten für Ihre Website erstellt haben. Jede Webseite ist ein HTML-Dokument und jedes Dokument besteht aus einer Überschrift, Absätze, Zitate und Bilder. Sie möchten jetzt die Überschrift in JEDEM der erstellten Dokumente, also auf jeder Webseite, grün färben und unterstreichen lassen.

Ohne ein separates CSS-Dokument müssten Sie jedes einzelne Dokument öffnen und die Überschrift im Dokument einzeln formatieren. Mit einem CSS-Dokument definieren Sie einmal im dem CSS-Dokument, dass alle Überschriften grün und unterstrichen angezeigt werden sollen und schon ist das erledigt. Diese Herangehensweise beschleunigt Ihre Arbeit enorm!

CSS Beispiel

Ein kleiner Exkurs: wie kann man CSS mit einem HTML-Dokument verbinden?

Es gibt drei Wege, um den Design eines HTML-Dokuments mit CSS festzulegen.

1. Externes CSS-Dokument

Der Sinn und Zweck von CSS ist es, Inhalt einer Website von dem Design zu trennen. Die gängiste Methode ist ein HTML-Dokument für den Inhalt und ein CSS-Dokument für den Design zu erstellen. Externe CSS heißt also, dass die CSS sich außerhalb des HTML-Dokuments befindet.

HTML und CSS komplett voneinander getrennt. Wenn man etwas an dem Aussehen der Website ändern möchte, muss man nur in dem CSS-Dokument etwas ändern.

2. Interne CSS

Wenn nur EINE bestimmte Webseite einen eigenen Aussehen erhalten soll, dann kann man in dem HTML-Dokument dieser Seite ein CSS einbetten. Dieser Stil gilt dann nur für diese eine Seite. Interne CSS befindet sich in einem HTML-Dokument und gilt nur und ausschließlich für dieses eine HTML-Dokument.

Beipiel:

Ich erstelle eine Kontaktseite und möchte, dass diese Seite und NUR diese Seite eine andere Schriftart benutzt und eine andere Hintergrundfarbe hat. Ich definiere diese Stile in dem HTML-Dokument der Kontaktseite. Dieser Stil gilt dann nur für diese eine Webseite.

3. Inline CSS

Wenn Sie nur einem einzigen Element ein besonderes Aussehen verleihen möchten, dann können Sie in dem HTML-Dokument für dieses Element einen eigenen Stil geben.

Da jedes Element eine eigene Zeile ist, schreiben Sie Ihr CSS in die Zeile des Elements (“in (the) line”).

Beipiel:

Ich verwende auf allen anderen Seiten die Hintergrundfarbe hellblau für alle Boxen.

Ich möchte, dass eine Box auf der Startseite rot gefärbt wird. Ich definiere im HTML-Dokument in der Zeile des Box-Elements, dass die Hintergrundfarbe rot werden soll.

Warum heißt CSS "gestufte" Stilvorlage?

Gestuft ist die Stilvorlage deshalb, weil man in einem CSS-Dokument viele Regel definiert und es vorkommt, dass mehrere Regel für ein Element gelten. Der Internetbrowser muss wissen, welche Regel er verwenden soll. Welche Regel hat Priorität? Welche Regel ist wichtig?

Um hier Klarheit zu schaffen gilt (vereinfacht ausgedrückt), dass Angaben in einem CSS-Dokument von allgemein Richtung spezifisch und von wichtig Richtung unwichtig gelesen werden.

Die Regeln werden nach Vorgaben eingestuft und der Browser kann so erwiegen was Priorität hat oder wichtig ist.

Ich kann im CSS-Dokument Wichtigkeit selber definieren oder folge die vorgegebenen “Liste der Wichtigkeit”, die für alle CSS-Dokumente gilt. Es gibt also wichtige Regeln und weniger wichtigere Regeln und der Browser entscheidet nach der festgelegten Reihenfolge, wie er etwas anzeigen muss.

Haben Sie Wünsche oder Anregungen zu diesem Beitrag?

Teilen Sie diesen Beitrag mit anderen

Share on linkedin
Share on xing
Share on email