Selbstschliessende Tags

In HTML gibt es einige wenige Tags, die nur ein öffnendes, aber kein schliessendes Tag erfordern. Sie werden leere Tags oder self-closing Tags genannt und für Steuerinformationen (wie eine neue Zeile) oder für die Einbdindung von Medien eingesetzt.

Neue Zeile und Trennstrich

<br> Zeilenumbruch

Ein Zeilenumbruch wird mit dem <br>-Tag erzeugt und steht fürs englische line break.

<hr> Trennstrich

Ein Trennstrich wird mit dem <hr>-Tag erzeugt und steht fürs englische horizontal rule.

Neue Zeile und Trennstrich

Erzeugen Sie folgende Ausgabe mit Umbrüchen nach jedem Satz.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque euismod enim urna nec dictum sapien enim nec erat.
Mauris euismod nec dictum sapien enim nec erat.

Merke

Mit <br> können in einem Paragraphen Zeilenumbrüche eingefügt werden oder zusätzliche Leerzeilen eingefügt werden.

<p>

Paragraph

Fasst inhaltlich zusammengehörende Textteile zusammen. Nach jedem Paragraph wird eine neue Zeile mit Abstand eingefügt.

<br>

Neue Zeile

Kann auch innerhalb von Paragraphen für neue Zeilen verwendet werden, ohne dass ein zusätzlicher Abstand eingefügt wird.

Medien

Mit HTML lassen sich auch Medien - Bilder, Videos, Audios aber auch ganze Webseiten - einbinden. Dazu stehen verschiedene HTML-Tags zur Verfügung - auch sie sind selbstschliessend. Damit die Quelle der Medien oder auch weitere Eigenschaften spezifiziert werden können, braucht man Attribute.

HTML Attribut

Ein HTML Attribut ist eine zusätzliche Information, die einem HTML-Element hinzugefügt wird. Attribute bestehen aus einem Namen und einem Wert und werden innerhalb des öffnenden Tags angegeben. Sie dienen dazu, das Verhalten oder das Aussehen eines Elements zu steuern.

Es wird stets name="wert" geschrieben, wobei der Wert in Anführungszeichen stehen muss.

Ein <span style="color:red;">roter</span> Text.

Im Beispiel wird das HTML Attribut style mit der Eigenschaft color: red; verwendet, um die Textfarbe eines Textes zu ändern.

Dateipfade

Lokale Ressourcen (daher Quellen, welche sich am gleichen Ort wie die HTML-Datei befinden), werden relativ zur HTML-Datei angegeben.

• Ordnernamen und Dateien werden mit einem Slash / getrennt.
• Ein . steht für das aktuelle Verzeichnis - ausgehend von der bearbeiteten HTML-Datei.
• Ein .. steht für das übergeordnete Verzeichnis - ausgehend von der bearbeiteten HTML-Datei der übergeordnete Ordner.

Beispiel

www

• static
  • logo.svg 👈
• webseite
  • index.html 🟢
  • images
    • blume.png 👈
    • sonne.jpg

Ausgehend von index.html (🟢) ist der relative Pfad

• zu sonne.jpg (👈) ./images/sonne.jpg
• zu logo.svg (👈) ../static/logo.svg

Pfade auswählen

Geben Sie für folgende Pfade vom (🟢 oder 🟠) zum Ziel (👈) die korrekten relativen Pfade an:

webseite

• index.html 🟢
• images
  • blume.png
  • sonne.jpg 👈

Laden...

webseite

• index.html 🟢
• pages
  • about.html 🟠
  • cv.html
  • images
    • me.png 👈

Laden...

Laden...

webseite

• index.html
• images
  • blume.png 👈
  • sonne.jpg
• pages
  • about.html
  • cv.html 🟢

Laden...

Bilder

Bilder werden mit dem <img>-Tag eingebunden. Das src-Attribut gibt den Pfad zur Bilddatei an. Dies kann entweder eine Bild-Datei im Internet sein, oder auch eine Datei im eigenen Projektverzeichnis.

Weitere Attribute

alt

Alternativtext

Beschreibt den Inhalt des Bildes. Wird angezeigt, wenn das Bild nicht geladen werden kann oder wenn die Webseite vorgelesen wird.

width

Legt die Breite des Bildes fest.

height

Legt die Höhe des Bildes fest.

⚠️ Nur eines der Attribute width oder height angeben, um das Seitenverhältnis des Bildes beizubehalten.

<img width="200" src="https://www.publicdomainpictures.net/pictures/20000/velka/rubber-bears.jpg" alt="Gummibären">
<img width="150" src="./images/sonne.jpg" alt="Sonne">

Bemerke

