Webseiten erstellen mit HTML

Wir bauen uns eine kleine Homepage Schritt für Schritt

HTML

HTML ist die Sprache des Web.

Aber was heißt das genau und was ist der, die oder das Web?

Wie alles anfing

Stellt euch kurz vor, dass ihr Euch im Jahr 1998 befindet, also vor knapp 30 Jahren.

👉 Ihr sitzt vor einem großen, klobigen Computer mit einem Röhrenbildschirm.

 Das Internet ist langsam. Sehr langsam.

👉 Und Webseiten sehen… sagen wir mal… anders aus 😄

Statt bunter Apps und Videos gibt es vor allem:

  • viel Text
  • ein paar Bilder
  • und manchmal blinkende Schrift (ja, wirklich!)

Alles nur Text

Es gibt eine Sorte von Browser, der nur Text anzeigen kann (also wirklich keine Bilder). Der Browser heißt Lynx.

Ihr könnt so etwas Ähnliches auch selber ausprobieren:

  1. Ruft zuerst die Webseite https://Textise.net auf, in dem ihr diese Adresse in das Adressfeld (!) Eures Browsers eingibt
  2. Gebt dann die URL eine Webseite ein, die ihr sehen wollte, zum Beispiel https://wiggy.de/
  3. Klickt auf den Button Textsie

Ihr seht die Webseite komplett ohne Bilder. Langweilig. Aber so war es als das Internet noch jung war tatsächlich.

Am Anfang bestanden Webseiten nur aus Text

Wie alt ist das Internet?

Das Internet ist, so wie sehr vieles was ihr täglich benutzt, wann wurde z.B. die Zahnbürste erfunden?, sehr alt.

Es entstand bereits in den 60er Jahren, also vor über 60 Jahren.

Sind Internet und Web dasselbe?

Das, was wir jeden Tag benutzen, ist nur ein Teil des Internet.

Es ist das World Wide Web, kurz Web. Mache schreiben auch WWW als Abkürzung.

Das Web wurde 1989 erfunden. Der Erfinder heißt Tim Berners-Lee. Er arbeitete damals am Forschungszentrum CERN in der Schweiz.

Tim Berners-Lee

Ein Problem und eine geniale Lösung

Tim hatte damals ein Problem und fand dafür eine geniale Lösung.

Das Problem: Wissenschaftler hatten viele Informationen in Dokumenten, aber keine einfache Möglichkeit, sie zu teilen.

Wenn man ein Dokument über das Internet auf seinem Computer betrachten könnte, wäre das eine große Verbesserung.

Das Dokument wird auf einem Computer an einem Ort abgelegt und alle Menschen auf der ganzen Welt können das Dokument über das Internet abrufen und es lesen.

Die Erfindung des Jahrhunderts

Ein Dokument, das irgendwo gespeichert ist, auf jedem Computer weltweit anzeigen zu können war bereits ein großer Fortschritt.

Aber Tims Idee war noch besser.

In einem Schulbuch zu Biologie steht etwas über Osmose: "Osmose ist ein Spezialfall von Diffusion".

Wenn ihr etwas für Diffusion lernen wollt, müsst ihr ein Chemiebuch aufschlagen.

Im Internet müsstet ihr ein anderes Dokument aufrufen (und das eventuell erst suchen).

Es wäre viel praktischer, wenn das über einen Klick auf das Wort "Diffusion" automatisch passieren würde.

Das Prinzip der Hyperlinks

Verweise in einem Dokument auf andere Dokumente heißen Verknüpfungen.

Auf Englisch links.

Da es bereits die Theorie des Hypertextes gab, nannte Tim die Links Hyperlinks.

Hyperlinks waren seine große Erfindung.

Eine kleine Übung zu Hyperlinks

Ihr lest in einem Schulbuch diesen Satz:

Osmose ist wie Diffusion – nur speziell für Wasser und mit einer Membran.

Auf welche Begriffe kannst Du verlinken?

Lösung: Diffusion und Membran.

Warum wird "Wasser" nicht auch verlinkt?

Die Lösung in HTML

<p>
Osmose ist ein Spezialfall der 
<a href="#">Diffusion</a>.
Dabei bewegt sich Wasser durch eine 
<a href="#">semipermeable Membran</a>.
</p>

Was das ist, werdet ihr in Kürze erfahren.

Aus Hyperlinks wird das Web

Zeichne die Verknüpfungen zwischen ein paar Dokumenten auf ein Blatt Papier.

Welche Figur entsteht?

