Schüler Chat

Schüler Chat - Tutorials

Zur Tutorial Übersicht

Tutorial: HTML Grundlagen - Eine eigene Website mit HTML!

Beispiel-Tutorial

In diesem Anfänger-Tutorial lernst du anhand eines einfachen Beispiels die Grundlagen der Web-programmierung. Am Ende dieses Tutorials wirst du in der Lage sein eine eigene Website basierend auf HTML zu entwickeln und auf einem Webserver zu veröffentlichen.

Was du lernen wirst:

  • So Funktionieren Websites
  • Grundlegende HTML-Struktur
  • Styling mit CSS
  • Veröffentlichen der Website

Benötigte Vorkenntnisse: Keine Vorkenntnisse erforderlich.

Ein paar Worte vorneweg:
Bevor wie in die Entwicklung einsteigen möchte ich zwei Sachen vorher erwähnen. Dieses Tutorial ist mein allererstes Tutorial. Ich möchte meine Erfahrungen die ich über die Jahre gesammelt hab an euch weitergeben und hoffe euch gefallen meine Erklärungen. Ich würde mich sehr freuen, wenn Ihr mir kleine Anfängerfehler verzeiht und mir in die Kommentare schreibt, wie ich mich geschlagen habe und was ich unbedingt noch verbessern sollte.
Die andere Sache ist, dass ich keine falschen Erwartungen wecken möchte. Dieses Tutorial ist nicht für Leute, die einen schnellen und möglichst einfachen Webauftritt brauchen. Stattdessen geht es viel mehr darum wie Websites technisch gesehen funktionieren und wie ihr mit diesem Wissen komplett selber eine Anwendung aufbauen könnt. Jemand der nicht an dem Erlernen der Webprogrammierung interesiert ist, empfehle ich einen der vielen Online Website Builder/Generatoren. Dort lassen sich alle Elemente grafisch erstellen. Die meisten Betreiber übernehmen das Online bringen der erstellen Website gleich mit. Denen die sich dafür entschieden haben selber zu Programmieren wünsche ich viel Spaß mit diesem Tutorial!

So Funktionieren Websites
Das Internet ist eine komplizierte Sache. Ein immer wichtiger werdendes Element vom Internet sind Websites. Websites reichen von einfachen statischen Informationsanzeigen, wie die Homepage einer Schule, bis zu komplexen, dynamischen Anwendungen, wie zum Beispiel Webshops oder Online Browser Spiele. Es ist wichtig zu Wissen, dass das grundgegend Prinzip immer gleich ist. Es fängt immer damit an, dass der Client, zum Beispiel dein Handy, von einem Webserver Daten anfordert. Wenn du eine Website aufrufst geschiet das meistens über eine Domain. Eine Domain ist eine Internetadresse die Stellvertretend für einen Webserver steht. Wie zum Beispiel meg-chat.de. Wie genau das Domain name Network funktioniert gehört aber in ein anderes Tutorial. Was wir wissen ist nur, dass der Client von der Domain, also Internetadresse eine IP-Adresse bekommt. Die IP-Adresse gehört einen Webserver. Dein handy weiß dann "Aha, um den Inhalt der Website meg-chat.de zu bekommen muss ich dem Webserver mit der IP-Adresse 82.165.184.35 fragen. ". Dein Handy schickt also einen Request, also eine Anfrage an diesen Server. Diese Anfrage ist meistens mit Zusatzinformationen verboten, beispielsweise einem Pfad, wie "/tutorials/tutorial/html-grundlagen". Der Server antwortet auf die Anfrage indem er HTML Code zurückgibt. Dein Handy ist in der Lage diesen Code zu analysieren und Grafisch darzustellen. Bei einfachen Websites wird immer derselbe HTML Code zurückgegeben. Fortgeschrittene können durch Scripte auf dem Server auch z.B immer akutlle Informationen durch den HTML code zurückgeben.

Ein Beispiel HTML Code:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Meine Beispiel Webseite</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f2f2f2;
                text-align: center;
            }

            h1 {
                color: #007bff;
            }
        </style>
    </head>
    <body>
        <h1>Willkommen auf meiner Beispiel Webseite!</h1>
        <p>Dies ist ein einfaches Beispiel, um die Grundlagen der Webentwicklung zu lernen.</p>
    </body>
    </html>

