Wie erstelle ich eine Webseite?

Eines mal vorweg: Heutzutage beherrscht viele das Gefühl, eine Webseite zu erstellen sei eine einfache Sache und rasch erledigt. In Wahrheit sieht das aber ganz anders aus: Eine wirklich gute Webseite zu produzieren ist ein RIESIGES Thema. Es gibt so viele Aspekte zu beachten – das alles in diesen Artikel zu packen wäre Wahnsinn und total unübersichtlich. Es werden weitere Artikel zum Thema „Webseite erstellen“ erscheinen.

Los geht’s

In diesem Artikel wird folgendes beschrieben:

  1. Zubehör. Was es braucht
  2. HTML. Grundgerüst der Webseite.
  3. <head> – Kopf der Webseite.
  4. <body> – Körper der Webseite.
  5. <footer> – Fussbereich der Webseite.

Eine Webseite zu erstellen ist heute kein Geheimnis mehr.

Meiner Meinung nach ist es aber nicht immer einfach als Laie an die nötigen Informationen zu kommen und diese dann auch noch zu verstehen.

Ich erinnere mich noch gut daran, als ich mich diese Frage selber gestellt habe und daran schier verzweifelt bin. Mein Problem war, ich hatte keine Geduld. Es war aber leider auch so, dass es damals einfach keine einzige Anleitung, kein einziges Tutorial gab, welches dir Schritt für Schritt das Erstellen einer Webseite verständlich erklärt hätte. Das möchte ich mit diesem Artikel ändern!

Zubehör. Was es braucht.

Um eine Webseite zu erstellen, brauchst du grundsätzlich weder WordPress noch WIX-Account und geschweige denn teure Software. Ganz gratis ist eine eigene Webseite aber nicht. Hosting und Domain sind immer, wenn aber auch verhältnismässig nur sehr kleine Kostentreiber.

Um eine Webseite «from scratch» aufzubauen, ist alles was du brauchst vorerst mal ein Text-Editor. Damit schreibst du den Code.

Text-Editoren sind auf jedem Windows- oder Mac-System Standardmässig vorinstalliert. Bei Windows heisst dein Text-Editor «Editor» oder «Notepad» – bei Mac heisst dieser «TextEdit».

Hier ein erster, kurzer Vorgeschmack – du kannst gleich mitmachen!

  1. Lege einen leeren Ordner auf deinem Desktop an.
  2. Öffne deinen Text-Editor.
  3. Kopiere folgenden HTML-Code und füge den in dein leeres Dokument ein.
<html>
 <head>
 </head>
 <body>
  <h1>Ananas, blubb</h1>
   <p>Meine Ananas ist blau.</p>
 </body>
</html>
Code in Dokument einfügen.
  1. Speichere das Dokument als index.html ab (Datei > Speichern unter …)
