227 % mehr Umsatz durch Mobile Marketing*

HTML

Aus Marketing United
Wechseln zu:Navigation, Suche
Hinweis:
Diese Seite ist eine persönliche Sammlung zu Infos rund um HTML.
Sie hat weder den Anspruch auf Vollständigkeit, noch auf vollständige Richtigkeit :)
Trotzdem wird der ein oder andere hier vielleicht noch ein paar wertvolle Infos oder Links rausziehen können.


1 Allgemeines

1.1 Begriffe rund um HTML

  • Container = HTML-Tags die sich öffnen und schließen, also immer in zweifacher Form auftreten -
    Beispiel: <head> ... </head>
  • Leere Elemente = Tags, die einfach vorkommen -
    Beispiele:
    • Zeilenumbruch <br />
    • horizontale Linie <hr />
    • Input-Feld <input .../>
  • In HTML werden grundsätzlich zwei Arten von Tags unterschieden: Block-Elemente und Inline-Elemente. Die Unterschiede zwischen diesen Elementtypen werden hier sehr gut beschrieben.

1.2 Attribute und Werte

Ein HTML-Tag kann Attribute und Werte haben. Beispielsweise hat der Code <input size="30" /> das Attribut "size", dem der Wert "30" zugewiesen wird. Attribute werden auch als "Eigenschaften" bezeichnet.

Regeln für Attribute und Werte:

  • Die Zuweisung eines Wertes an ein Attribut erfolgt immer mit Gleichheitszeichen.
  • Werte sollten immer in Anführungszeichen geschrieben werden (wegen der besseren Kompatibilität mit den Standards).
  • Ein Wert darf kein Leerzeichen beinhalten (sonst wird es vom Browser nicht verstanden).

1.3 Tags

  • Für Fettschrift wird das Tag <strong> empfohlen, da es im Gegensatz zu <b> zum Beispiel auch von Audio-Programmen, die Websites vorlesen, verstanden wird.
  • Aus den gleichen Gründen ist für Kursivschrift das Tag <em> dem Standard-Tag <i> vorzuziehen.
  • Um Text hochzustellen kann das <sup>-Tag genutzt werden.
    Beispiel: E = m*c<sup>2</sup> wird zu E = m*c2

2 Schriften

2.1 Schriftarten

Typische Sätze von Schriftarten:

  • sans-serif-Schriften: font-family: Verdana, Geneva, Arial, sans-serif;
  • serif-Schriften: font-family: Georgia, 'Times New Roman', Times, serif;

Die Schriftart kann Folgendermaßen per CSS geändert werden. Beispiel:
<span style="font-family: 'Times New Roman', Times, serif">kleiner Beispieltext in Times New Roman</span>


Wissenswertes:

  • Wenn der Name eine Schriftart mehr als ein Wort hat muss er in Anführungszeichen gesetzt werden.


Weblinks:

2.2 Schriftgröße

Die endgültigen Schriftgrößen sind immer von den Browser-Einstellungen deiner Besucher abhängig.
Deshalb ist es empfehlenswert mit relativen Schriftgrößen zu arbeiten.
Diese kann man folgendermaßen angeben:

  • in %
  • in "em" (1 em steht dabei für 100 %)
  • mit den Bezeichnern xx-large, x-large, large, medium (entspricht 100 %), small, x-small, xx-small

100 % oder 1 em oder medium bedeutet, dass die Schrift in der Größe erscheint, die der Besucher in seinem Browser als Standard eingestellt hat.
Die Bezeichner xx-large bis xx-small haben gegenüber der Angabe in % oder em den Vorteil, dass der Browser die Schriftart nie zu klein werden lässt. Auch eine Schrift mit xx-small bleibt noch in jedem Browser leserlich. Dagegen kann eine Angabe wie 0.7 em (also 70 % der Standardgröße) auf manchen Systemen schon unleserlich werden.

Absolute Schriftgrößen mit Angaben in Pixeln sollten nie für Websites verwendet werden. Die Schriftgrößen wären dann nämlich abhängig von der Bildschirmgröße und diese kann heutzutage sehr variieren (LCD-Monitore vs. mobile Geräte). Absolute Schriftgrößen machen bloß in Print-Medien Sinn.

Weblinks:

3 Allgemeine Formatierung

3.1 Farben

