HTML: Difference between revisions

From Medien Wiki
m (→‎Weitere Ressourcen: Links korrigiert, nicht erreichbare Links gelöscht.)
 
(20 intermediate revisions by 5 users not shown)
Line 2: Line 2:
<source lang="HTML4Strict">
<source lang="HTML4Strict">
<html>
<html>
<head>Hier ist der Kopf</head>
  <head>Hier ist der Kopf</head>
<body>..und hier der Körper</body>
  <body>...und hier der Körper</body>
</html>
</html>
</source>
</source>
Line 13: Line 13:
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
<head>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seitentitel</title>
    <title>Seitentitel</title>
</head>
  </head>
<body>
  <body>
<p>Hallo Welt!</p>
    <p>Hallo Welt!</p>
<p><i>Das</i> ist eine HTML-Seite…</p>
    <p><em>Das</em> ist eine HTML-Seite…</p>
</body>
  </body>
</html>
</html>
</source>
</source>
Line 27: Line 27:
# Definition des Dokumentenformats
# Definition des Dokumentenformats
# Es gibt folgende sog. DTD:
# Es gibt folgende sog. DTD:
## HTML5 einfach nur als <!DOCTYPE HTML>
## Strict: Trennung zwischen Inhalt und Design, strenge Verschachtelungsregeln
## Strict: Trennung zwischen Inhalt und Design, strenge Verschachtelungsregeln
## Transitional/Loose: Weniger Beschränkungen als Strict
## Transitional/Loose: Weniger Beschränkungen als Strict
Line 32: Line 33:
# HTML Anfang
# HTML Anfang
# Head Anfang
# Head Anfang
# Durch die Festlegung des Charset auf UTF-8 (das Dokument muss natürlich auch diese Zeichenkodierung verwenden!), kann man Umlaute wie ä,ü und ß verwenden ohne diese speziell codieren zu müssen; z.B. in &auuml;, &üuml; und &szlig;
# Durch die Festlegung der Zeichenkodierung (charset) auf UTF-8 (das Dokument muss natürlich auch diese [[wikipedia:de:Zeichenkodierung|Zeichenkodierung]] verwenden, was in eurem Editor/IDE einstellbar ist!), kann man Umlaute wie ä,ü und ß verwenden ohne diese speziell codieren zu müssen; z.B. in &auuml;, &üuml; und &szlig;
# Der Seitentitel wie im Browserfenster angezeigt
# Der Seitentitel wie im Browserfenster angezeigt
# Head Ende
# Head Ende
# Body Anfang
# Body Anfang
# Ein P-Tag (Paragraph = Absatz)
# Ein P-Tag (Paragraph = Absatz)
# Ein Paragraph mit einem ''italic'' Teil (i-Tag = italic; ginge auch ein em-Tag = emphasized)
# Ein Paragraph mit einem ''emphasized'' Teil (em-Tag = hervorgehoben; i-Tag = italic ist erlaubt, aber durch die Vermischung von Inhalt und Kursiv-Formatierung nicht "strict"-konform, siehe Zeile 2)
# Body Ende
# Body Ende
# HTML Ende
# HTML Ende
Line 50: Line 51:
* body
* body
** p (paragraph)
** p (paragraph)
** i (italic), em (emphasized), b (bold), strong
** em (emphasized), strong (stärkere Hervorhebung als em)
** a (anchor, z.B. a href = anchor hyper-reference für das, was man gewöhnlich umgangssprachlich als "Link" bezeichnet)  
** a (anchor, z.B. a href = anchor hyper-reference für das, was man gewöhnlich umgangssprachlich als "Link" bezeichnet)  
** br (line break), hr (horizonal roule)
** br (line break, um eine neue Zeile anzufangen), hr (horizonal rule, eine linie)
** div (division), span
** div (division, meist als "Kasten" für Inhalte genutzt), span (Abschnitt im Text, wenn em oder strong nicht passend sind)
** img (image)
** img (image)
** script
** script (Javascript)