Dokument als HTML-Datei abspeichern.
  1. Gehe zum Ordner, den du unter 1. erstellt hast und öffne ihn. Darin findest du deine HTML-Datei.
  2. Öffne die Datei per Doppelklick. Dein Browser öffnet sich, keine Angst, alles tipp topp.
  3. Voilà, du hast den ersten Schritt zur Webseite hinter dir!
  4. Tipp: Du kannst dafür auch Word verwenden.

    Ich empfehle dir die Gratis-Versionen von Sublime https://www.sublimetext.com/3 oder Notepad++ https://notepad-plus-plus.org/download/v7.7.html herunterzuladen.
    Hinweis: Notepad++ ist leider nicht mit Mac kompatibel.

    Ein professioneller Code-Editor hat viele Vorteile:

    • Er versetzt den Code mit einer spezifischen Farbkodierung
    • oder kennzeichnet kritische Probleme im Code.

    HTML. Grundgerüst der Webseite.

    Beim Code, welchen du vorhin kopiert hast, handelt es sich um HTML. HTML ist die Abkürzung für Hyper Text Markup Language. Damit werden das Grundgerüst und die Struktur einer Webseite gebaut.

    Mittels HTML bestimmt der Webentwickler, was wo angezeigt werden soll. HTML wird nicht dazu verwendet Farben und Formen zu bestimmen. Bilder hingegen, können mittels reinem HTML angezeigt werden. Dazu später mehr, oder jetzt gleich nachlesen.

    Die Browser lesen den HTML-Code wie wir Menschen – also zumindest in Europa – von oben nach unten. Dementsprechend wird auch Code geladen.

    SelfHTML bietet eine wunderbare Wissensbibliothek für HTML-Code an. Zögere nicht während dem selbstständigen herumprobieren darauf zurückzugreifen: https://wiki.selfhtml.org/wiki/

    Eine weitere, geniale Code-Bibliothek ist w3school.org https://www.w3schools.com/html/default.asp. Diese Wissenssammlung ist mein persönlicher Favorit. Das angesammelte Wissen in dieser Datenbank geht weit über HTML hinaus.

    Es ist also Elementar, dass man diese Sprache beherrscht um Webseiten zu erstellen.

    Die HTML-Struktur sieht praktisch immer gleich aus – mal mit etwas mehr, mal mit etwas weniger Inhalt.

    Diese Struktur siehst du auch bereits in unserem simplen Ananas-Beispiel: Wir haben einen Kopf, im Code als <head> ersichtlich, und wir haben einen Körper, der im Code als <body> gekennzeichnet ist. Diese Strukturmarken werden als Tag (engl. ‘Etikett’, Markierung) bezeichnet.

    Innerhalb dieser Tags können weitere Tags und/oder Elemente eingesetzt werden. Vorerst wichtig zu wissen ist aber: Tags müssen immer geschlossen werden!

    Tags werden mit einem Slash geschlossen.

    Also öffnen: <head>

    und schliessen: </head>

    <head> – Kopf der Webseite.

    Hier ein ausführliches Beispiel:

    <head>
    <!-- In HTML können auch Kommentare eingefügt werden. -->
    /* Mit Kommentaren können weiterführende Informationen für die Weiterentwicklung
    kommuniziert werden. Es gibt verschiedene Varianten für Kommentare.*/
     <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID"></script>
     <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'TRACKING_ID');
     </script>
     <meta charset="UTF-8">
     <title>Das ist der Seitentitel</title>
     <link rel="stylesheet" href="main.css">
     <meta name="description" content="Free Web tutorials">
     <meta name="keywords" content="HTML, CSS, XML, JavaScript">
     <meta name="author" content="John Doe">
     <style>
      body{background-color:powderblue;}
      h1{color:red;}
      p{color:blue;}
    </style>
     </head>

    Innerhalb eines HTML wird der <head>-Tag nur einmal verwendet.

    Der <head> kommt immer unmittelbar nach dem öffnenden <html>-Tag.

    Innerhalb eines HTML wird der <head>-Tag nur einmal verwendet.

    Der <head> kommt immer unmittelbar nach dem öffnenden <html>-Tag.

    Innerhalb des <head>-Tags werden Metadaten, also relevante Hintergrundinformationen zur Seite, erfasst.

    Dies kann beispielsweise der Webseiten-Titel sein, welcher im Browser-Tab angezeigt wird.

    Metadaten können von Seite zu Seite variieren. Dies macht ja auch Sinn, denn unterschiedliche Seiten haben ja bspw. praktisch immer anders heissende Titel.

    Der <head> wird auch mit für Suchmaschinen relevanten Angaben, wie der bereits angesprochene Titel, aber auch Keywords, also Schlüsselwörter, und einer Seiten-Beschreibung, der Description, befüllt. Für SEO (Suchmaschinenoptimierung) relevante Angaben, gibt es allerdings definierte Regeln die befolgt werden müssen.

    Weiter, können Skripte verlinkt werden oder Schnittstellen zu Website-Analyse Tools, wie bspw. Google Analytics oder Piwik, verknüpft werden.

    <body> – Körper der Webseite.

    Der <body> wird mit den sichtbaren Inhalten einer Webseite befüllt. Zuerst muss bekannt sein, was für ein Inhalt und wie dieser angezeigt werden soll.

    Sehen wir uns mal ein Beispiel einer Pizzeria an. Nach einer kurzen Web-Recherche finden wir dutzende solcher Beispiele. Hier erkläre ich dir, wie du eine solche Startseite erstellen kannst.

    Was hat es auf einer solchen Startseite?

    • Bilder, welche dem Webseitenbesucher die Pizzeria schmackhaft machen soll.
    • Überschriften, also Titel und diverse Textblöcke.
    • Evtl. das Logo der Pizzeria.
    • Eine Navigation, um durch die Seite navigieren zu können.

    Wir wollen die Startseite einer Pizzeria erstellen.

    Um mir meine Webseite etwas besser vorstellen zu können, skizziere ich gerne kurz etwas auf Papier. Farben und Formen sind noch nicht wichtig. Bei HTML geht es wie gesagt nur um den Aufbau und die Grundstruktur einer Seite. Auch ist es noch nicht nötig fixfertige Texte oder Bilder zu haben. Wir arbeiten zuerst mit Platzhalter.

    [EINE SKIZZE DES GROBGERÜSTES]

    Wir sehen, dass die Skizze in Blöcke unterteilt ist. Genau das machen wir auch in unserem HTML. Wir teilen unsere Inhalte in Blöcke auf. Das sieht dann in etwa so aus:

    [HIER HTML CODE INNERHALB EINES BODY TAGS]

    Wir gehen hier nicht näher auf den Code ein. Es ist wichtig zu erkennen, dass der Inhalt innerhalb des body-tags in <div> Blöcke strukturiert wird. Was ein <div> ist erfährst du hier.

    <footer> – Fussbereich der Webseite.

    Schlussendlich noch der Fussbereich, der sogenannte Footer, einer Webseite: Typischerweise ist das der Unterste, letzte Teil einer Webseite. Oftmals enthält der einfach ein paar Links oder Kontaktinformationen.

    <footer>
     <div>Pizzeria Denia<br>
          Wohnstrasse 92
          8408 Winterthur</div>
     <div>info@pizzeria-denia.ch</div>
     <div>
      <a href="link.html">Impressum</a>
      <a href="link.html">Kontkakt</a>
      Tel: 052 123 45 67
     </div>
    </footer>

    Es ist sinnvoll, dass der Footer, wenn möglich, über die ganze Webseite gleich ist.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.