Gamepedia Help Wiki
Advertisement
Dies ist das offizielle HTML5 Logo.

HTML (Hyper Texting Markup Language) ist die Struktur, auf der fast alle Websites basieren. Diese Syntax wird genutzt, damit die Browser verstehen können, wie diese die Website anzeigen sollen. Mit CSS (Cascading Style Sheet) kann man diesen stylen und somit dem Browser sagen, wie das Dokument aussehen soll.

Warum sollte man HTML benutzen[]

  • Man muss HTML nicht nutzen, aber es hat den Vorteil, dass man die Elemente, welche es in der Syntax gibt so wie man möchte nutzen kann. Durch CSS kann man diese Teile auch ein gutes Aussehen geben.
  • Man kann mit HTML Kommentare erstellen, welche man nur beim bearbeiten lesen kann und nicht auf der Website gezeigt werden. Dadurch kann man sich selber, oder anderen, die Möglichkeit geben das, was man geschrieben hat zu verstehen.

Wie kann man HTML benutzen[]

  • Dadurch, dass die Syntax von der Wiki kompiliert wird kann man HTML einfach in dem Editor nutzen.

Erlaubte HTML Tags[]

Manche HTML tags sind erlaubt, zum Beispiel: <code>, <div>, <span> und <font>. Diese gelten überall dort, wo sie eingefügt werden.

Beschreibung Du schreibst Du bekommst
Unterstrichen
(Wird in den meisten Browsern als Unterstreichung angezeigt)
<ins>Eingefügt</ins>

oder

<u>Unterstrichen</u>

Eingefügt

oder

Unterstrichen

Durchgestrichen
(Wird in den meisten Browsern durchgestrichen angezeigt)
<s>Durchgestrichen</s>

oder

<del>Gelöscht</del>

Durchgestrichen

oder

Gelöscht

Text mit fester Breite
<code>Quellcode</code>

oder

<code>Text mit fester Breite</code>

Quellcode

oder

Text mit fester Breite

Blockquotes
Text vor der Blockquote
<blockquote>Blockquote</blockquote>
Text nach der Blockquote

Text vor der Blockquote

Blockquote

Text nach der Blockquote

Kommentar
<!-- Das ist ein Kommentar -->
Kommentare sind nur 
beim editieren ersichtlich.

Kommentare sind nur beim editieren ersichtlich.

Vollständig vorformatierter Text
<pre> Text ist '''vorformatiert''' und
''Markups'' ''können nicht'''' ausgeführt werden</pre>

 Text ist '''vorformatiert''' und
''Markups'' ''können nicht'''' ausgeführt werden
Angepasster vorformatierter Text
<pre style="color: red">
Text ist mit einem Stil '''vorformatiert''' 
und
''Markups'' '''''können nicht''''' ausgeführt werden.
</pre>

Text ist mit einem Stil '''vorformatiert''' 
und
''Markups'' '''''können nicht''''' ausgeführt werden.


HTML Syntax[]

In HTML werden verschiedene Elemente, Tags, Attribute und Werte angegeben. Diese werden in dem reinen Textformat angegeben, da HTML kein binäres Format ist. Das bedeutet, dass es verschiedene Zeichen gibt, die verschiedenes bedeuteen.

Elemente und Tags[]

Elemente sind die wichtigsten Grundpfeiler von HTML. Ein Element ist eine Einheit die eine bestimmte Struktur oder Objekt darstellt. Ein Element ist z.B. ein Bild oder ein Button, aber auch ein Absatz. In HTML gibt es eine ganze Reihe von Elementen die verwendet werden können - die meisten werden Sie im Verlauf kennen lernen.

Außerdem gibt es noch die Tags. Dieses is im Grunde auch ein Element, nur der Unterschied besteht darin, dass der Tag eine spezifischere Wortwahl ist. Dies bedeutet, dass das Tag ein Teil des Elementes ist. (Oft besteht ein Element aus zwei Tags, aber dies kommt immer auf den Anwendungsfall an)

Tags notieren[]

Ein Tag fängt immer mit dem Kleinerals-Zeichen (<) an. Nach diesem kommt der Elementname (oder auch Tag-Name). Geschlossen wird der Tag wiederum mit einem Größerals-Zeichen (>). Damit ein Unterschied zwischen öffnendem und schließendem Tag ersichtlich wird (falls es zwei Tags gibt, welche einen Bereich umklammern), wird vor dem Namen des schließenden Tags ein Slash (/) gesetzt. Schemahaft sieht ein Element mit seinen Tags und dem dazugehörigen Elementinhalt z.B. so aus:

<element>Ich bin der Inhalt des Elementes.</element>

Attribute und Werte[]

