Webgen

Webseiten: Technik & Vorlagen

Technik

das World-wide Web WWW, wie es von Sir Tim Berners-Lee Anfang der 1990er Jahre, also vor 30 Jahren, erfunden wurde, besteht aus ein paar Teilen:

HTTP - das Hypertext-Transfer-Protokoll

Regeln, wie Seiten über das Internet übertragen werden. Diese Regeln sind im HTTP-Protokoll zusammengefasst. HTTP steht für "Hypertext-Transfer-Protokoll".

Seiten werden per HTTP über eine Anfrage angefragt und in der antwort vom Server (das ist der gegenüberliegende Rechner) zurüchgeliefert.

Beispiel:

telnet codekulturbonn.de 80

GET /webgen/aaa.html HTTP/1.0

Diese Anfrage gibt den Inhalt der Seite zurück.

URLs - Uniform Resource Locators

Seiten, Bilder und andere Dateien im Word-wide Web haben eine Adresse. Diese haben das Format

https://codekulturbonn.de/webgen/aaa.html

Darin sind "https" das Schema, "codekulturbonn.de" der Rechnername, "/webgen/aaa.html" der Pfad zu der Datei auf diesem Rechner.

Es gibt noch zwei weitere Teile, die man seltener sieht:

https://www.google.de/search?q=Clara-Schuhmann

Suchbegriffe können an Seiten hinter einem "?..." übergeben werden.

Stellen innerhalb einer Seite können durch Anhängen von "#..." angesprungen werden.

https://codekulturbonn.de/webgen/bbb.html#abschnitt-2

HTML - die Hypertext Markup Language

Eine Sprache für Seiten im WWW. Diese Sprache heißt HTML ("Hypertext Markup Language") legt die Vokabeln (Tags, Eigenschaften) und Grammatik fest, in der Seiten geschrieben werden.

Tags (groß oder klein geschrieben) werden in spitzen Klammern geschrieben und werden manchmal einzeln, manchmal paarweise verwandt:

<p>Ich bin ein Absatz</p>

<ul>
    <li>Eintrag eins</li>
    <li>Eintrag zwei</li>
</u>

<img src="../images/katze-80.jpg">

<a href="./typen.html">Andere Seite</a>

Beispiele für Tags sind

Vorlagen

In unseren ersten Webprojekten hatten wir eine einfache Vorlage selbst gebaut. Das ist nicht schwer.

Hier ist eine vollständige Website:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Eine einfache Webseite</title>
        <style>
        body { background-color: blue; }
        main {
            background-color: white;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <main>
            <h1>Willkommen auf meiner Website</h1>

            <p>Das hier ist nur ein Beispiel. Der Text steht auf 
            weißem Hintergrund, der Rand der Seite ist blau. 
            Texte bestehen aus</p>

            <ul>
                <li>Überschriften,</li>
                <li>Absätzen,</li> 
                <li>vielleicht auch noch Listen.</li>
            </ul>

            <p>Das Coolste an Websites sind Links. 
            Hier ist <a 
                href="https://steinsekte.xyz">ein Link zur STEINsekte</a>.</p>
        </main>
    </body>
</html>

Die Seite ist in HTML geschrieben und besteht aus dem Kopf in <head> und dem Rumpf in <body>. Im Rumpf stehen die Inhalte mit Texten, Bildern oder sogar Videos.

Der Abschnitt in <style> im Kopf ist ein Stylesheet in der Sprache CSS. Hiermit bestimmst du, wie die Seite und die Elemente darauf aussehen sollen. Also: Blauer Rahmen, Abstände, zentriert, diese und jene Schriftart.

Um diese Seite im Browser (Firefox, Chrome) anzusehen, musst du den Text kopieren, als Datei mit der Endung .html speichern und im Browser öffnen. Hier ist die Seite im Editor. Auf meinem Mac benutze ich Textmate. Auf einem Linux-Rechner mit ElementaryOS kannst du den Code-Editor benutzen. Wenn du auf Windows arbeiten musst, funktioniert Notepad++.

Seite im Editor

Hier ist die selbe Seite im Browser:

Seite im Browser

Mit CMD-U auf dem Mac oder CTRL-U bzw. STRG-U kannst du dir übrigens immer den Quelltext der Seite ansehen.

Willst du mal etwas aufwändigere Designs ausprobieren, gibt es Seitenvorlagen zum Herunterladen. Hier sind ein paar Verzeichnisse:

Daneben gibt es auch Werkzeuge und spezielle Editoren zum Anlegen schicker Websites:

Ich will nicht verschweigen, dass viele Leute Wordpress oder Tumblr benutzen. Das ist auch OK. irgendwie nicht OK ist, die eigenen, coolen Webprojekte auf den Seiten von Mark Zuckerberg, einem amerikanischen Milliardär, abzulegen. Zu seinen Seiten gehören Facebook, Instagram oder auch WhatApp.