6.1 | HTML-Einführung |
|
- SGML (Standard Generalized Markup Language) von 1986 ist eine Metasprache, mit der man verschiedene Dokumente-Auszeichnungssprachen definieren kann (Wikipedia).
HTML ist eine Anwendung von SGML
XML ist eine Teilmenge von SGML (und kann mit 20% der Komplexität ca. 80% der Aufgaben erledigen)
Die Entwicklung von HTML/XHTML
1989 HTML Tim Berners-Lee verwendet erstmalig den Begriff HypertextMarkupLanguage.
1990 HTML Die erste Webseite (info.cern.ch) kennt nur unformatierten Text aber Hyperlinks.
1993 HTML bekommt Attribute zur fetten oder kursiven Darstellung.
1995 HTML 2.0 Die mit RFC 1866 definierte Version führt u. a. Formulartechnik ein.
Der Status dieses Standards ist heute „HISTORIC“.
1996 HTML 3.0 wurde nie standardisiert, da mit Netscape-3.0 HTML-3.0 vor der Veröffentlichung veraltet war.
1997 HTML 3.2 mit Tabellen, Textfluss um Bilder, Einbindung von Applets.
1997 HTML 4.0 mit Stylesheets, Skripte und Frames und einer Trennung in Strict, Frameset und Transitional.
1999 HTML 4.01 ersetzt und erweitert HTML 4.0
2000 XHTML 1.0 ist eine Neuformulierung von HTML 4.01 mit Hilfe von XML.
2001 XHTML 1.1 wird in Module aufgeteilt und es wird daraufhin eine strikte Version definiert,
bei der die mit HTML 4 eingeführten Varianten Frameset und Transitional entfallen.
2006 XHTML 2.0 soll nicht mehr auf HTML 4.01 basieren und Auszeichnung und Stil vollständig trennen.
2009 XHTML 2 als größte Reformprojekt des W3C sollte Geburtsfehler von HTML korrigieren
und wird (nach Jahren auf dem Weg zum Fiasko) zu Gunsten von HTML5 eingestellt.
2009 HTML5 schafft auf Basis von HTML 4.01 und XHTML 1.0 ein neues Vokabular.
Die zu HTML gehörende DOM-Spezifikation wird überarbeitet und erweitert.
2013 HTML 5.1 Draft-Version wird begonnen
2014 HTML 5.0 erhält den Final Status
- Das Ziel einer Auszeichnungssprache (auch von HyperTextMarkupLanguage) ist es:
Daten mit einem bestimmten Aussehen als Dokument auszugeben
- z.B. folgende Liste aus Excel oder einer Datenbank soll (in Zeilen und Spalten) formatiert dargestellt werden
Kursbezeichnung | Kurszeitraum | Raum | Teilnehmerplatz
----------------+---------------+-------------+----------------
TIKIN2-PB | 24-28.03.2014 | PC-Labor 42 | PC-10
- Der Dokumenten-Quelltext
<table border>
<tr><th>Kursbezeichnung <th>Kurszeitraum <th>Raum <th>Teilnehmerplatz
<tr><td>TIKIN2-PB <td>24-28.03.2014 <td>PC-Labor 42 <td>PC-10
</table>
- Die formatierte Ausgabe im Browser
Kursbezeichnung | Kurszeitraum | Raum | Teilnehmerplatz
| TIKIN2-PB | 24-28.03.2016 | PC-Labor 42 | PC-10
|
- Der Syntax eines HTML-Befehls (Tags)
<Tag Attribut="Wert">Inhalt<Ende-Tag> z.B.
<h1 align="center">Überschrift</h1>
- Das Grundgerüst einer HTML-Datei zeigt die einfache Struktur von HTML-Dateien
Hier ist ein HTML-4.01-Syntax konformes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ODER:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Hier ist ein HTML-5.0-Syntax konformes Beispiel:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Folgendes Dokument ist ein XML-konformes XHTML/HTML5 Dokument (quasi XHTML5, was aber nicht existiert):
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Hinweis: Erst wenn der Server "Content-Type:text/xml" oder "application/xhtml+xml" sendet, rendern Browser HTML5 nach dem XML-Syntax.
- http://www.w3.org/TR/html5/introduction.html#html-vs-xhtml
|
6.2 | Das WorldWideWebConsortium (W3C) |
|
- Die offizielle HTML 4.01 Spezifikation des World-Wide-Web-Consortiums
- http://www.edition-w3.de/TR/1999/REC-html401-19991224/ (de)
Deutsche Übersetzung von weiteren W3C Dokumenten
- http://www.w3.org/2003/03/Translations/byLanguage?language=de
Einige HTML-Angaben sind in HTML4 noch optional
- http://www.w3.org/TR/REC-html40/index/elements.html (en)
- http://edition-w3.de/TR/1999/REC-html401-19991224/index/elements.html (de)
- Die XHTML-Spezifikation arbeitet (im Vergleich zu HTML) mit engeren Vorgaben
- http://www.w3.org/TR/xhtml11/
Was ist bei XHTML anders?
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Alle Tags werden klein geschrieben
- Alle Tags müssen geschlossen werden aus <br> wird dann <br/>
- Attribute müssen in Anführungszeichen stehen und einen Wert haben
- Die Strict-Varianten erlauben keine deprecated-Tags (font, applet, base, center, dir isindex, menu, s, strike, u und name)
-
Zehn wichtige Dinge, die man über HTML5 unbedingt wissen sollte
- http://www.zdnet.de/magazin/41555751/t-print/zehn-wichtige-dinge-die-man-ueber-html5-unbedingt-wissen-sollte.htm
Die offizielle HTML 5.0 Spezifikation des World-Wide-Web-Consortiums
- http://www.w3.org/TR/html5/ (en)
Die offizielle HTML 5.3 Draft Spezifikation des World-Wide-Web-Consortiums
- http://www.w3.org/html/wg/drafts/html/master/Overview.html (en)
Was ist bei HTML5 anders?
- http://www.mediaevent.de/xhtml/html5-template.html
- http://onwebdev.blogspot.com/2011/01/html5-and-xhtml-syntax-comparison.html
- http://webkompetenz.wikidot.com/docs:html-handbuch, http://webkompetenz.wikidot.com/html-handbuch:veraltet
Kürzere Schreibweisen erlaubt
- <!DOCTYPE html>
- <meta charset="UTF-8">
Neue Elemente ergänzen den div-Tag
- article, aside, hgroup, header, footer, nav, figuire/figcaption
Neue Multimedia-Elemente (arbeiten ohne Plugins)
- audio, video (Konvertierung z.B. über http://www.firefogg.org/)
- canvas, time, details/summary, output
Für das type-Attribut des Input-Elements stehen zahlreiche neue Werte zur Verfügung
- <input type=" number, tel, url, email, color">
Für Handy/PDA Bildschirme kann ein Hilfetext im Inputfeld angezeigt werden
- <input ... placeholder="Text im Inputfeld">
Für das Input-Elements stehen (zur Einschränkung) neue Attribute zur Verfügung
- <input ... min=, max=, pattern=, step= >
Ein Link kann mit dem Ping-Attribut ein Tracking erlauben
- <a href="produkte.html" ping="http://webstats.example.com/">Produkte</a>
Neue Attribute des Iframe-Tags sind ...
- <iframe sandbox=, srcdoc= ...
Folgende Attribute sind nun (als globale Attribute) in jedem Tag erlaubt
- class, dir, id, lang, style, tabindex
- contenteditable, draggable, hidden, spellcheck (sind neue globale Attribute)
Komplett verboten sind ...
- basefont, center, font, frame, applet, dir, isindex, menu, strike und u
Bei <link ... und <script ... wird die type=".../..." Angabe vom Server verwendet
|
6.3 | Nachschlagewerke (für HTML/CSS) |
|
- Die offizielle HTML Spezifikationen (aktuell 5.2) werden vom World Wide Web Consortium (W3C) veröffentlicht
- http://edition-w3.de/TR/1999/REC-html401-19991224/ (HTML-4.01 in deutsch)
- http://www.w3.org/TR/html5/ (HTML-5.2)
- http://www.w3.org/html/wg/drafts/html/master/Overview.html (HTML 5.3 Draft)
- Das Nachschlagewerk SELFHTML (stammt ursprünglich von Stefan Münz)
Mit einem Schnell-Index für HTML, CSS und Javascript (sinnvoll, wenn der benötigte Befehl namentlich bekannt ist)
- HTML-Übersicht http://wiki.selfhtml.org/wiki/HTML
- HTML-Referenz http://wiki.selfhtml.org/wiki/Schnell-Index/HTML
- CSS-Eigenschaften http://wiki.selfhtml.org/wiki/CSS/Eigenschaften
- CSS-Referenz http://wiki.selfhtml.org/wiki/Schnell-Index/CSS
- JavaScript-Referenz http://wiki.selfhtml.org/wiki/Schnell-Index/JavaScript
- Webkompetenz; Geschriebenes und Dahingeschriebenes von von Stefan Münz
- HTML-Übersicht http://webkompetenz.wikidot.com/docs:html-handbuch
- HTML-Referenzen http://webkompetenz.wikidot.com/html-handbuch:html-referenz
- CSS-Eigenschaften http://webkompetenz.wikidot.com/html-handbuch:css-eigenschaften
- CSS-Referenz http://webkompetenz.wikidot.com/html-handbuch:css-referenz
- The world's largest web developer site w3schools.com/
- HTML-Tutorial http://www.w3schools.com/html/
- HTML-Referenz http://www.w3schools.com/tags/
- CSS-Tutorial http://www.w3schools.com/css/
- CSS-Referenz http://www.w3schools.com/cssref/
- JavaScript-Tutorial http://www.w3schools.com/js/
- Alles als Android-APP W3Schools Fullversion(Offline)
- Tutorials für Mobile-Endgeräte
- HTML5-Referenz APP
- HTML5-Tutorial APP
Website -> http://mhtml5.tutorialsok.com/
- CSS3-Tutorial APP
Website -> http://mcss.tutorialsok.com/, http://mcss3.tutorialsok.com/
- JQUERY-Tutorial APP
Website -> http://jquery.tutorialsok.com/
- XML-Tutorial APP
Website -> http://m.xml.tutorialsok.com/
- HTML5 Tests (mit CSS3, JavaScript, SVG, WebGL und Canvas)
- http://www.caniuse.com/#index (Browserunterstützung für "eingetippte" Befehle)
- http://caniuse.com/#comparison (Browservergleich für versch. Techniken bei wählbaren Browserversionen)
- http://www.caniuse.com/#cats=CSS,PNG,DOM,CSS3,CSS2,Canvas,Summary (Browserunterstützung gesamt)
- http://www.html5test.com/ (HTML5-Live-Test und Browservergleich)
|
6.4 | Übersicht der HTML-Tools |
|
- Wikipedia: Liste von HTML-Editoren
- Windows Bordmittel Notepad.exe (kann fast nichts, macht also auch nichts kaputt ;-)
- Notepad++ ist ein freier Texteditor für Windows und kompatible Betriebssysteme
- http://notepad-plus-plus.org/
- Der Seamonkey-Composer NVU (mischt sich gern in Quelltexte ein)
- http://www.nvu.com/
- http://kompozer.net/download.php (Alternative: KompoZer)
- BlueGriffon
Der WYSIWYG-HTML-Editor BlueGriffon basiert auf der Gecko Rendering-Engine und benötigt teilweise kostenpflichtige Add-ons.
- http://www.bluegriffon-epubedition.com/ (Website)
- http://bluegriffon.org/pages/Download (Download)
- Aptana Studio ist ein Open-Source-integrierte Entwicklungsumgebung (IDE) zur Programmierung von Ajax Web-Anwendungen.
Basierend auf Eclipse, unterstützt Aptana JavaScript, HTML, DOM und CSS mit Code-Vervollständigung und JavaScript Debugging.
Mit zusätzlichen Plugins unterstützt Aptana-Studio Ruby on Rails, PHP, Python, Perl , Adobe AIR, Apple iPhone und Nokia WRT (Web Runtime).
Aptana Studio ist erhältlich als Standalone auf Windows, Mac OS X und Linux, oder als Plugin für Eclipse.
- http://www.aptana.org/
- CODA (für OS-X)
- http://www.panic.com/coda/
- UltraEdit (für Windows)
- http://www.ultraedit.com/
- Microsofts Web-Entwicklungsumgebung Expression-Web (Download)
Expression Web ist der Nachfolger von Microsoft FrontPage, basiert aber auf einer neuen Codebasis.
Expression Web ist Teil der Produktfamilie Microsoft Expression Studio.
Die erzeugten Quelltexte sollten auf HTML-Konformität geprüft werden
- PHASE5 ist ein kostenloser, kompakter HTML-Quelltext Editor von Ulli Meybohm
PHASE5 wird seit 2000 von Hans-Dieter Berretz (dem Autor des ftp-uploader) weiterentwickelt
- http://www.phase5.info/
- Der UNIX-Standardeditor VI (kann alles, wenn der User ihn bedienen kann ;-)
- http://christianrobinson.name/vim/HTML/ (Set of HTML/XHTML macros, menus and toolbar buttons)
- Unter LINUX steht bei zahlreichen Distributionen die KDE3-Anwendung Quanta zur Verfügung
- http://spielwiese.la-evento.com/quanta2/ (Quanta Plus Tutorial)
- Bluefish als GTK-basierte-Alternative
- http://software.opensuse.org/package/bluefish
- Das Adobe Communityprojekt Brackets-Editor
- http://software.opensuse.org/package/brackets?search_term=brackets
Der Adobe Communityprojekt-Brackets-Editor ist in HTML, CSS und JavaScript geschrieben und verwendet jQuery, LESS, RequireJS, Lodash, Mustache und (als Code-Editor) CodeMirror.
Es erscheinen regelmäßig neue Versionen für Windows, OS-X und Linux.
Die Editor Preview-Darstellung ist derzeit nur über einen Google-Chrome Browser möglich.
Brackets unterstützt Erweiterungen zum Debuggen, Hinzufügen von browser-spezifischen CSS-Präfixen und Tools zur Autovervollständigung.
Brackets-Grundfunktionen
Design-Auswahl
- Ansicht, Aktuelles Design: [Brackets Dark], Schriftgröße: [18px]
Einstiegsdokument bearbeiten
- Ansicht, Horizontal geteilt
Oben die HTML-Datei index.html aus /usr/lib64/brackets/samples/de/Erste Schritte/
Unten die CSS-Datei main.css
Live-Vorschau
- Oben rechts startet über Live-Vorschau ein lokaler Webserver und der Google-Chrome-Browser
Bearbeitung (in der Live-Vorschau)
- Der Cursor kann wahlweise die Quelltext-Positionen im Editor oder aus dem Browser übernehmen
- Eine Suche (mit Ctrl+f) ist ebenfalls im Editor oder Browserfenster möglich
Eine bestehende Site öffnen
- Datei, Ordner öffnen ..., den Ordner wählen aus dem die zu ladenden bzw. verlinkten Dateien erreichbar sind
Eine Datei (z.B. HTML) hinzufügen
- Datei, Neu
- Bearbeiten, Create HTML5 Template
In der Leiste unten-rechts das Format von "Text" auf "HTML" ändern
- Das "Aufräumen" eines HTML-Quelltextes ist mit HTML-TIDY vom W3C möglich
- http://www.w3.org/People/Raggett/tidy/
z.B. wandelt der Befehl "tidy -asxml -wrap 1000 index.html > index.xhtml" eine HTML-Datei in XHTML
|
6.5 | Webseiten für Mobile-Browser |
|
|