Sponsor werden ❤️

Grundlagen von HTML

„Hi, ich bin Nao! Ich bin ein programmierbarer Roboter und kann tanzen, singen, sprechen und vieles mehr. Probiere mich gerne aus! Ich komme auch zu dir an die Schule :)“
Lernmaterial coming soon 🙂

Empfohlene Altersgruppe

Ab 14 Jahren

Zielsetzung

Die ersten eigenen Webseiten bauen

Ausleihbar

Trifft nicht zu

Mehr Informationen

Eine Webseite, so wie du sie aus dem Internet kennst, besteht aus drei Komponenten: HTML, CSS und JavaScript. Alle drei (Programmier)-Sprachen sind für ganz unterschiedliche Dinge auf einer Webseite zuständig und erst durch ihre Kombination, wird eine Webseite erst zu dem, was sie ausmacht. Vorstellen kann man es sich wie folgt: HTML ist für die Dinge zuständig, die zu sehen sind. Ohne HTML gäbe es beispielsweise den Text, den du gerade liest, gar nicht auf dieser Seite. CSS ist für alles Optische da. Beispielsweise dafür, dass dieser Text nun grau ist und von der Schriftgröße anders als der Rest des Textes. Zu guter Letzt kommt noch JavaScript dazu, was dafür da ist, den Elementen auf der Seite zu sagen, was sie tun sollen, wenn ein Nutzer mit ihnen interagiert. Zum Beispiel, dass automatisch eine E-Mail verschickt wird, wenn du in unserem Kontaktformular eine Nachricht verschickst. HTML ist die Abkürzung für „Hyper Text Markup Language“. Es ist die Standard Markup Language, die für das Erstellen von Webseiten verwendet wird. HTML gibt die Struktur der Webseite an und gibt dem Webbrowser Anweisungen, wie die Inhalte der Seite angezeigt werden sollen. Das bedeutet, dass HTML für die Organisation des Inhalts verantwortlich ist, während beispielsweise CSS für das Aussehen der Seite zuständig ist. HTML besteht aus einer Reihe von Tags, die verwendet werden, um den Inhalt der Website zu strukturieren. Zum Beispiel gibt es Tags für Überschriften, Absätze, Bilder, Links und viele andere Elemente, die auf einer Webseite erscheinen können. Diese Tags können verschachtelt und miteinander kombiniert werden, um komplexe Strukturen zu erstellen. Wie genau funktioniert’s? Ganz einfach. In diesem Modul lernst du alles, um deine erste eigene Webseite zu erstellen.
Lernmaterial coming soon 🙂

Wie geht eigentlich HTML?

Grundlagen von HTML

Inhalt

1) Aller Anfang ist leicht 😉​

Das musst du wissen

Unser erstes Ziel ist es, eine Webseite zu erstellen und die erste Willkommensnachricht auf dieser anzuzeigen. Um starten zu können, brauchen wir gar nicht viel. Lediglich Visual Studio Code (VSCode) und ein beliebiger Browser. Wie VSCode funktioniert, hast du bereits im letzten Modul gelernt. Der Browser ist dafür da, dass wir uns die Webseite direkt anzeigen lassen können. Ab geht’s!

  1. Wir öffnen VSCode auf unserem Gerät und klicken oben links auf “Datei -> Ordner öffnen” bzw. “File -> Open Folder”.
  2. Es öffnet sich der Datei-Explorer. Hier erstellen wir nun an einer beliebigen Stelle einen neuen Ordner mit dem Namen “html” und öffnen diesen. Nun sehen wir den Ordnernamen oben links in VSCode. Dieser Ordner ist nun unser Projektordner.

  3. Innerhalb dieses Ordners erstellen wir eine Datei. Das funktioniert, in dem wir unterhalb des Namens unseres Projektordners rechtsklick drücken und “Neue Datei” bzw. “New File” auswählen. Diese Datei nennen wir “willkommen.html”.

  4. Sobald die Datei erstellt ist, öffnet sich im rechten Bereich von VSCode der Editor, in dem wir den Code für unsere HTML-Datei schreiben können. Hier schreiben wir lediglich ein “!” und drücken die Enter-Taste. Wie von Zauberhand ist das Grundgerüst der HTML-Datei fertig erstellt und wir brauchen uns hier drüber schon keine Gedanken mehr zu machen.

  5. Das Grundgerüst besteht aus mehreren Bereichen. Der Bereich, der uns gerade am meisten interessiert, ist der Platz zwischen den zwei <body>-Tags. Hier können wir zum Beispiel Text einfügen, der dann auf der Webseite angezeigt wird. Als Text schreiben wir hier “Willkommen auf meiner Webseite!”.
  6. Jetzt können wir uns auch schon mal die Webseite angucken. Dafür klicken wir in VSCode unten rechts auf “Go Live”. Dadurch öffnet sich der Browser mit unserer Webseite. Hier können wir auch den Text sehen, den wir gerade geschrieben haben. Und so schnell gehts! Wir haben in Windeseile unsere allererste eigene Webseite gebaut.

