HTML - Veraltete Tags
Hallo, angehende Web-Entwickler! Heute tauchen wir in einen faszinierenden Aspekt von HTML ein: veraltete Tags und Attribute. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Also hol dir einen Kaffee (oder dein Lieblingsgetränk) und lassen wir die Welt der HTML-Elemente erkunden, die aus der Mode gekommen sind.
Was sind veraltete Tags?
Bevor wir ins Detail gehen, lassen wir uns klar machen, was "veraltet" im Kontext von HTML bedeutet. Denke daran als die Art und Weise, wie das Web sagt: "Danke für deinen Dienst, aber es ist Zeit in den Ruhestand zu gehen." Veraltete Tags sind HTML-Elemente, die früher häufig verwendet wurden, aber jetzt nicht mehr empfohlen oder in neueren HTML-Versionen nicht mehr unterstützt werden.
Warum geschieht das, fragst du dich? Na ja, da sich das Web weiterentwickelt, finden wir bessere, effizientere Wege, um Inhalte zu strukturieren und zu gestalten. Es ist wie der Umstieg von einem Klapphandy auf ein Smartphone – sicher, das alte funktioniert immer noch, aber das neue kann so viel mehr!
HTML-Veraltete Tags
Schauen wir uns einige der häufigsten veralteten Tags an. Ich zeige dir Beispiele, wie sie verwendet wurden und was wir stattdessen jetzt benutzen.
Das <center>-Tag
Es war einmal, wenn du deinen Text zentrieren wollte, hast du das <center>-Tag verwendet. Es sah so aus:
<center>Dieser Text ist zentriert</center>Heutzutage erzielen wir das gleiche Ergebnis mit CSS:
<p style="text-align: center;">Dieser Text ist zentriert</p>Oder besser noch, in einer separaten CSS-Datei:
.center-text {
text-align: center;
}<p class="center-text">Dieser Text ist zentriert</p>Das <font>-Tag
Erinnern wir uns an die Zeiten, als wir Schriftarten direkt in HTML änderten? Das <font>-Tag war unser Standard:
<font face="Arial" color="blau" size="3">Dies ist blauer Arial-Text</font>Jetzt verwenden wir CSS für alle unsere Stylisierungsanforderungen:
<p style="font-family: Arial; color: blau; font-size: 16px;">Dies ist blauer Arial-Text</p>Die <big> und <small>-Tags
Diese wurden verwendet, um die Textgröße zu ändern:
<big>Dieser Text ist größer</big>
<small>Dieser Text ist kleiner</small>In modernem HTML und CSS:
<span style="font-size: 1.2em;">Dieser Text ist größer</span>
<span style="font-size: 0.8em;">Dieser Text ist kleiner</span>HTML-Veraltete Attribute
Es sind nicht nur Tags, die veraltet werden können; Attribute auch! Schauen wir uns einige Beispiele an.
Das align-Attribut
Wir haben früher Bilder so ausgerichtet:
<img src="katze.jpg" align="rechts" alt="Eine süße Katze">Jetzt verwenden wir CSS:
<img src="katze.jpg" style="float: right;" alt="Eine süße Katze">Das bgcolor-Attribut
Erinnern wir uns daran, wie wir Hintergrundfarben so gesetzt haben?
<body bgcolor="hellblau">
Willkommen auf meiner Website!
</body>Heutzutage ist alles um CSS herum:
<body style="background-color: hellblau;">
Willkommen auf meiner Website!
</body>Warum sollten wir veraltete Tags und Attribute vermeiden?
- Browser-Unterstützung: Neueren Browsern könnte die Unterstützung für diese alten Tags und Attribute fehlen.
- Trennung von Koncernen: Es ist besser, Struktur (HTML) von Stil (CSS) zu trennen.
- Zugänglichkeit: Viele veraltete Elemente sind nicht benutzerfreundlich für Screen-Reader.
- Wartbarkeit: Die Verwendung aktueller Standards macht deinen Code einfacher zu aktualisieren und zu warten.
Ein nostalgischer Rückblick: HTML-Veraltete Webseite
Lassen wir uns auf eine nostalgische Reise begeben und eine Webseite mit veralteten Tags und Attributen erstellen. Dann werden wir sie modernisieren.
Der alte Weg
<html>
<head>
<title>Meine coole 90er-Website</title>
</head>
<body bgcolor="zyan">
<center>
<font face="Comic Sans MS" size="6" color="violett">
Willkommen auf meiner großartigen Website!
</font>
</center>
<hr width="50%" color="rot">
<p><b>Hier sind meine Lieblingssachen:</b></p>
<ul>
<li><font color="grün">Videospiele spielen</font></li>
<li><font color="blau">Pizza essen</font></li>
<li><font color="rot">Filme anschauen</font></li>
</ul>
<p align="rechts"><i>Dankeschön für deinen Besuch!</i></p>
</body>
</html>Der moderne Weg
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine coole moderne Website</title>
<style>
body {
background-color: zyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: violett;
}
hr {
width: 50%;
background-color: rot;
height: 2px;
border: none;
}
.green { color: grün; }
.blue { color: blau; }
.red { color: rot; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>Willkommen auf meiner großartigen Website!</h1>
<hr>
<p><strong>Hier sind meine Lieblingssachen:</strong></p>
<ul>
<li class="green">Videospiele spielen</li>
<li class="blue">Pizza essen</li>
<li class="red">Filme anschauen</li>
</ul>
<p class="right-align"><em>Dankeschön für deinen Besuch!</em></p>
</body>
</html>Fazit
Und das war's, Leute! Wir sind durch die Zeit gereist, von den wilden Westtagen des HTML bis zur schicken, modernen Webwelt, die wir heute kennen. Erinnere dich daran, dass es zwar Spaß macht, diese alten Tags und Attribute zu betrachten, aber es ist entscheidend, mit den aktuellen Standards Schritt zu halten.
Als wir schließen, hier ist eine praktische Tabelle, die die veralteten Tags und Attribute und ihre modernen Alternativen zusammenfasst:
| Veraltetes Tag/Attribut | Moderne Alternative |
|---|---|
<center> |
text-align: center; (CSS) |
<font> |
CSS-Eigenschaften (font-family, color, font-size) |
<big>, <small>
|
font-size (CSS) |
align Attribut |
CSS Positionierung (text-align, float) |
bgcolor Attribut |
background-color (CSS) |
Denke daran, HTML wie eine neue Sprache zu lernen – es erfordert Zeit, Übung und Geduld. Sei nicht afraid to experiment and make mistakes – that's how we all learn! Keep coding, keep creating, and most importantly, have fun with it!
Credits: Image by storyset