HTML-Dokumente: Der Weg zu deiner ersten eigene Webseite!

Achtung! Ich diktiere: …

Aufgabe 1: Wie konnte es passieren, dass die Schüler den diktierten Text falsch aufgeschrieben haben?

  1. Beschreibe, welche Mehrdeutigkeiten aufgetreten sind.
  2. Erläutere, wie der Lehrer das Diktat hätte formulieren können, damit die Mehrdeutigkeiten vermieden worden wären.

Du hast wahrscheinlich erkannt, dass Wörter wie „Überschrift“, „kleine Überschrift“ oder „unterstreichen“ für uns normalerweise Anweisungen sind, wie Text aussehen soll (Formatierungen). Wenn wir am Computer arbeiten, klicken wir auf Knöpfe für Überschriften oder zum Unterstreichen. Die Schüler im Comic haben diese Wörter also nicht als Teil des Textes selbst, sondern als Befehle zur Gestaltung des Textes interpretiert. Sie haben die Bedeutung der Worte („Mach eine Überschrift“) ausgeführt, statt die Worte selbst hinzuschreiben.

Der Lehrer hätte viel genauer sein müssen, um klarzustellen, dass er die Worte wörtlich meint:

  • Klarheit durch Anführungszeichen: Er hätte sagen können: „Schreibt jetzt bitte genau Folgendes auf, inklusive der Satzzeichen: ‚Überschrift: Webseitengestaltung.‘ “ Dann wäre klar gewesen, dass alles innerhalb der gedachten Anführungszeichen zum Text gehört.
  • Vorherige Erklärung: Er hätte ankündigen können: „Passt auf, ich diktiere jetzt einen Text. Schreibt bitte jedes Wort mit, auch wenn es wie eine Anweisung klingt.“
  • Trennung von Inhalt und Anweisung: Wenn er tatsächlich Formatierungen gewollt hätte, müsste er das anders sagen, z.B.: „Schreibt den Text ‚Webseitengestaltung‘ und formatiert ihn als Hauptüberschrift.“

Du siehst: Klare Ansagen sind wichtig, besonders für Computer! 😉 Mit HTML und seinen Tags gibst DU die Befehle fürs Web – ganz ohne Missverständnisse. Bist du bereit, damit deine erste Seite zu bauen? Los geht’s!

🧷Die Struktur einer Webseite

Aufgabe 2: Schiebe die Strukturelemente an die richtige Stelle. Mache anschließend einen Screenshot und füge ihn in deinen digitalen Hefter ein.


Drücke Windows Taste + Shift + Buchstaben S gleichzeitig und ziehe ein Rechteck

🏷️Tags

Tags sind wie kleine Befehle oder Etiketten, die du um deinen Text herumlegst. Sie sagen dem Browser: „Hey, pass auf, das hier ist eine Überschrift!“ oder „Das hier ist ein Textabsatz.“

Die meisten Tags bestehen aus zwei Teilen:

  1. Öffnungs-Tag (Opening Tag): Sieht so aus: <tagname> (z.B. <p>) und sagt: „Hier beginnt etwas Bestimmtes.“
  2. Schließ-Tag (Closing Tag): Sieht so aus: </tagname> (z.B. </p>) mit einem Schrägstrich / davor und sagt: „Hier endet dieser Teil.“

Der Text, der von den Tags beeinflusst wird, steht dazwischen.

Beispiel: <p>Hallo Welt!</p> Hier sagt <p> dem Browser: „Pass auf, jetzt kommt ein normaler Textabsatz.“ Und </p> sagt: „Okay, der Absatz ist hier zu Ende.“

📖Die wichtigsten Grundbausteine (Tags):

Lass uns ein paar der wichtigsten Tags anschauen, die du für fast jede Webseite brauchst:

Aufgabe 3: Vergleiche mithilfe des Schiebebildes den Quelltext der Webseite mit dem sichtbaren Ergebnis. Kopiere die Tabelle in deinen digitalen Hefter und vervollständige sie.