Nun hat dein Handy den HTML Code erhalten und analysiert Ihn. Bei HTML handelt es sich um keine richtige Programmiersprache, sondern um eine Markup Language. Das heißt der Code wird nicht "ausgeführt", sondern bloß das was er vermitteln soll dargestellt. Nur wenn der HTML Code zusätliche Element wie JavaScript enthält oder auf JavaScript Dataien verweist wird ausführbarer Code geladen. Unter darstellen des Codes versteht man, dass bestimmt Elemente im Code für sichtbare Elemente auf der Website stehen. Zusätzliche Informationen können diesen Elementen dann noch Eigenschaften geben und dem Client anweisungen wie diese darzustellen sind. Jede Website, auch komplizierte Online Anwendungen, verwendet HTML um Sachen darzustellen. Die Möglichkeiten von HTML reichen von einfachen Texten über Bilder, Tabellen und Diagramme bis zu über JavaScript bespielbare Canvas Elemente. CSS ist bei der Web-Programmierung immer ein begriff für die "Sprache" die den HTML Code um eigendschaften ergänzt. Mit CSS ist es möglich die Farben,Größen,Positionen von Elementen zu ändern, Ecken abzurunden, Schatten hinzuzufügen und vieles mehr. JavaScript ist der Code der ausgeführt werden kann und Elemente auch nachträglich noch verändern kann. Er kommt bei komplexen Anwendungen wie bei Online Spielen zum Einsatz. Dort läd er bespielweise wiederholend die Positionsdaten der anderen Spieler vom Webserver und Stellt die Sicht des eigenen Spielers in einem Canvas Element da.
Fangen wir aber erstmal ganz einfach an. Zu Beginn jedes allein stehendes HTML Dokumentes müssen allgemeine Informationen zur Website angegeben sein. Dazu zählt Beispielsweise der Titel, das Logo, eine Beschreibung die bei Suchmaschinen Einträgen angezeigt werden soll und Schlüselwörter unter denen die Website gefunden werden können soll, und viele weitere Optimale Informationen. Ein ganz einfacher, aber funktionierender Website code sieht wie folgt aus:

Meine Allererste Website:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Meine Erste Webseite</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
    </body>
    </html>

Wie Ihr sehen könnt ist der HTML Code immer in <...> Elemente gegliedert. Diese Elemente werden als HTML-Tags bezeichnet. Sie geben dem Cod eine grundlegende Struktur und Teilen die Website in Elemente ein. Die HTML Tags treten meistens in Pärchen auf. Das heißt ein Element beginnt mit dem Öffnenden Tag. Dieser ist der Name des Tags in Kleiner und Größer Zeichen eingebunden. Das Element endet mit dem Schließenden Tag. Hier ist vor dem Namen des tags ein Schrägstrich, Jeder Moderne HTML Code beginnt mit der Zeile <!DOCTYPE html>. Diese Zeile weißt den Client darauf hin, dass der folgende Code in HTML geschrieben ist. Bei Verwendung dieser Zeile nutzen die Clients automatisch die neueste HTML Version, also HTML 5 um die Website darzustellen. Anschließend startet auch schon der code. Zwischen dem Öffnenden HTML Tag <html lang="en"> und dem Schließenden </html> ist immer die gesammte Website enthalten. Im HTML Element liegen immer die Elemente head und body. So kann bleibt der Code streng übersichtlich nach Informationen und tatsächlich dargestellten Elementen getrennt. <meta charset="UTF-8"> besagt, dass für die Website die Standart Codierung verwendet wird. Es werden alle ASCII Zeichen unterstützt also auch Umlaute. Lässt man diese Zeile weg wirken Text mit ä,ö,ü sehr krytisch. Der Brwoser würde Platzhalter Symbole verwenden. <meta name="viewport" content="width=device-width, initial-scale=1.0"> besagt, dass die Website die gesammte Breite un die gesammte Höhe des verfügbaren Platzes einehmen soll. Sie ist standartmäßg nicht gezoom. Dieser Zeile verhindert, dass Mobilgeräte einen unnatürlichen Zoom auf die Website anwenden. <title>Meine Erste Webseite</title> setzt den Titel der Website. Dieser wird bei Suchmaschieneneinträgen verwendet. Aber auch beim Öffnen der Website steht der gewählte Titel in der Beschreibung des Tabs oder oben auf dem geöffneten Fenster.
Im Body Element haben wir bisher nur ein einziges Element. Der h1 Tag steht für einen "Header" als eine Überschrift ersten Grades. In HTML werden Überschriften bis zum 6 Grad unterstützt. Je höher der Grad desto kleiner die Überschrift.
Und schon haben wir den gesammten Code den Du für eine erste kleine Funktionsfähige Website brauchst. Um noch keinen Webserver einrichten zu müssen, bevor die Website fertig ist, haben wir vom MEG Chat Team einen kleinen Online Editor mit vorschau entwickelt. Dort kann ganz einfach Jede Art von HTML Code getestet werden. Unser kleines Beispiel findest du unter diese Link: /editor/html/first-website. Trau Dich ruhig ein bischen rumzuprobieren. Du kannst zum Beispiel den Titel oder den Text verändern und versuchen weitere Überschriften im body Tag hinzuzufügen. Im Editor kannst du dein Dokument direkt auch als .html Datei auf deinen Computer herunterladen. Deine Website ist dann lokal gespeichert und kann von deinem PC aus geöffnet werden. Im nächsten Schritt erkläre ich einige der wichtigetsn HTML Elemente, bevor wir zu der Einrichtung eines richtigen Webservers kommen, der Deine Website von überall aus aufrufbar macht.

Grundlegende HTML-Elemente
Hiermit möchte ich kurz die häufigsten HTML Tags/Elemente vorstellen.

Hinterlasse einen Kommentar!

? Kommentare zu diesem Tutorial

Wird geladen..
0% Hochgeladen
Bitte Melden Sie sich an oder Erstellen Sie ein Konto um hier schreiben zu können.

Information

Beiträge: 0
Aktive Benutzer: 0

Schüler online

Schreibe dein eigenes Tutorial

Du möchtest dein Wissen teilen und anderen Schülern helfen?

Tutorial schreiben