×

ZULETZT ANGESEHEN

    Die Aufgabe der heutigen Stunde ist das Grundgerüst!
    Heute beschäftigen wir uns mit HMTL, welches die kurzform von Hyper Text Markup Language ist. Alles was du im Internet suchst, aufrufst oder dir anschaust basiert auf HTML. Es ist die Programmiersprache der Webentwickelung! Meiner Meinung nach ist sie sehr einfach zu verstehen und anzuwenden. Schauen wir uns mal an wie ein ".html" Dokument aufgebaut ist. Dazu bearbeiten wir die heutige Aufgabe.

    Lösungsprozess der Aufgabe:

    HTML 
                    

                <!DOCTYPE html>
                        <html lang="en">
                        <head>
                                <meta charset="UTF-8">
                                <title>Meine erste Webseite</title>
                        </head>
                        <body>
                                <h1 style="color: white;">Willkommen bei meiner Webseite!</h1>
                                <p style="color: white;">Das hier ist ein Paragraph.</p>
                        </body>
                </html>

    Das Grundgerüst einer Webseite hat immer folgende Bestandteile:

    1. <!DOCTYPE html>

    2. <html lang="en">
    3. <head>
    4. </head>
    5. <body>
    6. </body>
    7. </html>

    <!DOCTYPE html>

    Dieser "Tag" steht am Anfang hedes HTML-Dokuments. Es ist kein richtiger Tag, sondern eine Anweisung für deinen Browser. Damit weiß der Browser, dass es sich um ein modernes HTML5-Dokument handelt und wie der Inhalt richtig angezeigt, beziehungsweise interpretiert, wird.


    <html lang="en">

    Der Start des eigentlichen HTML-Dokumentes (vom Inhalt her) beginnt hier. Mit "lang=en" gibst du an, dass die Sprache der Inhalte deiner Webseite Englisch ist. Dies ist für Suchmaschienen oder der Vorlesehilfe sehr hilfreich!


    <head>

    In dem sogenannten "Kopfbereich" der Webseite stehen die Informationen über die Seite, die man im Browser nicht direkt sieht / angezeigt bekommt. Hier legt man zum Beispiel den Titel der Webseite fest, bindet verschiedene CSS, JS oder weitere Dateien an und einiges mehr. Im Grunde kann man sich merken, dass alles was es an Informationen für die Funktionalität der Webseite im "<head>" Tag angegeben wird.


    <body>

    der Body ist der sichtbare Bereich der Webseite. Alles, was Nutzer sehen sollen (Texte, Bilder, Links, Überschriften, Tabellen, Videos, usw.) wird hier angegeben. Das ist also die Oberfläche mit welcher der Nutzer interagieren kann und sie angezeigt bekommt. Desweiteren kann man den "<body>" Tag in 3 weitere Abschnitte unterteilen. "<header>", "<main>" und "<footer>" helfen den Entwicklern der Seite ein übersichtlicheres layout für die Webseite zu erstellen. Wenn man zum Beispiel eine Fußzeile haben möchte, kann man diese einfach in den <body> schreiben und schon wird der Inhalt des footer Tags am unteren Ende der Webseite angezeigt.


    Schließende Tags

    In HTML gibt es öffnende, sowie schließende Tags. Ein öffnender Tag ist so aufgebaut: <tagname>, während ein schließender Tag so aussieht: </tagname>. Alles was sich zwischen den öffnenden und schließenden Tags befindet gehört zu diesem Element. Schließende Klammern sind wichtig, damit der Browser genau weiß, wo ein Element aufhört. 

     
                    <p> Das hier ist ein Paragraph! </p>
    Hier beginnt <p> unser Textelement, während </p> es schließt und beendet. Ohne die schließenden Klammern würde der Browser den Inhalt oft falsch darstellen.


    Vorherige Aufgabe

    Nächste Aufgabe