HTML (Einführendes)

HTML (und Weiterentwicklungen) sind die Dokumenten-Basis des weltweiten Web.

HTML kennzeichnet die Struktureigenschaften eines WWW-Dokumentes und ein darin enthaltener Links verweist auf ein anderes Dokumente oder eine dokument-interne Positionen.

Um Übertragungszeit zu sparen werden HTML-Text-Dokumente bereits auf dem Web-Server gerendert und als Bitmap übertragen.

HTML wird z.B. verwendet für Text Strukturierungen, Hyperlinks, Listen, Tabellen, Formularen, Bildern einbinden und mehr.

HTML (1986, Tim Berners-Lee; CERN) kannte SGML (1989, Charles Goldfarb, William W. Tunnicliffe, IBM). Hier sind hilfreiche Informationen [mehr]

XHTML ist eine W3C-Standard, der HTML und die Wohlgeformtheit von XML verbindet.

Hypertext ist ein lineares Hypermedia-System, das zur Informationsdarstellung und -Verknüpfungen stets ohne Hyperlinks und a-Tags auskommt. Ergänzende Infos [mehr]

HTML-Text-Dokumente mit eingebetteten Formatierungsanweisungen haben einen deutlich geringern Umfang und einen geringeren Speicherbedarf als komplett gerenderte, formatierte und im Layout fertige Bilder von Dokumenten.

Das Mobile Internet (Mobile Internet, Mobilgerät) verwendet Funktechniken und vielfach auch propritäre Standards. Deshalb wird HTML und CSS bei Seiten für Mobilgeräte kaum verwendet. Hier sind hilfreiche Informationen [mehr]

Zu XHTML gehören die Stichworte E(x)tensible-(H)yper(T)ext-(M)arkup-(L)anguage, textbasierte Auszeichnungssprache, oft fuer WWW-Dokumente benutzt (Textinhalte, Bilder, Hyperlinks) W3C-Standard, XML-Syntaxregeln, Wohlgeformtheit, Validierbarkeit.

WHATWG bedeutet Web Hypertext Application Technology Working Group.

Die bekannteste Entwicklung der WHATWG ist (X)HTML 5.

Die WHATWG-Arbeitsgruppe, die von mehreren Unternehmen gestützt wird, arbeitet gegen das W3C.

HTML5 hieß ursprünglich "Web Applications 1.0" Hier sind hilfreiche Informationen [mehr]

die Internet-Dienste, wie E-Mail, IRC, Telnet, FTP, die bekanntlich alle das HTTP-Protokoll verwenden

Festlegungen zu JavaScript und ECMAScript.

der HTTP-Standard, mit dem der Browser Informationen vom Webserver anfordern kann

der HTML-Standard als Dokumentenbeschreibungssprache, die festlegt, wie die Information gegliedert und die Dokumente verknüpft sind (Hyperlinks)

die URL's als eindeutige Adresse (z. B. einer Webseite)

der HTTPS-Standard, bei dem das SSL-Protokoll zwischen TCP und HTTP geschoben und der Datentransfer verschlüsselt wird

der DOM-Standard als Programmierschnittstelle für Skriptsprachen von Webbrowsern

der CSS-Standard, der den Umfang von ECMAScript festlegt

der CSS-Standard, der eine non-propritäre Gestaltung des Layout von Webseiten ermöglicht

Der Request Zyklus einer Webanwendung kann wie folgt ablaufen:

1. Der Browser sendet einen HTTP-Request mit Hilfe von Loopback-Device an die lokale Webanwendung (local host, IP-Adresse 127.0.0.1)
2. Webanwendung verarbeitet die Anforderung und generiert neue Daten als Antwort
3. Webanwendung versendet die Daten mit einer HTTP-Response
4. Darstellung der Daten im Browser

Den Request Zyklus kann ein Benutzer auslösen, indem er (in der Browseransicht) ein Link angeklinkt. Dadurch generiert der Browser ein HTTP-Request, das er über das Netz zum Server (remote host) der Webanwendung schickt. Im HTTP-Request werden Daten (URL und ggf. weitere optionale Daten) übertragen mit deren Hilfe die Webanwendung entscheiden kann, welcher Code auszuführen ist. Anschließend wird der anwendungsspezifische Code der Webanwendung ausgeführt und als Ergebnis z.B. eine HTML-Seite generiert, die zum Browser zurück geschickt und dargestellt wird.