Die Farbangaben in HTML bestehen aus sechs hexadezimalen Ziffern.
Die ersten beiden Ziffern bestimmen den Rotwert, die nächsten beiden den Grünwert und die letzten beiden den Blauwert der Schriftfarbe.

Das Standard-Rot trägt folgerichtig die Komination #ff0000, Grün ist #00ff00 und Blau hat den Hex-Wert #0000ff. Natürlich können die RGB-Farben miteinander kombiniert werden. So ergibt zum Beispiel #ff00ff die Farbe Magenta (Rot und Blau zusammen).

Für Rot, Grün und Blau stehen jeweils 8 bit, d.h. jeweils 256 verschiedene Farbtöne zur Verfügung. Insgesamt stehen dem Webdesigner damit 3 x 8 = 24 bit Farbtiefe zur Verfügung. Das ergibt exakt 2563 = 16,777,216 verschiedene Farbkombinationen. Sie reichen von reinem Weiß (#ffffff) zu reinem schwarz (#000000).

Zur Farbgebung dient das "style"-Attribut. Bereiche, die man farbig gestalten will, werden in Tags eingeschlossen, zum Beispiel in span-Tags für Zeichenfolgen im Fließtext oder p-Tags für ganze Absätze.
Beispiele:

HTML-Code Ergebnis
<span style="color:#006400;"> grüner Text </span> grüner Text
<p style="color:darkgreen;"> grüner Absatz </p>

grüner Absatz

<span style="background-color:#FFFF00;"> Markierter Text </span> Markierter Text

Weitere Facts zur HTML-Farbnotation:

  • Es spielt keine Rolle ob man die hexadezimalen Ziffern a,b,c,d,e,f groß oder klein schreibt.
  • Wenn eine Farbangabe nur aus 3 Hex-Ziffern besteht, so verdoppelt der Browser die Ziffern jeweils.
    Beispiel: der verkürzte Farbcode #06f steht für #0066ff

Weblinks:

3.2 Ausrichtung und Positionierung von Elementen

Ausführliche Beschreibung der Positionierungs-Möglichkeiten mit HTML auf SELFHTML: de.selfhtml.org/css/eigenschaften/positionierung.htm

Einige Infos zur Ausrichtung und Positionierung von Elementen in Kürze:

  • Das div-Element wird weiterhin zum HTML-Standard gehören, das Attribut align ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollte man mit Stylesheets arbeiten.
  • Um Elemente horziontal auszurichten dient der Wert "text-align" im style-Attribut.
    Mit <div style="text-align:center;">zentriert</div> richtet man beispielsweise Elemente (Text, Bilder, etc.) horizontal aus.
  • Ein nützlicher Wert innerhalb des style-Attributs ist "float". Damit kann man für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.
    Beispiel:
    <img src="http://www1.belboon.de/adtracking/02d7710854a6024bfe003f18.img" style="float:right"> ergibt:
    weitere Infos zu "float": de.selfhtml.org/css/eigenschaften/positionierung.htm#float
  • Das Attribut "padding" verändert die Größe von div-Containern.

3.3 div vs. span

Die beiden HTML-Elemente div und span sind selber relativ eigenschaftslos und werden deshalb für CSS eingesetzt.

Unterschied zwischen div und span:

  • Das div-Element erzwingt eine neue Zeile im Textfluss.
  • Das span-Element erzeugt keinen neuen Absatz und kann deshalb innerhalb eines Textes verwendet werden.

Weitere Infos:

  • Das div-Element eignet sich vor allem dafür, mehrere Elemente zu gruppieren und diese gemeinsam zu formatieren. Mit dem span-Element lassen sich kleinere Teilbereiche definieren, die mit CSS gestaltet werden können.
  • Innerhalb eines span-Elementes kann kein div-Element vorkommen.


4 Textformatierung

4.1 Entities

Als Entities bezeichnet man innerhalb HTML-Code, der Sonderzeichen darstellt.

Die folgende Tabelle zeigt einige der gebräuchlichsten HTML-Entities:

Entity Sonderzeichen
&Auml; Ä
&auml; ä
&Ouml; Ö
&ouml; ö
&Uuml; Ü
&uuml; ü
&amp; & (ampersand)
&gt; > (greather than)
&lt; < (lower than)
&quot; " (quotation marks)
&szlig; ß (scharfes s)
&nbsp; (geschütztes) Leerzeichen
&euro; € (Eurozeichen)

Grundsätzlich kann mit Hilfe von Entities jedes Unicode-Zeichen dargestellt werden.
Dazu stellt man der Zahl des gewünschten Zeichens einfach den Code &# an und fügt anschließend noch ein Semikolon an.

Der geschützte Bindestrich hat beispielsweise die Zahl 8209 (dezimal) bzw. 2011 (hexadezimal).
Daraus ergibt sich also das Entity &#8209; bzw. &#x2011;.

Weblinks:

4.2 Leerzeichen

Wenn im HTML-Quelltext mehrere Leerzeichen hintereinander vorkommen, so werden diese zu einem Leerzeichen reduziert.
Zur expliziten Darstellung eines Leerzeichens gibt es die Entity &nbsp;. Es wird auch als "geschütztes Leerzeichen" bezeichnet und kann verwendet werden um Zeilenumbrüche zwischen zwei Wörtern (zum Beispiel einen Firmennamen) zu verhindern.

4.3 Zeilenumbrüche

In Abhängigkeit der Fenstergröße werden Zeilenumbrüche des Textes vom Browsers selbsttätig vorgenommen.
Die Zeilenumbrüche, die im HTML-Editor vorgenommen wurden, werden dabei nicht beachtet.
Für einen expliziten Zeilenumbruch kann das Tag <br /> genutzt werden.
Mit dem Container <p>...</p> kann ein neuer Absatz begonnen werden.


5 Sonstiges

5.1 Bilder

  • Sollte der Browser das Bild nicht darstellen können (zum Beispiel weil die Bild-URL fehlerhaft ist), so wird der Wert des Attributs "alt" ausgegeben.
  • Wenn ein Bild gleichzeitig als Link eingesetzt wird, sollte man darauf achten, das Attribut "border" auf 0 zu setzen. Andernfalls erscheint ein nicht so schöner Rahmen um das Bild.
  • Mit Hilfe von Image Maps kann man einzelne Bereiche eines Bildes mit (unterschiedlichen) Hyperlinks verbinden. Man nennt die verlinkten Stellen eines Bildes auch Hotspots.

5.2 Formulare

Formularen dienen vor allem dazu, Anwenderdaten an den Server zu übermitteln. Dort werden die Daten von einem Serverprogramm, das zum Beispiel in PHP oder Perl geschrieben sein kann, ausgewertet.

Formulare können auf Anwender-Seite auch zur dynamischen Seitensteuerung mit Hilfe von JavaScript genutzt werden.

5.3 Links

5.4 Tabellen

  • Wichtig:
    Man sollte Tabellen ausschließlich für Daten verwenden, nicht für Layouts. Für Layouts sollte man lieber mit div-Containern arbeiten. Wenn man Tabellen fürs Layouten benutzt, kann dies zu Problemen führen wenn die Webseite per CSS geändert wird. Dies ist zum Beispiel dann der Fall, wenn eine Website auf einem mobilen Geräten angezeigt wird.
  • Wenn man Tabellen mit Rahmen verwendet, sollten Zellen, die keinen Inhalt besitzen, mit einem expliziten Leerzeichen &nbsp; versehen werden.
  • Es ist möglich Tabelleneinträge über mehrere Spalten und/oder Zeilen auszustrecken. Dazu werden innerhalb des <th> oder <td>-Containers die Attribute colspan="s" bzw. rowspan="z" verwendet. Einträge erstrecken sich damit über s Spalten bzw. z Zeilen. Für die "eingesparten" Zellen dürfen dann in der Tabellendefinition keine Einträge angegeben werden.
  • Tabellenzellen können kein CSS-Attribut margin haben, padding ist jedoch erlaubt.
  • Ausrichtung von Tabellen-Zellen

5.5 Listen

In HTML kann man unnummerierte Listen (Container <ul>...</ul>) und nummerierte Listen (Container <ol>...</ol>) erstellen. Die einzelnen Listeneinträge werden mit dem Container <li>...</li> gekennzeichnet.

6 Weblinks

6.1 Artikel

7 Weiterführendes

7.1 Tools

  • HTML.am - Online HTML-Generator Englisch Bleistift.png
  • HTML5 Boilerplate - HTML-Package um schnell Websites aufzusetzen - gut für Landingpages geeignet Englisch Bleistift.png
  • HTMLPad - Intelligenter HTML-, CSS- und JavaScript-Editor Bleistift.png


Erzähl's weiter:

Wir freuen uns über deinen Kommentar: