HTML (HyperText Markup Language) ist eine Sprache, die auf Webseiten verwendet wird, um das Layout und den Inhalt zu formatieren. Wiki-Seiten werden im Allgemeinen mit Wikitext und nicht mit HTML verwaltet, sodass nur eine begrenzte Anzahl von HTML-Tags in Artikeln verwendet werden kann.
HTML (und Wikitext) können mit dem Quelltext-Editor von des Editors geschrieben und verwaltet werden.
Grundlagen[]
Eine Webseite ist im Kern eigentlich nur eine Textdatei, und HTML ist die Syntax, aus welcher ein Webbrowser eine recht simple Seite aufbaut.[1] Diese simple Seite wird dann mit CSS-Anweisungen weiter gestaltet. Interaktivität wird mittels JavaScript hinzugefügt.
Die Grundlage von HTML sind Tags, die oft die Form <foo>___</foo>
haben. HTML-Tags können mehrere weitere Tags oder auch puren Text umschließen. Es gibt auch Tags, die nur aus einer Komponente bestehen (<bar />
) und nichts umschließen können.
Verfügbare HTML-Tags[]
Die folgende Liste zeigt die HTML-Tags, die verwendet werden können:
<abbr>
<b>
*<bdi>
<bdo>
<blockquote>
<br />
<caption>
<cite>
<code>
<data>
*<dd>
*<del>
<dfn>
<div>
<dl>
*<dt>
*<em>
*<h1>
*<h2>
*<h3>
*<h4>
*<h5>
*<h6>
*<hr>
*<i>
*<ins>
<kbd>
<li>
*<mark>
<ol>
*<p>
*<pre>
**<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<table>
*<td>
*<th>
*<time>
<tr>
*<u>
<ul>
*<var>
<wbr />
<!-- -->
*Diese Tags sind Wikitext gegenüber gleichwertig aufgestellt, die im Allgemeinen vorzuziehen sind. Siehe #Nutzungshinweis.
**<pre> ist eigentlich ein Parser-Tag. Es wendet das HTML-Tag an, aber es werden auch alle darin enthaltenen Formatierungen außer HTML-Entities umgangen, ähnlich wie bei <nowiki>.
HTML-Attribute[]
Im öffnenden (bzw. einzelnen) Tag können vorgesehene Attribute im Format <foo attribut="wert" attribut2="wert2">___</foo>
übergeben werden, so zum Beispiel CSS-Klassen (class="warnung"
) oder CSS-Inline-Styles (style="color:pink; background-color:black;"
). Bei Tabellen sind sogar im Wikitext-Format HTML-Attribute möglich, siehe /Tabellen bzw. Hilfe:Tabellen#Inline-CSS.
Veraltete HTML-Tags[]
Veraltete HTML-Tags werden noch funktionieren, aber in zukünftigen Software-Versionen der Browser könnten sie nicht mehr unterstützt werden.
Veralteter Tag | Ersatz | Beispiel | Beispieldarstellung |
---|---|---|---|
<big>
|
<span style="font-size: larger;">
|
<span style="font-size: larger;">groß</span>
|
groß |
<center>
|
<div style="text-align: center;">
|
<div style="text-align: center;">zentriertd</div>
|
zentriert
|
<font color="x" size="y" face="z">
|
<span style="color: x; font-size: y; font-family: z;">
|
<span style="color: red;">Roter Alarm!</span>
|
Roter Alarmn! |
<span style="font-family: Times New Roman;">Das ist Times New Roman</span>
|
Das ist Times New Roman | ||
<strike>
|
del (zum Markieren und Bearbeiten)
|
<del>Ja</del> Nein
|
|
<s> (für alles andere)
|
Photonentorpedoes <s>44.99€</s> '''jetzt für 24.99€!''' je Stück
|
Photonentorpedoes | |
<tt>
|
<code> (für Quelltext bevorzugt)
|
benutze <code> </code>, um Zeilenumbrüche zu verhindern
|
benutze , um Zeilenumbrüche zu verhindern
|
<kbd> (für Benutzereingaben bevorzugt)
|
<kbd>mypasswd</kbd>
|
mypasswd | |
<var> (für Variablen bevorzugt)
|
<var>age</var>=65
|
age=65 | |
<samp> (für Computer-Ausgaben bevorzugt)
|
<samp>Ungültiges Passwort. Bitte versuche es erneut.</samp>
|
Ungültiges Passwort. Bitte versuche es erneut. | |
Ähnliches Aussehen ohne besondere Bedeutung | <span style="font-family: monospace;">Geschriebener Text</span>
|
Geschriebener Text | |
Horizontale Ausrichtung der Tabellenzellen: align=X wo X, ist "left", "center" oder "right" (manchmal ohne Anführungszeichen) |
style="text-align: X;"
|
style="text-align: right;" | rechtsbündiger Text
|
rechtsbündiger Text |
Vertikale Ausrichtung der Tabellenzellen: valign=X wo X, ist "top", "middle" oder "bottom" (manchmal ohne Anführungszeichen) |
style="vertical-align: X;"
|
style="vertical-align: top;" | oben ausgerichteter Text
|
oben ausgerichteter Text |
Hintergrundfarbe der Tabellenzelle bgcolor=X
|
style="background-color: X;"
|
style="background-color: pink" | pinker Hintergrund
|
pinker Hintergrund |
Nutzungshinweis[]
- Nutzerfreundlich gestalten
- Die Nutzung von Wikitext wird wann immer es möglich ist empfohlen, weil HTML es allgemein schwerer macht den Text zu lesen und auf neue Benutzer einschüchternd wirken kann. Komplexer Gebrauch von HTML und CSS kann in Vorlagen versteckt werden, wo sie nicht so leicht im normalen Bearbeiten einfach so verschwinden.
- Kombination mit CSS
- Styling-Informationen können in den CSS-Seiten einer Community gespeichert werden (benutze dafür Code wie
class="classname"
). Sowohl die CSS-Klassen, als auch Inline-Sytling (style="color: pink;"
) kann mit den oben aufgeführten HTML-Tags verwendet werden, und diese wiederum können mit verschiedenen Arten von Wikitext, besonders mit Tabellen, Tabellenzeilen und Tabellenzellen benutzt werden. Beachte bitte, dass der Gebrauch von Inline-Styling nur begrenzt verwendet werden sollte.
Mögliche Fehler[]
- Abschließenden Tag vergessen
- Wird ein Tag nicht richtig abgeschlossen, dann macht der Internetbrowser des Betrachters dies von sich aus automatisch, aber man weiß nicht wo. Und der VisualEditor fügt auch mal gelegentlich fehlende schließende Tags eigenmächtig zum Wikitext hinzu, und das nicht unbedingt an die gewollte Stelle!
- Sich kreuzende HTML-Tags
- Code wie etwa
<div> … <span > … </div> … </span>
ist ungültig. Tags können in andere Tags nur komplett geschachtelt werden:<div> … <span > … </span> … </div>
- Dies gilt auch bei dem Einsatz in Kombination mit Wikitabellen: Tabellen komplett zwischen die Tags, bzw. Tags komplett in eine Tabellenzelle!
Siehe auch[]
- Weitere Beispiele von veralteten HTML
- Hilfe:Tabellen
- Hilfe:Bearbeiten
- HTML im Wikitext (englisch)
- Information über die Verwendung von Span-Tags (englisch)
- https://wiki.selfhtml.org
Mehr Hilfe[]
- Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
- Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
- Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
- Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
- Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.
- ↑ Zum Veranschaulichen im Browser mal auf
Ansicht → Webseitenstil → Kein Stil