Außer dem script-Tag kann man Tags ohne Inhalt auch verkürzt notieren, z.B. <source lang="HTML4Strict"><br/></source> statt einem (recht sinnlosen) <source lang="HTML4Strict"><br></br></source>
Tags ohne Inhalt dazwischen können auch verkürzt notiert werden (außer bei script), z.B. <source lang="HTML4Strict"><br/></source> statt einem (recht sinnlosen) <source lang="HTML4Strict"><br></br></source>


== HTML5==
== HTML5==
* [http://www.w3schools.com/html5/html5_reference.asp HTML5 Referenz]
HTML5 und [[CSS#CSS3|CSS3]] bringen in Verbindung mit [[JavaScript]] einige interessante Neuerungen, vor allem im Hinblick auf die Erweiterung von HTML5 als Programmierungebung für Browser-basierte Apps.
* [https://developer.mozilla.org/en/canvas_tutorial HTML5 Canvas Tutorial] (for modern browsers)


* [http://www.youtube.com/watch?v=EdDc7sWjCL4 Brad Neuberg from Google: Learn About HTML5 and the Future of the Web]
Die aufregendsten Neuerungen sind in Kürze:
* [http://www.youtube.com/user/ThytOS#grid/user/0DBF8EC1B953D567 Mehrstündiger Vortrag über HTML5, CSS3]
 
<br/>
=== Audio & Video ===
Die neuen &lt;audio&gt; und &lt;video&gt; Tags ermöglichen die Wiedergabe von Audio & Video-Dateien ohne Flash-Plugin. Die Implementierungen variieren noch von Browser zu Browser, zumindest als Alternative für Browser ohne Flash-Plugin ist der Einsatz bereits empfehlenswert:
<source lang="HTML4strict">
<audio src="myFile.mp3" controls>
    Your Browser does not support the <code>audio</code> element.
</audio>
</source>
 
<br/>
 
===[[Canvas]]===
Das Canvas-Element kann mit JavaScript "bemalt" werden. Der Canvas Kontext ist in 2D und 3D verfügbar, 3D wird allerdings noch von sehr wenigen Browsern unterstützt. Das Zeichnen in 2D funktioniert ähnlich wie in anderen Sprachen (z.B. Java, Processing, Quartz). Man holt sich zuerst den Kontext und kann dann Basis-Shapes, Bilder, Text u.v.m. auf diesen Kontext zeichnen. Das Canvas-Element ist Pixel-basiert.
<source lang="HTML4strict">
<html>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
// get the context
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.fillStyle = "rgba(200,0,0, 1.0)";
context.fillRect(40,60,250,100);
context.fillStyle = "rgba(0,200,0, 0.5)";
context.fillRect(140,100,250,100);
</script>
</html>
</source>
Es gibt mittlerweile sehr interessante Projekte rund um das canvas Element:
* [http://www.processingjs.org processing.js] - JavaScript Library, (fast) voll kompatibel zur Java-basierten [[Processing]] Programmierumgebung
* [http://paperjs.org/ Paper.js]
* [http://visitmix.com/labs/ai2canvas/documentation.html Ai->Canvas] exportiert Illustrator Dokumente in HTML-Dateien mit Canvas-Element
Siehe auch:
* [http://billmill.org/static/canvastutorial/ Interactive Canvas Tutorial]
* [https://developer.mozilla.org/en/canvas_tutorial Mozilla Canvas Tutorial]
* [http://dev.opera.com/articles/view/html-5-canvas-the-basics/ Dev.Opera Canvas tutorial]
* http://canvas.quaese.de/
* [http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html Canvas Cheat Sheet]
<br/>
 
=== SVG ===
HTML5 unterstützt das Zeichnen von [[SVG]] (Scaleable Vector Graphics). SVG-Grafiken können entweder in einem Grafikprogramm (wie z.B. Inkscape oder Adobe® Illustrator®) gezeichnet und als SVG exportiert oder per Code gezeichnet werden:
<source lang="HTML4strict">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"
onmousedown="alert('Hello World!');"/>
</svg>
</source>
Siehe auch:
* [http://www.w3.org/TR/SVG/ W3C SVG Reference]
* [http://raphaeljs.com/ Raphaël] Javascript library
<br/>
 
=== Weitere Ressourcen ===
* [http://www.w3schools.com/tags/default.asp HTML5 Referenz]
* [http://dret.typepad.com/dretblog/html5-api-overview.html The HTML 5 APIs summed up]
* [http://dret.typepad.com/dretblog/html5-api-overview.html The HTML 5 APIs summed up]
* [http://dev.w3.org/html5/spec/Overview.html W3C HTML5 Reference]
* [http://dev.w3.org/html5/html4-differences/ Differences between HTML 4 & 5 (W3C)]
* [http://dev.w3.org/html5/html4-differences/ Differences between HTML 4 & 5 (W3C)]
* [http://html5doctor.com/article-archive/ HTML 5 Doctor]
* [http://html5doctor.com/article-archive/ HTML 5 Doctor]
* [http://www.youtube.com/watch?v=EdDc7sWjCL4 Brad Neuberg from Google: Learn About HTML5 and the Future of the Web]
* [http://www.youtube.com/user/ThytOS#grid/user/0DBF8EC1B953D567 Mehrstündiger Vortrag über HTML5, CSS3]


== Ressourcen ==
== Ressourcen ==
* [http://de.selfhtml.org/ de.selfHTML.org] - '''''die''''' (deutsche) Standard-HTML-Referenz!
* [http://de.selfhtml.org/ de.selfHTML.org] - '''''die''''' (deutsche) Standard-HTML-Referenz!
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_011-017.zip Kursbegleitende Quelldateien 011-017.zip]
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_011-017.zip Kursbegleitende Quelldateien 011-017.zip]
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_050-055.zip Kursbegleitende Quelldateien 050-055.zip] (HTML5)
* siehe auch Kurs "Web-Technologie" / [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html#web-technology Part. Dokumentsprachen] der Medien-Informatik
* siehe auch Kurs "Web-Technologie" / [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html#web-technology Part. Dokumentsprachen] der Medien-Informatik
* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS
* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS

Latest revision as of 12:55, 29 October 2013

HTML steht zwar für Hypertext Markup Language, trotzdem ist HTML keine Programmiersprache, sondern eine sog. Auszeichnungssprache - ein dokumentenbeschreibendes Format. HTML besteht eigentlich nur aus Tags, die (wenn XML-kompatibel) den Inhalt umschließen und verschachtelt sein können. In der Regel gibt es zu jedem Tag, der geöffnet wurde, das Gegenstück, das geschlossen wird; Gibt es das Gegenstück nicht, ist das meist ein Fehler: 

<html>
  <head>Hier ist der Kopf</head>
  <body>...und hier der Körper</body>
</html>

Struktur

Das Grundgerüst einer HTML-Datei sieht typischerweise wie folgt aus: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Seitentitel</title>
  </head>
  <body>
    <p>Hallo Welt!</p>
    <p><em>Das</em> ist eine HTML-Seite…</p>
  </body>
</html>

Erläuterung der Zeilen:

  1. Definition des Dokumentenformats
  2. Es gibt folgende sog. DTD:
    1. HTML5 einfach nur als <!DOCTYPE HTML>
    2. Strict: Trennung zwischen Inhalt und Design, strenge Verschachtelungsregeln
    3. Transitional/Loose: Weniger Beschränkungen als Strict
    4. Frameset: Nicht mehr gebräuchlich
  3. HTML Anfang
  4. Head Anfang
  5. Durch die Festlegung der Zeichenkodierung (charset) auf UTF-8 (das Dokument muss natürlich auch diese Zeichenkodierung verwenden, was in eurem Editor/IDE einstellbar ist!), kann man Umlaute wie ä,ü und ß verwenden ohne diese speziell codieren zu müssen; z.B. in &auuml;, &üuml; und ß
  6. Der Seitentitel wie im Browserfenster angezeigt
  7. Head Ende
  8. Body Anfang
  9. Ein P-Tag (Paragraph = Absatz)
  10. Ein Paragraph mit einem emphasized Teil (em-Tag = hervorgehoben; i-Tag = italic ist erlaubt, aber durch die Vermischung von Inhalt und Kursiv-Formatierung nicht "strict"-konform, siehe Zeile 2)
  11. Body Ende
  12. HTML Ende

Tags

Tags kann man sich einfach merken, wenn man weiß, wofür sie stehen. Die gängisten Tags sind:

  • HTML
  • head
    • title
    • meta
    • link (kein umgangsspr. Link, sondern Einbettung von weiteren Ressourcen wie z.B. CSS-Dateien oder JavaScripts)
  • body
    • p (paragraph)
    • em (emphasized), strong (stärkere Hervorhebung als em)
    • a (anchor, z.B. a href = anchor hyper-reference für das, was man gewöhnlich umgangssprachlich als "Link" bezeichnet)
    • br (line break, um eine neue Zeile anzufangen), hr (horizonal rule, eine linie)
    • div (division, meist als "Kasten" für Inhalte genutzt), span (Abschnitt im Text, wenn em oder strong nicht passend sind)
    • img (image)
    • script (Javascript)

Tags ohne Inhalt dazwischen können auch verkürzt notiert werden (außer bei script), z.B. 

<br/>

statt einem (recht sinnlosen) 

<br></br>

HTML5

HTML5 und CSS3 bringen in Verbindung mit JavaScript einige interessante Neuerungen, vor allem im Hinblick auf die Erweiterung von HTML5 als Programmierungebung für Browser-basierte Apps.

Die aufregendsten Neuerungen sind in Kürze:


Audio & Video

Die neuen <audio> und <video> Tags ermöglichen die Wiedergabe von Audio & Video-Dateien ohne Flash-Plugin. Die Implementierungen variieren noch von Browser zu Browser, zumindest als Alternative für Browser ohne Flash-Plugin ist der Einsatz bereits empfehlenswert: 

<audio src="myFile.mp3" controls>
    Your Browser does not support the <code>audio</code> element.
</audio>


Canvas

Das Canvas-Element kann mit JavaScript "bemalt" werden. Der Canvas Kontext ist in 2D und 3D verfügbar, 3D wird allerdings noch von sehr wenigen Browsern unterstützt. Das Zeichnen in 2D funktioniert ähnlich wie in anderen Sprachen (z.B. Java, Processing, Quartz). Man holt sich zuerst den Kontext und kann dann Basis-Shapes, Bilder, Text u.v.m. auf diesen Kontext zeichnen. Das Canvas-Element ist Pixel-basiert. 

<html>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
	// get the context
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext('2d');
	context.fillStyle = "rgba(200,0,0, 1.0)";
	context.fillRect(40,60,250,100);
	context.fillStyle = "rgba(0,200,0, 0.5)";
	context.fillRect(140,100,250,100);
</script>
</html>

Es gibt mittlerweile sehr interessante Projekte rund um das canvas Element:

Siehe auch:


SVG

HTML5 unterstützt das Zeichnen von SVG (Scaleable Vector Graphics). SVG-Grafiken können entweder in einem Grafikprogramm (wie z.B. Inkscape oder Adobe® Illustrator®) gezeichnet und als SVG exportiert oder per Code gezeichnet werden: 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="50" r="40" 
			stroke="black" stroke-width="2" fill="red" 
			onmousedown="alert('Hello World!');"/>
</svg>

Siehe auch:


Weitere Ressourcen

Ressourcen



Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=HTML&oldid=61205"