Markiere die Tabelle mit der Maus. Gehe dafür in die linke obere Ecke, drücke die linke Maustaste, halte sie gedrückt und fahre bis in die rechte untere Ecke. Lasse die linke Maustaste dann los
Kopiere den markierten Bereich Entweder mit der Maus Rechtsklick → kopieren
oder mit der Tastatur: STRG + C
Füge das Kopierte in deinen Hefter ein entweder mit der Maus Rechtsklick → einfügen
oder mit der Tastatur STRG + V

HTML-TagBeschreibung
<h1>…</h1>
<h2>…</h2> bis <h6>…</h6>
<p>…</p>
<ul>…</ul>
<ol>…</ol>
<li>…</li>

🔍Eine erste Übung

Im Editor unten siehst du links den Quelltext der Webseite. Du kannst ihn bearbeiten. Indem du auf „RUN“ klickst, wird daraus rechts eine Vorschau erzeugt. Genau so wird die Webseite in einem Browser wie Firefox, Chrome oder Edge angezeigt.

Aufgabe 4: Modifiziere die Webseite wie folgt:

  1. Ändere die Überschrift „Wichtige Lebensräume“ von h2 auf h3.
  2. Füge unter den besonderen Fähigkeiten eine h4-Überschrift „Nahrung“ an.
  3. Ergänze dazu den Folgenden Absatz: Capybaras sind Pflanzenfresser und ernähren sich hauptsächlich von Gräsern, Wasserpflanzen und Früchten.
  4. Füge als weitere besondere Fähigkeit den Punkt „Niedlich aussehen“ hinzu.
  5. Klicke auf das -Menü und dann auf Download, um die fertige Webseite in deinem Home-Verzeichnis zu speichern.

Füge folgenden Code ein, falls du neu anfangen willst:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Capybaras – Die sanften Riesen</title>
</head>
<body>
    <h1>Capybaras - Die größten Nagetiere der Welt</h1>

    <p>Capybaras, auch Wasserschweine genannt, sind die größten lebenden 
    Nagetiere der Welt. Sie sind bekannt für ihr ruhiges und soziales Wesen.</p>

    <h2>Lebensraum und Verbreitung</h2>

    <p>Capybaras leben in Südamerika, vor allem in der Nähe von Gewässern wie 
    Flüssen, Seen und Sümpfen.</p>

    <img width="250px" height="250px" style="float: right"
    src="https://assets.onecompiler.app/43df6gxyc/43dg5gsj3/Capybara.png" />

    <h2>Wichtige Lebensräume</h3>

    <ul>
        <li>Feuchtgebiete</li>
        <li>Savannen</li>
        <li>Regenwälder</li>
    </ul>

    <h2>Merkmale und Verhalten</h2>

    <p>Capybaras sind soziale Tiere und leben in Gruppen von bis zu 20 Tieren. 
    Sie sind ausgezeichnete Schwimmer und verbringen viel Zeit im Wasser.</p>

    <h3>Besondere Fähigkeiten</h3>

    <ol>
        <li>Ausgezeichnete Schwimmer</li>
        <li>Können lange unter Wasser bleiben</li>
        <li>Soziales Verhalten</li>
    </ol>
</body>
</html>

🧱 Das Grundgerüst einer HTML-Seite

Damit eine Webseite funktioniert, braucht sie ein festes Grundgerüst – ähnlich wie ein Haus. Dieses Grundgerüst wird mit bestimmten HTML-Tags, die du auch oben schon gesehen hast, geschrieben:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <!-- Kommentar: Hier den sichtbaren Teil der Webseite ergänzen -->
  </body>
</html>

Was bedeutet das? Kopiere in deinen Hefter!

HTML-TagBeschreibung
<!DOCTYPE html>Sagt dem Browser, dass es sich um eine HTML-Seite handelt.
<html>…</html>Start und Ende der ganzen Webseite.
<head>…</head>Hier stehen Infos über die Seite (z. B. Titel, Gestaltungsregeln), die man nicht direkt auf der Seite sieht.
<title>…</title>Das ist der Titel, der oben im Browser-Tab angezeigt wird – keine Überschrift!
<body>…</body>Hier steht alles, was man auf der Webseite sieht – Texte, Bilder, Überschriften usw.
<!-- ... -->Sind nicht sichtbare Kommentare oder Notizen im Quelltext