Unsere erste eigene Webseite 1

Erstelle eine Webseite mit einem kleinen Text über dich.

Die Schritt-für-Schritt-Anleitung oben kann dir helfen, alle wichtigen Schritte im Kopf zu behalten. Lies einfach noch einmal nach und schau dir die Bilder an, wenn du dir unsicher bist.

Wenn du an einer bestimmten Stelle nicht weiterkommst, dann kannst du einen Betreuer fragen, ob er dir kurz bei diesem Schritt helfen kann.

Es ist nicht schlimm, wenn man beim ersten Mal Hilfe benötigt. Du kannst die Aufgabe auch mit einem Betreuer als Partner lösen.

2) Arbeiten mitt Tags

Die erste Webseite steht schon mal – Top!! Bislang ist der Inhalt aber noch relativ übersichtlich. Unser nächstes Ziel ist es, die Webseite mit richtigen HTML-Tags zu füllen und dadurch mehr Informationen auf dieser anzuzeigen. Das schaffen wir aber auch mit links!

  1. Zuerst erstellen wir eine neue HTML-Datei mit dem Namen “uberschriften.html”. Hier erstellen wir wieder das Grundgerüst, in dem wir im Editor ein “!” schreiben und die Enter-Taste drücken.
  2. Inhalte setzen wir in den <body>-Tag. Bislang haben wir hier lediglich Text reingeschrieben. Wir können hier aber auch mit HTML-Tags arbeiten. Als ersten HTML-Tag erstellen wir eine Überschrift. Eine Überschrift in HTML wird mit dem <h1>-Tag erstellt. In VSCode können wir dafür einfach im Body “h1” tippen und dann die Enter-Taste drücken, um den Tag zu erstellen.
  3. Zwischen den Anfangstag (<h1>) und den Endtag (</h1>) der H1 setzen wir nun unseren Text für die Überschrift. Zum Beispiel, wie in der letzten Datei “Willkommen auf meiner Webseite!”.
  4. Öffnet man die Seite nun im Browser sieht man schnell, dass diese Überschrift nun deutlich größer ist, als es bei der anderen Seite der Fall war. Das liegt daran, dass unser HTML-Code erkennt, dass es sich hier nun um eine Überschrift handelt. Überschriften werden größer dargestellt als normaler Text.
  5. Neben der H1 gibt es auch noch weitere Überschriften. Nämlich H2, H3, H4, H5 und H6. Diese werden genauso erstellt, wie die H1 und unterscheiden sich in der Größe, in der sie angezeigt werden.

Unsere erste eigene Webseite 2

Erstelle eine Webseite mit mindestens 3 unterschiedlichen Überschriften.

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

3) Texte formatieren

