HTML: Unterschied zwischen den Versionen

Aus IV1
Zeile 129: Zeile 129:
===Aufbau===
===Aufbau===
HTML 5 besteht aus mehreren Spezifikationen und Dokumenten. Die folgende Grafik veranschaulicht die zahlreichen Spezifikationen von W3C, WHATWG (Web Hypertext Application Technology Working Group, http://www.whatwg.org/) und anderen Arbeitsgruppen welche in die Gesamtheit von HTML 5 bilden
HTML 5 besteht aus mehreren Spezifikationen und Dokumenten. Die folgende Grafik veranschaulicht die zahlreichen Spezifikationen von W3C, WHATWG (Web Hypertext Application Technology Working Group, http://www.whatwg.org/) und anderen Arbeitsgruppen welche in die Gesamtheit von HTML 5 bilden
[[Datei:HTML5_Uebersicht.png]]<Ref>Abbildung: http://commons.wikimedia.org/wiki/File:HTML5-Spezifikations-%C3%9Cbersicht.svg am 24.08.2013</Ref>


Abbildung: HTML5 Strukturübersicht<Ref>http://commons.wikimedia.org/wiki/File:HTML5-Spezifikations-%C3%9Cbersicht.svg am 24.08.2013</Ref>
[[Datei:HTML5_Uebersicht.png]]


===Wichtige Neuheiten===
===Wichtige Neuheiten===
Zeile 163: Zeile 164:
Mit der File API können im Browser clientseitig Dateien verarbeitet werden. Damit wird es einfacher, Webapplikationen zu schreiben, die zum Beispiel MP3-Tags lesen können oder Downloads am Client gleich gezippt ausliefern.
Mit der File API können im Browser clientseitig Dateien verarbeitet werden. Damit wird es einfacher, Webapplikationen zu schreiben, die zum Beispiel MP3-Tags lesen können oder Downloads am Client gleich gezippt ausliefern.


Abbildung: Beispiel für ein canvas Element.<Ref>Abbildung: Beispiel „canvas“, https://developer.mozilla.org/ am 27.08.2013</Ref>
Abbildung: Beispiel für ein canvas Element.<Ref>https://developer.mozilla.org/ am 27.08.2013</Ref>
 
[[Datei:canvas.png]]
[[Datei:canvas.png]]


Version vom 4. September 2013, 20:41 Uhr

HTML steht für Hypertext Markup Language und ist im Grunde keine Programmiersprache, sondern eine Auszeichnungssprache. Dies bedeutet, dass Dokumentinhalte mit sogenannten "Tags" beschrieben werden. Bei diesen "Tags" gibt es eine Vielzahl an Möglichkeiten, Dokumentinhalte zu beschreiben.



Grundkonzepte der Hypertext Markup Language

Im Vergleich zu einem herkömmlichen Desktop-Publishing-Programm sind den Gestaltungsmöglichkeiten im W3 noch gewisse Grenzen gesetzt. Die Entwicklung und Normung von HTML ist aber einem steten Erweiterungsprozess unterworfen, wobei neben dem aktuellen Standard HTML 4.01 bzw. xHTML 1.0 von einzelnen Client-Entwicklern vom Standard abweichende Zusatzfeatures implementiert werden. Mit einer weitgehenden Unterstützung der durch das W3C bereits standardisierten CSS-2 ist dadurch echte Seitengestaltung bei Web-Seiten möglich.

Genau betrachtet, müsste es eigentlich Hypermedia Markup Language heißen, da viele Dokumente im W3 hypermedial, mit eingebetteten Grafiken, Links auf Videos, Animation, Sound und dynamischen Inhalten gestaltet sind. Ein weiterer oft benutzter Ausdruck ist Dynamic-HTML (DHMTL). Dabei handelt es sich aber um keine neue Sprachversion oder einen Standard, sondern um eine marketingorientierte Bezeichnung der großen Browserhersteller. Gemeint sind damit die Möglichkeiten, dynamische Inhalte in einfachen HTML-Codes einzubinden. Mit der Abkehr von proprietären Entwicklungen und der zunehmenden Unterstützung des gesamten HTML-Sprachumfanges, von Stylesheets, standardisierten Skripting bzw. Programmiersprachen in aktuelle Webbrowser ist das Schlagwort DHMTL als Mittel zur Produktdifferenzierung jedoch in den Hintergrund geraten.

W3C

Das World Wide Web Consortium (kurz: W3C) ist das Gremium zur Standardisierung der das World Wide Web betreffenden Techniken. Es wurde 1994 gegründet. Gründer und Vorsitzender des W3C ist Tim Berners Lee, der auch als der Erfinder des World Wide Web bekannt ist. Standardisierte Techniken sind

  • HTML
  • XML
  • CSS und so weiter.

HTML Code

Grundgerüst

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
	<head> 
	<title>
		Titel der Webseite
	</title>
 	<!-- Evtl. weitere Kopfinformationen --> 
	</head>

 	<body> 
		Inhalt der Webseite 
	</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.

Um Textteile durch ein horizontale Linie zu trennen, wird der <HR> Tag eingesetzt. Zur Zeichenformatierung werden sogenannte Stil-Tags eingesetzt, deren wichtigste folgende sind: 

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

Um einen Text genauso darzustellen, wie er eingegeben wurde, inklusive aller Leerzeichen, Zeilenschaltungen, Tabulatoren etc. wird der <PRE> (preformated) Tag verwendet.

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.

Grafiken

Eingebettete Grafiken (Inline Images) und Multimediaobjekte. Ein Bild sagt mehr als tausend Worte und so ist auch im W3 die Verwendung von in das HTML-Dokument eingebetteten Grafiken ein wesentliches Gestaltungselement. Mit dem <IMG SRC=”image_URL” ALIGN = TOP/MIDDLE/BOTTOM> Tag können Grafiken im GIF-, JPEG- oder X-Bitmap Format in ein Dokument eingebunden werden. Mit dem optionalen ALIGN wird festgelegt, ob der folgende Text oben, in der Mitte oder unten an das Bild gestellt werden soll.

Verweise

Die volle Hypertextfunktionalität in HTML kommt aber erst durch die Möglichkeit des Erzeugens von Links (Querverweise) zur Geltung. Links werden mit dem <A> Tag (Anchor) hergestellt. Um externe Links zu realisieren, wird das Attribut HREF (HyperText Reference) verwendet. <A HREF=”Page2”> Seite 2 </A>: Dieser Link verweist auf ein Dokument „Page2”, welches sich im gleichen Verzeichnis wie das aktuelle Dokument befindet. Am Bildschirm erscheint der Text „Seite 2”, der wie alle Links farblich hervorgehoben oder unterstrichen ist.

Mit <A HREF=“#Linkname”> Linkname </A> kann auf eine bestimmte Stelle innerhalb eines Dokuments verwiesen werden, die mit <A NAME= ”Linkname”> Linkname </A> gekennzeichnet wurde. Um Links zu Dokumenten auf anderen Servern zu erstellen, werden die in der Einleitung schon beschriebenen URL-Adressen verwendet. Ein Link auf die Homepage des idv-HTTP-Servers hätte somit folgendes Format:

<A HREF="http://www.idv.edu/default.html">idv Home-Page</a>

Tabellen

Ein weiteres Strukturelement von HTML-Seiten sind Tabellen. Tabellen, deren Rahmen und Gitternetzlinien nicht sichtbar sind (sogenannte transparente Tabellen), stellen ein einfaches Mittel zur Positionierung von Elementen zur Verfügung. Tabellen werden ebenfalls mittels Tags realisiert. Wegen der Möglichkeit zur Schachtelung von Tags kann eine Tabellenzelle wiederum Elemente wie Listen, Tabellen, Bilder, Links etc. enthalten und ein Positionieren der Elemente ist einfach möglich. Ein pixelgenaues Positionieren ist in HTML damit nicht möglich und ist von der, der Sprache zugrundeliegenden Philosophie auch nicht beabsichtigt. Für diese typischen Seitengestaltungsaufgaben sind die Cascading Style Sheets (CSS) vorgesehen, die auch eine auf das Ausgabemedium hin optimierte Gestaltung ermöglichen. CSS werden detaillierter später dargestellt.

Weiterführende Links


HTML 5

Die Arbeit an wesentlichen Teilen von HTML 5 wurde im Dezember 2012 vom W3C abgeschlossen. HTML 5 ersetzt die Dokumentbeschreibungsstandards HTML 4.01, XHTML 1.0 und DOM HTML Level 2. Sie bietet vielfältige neue Funktionalitäten für Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die von HTML 4 nicht direkt unterstützt werden und sich nur mit zusätzlichen Plugins – wie zum Beispiel Adobe Flash – umsetzen lassen. HTML 5 ist der neue HTML-Standard und wird nicht mehr als SGML Dokumenttyp deklariert, sondern als Document Object Model (DOM) und kommt damit den Anforderungen der modernen Website Entwicklung stark entgegen.[1]


Ziele

Die grundlegenden Ziele für die Spezifikation wurden von Tim Berners-Lee (Erfinder von HTML) festgehalten und als „Neuerfindung von HTML“ beschrieben. [2]

  • Kompatibilität

Bestehender Inhalt muss weiterhin unterstützt werden. Neue Elemente der Sprache dürfen den bestehenden Inhalt nicht negativ beeinflussen.

  • Verwendbarkeit

Neue Funktionen sollen echte Probleme lösen, und dies vorrangig für Autoren, dann Browserhersteller und zuletzt der „reinen Lehre“ dienend; Funktionen jedoch, die bereits einen bestimmten Zweck erfüllen, sollen nicht neu erfunden werden.

  • Sicherheit

Bei der Entwicklung neuer Funktionen müssen Sicherheitsaspekte berücksichtigt werden.

  • Konsistenz

Teile aus XML, die in XHTML Anwendung finden, sollen auch in HTML erlaubt werden. HTML und XHTML besitzen eine gemeinsame DOM-Abbildung.

  • Vereinfachung

Durch genau definiertes Verhalten (auch in Fehlersituationen) und geringe Komplexität soll HTML interoperabel implementiert werden können.

  • Universalität

HTML soll auf allen Endgeräten und mit Inhalt in allen Weltsprachen verwendbar sein.

  • Barrierefreiheit

Die Barrierefreiheit von Inhalt und Funktion soll gewährleistet sein.


Aufbau

HTML 5 besteht aus mehreren Spezifikationen und Dokumenten. Die folgende Grafik veranschaulicht die zahlreichen Spezifikationen von W3C, WHATWG (Web Hypertext Application Technology Working Group, http://www.whatwg.org/) und anderen Arbeitsgruppen welche in die Gesamtheit von HTML 5 bilden

Abbildung: HTML5 Strukturübersicht[3]

Wichtige Neuheiten

In der Hauptspezifikation sind die wichtigsten Grundlagen von HTML 5 enthalten. Das Vokabular umfasst neben neuen Elementen auch das Vokabular vorangegangener HTML Versionen um die Abwärtskompatibilität sicher zu stellen. Zusätzlich wird ein klares Strukturmodell, also Regeln zur Verschachtelung und Strukturierung von HTML-Elementen definiert. Im folgenden werden einige neue Möglichkeiten, ohne den Anspruch auf Vollständigkeit zu erheben, angeführt.[4]


  • HTML-Canvas-2D-Kontext

In dieser Spezifikation werden Schnittstellen zum Zeichnen zweidimensionaler Formen festgelegt. Als Zeichenoberfläche dient das in der Hauptspezifikation eingeführte Canvas-Element. Gezeichnet werden können Linien, Schatten, einfache und komplexe Konturen (Pfade) sowie Texte und im Dokument enthaltene Bilder. Vom Strichmännchen bis zur hardwarebeschleunigten 3D-Grafik ist alles möglich.

  • HTML5-Nachrichtenübermittlung

Dieser Arbeitsentwurf definiert zwei Methoden, die es voneinander unabhängigen Browserkontexten erlauben sollen, miteinander Daten auszutauschen: „Cross-document messaging“, das die Kommunikation von ineinander eingebetteten Dokumenten (z.B. über iframes) ermöglichen soll und „Channel messaging“, das die Kommunikation für voneinander unabhängigen Dokumenten (z.B. getrennt durch zwei verschiedene Browserfenster) ermöglichen will.

  • HTML Microdata

Diese Spezifikation versucht, das Einbinden maschinenlesbarer Informationen in HTML-Dokumente zu definieren. Ziel dabei ist, dass dieser Mechanismus eindeutig definiert und zu anderen Formaten kompatibel ist.

  • HTML5-Formulare

Es gibt unzählige Werkzeuge/erweiterungen zur optischen Aufwertung und Umsetzung von Scripts und Formularen. HTML5 setzt bei diesem Wildwuchs die Axt an und bietet von Haus aus alle Formularfeatures, die bis heute mit Zusatztools erstellt wurden.

  • HTML Geolocation

Durch die alltägliche mobile Internetnutzung kommt Geolocation verstärkte Bedeutung zu. Aktuelle Browserversionen haben eine eingebaute API dafür.

  • HTML Offline Webanwendungen

Mit HTML5 ist es möglich, komplette Web-Applikationen offline benutzbar zu machen – insbesondere ist das nützlich für z.B. mobile HTML5-Webapps. Auch hierzu waren bisher externe Tools nötig.

  • HTML Multimedia (Audio und Video)

Sounds und Video ohne Flash direkt im Browser abspielen? Mit den HTML5-Elementen <audio> und <video> ist das möglich, was insbesondere iPhone und iPad User freuen wird. Diese erlauben das bequeme Einbetten von üblichen Multimedia-Formaten und die Programmierung über eine eigene API.

  • HTML Drag & Drop- und File API

HTML5 übernimmt eine Drag& Drop-API, die ursprünglich aus dem Internet Explorer und ermöglicht damit neue Möglichkeiten bei der benutzerfreundlichen Verzahnung von Desktop und Browser oder von ver-schiedenen Websites untereinander. Mit der File API können im Browser clientseitig Dateien verarbeitet werden. Damit wird es einfacher, Webapplikationen zu schreiben, die zum Beispiel MP3-Tags lesen können oder Downloads am Client gleich gezippt ausliefern.

Abbildung: Beispiel für ein canvas Element.[5]

Weiterführende Links:

Literatur

Quellen

  1. ↑ http://webkompetenz.wikidot.com/html-handbuch:web-technologien
  2. ↑ http://de.wikipedia.org/wiki/HTML5
  3. ↑ http://commons.wikimedia.org/wiki/File:HTML5-Spezifikations-%C3%9Cbersicht.svg am 24.08.2013
  4. ↑ http://de.wikipedia.org/wiki/HTML5 und http://html5-buch.de/inhalt am 27.08.2013
  5. ↑ https://developer.mozilla.org/ am 27.08.2013

Zitiervorschlag

Huemer/Niederländer/Filsecker in Pils, Informationsverarbeitung I (2. 9. 2013), HTML (mussswiki.idv.edu/iv1)

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