Die geheimen Zeichen
Unscheinbar, aber mächtig – und manchmal einfach nur verwirrend.
Nicht alle HTML-Elemente drängen sich in den Vordergrund. Manche sind da, aber unsichtbar, andere tauchen nur auf, wenn sie wollen, und einige haben einfach eine sehr spezielle Aufgabe.
Die Trennlinie schafft Ordnung, das Zeilenumbruch-Element gönnt sich eine Pause, und das weiche Leerzeichen trennt Wörter nur, wenn es Lust hat. Das <BDO>-Element dreht Texte um, das <Pre>-Element bewahrt Leerzeichen wie einen Schatz, und Span verpasst Wörtern einen besonderen Look.
Der Progress-Balken zeigt an, dass etwas passiert, während hidden Dinge verschwinden lässt – für Uneingeweihte zumindest. Das translate-Attribut entscheidet, ob ein Text verständlich bleibt oder ein Mysterium wird.
Nutze sie mit Bedacht – oder spiel einfach herum. Großartige Entwickler tun genau das.
Textunterbrechung und Abgrenzung
Klare Linien im Chaos – für Struktur, Pausen und den richtigen Abstand.
Linien und Pausen
Die Harmonie der Absätze
<br>, <wbr>, und <hr> sind die heimlichen Taktgeber deiner Texte und Abschnitte. Das <br>-Element ist wie eine kurze Atempause in einem epischen Gedicht und zwingt den Text genau an der richtigen Stelle innezuhalten, damit es in der nächsten Zeile weiter gehen kann. Das <wbr>-Element ist ein vorsichtiger Umbruch-Helfer, der nur dann in Aktion tritt, wenn der Platz wirklich knapp wird. Und dann gibt es noch <hr> – der klare Strich, der Abschnitte voneinander trennt, als hätte jemand mit einem Schwert einen Raum geteilt.
<hr><br><wbr>Strukturierung und Formatierung von Text
Texte mit Stil – Ordnung, Format und ein Hauch von Magie.
Das code-Element
Die flüsternde Sprache der Maschinen
Das <code>-Element ist wie ein uraltes Pergament, auf dem uralte Befehle und Zauber festgehalten sind, nur für Eingeweihte, versteht sich. Es hebt Quelltext und kryptische Zeichenfolgen hervor, als wären sie die Schlüssel zu verborgenen Welten. Angezeigt in einer Monospace-Schrift, gibt es deinem Code die Würde, die ihm gebührt.
<code><p>Hallo Welt!</p></code>
Das mystische BDO-Element
Der Hüter der Textausrichtung
Tief verborgen im Arsenal von HTML liegt das mächtige <bdo>-Element, der Wächter der Leserichtung. Besonders nützlich in Sprachen, die von rechts nach links fließen, kann es mit dem dir-Attribut bestimmen, ob der Text von links nach rechts (ltr) oder andersherum (rtl) läuft. Ein wahrer Magier, der den Fluss der Worte kontrolliert.
<bdo dir="rtl">dog</bdo>
Das Pre-Element
Das Dilemma mit den Leerzeichen
Das <pre>-Element ist wie ein kunstvoll beschriftetes Pergament, bei dem jede Lücke und jeder Zeilenumbruch so wertvoll ist wie ein geheimnisvolles Artefakt. In der sparsamen Welt von HTML, wo Leerzeichen oft ignoriert werden, bleibt hier alles genau so, wie du es schreibst. Ideal für Code oder Gedichte, die auf die Magie der exakten Abstände angewiesen sind!
<pre>Nummer 1: Spell</pre>
Der stille Verzauberer
Der unscheinbare Held des Textes
Das <span>-Element ist wie ein unsichtbarer Begleiter – unauffällig, aber mächtig. Von Natur aus unsichtbar, liegt seine wahre Stärke darin, gezielt Bereiche im Text zu verzaubern, ohne die Grundstruktur zu stören. Es lässt sich wunderbar mit CSS und JavaScript kombinieren und verwandelt einfache Wörter oder Sätze in lebendige, interaktive Erlebnisse.
<span class="highlight">Peace</span>Dynamische und versteckte Inhalte
Mal sichtbar, mal verborgen
Inhalte, die sich anpassen, verschwinden oder Fortschritt zeigen.
Das Fortschritts-Element
Der treue Gefährte auf deiner Reise
Das unscheinbare, aber mächtige <progress>-Element ist wie der tapfere Begleiter, der dir stets zeigt, wie weit du auf deinem Weg gekommen bist – sei es beim Hochladen einer Datei oder beim Lesen eines Artikels. Mit etwas CSS-Magie kannst du ihm sogar eine prächtige Erscheinung verleihen, damit dein Fortschritt klar und unübersehbar wird. Es ist immer gut zu wissen, wie nah du dem Ziel bist und wie viel Abenteuer noch vor dir liegen!
<progress value="50" max="100"></progress>
Hidden
Das Unsichtbare enthüllen
Das unscheinbare, aber mächtige hidden-Attribut verleiht deinen HTML-Elementen die Fähigkeit, sich unsichtbar zu machen. Für den Benutzer verborgen, aber nicht vergessen – diese Inhalte warten darauf, durch magische Skripte oder CSS-Zauber wieder zum Leben erweckt zu werden. Ein echter Tarnumhang für deine Webseite!
<p hidden>Ich bin dann mal weg</p>
Das translate-Attribut
Der Wächter der Sprachen
Das translate-Attribut ist der strenge Wächter, der entscheidet, ob deine Worte den Zauber der automatischen Übersetzung deines Browsers widerstehen oder ihm unterliegen. Mit einem einfachen Zauberwort kannst du bestimmen, ob deine Begriffe in fremden Sprachen gesprochen werden dürfen oder ob sie ihre ursprüngliche Magie behalten. Wähle weise, denn nicht jedes Wort soll seinen wahren Glanz verlieren!
<p translate="no">Castle Eldrathor</p>
<p translate="yes">Welcome to the magical castle!</p>In dieser Lektion hast du gelernt…
- Wie du mit
<br>,<wbr>und<hr>Text auflockerst und Abschnitte trennst, um für Struktur und Lesbarkeit zu sorgen. - Warum das
<code>-Element wichtig ist, um Quelltext lesbar und klar formatiert darzustellen. Auf welche Weise du mit<bdo>die Leserichtung von Text umkehren kannst, um mehrsprachige Inhalte flexibel zu gestalten. - Wie das
<pre>-Element Leerzeichen und Zeilenumbrüche bewahrt, um formatierte Inhalte wie Code oder Gedichte korrekt anzuzeigen. - Weshalb das
<span>-Element nützlich ist, um gezielt Textbereiche für CSS oder JavaScript zu markieren, ohne die HTML-Struktur zu verändern. - Wie das
<progress>-Element den Fortschritt einer Aktion visualisiert, damit Nutzer sehen, wie weit ein Prozess fortgeschritten ist. - Warum das
hidden-Attribut sinnvoll ist, um Inhalte vor Nutzern zu verbergen, ohne sie aus dem HTML zu entfernen. - Wie das
translate-Attribut verhindert oder erlaubt, dass Inhalte von automatischen Übersetzungsdiensten umgewandelt werden.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die verborgenen Zeichen und Pfade
Seran, der uralte Waldläufer, hat in den verworrenen Tiefen von Greenwood Hollow eine Sammlung antiker Karten und Schriftrollen aufgestöbert, die, wie er glaubt, den Weg zu noch unbekannten Geheimnissen des Waldes weisen. Doch die Karten sind keine gewöhnlichen Karten, oh nein, sie sind so verschachtelt wie ein übermütiger Kobold in einem Haufen unsortierter Socken. Um diese kryptischen Pfade zu entziffern, musst du lernen, wie man HTML-Elemente wie eine richtige Landkarte benutzt – mit Absätzen, Überschriften und versteckten Anmerkungen, die den Weg weisen. Nur wer die Geheimnisse dieser digitalen Symbole versteht, wird die Pfade des Waldes freilegen und vielleicht sogar das eine oder andere vergessene Geheimnis entdecken.
Deine Aufgabe: Die Anwendung von Struktur- und Funktionselementen
Entschlüssele die Geheimnisse des Waldes
<article>
<!-- eine Abschnittsüberschrift -->
<h1>Die Karte von Greenwood Hollow</h1>
<!-- eine horizontale Linie -->
<hr>
<!-- einen spezieller Code-Bereich -->
<p>Um die verborgenen Wege zu finden, musst du den <code>geheimen Befehl</code> eingeben.</p>
<!-- Lass die Leerzeichen bestehen -->
<pre>echo "Zeige die Pfade"</pre>
<!-- Schreibs verkehrtherum -->
<p>Manchmal muss man dem rückwärts geschriebenen Text folgen, um die Wahrheit zu erkennen. Gehe zum:<bdo dir="rtl">regal</bdo>.</p>
</p>
<!-- Nutze Tooltip beim darüber hovern und einen Zeilenumbruch -->
<p>Die Karte zeigt an, dass es <abbr title="Gefährlicher Pfad">einen versteckten Pfad</abbr> gibt, <br> der schwer zu finden ist.</p>
<!-- zeige einen Fortschritt an -->
<progress value="50" max="100">50%</progress>
<!-- verstecke den Text -->
<p hidden>Diese Information ist geheim und wird nur sichtbar, wenn du sie enthüllst.</p>
<!-- der Text soll nicht automatisch übersetzt werden -->
<p translate="no">Der Name des Waldes: Greenwood Hollow</p>
</article>