Jetzt können wir starten!

Du hast das Grundgerüst kennengelernt – und genau das setzen wir jetzt gemeinsam um.
Öffne Edublocks und leg los: Erstelle dein HTML-Gerüst und bring deine Seite zum Leben!

Die dafür notwendigen Blöcke findest du links in der Blockbibliothek unter

Grundgerüst bauen

Aufgabe 5: Baue das Grundgerüst einer HTML-Seite nach.

So sollte es am Ende aussehen:

💾 Speichere deine Seite

Um dein Grundgerüst zu speichern, musst du zuerst auf das Zahnrad oben links klicken. Dann kannst du einen Projektnamen eintragen.

Es gibt zwei verschiedene Dateien, die du speichern kannst:

  • Code als .html-Datei: Das ist deine fertige Webseite, wie sie jeder Browser anzeigen kann.
  • Project als .json-Datei: Das ist deine Arbeitsfassung, die du auf Edublocks weiter bearbeiten kannst.

Denke immer daran, regelmäßig zu speichern, da Edublocks das nicht automatisch macht!

Aufgabe 6: Speichere das Grundgerüst deiner HTML-Seite als .html und .json ab.

Jetzt wird’s spannend – du baust deine erste eigene Webseite!

Erstelle ein neues Projekt:

Meine erste eigene Webseite erstellen

Oben links kannst du mit „Create Project“ ein neues Projekt erstellen.

Unter dem Punkt „Projects“ kannst du eigene Projekte finden, wenn du einen Nutzeraccount bei Edublocks hast.

Du musst in dem Einstellungsfenster den Modus „HTML“ ausgewählt haben. Klicke dann bei Type „Blocks“ an, um blockbasiert zu coden. „Text only“ ist für Fortgeschrittene.

Aufgabe 7: Erstelle deine eigene Webseite zu einem Thema deiner Wahl!

  1. Erstelle das Grundgerüst.
  2. Überlege dir ein Thema (ein Hobby, ein Tier, ein Film oder was auch immer du vorstellen möchtest).
  3. Überlege dir, welche Inhalte du verwenden könntest für:
    • Absätze
    • Auflistung
    • Nummerierung
    • Tabellen
    • Links
    • Bilder
    • (Video)
  4. Längere Texte solltest du besser in einem Textverarbeitungsprogramm vorschreiben.
  5. Lege los und wenn du Hinweise brauchst oder nachschauen möchtest wie z.B. ein Bild eingefügt werden kann, siehe unten nach.
  6. Vergiss nicht regelmäßig zu speichern (Project und Code)!

Hinweise

Längere Texte solltest du in einem Textverarbeitungsprogramm vorschreiben.

<ul> steht für unordered list (dt. ungeordnete Liste) also eine Aufzählung. In einer Aufzählung müssen <li>-Tags enthalten sein. Das steht für list item (dt. Listenelement) und stellt jeweils einen Anstrich dar.

<ol> steht für ordered list (dt. geordnete Liste) also eine Nummerierung. In einer Aufzählung müssen <li>-Tags enthalten sein. Das steht für list item (dt. Listenelement).

Bilder sind besondere Tags, die nicht geschlossen werden müssen. Bilder brauchen aber Attribute, um sie zu beschreiben. src steht für source und ist die Quelle, also Webadresse von dem Bild. Den Link zu einem Bild kannst du herausfinden, indem du Rechtsklick darauf klickst und dann Bildadresse kopieren / Grafikadresse kopieren wählst.

Du kannst außerdem die Attribute height oder width einstellen:

  • height=“100px“
  • width=“100%“

style=“float: right“ macht das Bild rechtsbündig, wobei der Text um das Bild herumfließt.

<a> steht für anchor (dt. Anker) und verlinkt auf Webseiten. href steht für hyperlink reference und ist die Hyperlinkreferenz, und ist die Webadresse auf die weitergeleitet wird. Achtung! Unbedingt speichern, bevor du auf den Link klickst.