Der Request Zyklus einer Webanwendung kann wie folgt ablaufen:

1. Der Client sendet einen HTTP-Request an die Webanwendung
2. Webanwendung verarbeitet die Anforderung und generiert neue Daten als Antwort
3. Webanwendung versendet die Daten mit einer HTTP-Response
4. Darstellung der Daten im Client (meist ein Browser)

Im header-Tag muss ein title-Tag vorkommen.

Am Seitenanfang fehlt der DOCTYPE.

XHTML benutzt XML-Dokumente und deshalb sollte ein XHTML-Dokument mit einer <?xml ...-Verarbeitungsanweisung beginnen

Dem Text wird durch farbige Auszeichnungen (engl. markup) von Textteilen eine Struktur verliehen.

HTML ist eine Abkürzung für "Home Tool Make a Language"

Die meisten HTML-Elemente werden durch Tags mit Start-Token und End-Token markiert.

Ein Starttag beginnt immer mit dem Zeichen "<". Ein Tag wird mit ">" geschlossen.

Ein explizites Endtag besteht aus den Zeichen "</", dem Elementnamen und dem abschließenden ">".

Ein Endtag darf keine Attribute (Properties) enthalten.

Bei XHTML können die Element- und Attributnamen groß- und klein geschrieben werden.

Bei HTML im Browser geht es um beschreibende Textauszeichnungen (engl. descriptive), und infolge eines impliziten Default-Styles um verfahrens- (engl. procedural) und darstellungsorientierte Textauszeichnungen (engl. presentational).

Obsolete Tags sind Tags, die nicht mehr empfohlen werden.

HTML- und XHTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt.

Für HTML 3.2 gibt es ca. 70 Tags

Für HTML 4.01 gibt es ca. 91 Tags

Für XHTML 1.0 gibt es ca. 77 Tags

Für XHTML 1.1 gibt es ca. 83 Tags

Für HTML 5 gibt es ca. 104 Tags

Für XHTML 2 gibt es ca. 144 Tags

Die E(x)tensible-(H)yper(T)ext-(M)arkup-(L)anguage ist ein W3C-Standard, der XML-Syntaxregeln und Wohlgeformtheit beachtet. XHTML ist eine textbasierte Auszeichnungssprache fuer Dokumente (Textinhalte, Bilder, Hyperlinks).

Ein Browser kann i.a. eine XHTML-Seite "fehler-tolerierend" anzeigen, auch wenn diese Seite die W3C-Emfpehlungen verletzt. Hier sind hilfreiche Informationen [mehr]

Im header-Tag muss ein title-Tag vorkommen

Der DOCTYPE muss innerhalb des header-Tags vorkommen

XHTML benutzt XML-Dokumente und deshalb sollte ein XHTML-Dokument mit einer <?xml ...-Verarbeitungsanweisung beginnen.

Das iframe-Tag ist nach W3C bei XHTML erlaubt.

Das iframe-Tag kann mit einer "URL geladen" werden.

Das iframe-Tag kann mit und ohne Rand in eine XHTML-Seite eingebettet werden.

Für das iframe-Tag können CSS-Styles genutzt werden.

W3C

WAI [mehr]

acronym-taging

AKBI [mehr]

Zahlreiche wissenschaftliche Gruppen (TH, Maschinenbau, Informatiker), die sich mit Ergonometrie (gesunde und behinderte Menschen) beschäftigen [mehr]

Web-Accessibility-Crowler [mehr]

Zahlreiche wissenschaftliche Gruppen, die sich mit dem Universal-Design beschäftigen [mehr]

Der MCI-Fachgruppe der GI [mehr]

Eine Descriptive Markup Language ist eine Auszeichnungssprache, die die Informationen beschreibt. [mehr]

Auszeichnungssprachen (Markup Languages) verwenden Entitäten (engl. entity bzw. entities, deutsch Einheiten, Gebilde), um wiederkehrende Informationseinheiten zu standardisieren.

Eine Procedural Markup Language ist eine Auszeichnungssprache, die die Darstellung beschreibt.

Im Quelltext einer HTML-Seite können für die Entities &, <, > " die Darstellungstoken &amp;, &lt;, &gt;, &quot; verwendet werden.