Die Reihenfolge der Attribute spielt keine Rolle! Ob zuerst src oder alt kommt, ist egal.

Videos

Videos können mit dem <video>-Tag eingebunden werden. Um aktuelle Videos abzuspielen, wird die Quelle hierbei mit einem source-Tag angegeben.

<video width="320" controls>
  <source src="./videos/yogi-bear.mp4" type="video/mp4">
</video>
<video height="240" autoplay controls muted loop>
  <source src="https://videos.pexels.com/video-files/5532771/5532771-uhd_1440_2732_25fps.mp4" type="video/mp4">
</video>

Bemerke

• Das controls Attribut hat keinen Wert - dies ist die Kurzschreibweise für controls="true".
• Was passiert, wenn das controls Attribut weggelassen wird? Können Sie das Video dann noch starten? Probieren Sie es aus...
• Mit autoplay startet das Video automatisch, wenn die Seite geladen wird - das funktioniert aber nur, wenn das Video stumm geschaltet ist (muted)!
• Da es viele verschiedene Video-Formate gibt, muss hier zusätzlich das type-Attribut angegeben werden.

Youtube Videos

Youtube-Videos können mit einem <iframe>-Tag eingebunden werden.

Youtube-Video einbinden

<iframe width="400" height="215" src="https://www.youtube-nocookie.com/embed/WENSiwR6IoY?si=yPWr1ESTQqas08eQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Beachte

Iframe ist im Gegensatz zu Bildern kein Self-Closing Tag und braucht einen schliessenden Tag.

Es können auch weitere Video-Quellen eingebunden werden, bspw. Vimeo Videos: 👉 Embed Vimeo Video

Audio

Audiodateien werden mit dem <audio>-Tag eingebunden, wobei wie bei Bildern eine Quelle (src) angegeben werden muss.

<audio src="./sounds/klassisch.mp3" controls></audio>

Beachte

Audio ist im Gegensatz zu Bildern kein Self-Closing Tag und braucht einen schliessenden Tag.

Es können auch weitere Quellen eingebunden werden, bspw. Spotify Songs: 👉 Embed Spotify Music

Lokale Medien einbinden

Beim untenstehenden Blogeintrag sind leider alle Bild-Referenzen kaputt. Flicken Sie diese und überprüfen Sie, ob wirklich alle Inhalte abspielbar sind.

webseite

• images
  • lego-ninja-star.png
  • lego-ninja-warrior.jpg
• assets
  • videos
    • lego-movie.mp4
  • sounds
    • ninja-theme.wav
• blog
  • images
    • lego-ninja-badass.png
  • about-ninjas.html 🟢
• index.html

<!DOCTYPE html>
<html lang="de">
<body>
  <h1>Lego-Ninja-Action: Lea trifft den Badass!</h1>

  <p><em>Side-note:</em> Für echte Dojo-Stimmung Sound aktivieren ⬇️</p>
  <audio src="ninja-theme.wav" controls></audio>

  <p>
    <strong>Tagebuch-Eintrag 72:</strong> Heute war der Tag. Lego-Ninja-Champion Lea (ja, <em>die</em> 
    Lea mit dem abgebrochenen Katana) traf endlich den legendären 
    <img src="lego-ninja-warrior.jpg" alt="Ninja Warrior" width="100"> Ninja Warrior...
  </p>

  <div class="center">
    <img src="lego-ninja-star.png" width="120" alt="Lego Ninja Champion Lea">
  </div>

  <p>
    Lea: &bdquo;Brauchst du Hilfe beim Öffnen der geheimen Sushi-Truhe?&ldquo;<br>
    Ninja Warrior: &bdquo;Ich kämpfe lieber gegen Drachen als gegen Kinder-Sicherungen.&ldquo;
  </p>

  <div class="center">
    <img src="lego-ninja-badass.png" width="220px" alt="Lea trifft Badass Ninja">
  </div>

  <p>
    Kurzerhand wurde ein Ninja-Movie-Marathon gestartet, weil Lea meinte, Filme seien die stärksten Waffen.<br>
    <video width="450" controls>
      <source src="lego-movie.mp4" type="video/mp4">
      Dein Browser kann keine Ninjas abspielen :(
    </video>
  </p>

  <p>
    Zum Schluss beschlossen beide: Das einzig wahre Ninja-Upgrade ist... mehr Popcorn.<br>
    <strong>#LegoNinjaForLife</strong>
  </p>

</body>
</html>

Aufgabe

Erstellen Sie eine kleine Übersicht, mit den drei Abschnitten Bilder, Videos und Audio, in welchen Sie Ihre Lieblingsinhalte (min. 3 pro Abschnitt) einfügen.

<h1>Medienübersicht</h1>