In etwa eine Art "Spinnennetz". Jede Webseite ist ein Punkt, jeder Link ein Faden.

Tim nannte das Ganze daher Web.

Da dieses Web von der ganzen Welt aus genutzt werden kann, entstand das World Wide Web.

Das Web ist über 30 Jahre alt

Die erste Webseite wurde 1990 Teil des WWW.

Das war die Geburtsstunde des Webs so wie wir es heute immer noch nutzen.

Das Web besteht heutzutage aus Milliarden von Webseiten, die Milliarden von Bildern, Videos und Sounds umfassen.

Das Web ist in den letzten 10 Jahren enorm gewachsen.

So fing alles an

Webseiten selber machen

Damals (und auch heute noch!) werden Webseiten mit einer Sprache gebaut:

➡️ HTML = HyperText Markup Language

Die Abkürzung bedeutet:

  • HyperText → Texte mit Verlinkungen (du kannst klicken und springst woanders hin)
  • Markup → Du markierst Dinge, z.B. "Das ist eine Überschrift"
  • Language → Es ist eine "Sprache" für Computer

🧠 Die wichtigste Idee von HTML

HTML sagt dem Browser:

👉 Das hier ist eine Überschrift

👉 Das hier ist ein Absatz

👉 Hier kommt ein Bild

Der Browser (z.B. Google Chrome oder Mozilla Firefox) zeigt das dann schön an.

Was macht ein Browser?

Warum heißt der Browser eigentlich "Brauser"?

👉 „Browser“ wird auf Deutsch ungefähr wie „Brauser“ ausgesprochen

👉 Browser kommt aus dem Englischen Verb „to browse“

Das bedeutet: stöbern, herumblättern, sich umschauen

👉 Ein Browser ist Programm, mit dem man im Web herumstöbert, in dem man über die Links einer Webseite andere Webseiten aufruft

🌐 Beispiele für Browser

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Brave

Webseiten finden

Sobald es mehr als ein paar Dutzend Webseiten gibt, wird es unübersichtlich.

Wie finde ich Inhalte auf einer Seite?

Muss ich jede Seite einzeln aufrufen?

Dafür gibt es Suchmaschinen.

Die Entstehung der Suchmaschinen

Eine Suchmaschine ist eine Webseite für das Durchsuchen der Inhalte des WWW.

Mit einer Suchmaschine kann man anhand von Stichworten nach allen Webseiten suchen, die dieses Stichwort enthalten.

Die erste bekannte Suchmaschine war AltaVista im Jahr 1995.

Ein paar Fragen zum Nachdenken

  • Woher hat die Suchmaschine ihre Informationen?
  • Was ist eine große Herausforderung für Suchmaschinen?
  • Kann eine Suchmaschine 100% des Web scannen?

Die Suchmaschine weiß nicht alles

Eine Suchmaschine kennt nicht das ganze Internet – sie kennt nur das, was sie finden darf und finden kann.

Der Teil des Internets, der von Suchmaschinen nicht erfasst wird, heißt auch Dark Web.

Google änderte alles

Der große Durchbruch kam 1998 mit Google.

Google hat alles verändert:

  • bessere Ergebnisse
  • einfache Bedienung
  • schnell

Früher sagte man "Webrecherche" oder "Websuche", heute sagt man einfach nur "googlen".

Wie HTML funktioniert

Ein Mini-Beispiel

<h1>Meine erste Webseite</h1>
<p>Hallo! Ich lerne gerade HTML 😊</p>

➡️ Das Ergebnis im Browser:

  • Große Überschrift
  • Darunter ein Text

🚀 Webseiten mit HTML machen

HTML sieht vielleicht kompliziert aus, ist es aber nicht.

HTML ist sogar sehr einfach zu verstehen.

HTML ist logisch aufgebaut

🏠 Die Rolle der Homepage

Die Homepage ist die erste Seite einer Website.

👉 Eine Website ist eine Sammlung von mehreren Webseiten.

Beispiel: Ihr ruft z.B. https://wiggy.de auf und seht als erstes die Homepage

https://wiggy.de ist die Adresse der Website (auch URL genannt für Uniform Resource Locator).

Meine eigene Homepage

Wir bauen uns eine persönliche Homepage, auf der wir uns kurz vorstellen.

➡️ Also konkret:

  • Name (Vor und Nachname)
  • Schulklasse und Schule
  • Hobbies
  • Avatar (ein Bild anstelle unseres echten Bildes)

🧠 Also wörtlich: Startseite oder Zuhause-Seite