Der Inhalt, der vom <a>-Tag umklammert ist, kann dann angeklickt werden. Das können sowohl Texte, als auch Bilder sein.

Erkunde selbst!

Was genau sind diese violetten Blöcke?!

Das sind Gestaltungsregeln. Dazu erfährst du später mehr. Wichtig ist erstmal, dass du sie genauso brauchst, damit deine Tabelle die klassischen Ränder erhält.

border-collapse: collapse; verhindert, dass Doppelränder gezeichnet werden

Wie ist eine Tabelle strukturiert?

Der <table> -Block umspannt die gesamte Tabelle.

Die Tabelle besteht zunächst aus mehreren Zeilen. Dafür musst du in den <table> -Block mehrere <tr> -Blöcke platzieren. <tr> steht für table row (dt. Tabellenzeile). Eine 2-zeilige Tabelle benötigt also 2 <tr> -Blöcke.

Deine Zeilen müssen mit dein einzelnen Zellen gefüllt werden. Der <td> -Block ist dabei eine normale Zelle. <th> -Blöcke sind speziell für die Kopfzeile.

Wie du Spalten hinzufügen kannst?

Die Anzahl der Spalten richtet sich danach, wie viele Zellen jeweils in deinen Zeilen sind. Willst du 3 Spalten haben, musst du also in jede Zeile (<tr> -Block) genau 3 Zellen ( <td> -Blöcke) einfügen.

CSS: Webseiten mit Style

HTML sorgt dafür, was auf deiner Webseite steht – zum Beispiel Texte oder Bilder.
Aber wie das Ganze aussieht, bestimmst du mit CSS.

Mit CSS kannst du zum Beispiel:

  • Farben ändern 🎨
  • Schriftarten einstellen ✍️
  • Abstände und Größen anpassen 📐
  • Elemente schöner anordnen 🧩

CSS steht für Cascading Style Sheets – also „gestufte Gestaltungsvorlagen“.

Aufgabe 8: Sieh dir die Webseite an und suche zunächst die Gestaltungsregeln (<style>) im <head> – Tag des HTML-Dokuments. Modifiziere die Webseite wie folgt:

  1. Experimentiere mit der Schriftgröße (font-size) des Textes. Es gehen Werte wie x-small, large oder auch konkret 28px.
  2. Ändere die Hintergrundfarbe der Seite auf ein helles Grün.
  3. Ändere die Farbe der Überschrift auf ein dunkles Grün.
  4. Färbe Unterüberschriften blau.
  5. Zusatz: Finde im Quelltext das Bild (<img>) und platziere es linksbündig.
  6. Klicke auf das -Menü und dann auf Download, um die fertige Webseite in deinem Home-Verzeichnis zu speichern.

Füge folgenden Code ein, falls du neu anfangen willst:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Capybaras – Die sanften Riesen</title>
    <!-- In Style können wir Gestaltungsregeln ergänzen -->
    <style>
      body {
        background-color: #c0c0ff; 
        color: black;
        font-size: small;
      }
      
      h1  {
        font-weight: bold;
        color: #800000;
      }
      
    </style>
</head>
<body>
    <h1>Capybaras - Die größten Nagetiere der Welt</h1>

    <p>Capybaras, auch Wasserschweine genannt, sind die größten lebenden 
    Nagetiere der Welt. Sie sind bekannt für ihr ruhiges und soziales Wesen.</p>

    <h2>Lebensraum und Verbreitung</h2>

    <p>Capybaras leben in Südamerika, vor allem in der Nähe von Gewässern wie 
    Flüssen, Seen und Sümpfen.</p>

    <img width="250px" height="250px" style="float: right"
    src="https://assets.onecompiler.app/43df6gxyc/43dg5gsj3/Capybara.png" />

    <h2>Wichtige Lebensräume</h3>

    <ul>
        <li>Feuchtgebiete</li>
        <li>Savannen</li>
        <li>Regenwälder</li>
    </ul>

    <h2>Merkmale und Verhalten</h2>

    <p>Capybaras sind soziale Tiere und leben in Gruppen von bis zu 20 Tieren. 
    Sie sind ausgezeichnete Schwimmer und verbringen viel Zeit im Wasser.</p>

    <h3>Besondere Fähigkeiten</h3>

    <ol>
        <li>Ausgezeichnete Schwimmer</li>
        <li>Können lange unter Wasser bleiben</li>
        <li>Soziales Verhalten</li>
    </ol>