Die Dateien www.w3.org/TR/REC-html40/HTMLlat1.ent, www.w3.org/TR/REC-html40/HTMLsymbol.ent, www.w3.org/TR/REC-html40/HTMLspecial.ent gehören zu einer .dtd-Definition und enthalten u.a. HTML-Entitäten

XML hat als Ersatzzeichen der XML-Syntax die vordefinieren general entities &amp;, &lt;, &gt;, &apos;, &quot; Darüber hinaus können/müssen bei XML beliebige Entitäten selbst definiert werden. Hier sind hilfreiche Informationen [mehr]

XHTML hat als Ersatzzeichen der XHTML-Syntax die vordefinieren general entities &amp;, &lt;, &gt;, &apos;, &quot;

um z.B. mit Hilfe von

 <img href="my.png" alt="ein Bild" />

im header-Tag ein Bild zu includieren

um z.B. mit Hilfe von table-, tr-, td-Tags eine XHTML-Tabelle zu hinterlegen

um z.B. mit Hilfe der folgenden Style-Klammerung

<style type="text/css"> 
  /* seiteninterne Styles */
</style>

CSS-Styles eintragen zu können, die sich auf alle XHTML-Seiten der Hopmepage auswirken

Einzeilige CSS-Kommentare können durch // eingeleitet werden.

<style type="text/css">
  // Dies ist ein einzeiliger CSS-Kommentar
</style>

W3C-DOCTYPE's sind i.a. "PUBLIC" und über die URL im DOCTYPE-Tag erreichbar

"PUBLIC"-.dtd-Datei können "gedownloaded" werden. Beispiele sind

href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

<br />

<input type='submit' value='Senden' />

<img href="my.png" alt="ein Bild" />

"Lost in Hyperspace" meint eine Desorientiertheit und Überflutung mit ungeordneten Informationen, die im weltweit verzweigten Netzen als Folge eines Übermaßes an Querverweisen und Informationen auftreten kann.

Mit

<a href="#my_ziel";> springe zu <i>ziel</i></a>

...

<a id="my_ziel";></a> ... weiterer HTML-Quelltext

kann im gleichen Dokument zur ziel-Stelle gesprungen werden. Die Zielstelle darf vor oder hinter der Absprungstelle liegen.

a class=/div Mit

<a href="http://www.fremd_domain.de/fremd_dokument.htm/#fremd_ziel";> springe zu <i>fremd_ziel</i></a>

kann zu einem fremden Dokument gesprungen werden, auch wenn die dokumenten-interne Zielstelle nicht existiert.

<a href="javascript:alert('OK geklickt!')";
   onclick="if(!confirm('abbrechen?')){return false;}">
   teste a-Tag
</a>

Das a-Tag nutzt ECMAScript-Code.

'OK geklickt!' wird nur dann angezeigt, wenn der modale confirm-Dialog ('abbrechen?') mit [OK]-Butten beantwortet wird.

Bei der onclick-Ausführung wird der zugehörige Code an das window-Objekt gebunden.

Bei der href-Ausführung wird der zugehörige Code an das Link-Objekt gebunden.

<a href="url" new>...</a>

<a href="url" target="_blank">...</a>

<a href="#dst" target="_blank">...</a>

<a href="#" onclick="location.href='url';return false;" target="_blank">...</a>

<a href="url" target="_top">...</a>

Vom MIME-Type hängt ab, wie der Browser das Dokument verarbeitet.

Bei HTTP stimmt der MIME-Type mit den Dateinamenserweiterungen (z.B. myname.txt) überein. [mehr]

Im WWW, wo Dateien über das Hypertext Transfer Protocol übertragen werden, ist nicht die Dateiendung, sondern der mitgesendete MIME-Typ von Belang, der aber oft aus der Endung ermittelt werden kann. [mehr]

Für den MIME-Type application/xhtml+xml setzt ein XHTML-fähiger Browser seinen XML-Parser ein.

Nach RFC 2854 werden HTML-Dokumente mit dem MIME-Type text/html gesendet.

Nach RFC 3236 sollen XHTML-Dokumente mit dem MIME-Type application/xhtml+xml gesendet werden, können aber wegen der Rückwärtskompatibilität auch mit dem MIME-Typ text/html gesendet werden.

Für XHTML 1.1 soll der MIME-Type application/xhtml+xml gesendet werden

siehe 

de.wikipedia: Internet_Media_Type

 selfhtml: Übersicht von MIME-Typen 

 iana.org: MIME Media Types 