Die Umsetzung Schritt für Schritt

Für die Eingabe des HTML-Textes brauchen wir einen Editor.

Ein Editor ist ein Programm zum Bearbeiten von Textdateien.

Bei Windows gibt es dafür das Programm Notepad.

👉 Wichtig: Die Begriffe "Webseite", "Homepage" oder "HTML-Seite" bedeuten alles dasselbe.

💻 Schritt 1: Das Grundgerüst

Das Grundgerüst gibt den Rahmen der HTML-Seite vor.

Gebt diesen Text zuerst per Notepad ein.

<!DOCTYPE html>
<html>
<head>
    <title>Meine Homepage</title>
</head>
<body>

</body>
</html>

💻 Schritt 2: Der HTML-Text wird gespeichert

Speichert den Text im Dokumente-Ordner unter einem Namen ab, z.B. "Homepage.html".

Der Name der Datei ist egal, wichtig ist die Erweiterung ".html".

Wenn Ihr die Datei doppelt anklickt, wird sie im Browser angezeigt.

✨ Schritt 3: Euren Namen hinzufügen

<h1>Vorname Nachname</h1>

👉h1= große Überschrift

 

🏫 Schritt 3: Schule + Klasse

<p>Ich bin in der Klasse 7a der Muster-Schule.</p>

👉= Absatz (normaler Text)

🎯 Schritt 4: Meine Hobbys

<h2>Meine Hobbys</h2>
<ul>
    <li>Fußball</li>
    <li>Zeichnen</li>
    <li>Gaming</li>
</ul>

👉 <ul> = Liste
👉 <li> = einzelner Punkt

🖼️ Schritt 5: Avatar einfügen

Euer Avatar ist eure geheime Internet-Identität.

<img src="avatar.png" width="150">

"avatar.png" ist nur ein Platzhalter. Ihr müsst Euch noch ein Bild suchen oder generieren. Das machen wir in Kürze.

👉 Die Bilddatei muss im gleichen Ordner liegen

🎉 Das komplette HTML für die Homepage

<!DOCTYPE html>
<html>
<head>
    <title>Meine Homepage</title>
</head>
<body>

<h1>Vorname Nachnmae</h1>
<p>Ich bin in der Klasse 7a am Wirtemberg Gymnasium (Wiggy).</p>
<h2>Meine Hobbys sind</h2>
<ul>
    <li>Fußball</li>
    <li>Zeichnen</li>
    <li>Gaming</li>
</ul>
<h2>Mein Avatar</h2>
<img src="avatar.png" width="150">
</body>
</html>

🚀 Mini-Challenges (für schnelle Schülerinnen)

⭐ Hintergrundfarbe ändern

⭐ Text bunt machen

⭐ Emoji einbauen 😄

⭐ Einen Link hinzufügen

Bilder für meinen Avatar

Es gibt Millionen von Bildern und viele sind richtig gut.

ABER: Du darst diese Bilder nicht einfach für Deine Homepage verwenden!

Der Grund ist, dass die meisten Bilder urheberechtlich geschützt sind.

Wer Bilder verwendet, für die er keine Rechte hat, kann abgemahnt werden. Das kostet immer mehrere Hundert Euro.

Wo finde ich lizenzfreie Bilder?

Nehmt immer lizenzfreie Bilder.

Achtet auf den großen Bildportalen wie Pixabay immer darauf, ob ein Bild lizenzfrei ist oder nicht.

Wichtig ist der Begriff "Creative Commons".

CC0 bedeutet "komplett frei nutzbar" 👍

CC BY bedeutet "frei, aber Name nennen"

Dieses Bild dürft ihr verwenden

Dieses Bild dürft ihr NICHT verwenden

Verwendet einen KI-Bildgenerator

Damit seid ihr auf der sicheren Seite und könnt Eurer Phantasie freien Lauf lassen.

Ein Beispiel ist https://www.craiyon.com/de.

Ihr benötigt nur einen passenden Prompt.

Hier ein Beispiel:

Süßer Fuchs mit rotem Hut.

Dann bekommt ihr ein Bild, das ihr lokal speichern könnt durch Anklicken mit der rechten Maustaste und Auswahl von "Bild speichern unter".

Tipp: Speichert das Bild am besten dort, wo sich die Html-Datei befindet.

  • Wie wird ein Bild eingebunden?
  • Wie funktioniert ein Link?
  • Wie wird meine Webseite hübsch? (durch CSS)

Beim nächsten Mal geht es weiter mit...

Made with Slides.com