</body>
</html>

📂 Öffne deine Webseite

Um deine Webseite wieder zu öffnen und bearbeiten zu können, musst du zunächst zur Projekt-Seite navigieren, indem du oben links auf Projects klickst.

Anschließend musst du rechts auf klicken.

Du musst nun die .json-Datei auswählen und öffnen.

Aufgabe 9: Gestalte deine eigene Webseite!

  1. Platziere einen <style>-tag in dem <head>-Tag deiner Webseite.
    • Alle Gestaltungselemente findest du unter den violetten Blöcken.
  2. Gib deiner Webseite eine passende Hintergrundfarbe oder sogar ein Hintergrundbild.
  3. Überlege dir, welche Inhalte du wie gestalten möchtest:
    • Farbe
    • Ausrichtung
    • Größe
    • Schriftart
    • …
  4. Lege los und wenn du Hinweise brauchst oder nachschauen möchtest wie z.B. ein Bild eingefügt werden kann, siehe unten nach.
  5. Sieh dir am besten auch die Hinweise zum Spacing an, um Abstände einzustellen.
  6. Vergiss nicht regelmäßig zu speichern (Project und Code)!
  7. Unter den Hinweisen findest du auch Tipps zum Strukturieren der Webseite und ein paar Beispiele.

Hinweise

Hintergrundfarbe

Rechts dargestellt siehst du, wie du den Hintergrund deiner Seite einfärben kannst.

<style> ist der Bereich mit den Gestaltungsregeln.

Darin ist ein .classname{ } – Block in den body eingetragen wurde. Hierin werden nun alle, den body betreffenden Gestaltungsregeln aufgelistet.

background-color: #ffc0c0 sagt welche Farbe der body dann haben soll. (mehr zu Farben findest du hier)

Verschiedene Tags,
verschiedene Hintergründe

Tatsächlich kannst du, wie links, auch anderen Tags einen Hintergrund geben. Das sieht dann z.B: so aus:

Wenn du aber den body-Tag nimmst, dann färbst du alles sichtbare, also die gesamte Webseite, ein.

Hintergrundbilder

Eine Farbe reicht dir nicht? Du kannst auch Hintergrundbilder mit background-image einstellen.

background-size: cover streckt dabei das Bild so, dass es über die ganze Seite geht.

background-repeat: repeat kannst du nutzen, um ein Bild ganz oft aneinanderzureihen.

Kopiere den „Bildlink“ wie folgt und vergiss nicht die Quellenangabe:

Texte gestalten

Rechts dargestellt siehst du, wie du den Hintergrund deiner Seite einfärben kannst.

<style> ist der Bereich mit den Gestaltungsregeln.

Darin ist ein .classname{ } – Block in den body eingetragen wurde. Hierin werden nun alle, den body betreffenden Gestaltungsregeln aufgelistet.

Das Attribut text-color ist für die Farbe des Textes verantwortlich.

text-align ist die Ausrichtung, also z.B: linksbündig, zentriert oder rechtsbündig.

font-size ist die Schriftgröße. Neben genauen Pixelwerten gibt es auch small, x-large u.s.w.

Schriftarten kannst du mit font-family einstellen. Es gibt allgemeine Kategorien:

  • „serif“
  • „sans-serif“,
  • „cursive“
  • „fantasy“
  • „monospace“

oder aber auch konkrete Schriftarten:

  • „arial“
  • „times“
  • „courier“
  • „Comic Sans MS“
  • „Georgia“
  • „Verdana“
  • …

TODO: Strukturierung und Klassen

Ähnliche Beiträge