Und da haben wir auch schon die zweite Webseite gebaut. Sauberer Arbeit! Neben Überschriften gibt es natürlich noch viele weitere HTML-Tags. Ein paar schauen wir uns jetzt an.

  1. Zuerst erstellen wir eine neue HTML-Datei mit dem Namen “texte.html”. Hier erstellen wir wieder das Grundgerüst, in dem wir im Editor ein “!” schreiben und die Enter-Taste drücken.
  2. Wir erstellen eine H1 als Überschrift mit dem Text “Hier kommen die Infos!”, um darunter mit unserem Text zu beginnen. Ein Text wird mit dem <p>-Tag erstellt. Dafür tippen wir im Body “p” und drücken die Enter-Taste.
  3. Innerhalb des P-Tags können wir unseren Text schreiben: “Das hier is mein erster Text in einem P-Tag”. Schauen wir uns das im Browser an, sieht das wie folgt aus:
  4. Da steht also unser erster Text. Diesen können wir nun noch mit weiteren Tags optisch anpassen. So können wir beispielsweise einzelne Teile fett drucken oder kursiv schreiben. Dafür setzen wir die entsprechenden Wörter oder Buchstaben unseres Textes in einen <b>-Tag (fett drucken) bzw. <i>-Tag (kursiv schreiben). In unserem Beispiel schreiben wir das Wort “erster” fett und “P-Tag” kursiv.
  5. Wenn wir uns das im Browser angucken, sieht das wie folgt aus:

Unsere erste eigene Webseite 3

Erstelle eine Webseite mit einer Überschrift und mehreren kleinen Texten darunter. Innerhalb dieser Texte kannst du einzelne Wörter fett drucken oder kursiv schreiben, um sie besonders hervorzuheben.

Die Schritt-für-Schritt-Anleitung oben kann dir helfen, alle wichtigen Schritte im Kopf zu behalten. Lies einfach noch einmal nach und schau dir die Bilder an, wenn du dir unsicher bist.

Wenn du an einer bestimmten Stelle nicht weiterkommst, dann kannst du einen Betreuer fragen, ob er dir kurz bei diesem Schritt helfen kann.

Es ist nicht schlimm, wenn man beim ersten Mal Hilfe benötigt. Du kannst die Aufgabe auch mit einem Betreuer als Partner lösen.

4) Bilder einfügen

Wir werden immer schneller im Erstellen der Webseiten und lernen immer mehr neue HTML-Tags kennen, um die Seite weiter zu gestalten. Um die Seite noch spannender zu gestalten, haben wir die Möglichkeit, Bilder hinzuzufügen. Wie das geht und was man dabei beachten muss, lernen wir jetzt!

  1. Zuerst erstellen wir eine neue HTML-Datei mit dem Namen “bilder.html”. Hier erstellen wir wieder das Grundgerüst, in dem wir im Editor ein “!” schreiben und die Enter-Taste drücken.
  2. Wir erstellen eine H1 als Überschrift mit dem Text “Meine Bilder”, um darunter ein paar Bilder zu erstellen. Ein Bild wird mit dem <img>-Tag erstellt. Dafür tippen wir im Body “img” und drücken die Enter-Taste.
  3. Das img-Tag enthält ein paar neue Dinge, die wir noch nicht kennen. Zum einen hat es nur einen Anfangstag und keinen Endtag. Das liegt daran, dass unser Bild nunmal ein Bild ist und wir keinen Text anzeigen wollen. Daher benötigen wir keinen Platz zwischen einem Anfangstag und einem Endtag, in den wir Text schreiben könnten. Zusätzlich hat das img-Tag zwei sogenannte Attribute: “src” und “alt”. Mit dem “src”-Attribut können wir die Quelle unseres Bildes festlegen. Es gibt dafür zwei Möglichkeiten, wo dieses Bild liegt. Wir schauen uns erstmal eine Variante an:
  4. Das Bild ist online verfügbar: Wir können online nach einem Bild suchen, welches wir auf der Seite anzeigen lassen wollen. Dazu gehen wir auf https://unsplash.com/ , da wir auf dieser Seite Bilder finden, die wir kostenfrei nutzen dürfen. Wenn wir ein geeignetes Bild gefunden haben, können wir dieses mit der rechten Maustaste anklicken und “Bildadresse kopieren” anklicken.
  5. Die kopierte Bildadresse können wir nun in das “src”-Attribut zwischen die Anführungszeichen einfügen. Schauen wir uns die Änderungen nun auf der Seite an, werden wir das Bild sehen.
  6. Nachdem wir das “src”-Attribut ausgefüllt haben, können wir nun noch das “alt”-Attribut mit Text füllen. Der sogenannte Alternativtext wird angezeigt, wenn das Bild nicht geladen werden kann. Zusätzlich dient er dazu, dass die Seite auch von Menschen mit einer Sehbehinderung gelesen werden kann. In diesem Fall wird der Alt-Text anstelle des Bildes vorgelesen, sodass auch über den Text die Informationen geliefert werden, die das Bild vermittelt. In meinem Fall setze ich nun als Alternativtext “Bild von einem Hund”.
  7. In meinem Fall ist das Bild viel zu groß für die Seite. Um das anpassen zu können, können wir dem img-Tag noch ein weiteres Attribut hinzufügen. Das “width”-Attribut. Hiermit können wir die Breite des Bildes beeinflussen, indem wir zum Beispiel den Wert “400px” ergänzen. Dadurch wird das Bild 400px breit.
  8. Die zweite Variante ein Bild einzufügen ist, es lokal einzubinden. Das heißt, das Bild ist heruntergeladen und liegt mit im Projektordner. Dafür gehen wir wieder auf https://unsplash.com/ und laden uns ein beliebiges Bild herunter. Danach ziehen wir es in den Projektordner.
  9. Wir erstellen unter dem bereits existierenden img-Tag einen weiteren und ergänzen diesen mit den benötigten Attributen. Im “src”-Attribut setzen wir den Dateipfad zum heruntergeladenen Bild. Am leichtesten Geht das, in dem wir in die Anführungszeichen des “src”-Attributs geht und dort “STRG + Leertaste” drückt. Dann werden uns alle Dateien angezeigt, die im Projektordner liegen. Hier können wir dann das richtige Bild auswählen.

