HTML

Aus IV
Zur Navigation springen Zur Suche springen
<yambe:breadcrumb>Erstellen_von_Webseiten|Erstellen von Webseiten</yambe:breadcrumb>
HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zum Strukturieren von digitalen Dokumenten. Mithilfe von HTML können Webseiten erstellt und von einem Webbrowser wie z.B. Firefox interpretiert und angezeigt werden.


Auszeichnungssprache

Als Auszeichnungssprache bezeichnet man eine formale Sprache, mit der es möglich ist, Textelementen bestimmte Eigenschaften zuzuweisen. [1]. Diese Eigenschaften werden in Form von Markierungen (engl. Markup) in den Text eingearbeitet. Derartige "Marken" oder im Englischen "Tags" genannt, bestehen in der Regel aus 2 Teilen - dem Start- und dem Endtag. [2] Um den Text der Auszeichnung vom restlichen Text zu trennen, werden hierfür Trennzeichen verwendet. Üblicherweise sind das in Auszeichnungssprachen Größer- und Kleinerzeichen. z.B.

Das vorletzte Wort in diesem Satz ist <b>fett</b> ausgezeichnet.

Als Ergebnis erhält man:
Das vorletzte Wort in diesem Satz ist fett ausgezeichnet.[3]

Das obige Beispiel zeigt eine Auszeichnung in HTML (Hypertext Markup Language) für eine Formatierung des Textes. Diese Form der Auszeichnung (Formatierung) wird physische Auszeichnung genannt und betrifft die visuelle Gestaltung des Textes (Schriftart, Farbe, Größe, etc.). Davon unterscheidet sich die logische Auszeichnung eines Textes, die die Struktur eines Dokumentes beschreibt wie z.B. Überschriften, Aufzählungen, Absätze, usw.

HTML 5

HTML, eine der bekanntesten Auszeichnungssprachen, wurde für die Gestaltung von Webseiten entwickelt und ist somit DIE Sprache des Webs. Sie wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) standardisiert und weiterentwickelt. Der aktuelle Standard ist HTML 5, welcher auch von den gängigen Browsern unterstützt wird. HTML 5 bietet vielfältige Funktionalitäten für Video, Audio, lokalen Speicher, dynamische 2D- und 3D-Grafiken, Geolokalisation, usw. Zudem ist es möglich mit HTML 5 Web-Applikationen zu erstellen, die auch offline funktionieren (Mobile Web-Apps).

Mit HTML 5 hat man zudem ein Werkzeug zur Verfügung mit dem Text, im Vergleich zu älteren HTML Versionen, besser semantisch und logisch strukturiert werden kann. Für Formatierungen sind die sogenannten Cascading Style Sheets (CSS) als eine Art Gestaltungsvorlagen vorgesehen. Mithilfe von HTML 5 und CSS ist es daher möglich, bzw. gilt dies im Webdesign mittlerweile als Standard, eine komplette, saubere Trennung zwischen logischer und physischer Auszeichnung zu erzeugen.

HTML Code

HTML-Editoren

Für das Erstellen von HTML-Dokumenten besteht einerseits die Möglichkeit, einen einfachen Texteditor zu verwenden. Dies erfordert allerdings das Beherrschen von HTML, da damit direkt der Quellcode editiert werden muss. Anderseits gibt es viele HTML-Editoren, die nach dem WYSIWIG Prinzip arbeiten. Das heißt, die Seite wird beim Bearbeiten im Editor genau so angezeigt wie beim Laden im Webbrowser. Diese Editoren bieten meist zusätzlich eine weitere Oberfläche zum direkten Editieren im Quellcode, eine gute Syntaxhervorhebung (Tags werden farblich gekennzeichnet), eine Autovervollständigung und je nach Software weitere zusätzliche Funktionen (Bearbeiten von CSS, php, etc.). HTML-Kenntnisse sind damit nicht oder nur eingeschränkt erforderlich. HTML-Editoren gibt es als eher hochpreisige Software mit umfangreicher Funktionalität (z.B. Dreamweaver) zu kaufen oder als Freeware mit unterschiedlichen Funktionen im Web (z.B. Brackets).


Grundgerüst

<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>

<h1>Überschrift 1</h1>
<p>Absatz</p>

</body>
</html>


Überschrift

Im eigentlichen Textteil <BODY> gibt es wesentlich mehr Möglichkeiten, Tags einzusetzen. Überschriften können in sechs verschiedenen Größen definiert werden, wobei die Festlegung der Schriftart und Größe für die einzelnen <Hx>-Tags an den W3-Clients eingestellt werden kann. Die Syntax lautet <Hx>text </Hx>, wobei x eine Zahl zwischen 1 und 6 ist und die Überschriften-Ebene definiert. 

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>