In HTML besitzen die meisten Elemente Attribute. Ein Attribut ist eine Eigenschaft des Elementes, wobei auch mehrere gesetzt werden können. So ist z.B. ein Attribut eines Bildes dessen Zieldatei und/oder dessen Größe (Wobei dabei oft zwei verschiedene Attribute verwendet werden: Breite und Höhe). Attribute werden immer innerhalb des öffnenden Tags aber nach dem Elementnamen hinzugefügt. Ein Attribut setzt sich dabei zumeist aus einem Attributnamen und einem Wert (z.B. die Größe des Bildes in Pixeln) zusammen. Dabei wird als erstes der Attributname notiert, gefolgt von einem Gleich-Zeichen (=). Anschließend folgt der Wert innerhalb von doppelten Anführungszeichen ("). Zum Beispiel könnte das so Aussehen:

<element height="200px" width="430px"> ... </element>

Dabei gibt es auch Attribute, welchen keinen Wert haben:

<element height="200px" width="430px" data-element> ... </element>
Universalattribute[]

Natürlich besitzt nicht jedes Element die gleichen Attribute (warum sollte man auch bei einer Grafik die Schriftgröße definieren wollen) - in HTML sind diese fest definiert und vorgeschrieben. Allerdings gibt es einige Attribute, die bei fast allen bzw. sehr vielen Elementen gesetzt werden können. Diese sind:

Attribut Beschreibung
id Der Inhalt dieses Attributes darf nur einmal in dem Dokument vorkommen und ist ein genauer Zeiger auf das HTML-Element. Mit diesem kann man zum Element springen.
class Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben.
name Ist ähnlich zu dem id-Attribut. Es gibt dem Element einen eindeutigen Namen innerhalb des Dokuments.
style Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben.
title Gilt als Zusatzinformation für das Element. Dies ist für die Suchmaschine, sowie dem Nutzer, denn jedem, welcher über eine längere Zeit mit der Maus über das Element hovert wird dieser Text angezeigt.
lang Als Wert wird ein Sprachkürzel (de, en, fr, ...) notiert. Das Attribut ist dazu gedacht, den Elementinhalt eindeutig einer Sprache zuordnen zu können. Dies wird von Übersetzern, sowie Suchmaschinen genutzt.

Reinfolge und Verschachtelung[]

Ebenso wie in jeder Programmiersprache braucht auch HTML eine gewisse Reihenfolge und Struktur. In HTML gibt es unter anderem die Elemente u und b. u veranlasst, dass der Elementinhalt unterstrichen dargestellt wird - b veranlasst, dass dieser Text fett dargestellt wird. Will man beide Eigenschaften kombinieren und fetten unterstrichenen Text produzieren, so müssen beide Elemente ineinander verschachtelt werden. Das könnte dann z.B. so aussehen:

<b>ich bin fett 
<u>ich bin fett und unterstrichen</u>
ich bin fett
</b>

Wie hier abgebildet sind Elemente immer ineinander verschachtelt und die Elemente geben ihre Attribute ineinander weiter. Dies kann für die verschiedensten Dinge genutzt werden.

Whitespaces[]

Whitespaces sind alle nicht sichtbaren Zeichen, wie Leerzeichen, Zeilenumbruch, Rücklauf oder Tab. Hier ist es wichtig zu wissen, was mit diesen geschieht. Der HTML-Parser (das Programm das den Quellcode analysiert) ist grundsätzlich dazu angewiesen mehrere Whitespaces zu einem einzelnen zusammen zu fassen, sofern es nicht besonders vermerkt wird. In der Praxis bedeutet das: Egal wie viele Leerzeichen zwischen zwei Wörtern gesetzt wird, es wird nur ein Leerzeichen angezeigt.

Beispiel:

<p>Hier sind                ganz viele Leerzeichen.</p>

Wird zu:

Hier sind ganz viele Leerzeichen.

Sonderzeichen[]

Da unter anderem die Zeichen Größer als und Kleiner als für die HTML-Syntax reserviert sind, braucht es eine Möglichkeit diese dennoch schreiben zu können um sie darzustellen. Für diese und alle anderen Zeichen gibt es besondere Regeln, wie Sonderzeichen notiert werden können. In HTML werden alle Sonderzeichen mit einem Kaufmanns-Und (&) begonnen und enden mit einem Semikolon (;). Dabei gibt es zwei Sorten der Definition von Sonderzeichen: als Unicode-Zeichen und als Name-Zeichen. Der Unicode-Wert kann wiederum als Dezimal- oder Hexadezimalwert angegeben werden. Für das Kleinerals kann man z.B. < oder < notieren - bei der Darstellung im Browser erscheint dann jeweils das < als Textzeichen.

Kommentare[]

Kommentare sind Teile des Dokumentes, welche der Parser nicht in den Speicher gibt. Diese Teile des Codes sind für den, der den Text/das Dokument schreibt um sich Notizen für eine Stelle zu machen, oder einen Teil auszukommentieren und somit für den Browser unsichtbar zu machen. Diese fangen immer mit einem <!-- an und hören mit einem --> auf. Innerhalb dieser beiden Teile kommt der Kommentar, welcher auch Mehrzeilig sein kann.

CSS[]

Dies ist das CSS3-Logo.

CSS (Cascading Style Sheet) ist eine Art das Design einer Website zu bestimmen. CSS kann im HTML direkt eingebunden werden, wobei die Methode mit einer externen Datei deutlich beliebter ist. CSS ist ein textbasiertes Dateiformat, was bedeutet, dass man es einfach in einem Texteditor verändern kann.


Mehr dazu



Advertisement