etwa 100 Application Media Types

etwa 100 Audio Media Types

etwa 50 Image Media Types

etwa 20 Message Media Types

etwa 15 Model Media Types

etwa 15 Multipart Media Types

etwa 50 Text Media Types

etwa 70 Video Media Types

An den Zeichen < und > wird ersichtlich, daß dieses Quellcode-Gerüst zu einer Markup-Language gehört.

Zu dem Quellcode-Gerüst gehört dieses Logo:

Zur Zeit (Mai 2012) ist HTML 5 ein W3C-Arbeitsentwurf (Working Draft)

Zur Zeit (Mai 2012) ist HTML 5 ein W3C-letzter Aufruf (Last Call Working Draft)

Zur Zeit (Mai 2012) ist HTML 5 ein W3C-Empfehlungskandidat (Candidate Recommendation)

Zur Zeit (Mai 2012) ist HTML 5 ein W3C-Empfehlungsvorschlag (Proposed Recommendation)

<div id="page">
  <div id="head"><h1> DOM und unescape() </h1></div>
  <div id="nav">...</div>
  <div id="content">...</div>
</div>

Die id-, title-, style-, class-Attribute eines Tags gehören zu den Universal-Attributen von HTML.

Der Wert eines id-Attributes muß seitenweise eindeutig sein.

Auf ein Tag-Objekt, das ein id="content" - Property hat, kann per DOM mit var obj = document.getElementById("content"); zugegriffen werden.

Auf alle div-Objekte einer Seite kann per DOM mit var obj_arr = document.getElementsByTagName("div"); zugegriffen werden.

Weil in einem div-Tag keine weiteres div-Tag geschachtelt werden dürfen, liefert die dargestellte body-HTML-Struktur einen Validierungsfehler.

Das File Transfer Protocol (FTP) nutzt bei der Daten-Übertragung kryptologische Verschlüsselung.

SFTP verwendet eine einzige Verbindung zwischen Client und Server und ( wie auch SSH ) meistens den Port 22 .

Im TCP/IP-Protokollstapel gehört SFTP zur TCP-Transport-Ebene.

Im TCP/IP-Protokollstapel gehören SSH und SFTP zur Anwendungs-Ebene.

Als HTML-Quelltext kann anstelle von @ auch &#64; geschrieben werden.

Als HTML-Quelltext kann anstelle von @ auch &#x40; geschrieben werden.

var str = unescape("%26%2364%3B"); ergibt str = "&#64;";

var str = decodeURIComponent("%40"); ergibt str = "@";

<form action="#">
  <textarea id="TA0" cols="90" rows="30"> <!-- 1 -->
  </textarea>
</form>

Der Formular-Quelltext validiert nach validator.w3, auch wenn <!-- 1 --> durch <p> text </p> ersetzt wird.

Der Formular-Quelltext validiert nach validator.w3, auch wenn <!-- 1 --> durch <textarea cols="90" rows="10"></textarea> ersetzt wird.

Ist das obige Formular das erste Formular im HTML-Body, so liefert

<script>
var o1 = document.getElementById("TA0"),
    o2 = document.getElementsByTagName("textarea")[0],
    o3 = document.forms[0].elements[0],
    s  = [(o1===o2),
          (o2===o3),
          (o3===o1)].join(", "); alert(s);
</script>

die alert(s)-Anzeige alert(s) true, true, true

a        { ... }
a:link   { ... }
a:hover  { ... }
a:active { ... }
a:focus  { ... }

... border-left:1px solid #ccc; text-decoration: none;

Infolge der Hinzufügungen werden alle a-Tag-Texte ( innerHTML ) dann stets unterstrichen.

Alle a-Tag-Texte ( innerHTML ) erhalten am links Textrand eine dünne, vertikale, hellgraue Linie.

Die vorherigen Style-Festlegungen werden nur dann durch das Hinzufügen überschrieben, wenn die alten a-Styles kein border-left und text-decoration hatten oder falls doch, diese border-left- und text-decoration-Werte ohne !important waren.

<a id="A_ID"
   href="javascript:alert(this.document.getElementById('A_ID').nodeName);"
   onclick="alert(this.id);return true;">
   teste 
</a>

Weil bei diesem a-Tag href vor onclick steht, wird bei einen Klick auf das a-Tag erst href und dann onclick ausgeführt.