Unsere erste eigene Webseite 4

Erstelle eine Webseite mit mindestens 3 Bildern, die dich und deine Hobbies am besten beschreiben. Wenn du willst, kannst du auch Überschriften oder Texte hinzufügen.

Die Schritt-für-Schritt-Anleitung oben kann dir helfen, alle wichtigen Schritte im Kopf zu behalten. Lies einfach noch einmal nach und schau dir die Bilder an, wenn du dir unsicher bist.

Wenn du an einer bestimmten Stelle nicht weiterkommst, dann kannst du einen Betreuer fragen, ob er dir kurz bei diesem Schritt helfen kann.

Es ist nicht schlimm, wenn man beim ersten Mal Hilfe benötigt. Du kannst die Aufgabe auch mit einem Betreuer als Partner lösen.

Grundlagen von HTML Prüfung

Du hast nun schon einiges über HTML und dessen Tags kennengelernt. Jetzt ist es an der Zeit, das Gelernte einmal vollständig zum Einstaz zu bringen.

Abschluss Unsere erste eigene Webseite

Such dir ein Thema aus und erstelle dazu passend eine Website mit verschiedenen Texten, dazugehörigen Überschriften und Bildern. Nutzehierbei auch die gelernten Stilelemente in deinen Texten, wie Kursivschrift und dicken Druck.

Alle Dinge, die hier benötigt werden, hast du bereits in den vorherigen Missionen kennengelernt. Schaue sie dir nochmal an, wenn du dir nicht sicher bist.

Auf der Startseite gibt es meist mindestens einen a-Tag, der auf die Kontaktseite verweist, mehrere h-Tags, ein paar p-Tags sowie img-Tags. Auf der Kontaktseite gibt es normalerweise mindestens einen a-Tag, der wieder auf die Startseite verweist sowie einen h-Tag.

Weiter geht´s mit Grundlagen von HTML

Möchtest du noch mehr über HTML erfahren? Dann kann ich dir die folgenden Seiten und Videos empfehlen. Ansonsten kannst du auch direkt mit dem CSS-Modul durchstarten. Dort wird dir erklärt, wie du deine HTML-Webseite nun mit Leben füllst, Farben einbaust und allgemein das Design anpasst.

https://wiki.selfhtml.org/wiki/HTML#

https://www.youtube.com/watch?v=l5W48AAcgMU&list=PL_pqkvxZ6ho3Dho4bGSJfEXn38fI9VuC7

Schau vorbei 🙂

Facebook-f Instagram Youtube