Gamepedia Help Wiki
Fire gi (Diskussion | Beiträge)
(HTML-Seite erstellt und Informationen hinzugefügt.)
 
Fire gi (Diskussion | Beiträge)
(Neue Informationen hinzugefügt und die Methode des Codeanzeigens verändert.)
Zeile 19: Zeile 19:
 
Ein Tag fängt immer mit dem Kleinerals-Zeichen <nowiki>(<)</nowiki> an. Nach diesem kommt der Elementname (oder auch Tag-Name). Geschlossen wird der Tag wiederum mit einem Größerals-Zeichen <nowiki>(>)</nowiki>. 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 <nowiki>(/)</nowiki> gesetzt. Schemahaft sieht ein Element mit seinen Tags und dem dazugehörigen Elementinhalt z.B. so aus:
 
Ein Tag fängt immer mit dem Kleinerals-Zeichen <nowiki>(<)</nowiki> an. Nach diesem kommt der Elementname (oder auch Tag-Name). Geschlossen wird der Tag wiederum mit einem Größerals-Zeichen <nowiki>(>)</nowiki>. 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 <nowiki>(/)</nowiki> gesetzt. Schemahaft sieht ein Element mit seinen Tags und dem dazugehörigen Elementinhalt z.B. so aus:
   
  +
<source lang="html4strict">
<br>
 
<code style="padding: 10px 20px;"><nowiki><element>Ich bin der Inhalt des Elementes.</element></nowiki></code>
+
<element>Ich bin der Inhalt des Elementes.</element>
<br>
+
</source>
   
 
==== Attribute und Werte ====
 
==== 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 <nowiki>(=)</nowiki>. Anschließend folgt der Wert innerhalb von doppelten Anführungszeichen <nowiki>(")</nowiki>. Zum Beispiel könnte das so Aussehen:
 
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 <nowiki>(=)</nowiki>. Anschließend folgt der Wert innerhalb von doppelten Anführungszeichen <nowiki>(")</nowiki>. Zum Beispiel könnte das so Aussehen:
   
  +
<source lang="html4strict">
<br>
 
<code style="padding: 10px 20px;"><nowiki><element height="200px" width="430px"> ... </element></nowiki></code>
+
<element height="200px" width="430px"> ... </element>
<br>
+
</source>
<br>
 
   
 
Dabei gibt es auch Attribute, welchen keinen Wert haben:
 
Dabei gibt es auch Attribute, welchen keinen Wert haben:
   
  +
<source lang="html4strict">
<br>
 
 
<element height="200px" width="430px" data-element> ... </element>
<br>
 
  +
</source>
<code style="padding: 10px 20px;"><nowiki><element height="200px" width="430px" data-element> ... </element></nowiki></code>
 
<br>
 
   
 
===== Universalattribute =====
 
===== 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:
 
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:
   
  +
<!-- Diese Tabelle ist zwar nicht von Nöten, sie ist aber hilfreich um sich die Attribute wieder anzusehen und somit sich zu erinnern. -->
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
Zeile 60: Zeile 59:
 
==== Reinfolge und Verschachtelung ====
 
==== 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:
 
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:
  +
<br>
 
  +
<source lang="html4strict">
<code><nowiki><b>ich bin fett
 
<u> ich bin fett und unterstrichen </u>
+
<b>ich bin fett
ich bin fett
+
<u>ich bin fett und unterstrichen</u>
  +
ich bin fett
</b></nowiki></code>
 
 
</b>
  +
</source>
  +
  +
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.
  +
  +
<div class="toccolours mw-collapsible mw-collapsed" style="width:600px; overflow:auto;">
  +
'''Beispiel:'''
  +
<div class="mw-collapsible-content">
  +
<source lang="html4strict">
  +
<p>Hier sind ganz viele Leerzeichen.</p>
  +
</source>
  +
  +
Wird zu:
  +
  +
<p>Hier sind ganz viele Leerzeichen.</p>
  +
</div>
  +
</div>
  +
==== 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 und sie als Text darstellen zu können. 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. <nowiki>&lt;</nowiki> 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 <code><!--</code> an und hören mit einem <code>--></code> auf. Innerhalb dieser beiden Teile kommt der Kommentar, welcher auch Mehrzeilig sein kann.

Version vom 5. Februar 2020, 15:30 Uhr

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.

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 und sie als Text darstellen zu können. 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 auf. Innerhalb dieser beiden Teile kommt der Kommentar, welcher auch Mehrzeilig sein kann.