Bei einen Klick auf das a-Tag wird erst onclick ausgeführt und infolge von return true danach auch noch href.

Bei einen Klick auf das a-Tag zeigt die onclick-alert-Box den String "A_ID" an.

Bei einen Klick auf das a-Tag zeigt die href-alert-Box den String "A" oder "a" ( browser-abhängig )an.

Ein modernes Eventhandling führt browserintern onclick="function anonymous(event) { alert(this.id); return true; }

<script>
function toggle(that, id_dst, visu, s1, s2) { var s = that.innerHTML, 
  dst = document.getElementById(id_dst); if(!that || !dst){ return; }
  s1 = s1 || '[-]'; s2 = s2 || '[+]'; visu = visu || 'block';
  if (s.indexOf(s2) === -1) {
    that.innerHTML = s.replace(s1,s2); dst.style.display = 'none';
  } else {that.innerHTML = s.replace(s2,s1); dst.style.display = visu;
  }
}
</script>

<p> Beginn
  <a href="#" onclick="toggle(this,'MY_ID','inline','[-]','[+]')">[+]</a>
  <span id="MY_ID" style="display:none;"> EINGEBLENDET </span>
  <a href="#" onclick="toggle(this,'MY_ID','inline','[weniger]','[mehr]')">[mehr]</a>
  Ende
</p>

Die beiden a-Tags verwenden onclick="...". Dies ist erforderlich, weil die Alternative href="javascript:toggle(this,'MY_ID');" für this nicht das a-Tag-Objekt übergibt, sondern das window-Objekt.

this wird innerhalb der toggle() - Funktion hier mit that bezeichnet.

Die Ausführung des obigen Code-Musters zeigt den Text "Beginn [+] [mehr] Ende" an.

Teste einen [+]-Klick: Wird [+] geklickt, so erscheint "Beginn [-] EINGEBLENDET [mehr] Ende"

Teste einen [-]-Klick: Wird nun [-] geklickt, so erscheint "Beginn [+] [mehr] Ende" an

Teste einen [+]-Klick mit nachfolgende Klicks:
            Wird [+] geklickt, so erscheint "Beginn [-] EINGEBLENDET [mehr] Ende"
    Wird dann [mehr] geklickt, so erscheint "Beginn [-] EINGEBLENDET [weniger] Ende"
    Wird dann [-] geklickt, so erscheint "Beginn [+] [weniger] Ende"

Ein Aufruf toggle(this,'MY_ID') hat undefinierte Parameter visu, s1, s2. Ein solcher Aufruf toggle(this,'MY_ID') verwendet dann für s1 = '[-]'; für s2 = '[+]'; für visu = 'block';

ECMAScript wird meist in Internet-Seiten eingebettet.

Der ECMAScript-Quellcode wird beim Laden ausgeführt.

Der ECMAScript-Quellcode braucht keinen Zwischencode als Ausführungscodes.

Bei unterschiedlichen Browser-Versionen und Browser-Entwicklern ist der Implementierungsgrad vom aktuellen ECMAScript-Standard nicht identisch und kann browserabhängige Portabilitätsprobleme verursachen.

Der Einsatz ECMAScript erlaubt Software-Praktiken, wie z.B. Kompression, Minifikation, Caching, XSS-Injektion, Off-line-Optimierungen. Solche Praktiken haben Vorteile und Nachteile und sind für viele Nutzer schwer durchschaubar.

Java applets benötigen eine Vorrat von übersetzten Bibliothekscode.

Java applets sind bedingt unsicher (Sicherheitsmodell).

Java applets haben Portabilitätsprobleme (write once, debug everywhere)

Die startup-times (classloading-time) von Java applets ist i.a. recht lang.

Wäre bei einer clientseitigen DOM-Webanwendung die ECMAScript-Engine unendlich schnell, so ist zu erwarten, daß die Browser-Ausführungszeit durch das Rendern des Text-Layout, der CSS-Styles, der Bilder-Darstellung, DOM-Manipulationen, Marshalling und IO zustande kommt.

Ein wesentlicher Vorteil von schnelleren ECMAScript-Engine's sind neue Möglichkeiten von Anwendungen.

Für eine effektive Optimierung von ECMAScript-Code werden neben guten Kenntnissen der Sprache keine weiteren Einbettungs- und Kontext-Kenntnisse benötigt.