Text

Umlaute und Sonderzeichen werden durch spezielle Codes in der Form von &xxx; dargestellt und von den meisten HTML-Editoren automatisch konvertiert werden. Die entsprechenden Werte können aus Tabellen entnommen werden.

Zeilenschaltungen (CR) werden von W3-Clients ignoriert, d. h. der Text wird der Fenstergröße des Clients entsprechend umgebrochen. Um einen erzwungenen Zeilenumbruch durchzuführen, wird der Tag <BR> verwendet. Der Tag <P> Paragraf hat eine ähnliche Funktion, jedoch wird eine Leerzeile zusätzlich hinzugefügt.

Auch wenn die visuelle Gestaltung mit CSS erfolgen soll, besteht grundsätzlich die Möglichkeit mit HTML (noch) immer Formatierungen vorzunehmen wie z.B.: 

<B>Fettdruck (Bold)</B>
<I>Kursiv (Italics)</I>
<EM>einfache Hervorhebung (Emphasize)</EM>
<STRONG>starke Hervorhebung</STRONG>


Auflistung

Listen können als aufzählende Listen, nummerierte Listen oder beschreibende Listen ausgeführt werden. Eine aufzählende Liste startet mit dem <UL> Tag (Unnumbered List), die einzelnen Listeneinträge werden so wie bei allen anderen Listenformen mit dem <LI> Tag eingetragen und enden mit dem </UL> Tag. Sollen die einzelnen Listeneinträge durchnummeriert werden, so wird mit dem <OL> Tag (Ordered List) begonnen und mit dem </OL> Tag abgeschlossen. Einen Sonderfall stellt die beschreibende Liste <DL> (Definition List) dar, deren Listeneinträge mit dem <DD> Tag gekennzeichnet werden.


Tabellen

Tabellen können mit dem <table>Tag erzeugt werden. Jede Reihe wird durch <tr>, ein Tabellen Header mit <th> und eine Tabellenzelle mit <td> definiert. 

<table>
  <tr>
    <th>Vorname</th>
    <th>Nachname</th> 
    <th>Alter</th>
  </tr>
  <tr>
    <td>Fritz</td>
    <td>Mayr</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Susi</td>
    <td>Bauer</td> 
    <td>40</td>
  </tr>
</table>


Grafiken

Die Verwendung von Bildern ist im W3 ein wesentliches Gestaltungselement. Ein Bild kann im Format JPG, GIF oder PNG (siehe Grafikformate) mit folgendem Tag eingebunden werden: 

<img src="URL" alt="Text" style="width:width;height:height;">

Das src Attribut spezifiziert die URL (Webadresse) oder den Dateinamen bzw. die Verzeichnisstruktur, wenn das Bild in einem anderen Ordner liegt. Im alt-Tag kann man einen alternativen Text für das Bild angeben. Wenn der Browser das Bild nicht findet, wird dieser Text angezeigt. Dies ist besonders wichtig bei langsamen Verbindungen, bei einem Fehler im src oder vor allem bei NutzerInnen, die einen Screen-Reader verwenden. Mit dem style-Tag kann man die Höhe und Breite des Bildes angeben.

Beispiele:

Bild im selben Ordner: 

<img src="logo.gif" alt="Logo JKU" style="width:130px;height:40px;">

Bild in einem anderen Ordner: 

<img src="/bilder/logo.gif" alt="Logo JKU" style="width:130px;height:40px;">

Bild von einer Webadresse: 

<img src="http://www.jku.at/bilder/logo.gif" alt="Logo JKU">


Verweise, Links

Die volle Hypertextfunktionalität in HTML kommt aber erst durch die Möglichkeit des Erzeugens von Links (Querverweise) zur Geltung.

Externer Link: 

<a href="http://www.jku.at">JKU</a>

Interner Link: 

<a href="home.html">Startseite</a>

Verweis oder Sprung innerhalb einer Seite:

Kennzeichnung des Ankers: 

<h2 id="Ankername">Überschrift</h2>

Verweis auf die Stelle mit dem Anker: 

<h2 id="Ankername">Überschrift</h2>

Literatur

Quellen

  1. ↑ http://www.enzyklopaedie-der-wirtschaftsinformatik.de/lexikon/technologien-methoden/Sprache/Auszeichnungssprache
  2. ↑ http://www.netplanet.org/www/ml.shtml
  3. ↑ http://www.netplanet.org/www/ml.shtml

Weiterführende Links:

Zitiervorschlag

Bodenhofer in Höller, Informationsverarbeitung, HTML (mussswiki.idb.edu/ivwiki)

Abgerufen von „https://mussswiki.idb.edu/ivwiki/index.php?title=HTML&oldid=7515“