HTML

From Wiki RB4

General[edit]

HTML bedeutet Hypertext Markup Language. HTML ist einen Ableger von SGML (Structured Generalized Markup Language) mit spezieller Ausrichtung auf Hypertext -Funktionen. HTML ist eine sogenannte Dokumentbeschreibungssprache. Eine Dokumentbeschreibungssprache hat die Aufgabe, die logische Struktur eines Dokuments (Kapitel, Absätze, Tabellen, etc.) in einer vereinheitlichten, abstrakten Form zu beschreiben. Mittlerweile enthält HTML auch Befehle zur Beschreibung der physischen Struktur (Textformattierungen, Formatvorlagen). HTML geht von einer hierachischen Gliederung aus. HTML benutzt sogenannte Auszeichnungen oder Markups bzw. Tags um Anfang und Ende von Elementen zu beschreiben. Tags bestehen aus spitzen Klammern mit HTML-Befehlen. WWW-Browser, die HTML-Dateien am Bildschirm anzeigen, lösen die Auszeichnungsbefehle auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar. Ein in HTML geschriebenes Dokument kann außer Text auch Grafiken sowie multimediale Elemente (Sound, Video usw.) enthalten. Solche Elemente werden als Referenz auf eine entsprechende Grafik- oder Multimedia-Datei notiert. Ein WWW-Browser muß entsprechende Software-Module besitzen oder aufrufen, mit deren Hilfe solche Dateien dargestellt werden können. HTML-Dateien bestehen aus reinem ASCII-Text. Sie sind daher plattform-unabhängig. Man muß nichts über HTML wissen, wenn man sich einen WYSIWYG-Editor besorgt und sich mit den meist zahlreichen Möglichkeiten zufrieden gibt, die der betreffende Editor bietet. Wenn man den Effekt liebt, den das Setzen von ein paar HTML-Befehlen auf die Präsentation hat, oder wenn man keine Kompromisse bei der Gestaltungsfreiheit machen will, dann ist es auch weiterhin wichtig, sich mit der Sprache HTML zu beschäftigen.

New Features of HTML 5[edit]

  1. Client side DBs/storage (local storage)
  2. better performance with JavaScript 1.6
  3. cache for offline times and to avoid Http request
  4. form attributes
  5. data-* attribute for each HTML element (* means free choice)

Viewport[edit]

The viewport is the area in which a web page is drawn. It can be defined using the "viewport" property in an HTML <meta> tag or in CSS.

Web Storage[edit]

With local or web storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

The Web Storage API contains two new objects:

  1. window.localStorage: storage without time limit
  2. window.sessionStorage: storage for a session (data will be deleted, when the tab is closed)

For an implementation see jStorage.

Offline Cache[edit]

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection (see here). To enable application cache, include the manifest attribute in the document's <html> tag. The manifest file is a simple text file. For the structure and content see UweHeuer project \src\web\mobile.appcache.

Custom Data Attributes[edit]

The specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data,in the sense that the end user can’t see it – it doesn’t affect layout or presentation. To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase). 

var x = article.dataset.<attribute-name without data- prefix>;

Structure[edit]

At the very top of the page you will see the doctype declaration: 

<!DOCTYPE html>

means "this page is written in HTML5" as opposed to, say HTML 4.01. 

<!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
    <meta name="viewport" content="width=[<Pixel>|device-width], initial-scale=<Float>">
    </meta>
  </head>

   <body>
     <h1>
       <h2>
         <h3>
           <h4>
             <h5>
               <h6>
                 <p>
                   <a href="<ULR>">
                   </a>
                 </p>
                 <ul>
                   <li>
                   </li>
                 </ul>
               </h6>
             </h5>
           </h4>
         </h3>
       </h2>
     </h1>
   </body>
 
</html>

Document Object Model[edit]

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of objects.

Verlinkung[edit]

Sonderzeichen[edit]

Sonderzeichen können auf zwei Arten eingegeben werden, einerseits durch eine hexadezimale Codierung des Zeichensatzes (in der Regel bei uns ISO-8859-1 (Latin-1)) oder durch eine spezielle Codierung (s. nachfolgende Tabelle):

ä &auml;
Ä &Auml;
ö &ouml;
Ö &Ouml;
ü &uuml;
Ü &Uuml;
ß &szlig;
< &lt;
> &gt;
>> &raquo;
Leerzeichen &nbsp;
" &quot;
& &amp;

Kommentare[edit]

Kommentare beginnen mit <-- und enden mit -->.

Metainformationen[edit]

In Meta-Informationen können Sie verschiedene nützliche Anweisungen für WWW-Server, WWW-Browser und automatische Suchprogramme im Internet notieren. Einige der Meta-Informationen sind speziell für automatische Suchprogramme im Internet gedacht. Wenn ein WWW-Browser eine Datei anfordert, die auf einem WWW-Server abgelegt ist, kann der Server-Rechner dem aufrufenden WWW-Browser verschiedene Befehle erteilen. Die Übermittlung der Befehle geschieht mit Hilfe des HTTP-Protokolls. Als Autor einer HTML-Datei haben Sie durch Meta-Informationen die Möglichkeit, solche Befehle vom Server-Rechner an den aufrufenden WWW-Browser zu formulieren. So können Sie etwa erzwingen, daß beispielsweise 10 Sekunden nach dem Anzeigen der HTML-Datei automatisch eine andere Datei aufgerufen wird. Oder Sie können erzwingen, daß die HTML-Datei immer direkt vom Server-Rechner geladen wird, niemals von Proxy-Servern (Zwischenspeicher für häufig abgerufene WWW-Seiten). <meta name="description" content= <Beschreibungstext>> Beschreibungstext, der in Suchmaschinen angezeigt wird. <meta name="author" content= <Autor>> Namen des Autors (d.h.: des inhaltlich Verantwortlichen) für die HTML-Datei <meta name="keywords" content= <Wortliste> > Stichwörter für ein Suchprogramm. Ein Anwender, der in der Suchdatenbank des Suchprogramms nach einem dieser Stichwörter sucht, soll die aktuelle HTML-Datei als Suchtreffer angezeigt bekommen, da das Stichwort in dieser Datei ein zentrales Thema ist (keywords = Schlüsselwörter). <meta name="robots" content="noindex"> verbietet einem Suchprogramm, Inhalte aus der HTML-Datei an seine Suchdatenbank zu übermitteln. <meta name="robots" content="index"> Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu übermitteln (index = Indizierung). <meta name="robots" content="nofollow"> Damit erlauben Sie einem Suchprogramm, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu übermitteln (nofollow = nicht folgen). Sie verbieten dem Suchprogramm jedoch, untergeordnete Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen. <meta name="robots" content="follow">: Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei und aus untergeordneten Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen und an seine Suchdatenbank zu übermitteln (follow = folgen). Alle Angaben hinter den Istgleichzeichen müssen in Anführungszeichen stehen. Trennen Sie bei den Schlüsselwörtern die einzelnen Wörter durch Kommata. Sie können alle drei Angaben notieren, aber auch nur eine oder zwei davon. 

<meta http-equiv="expires" content="<Zahl> | <Datum im InternationalFormat>">

Häufig abgerufene WWW-Seiten werden von vielen Providern im WWW auf sogenannten Proxy-Servern gespeichert. Anwender, die einen solchen Proxy-Server kennen, können diesen in ihrem WWW-Browser einstellen. Damit bestimmte Seiten nicht gespeichert werden, wird dieser Eintrag eingefügt. Eine Zahl gibt die Anzahl der Sekunden an, nach deren Ablauf der Browser eine im Cache gespeicherte Datei aktualisieren muß. Das Datum gibt an, ab wann die Datei im Cache aktualisiert werden muß. Setting the HTTP headers is a more effective method of controlling browser caching than using the <META> tag equivalents. For example, <META HTTP-EQUIV="Pragma" CONTENT="No-cache"> is the equivalent of the first HTTP header setting. Setting the HTTP headers is the recommended method, because:

  • Some browsers do not treat the <META> tags in the same way as the equivalent HTTP header settings.
  • On some browsers, the <META> tag equivalents do not work when the callPage() method is used to load a JSP file that contains the <META> tags.

<meta http-equiv="refresh" content="<NrOfSeconds>; URL=<URLDefinition>"> Refresh der aktuellen oder einer anderen Quelle. Mit bestimmen Sie die den Refreshzeitraum bzw. die Dauer wann die unter der <URL> angegebene Datei geladen wird. Eine andere Möglichkeit ist für z.B. das <body>-tag ein JavaSript onLoad-Handler zu definieren, der ein submit auf ein bestimmtes Form ausführt. <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> Datei bitte nicht auf einem Proxy speichern <meta http-equiv="content-type" content="text/html;CHARSET=iso8859-1"> Sie können den Mime-Type der HTML-Datei sowie den darin verwendeten Zeichensatz explizit angeben, um den WWW-Browser zu zwingen, die Datei korrekt zu interpretieren. <META NAME="GENERATOR" CONTENT="IBM WebSphere Application Server 3.5"> Wird von HTML-Editoren, vor allem von Wysiwyg-Editoren ohne Wissen des Autors eingefügt. Software-Hersteller können so prima das Web durchsuchen und feststellen, wo und wieviel mit ihrer Software gearbeitet wird.

Tags und Attribute[edit]

Die Auszeichnungsbefehle in HTML-Dateien heißen Tags. Die Tags bestehen aus spitzen Klammern < und >. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text dazwischen ist der "Gültigkeitsbereich" für die betreffenden Tags. Es spielt keine Rolle, ob die Tags in Form von Klein- oder Großbuchstaben notiert werden. So bedeuten z.B. <h1> und <H1> das gleiche. Tags können ineinander verschachtelt werden. Einleitende Tags und Standalone-Flags können mehrere zusätzliche Angaben bzw. Attribute enthalten. Es gibt folgende Arten von Zusatzangaben in HTML-Tags:

  • Alleinstehende Zusatzangaben, z.B. im Befehl <hr noshade> (Trennlinie ohne Schatten).
  • Zusatzangaben mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. im Befehl <h1 align=center> (Überschrift 1. Ordnung zentriert ausgerichtet - hier sind nur die Werte left, center und right erlaubt).
  • Zusatzangaben mit numerischer Wertzuweisung, z.B. im Befehl <hr width=300> (Trennlinie 300 Pixel breit).
  • Zusatzangaben mit prozentualer Wertzuweisung, z.B. im Befehl <hr width=50%> (Trennlinie 50% Breite des Anzeigefensters).
  • Zusatzangaben mit variablen Namen, z.B. im Befehl <font face="Arial"> (Schriftart Arial).

Bei Zusatzangaben mit variablen Namen sollten Sie den zugewiesenen Wert in Anführungszeichen notieren. In allen anderen Fällen sind keine Anführungszeichen nötig. Lassen Sie bei Wertzuweisungen keine Leerzeichen zwischen Angabe, Istgleichzeichen und Zuweisungswert. So vermeiden Sie Fehler bei weniger toleranten WWW-Browsern.

alphabetische Liste der Tags und Attribute[edit]

<a>[edit]

<a href="<Verweisziel>" [target=("_blank"|"_parent"|"_top"|<framename>)]> ([<img src= "<Filename>">] | <Verweistext> ) </a>

<a name="<Zielname>"> <Zieltext> </a> 

<Verweisziel> := [<Path>][<Filename>]#<Zielname innerhalb des Dokuments> | [<Path>]<Filename> | <WWW-Adresse> | <news Adress> | mailto:<E-Mail Adresse> |

file://localhost/<Laufwerk>:<Path><Filename> 

<Path> := /<Directories> | ./<Directories> | ../<Directories>

Definition von Verweisen (engl. anchor) und Verweiszielen. target=_blank bewirkt, daß ein neues Fenster geöffnet wird.

<applet>[edit]

Aufruf eines Applets <applet code=<ClassFileName[.class]> width=<Number> [heigth=<number> > </applet>


<b>[edit]

<b> </b> Fetter (bold) Text.

<base>[edit]

<base href="<URL>"> Dadurch kann der Browser besser referenzierte Dateien adressieren, in dem er die URL als Basis verwendet. Wenn es wichtig für Sie ist, daß Ihre Projekte leicht auf andere Server-Rechner, in andere Verzeichnisstrukturen usw. übertragbar bleiben, sollten Sie auf die Definition einer Adreßbasis verzichten. Denn mit der Angabe einer absoluten Adreßbasis wird der WWW-Browser stets versuchen, Verweisziele und referenzierte Dateien von der hier angegebenen Adresse zu laden. Dies macht das Austesten der Dateien auf einem lokalen PC unmöglich

<base>[edit]

<base target="<window name>"> Damit wird das Default-Fenster festgelegt, in dem Verweisziele angezeigt werden sollen. Diese Anweisung darf nicht in der Datei stehen, die das Frame-Set enthält. Sie darf nur in Dateien stehen, die innerhalb des Frame-Sets angezeigt werden.

<bode>[edit]

<body background="<GIF or JPEG Filename>" 'bgproperties=fixed' [leftmargin=<Number>] [topmargin=<Number>] [bgcolor=<Farbe>] [link=<Farbe>] [vlink=<Farbe>] [alink=<Farbe>] text=<Farbe> > setzt ein Hintergrundbild als Wallpaper, der IE kann sogar das Hintergrundbild nicht mitscrollen

<button>[edit]

s. Forms

<br>[edit]

alleinstehender Tag; entspricht manuellem Zeilenumbruch

<div>[edit]

<div [id="<name>" [align="(center|...) "] >
  ...
</div>

Mit Divs (Division, Bereich) können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich eingeschlossen werden. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von nach unten CSS formatiert zu werden.

<dd>[edit]

<dd> </dd> Definition des Ausdrucks in Definitionslisten

<dl>[edit]

<dl> </dl> Definitionsliste(dl = definition list = Definitionsliste).

<dt>[edit]

<dt> </dt> zu definierender Ausdruck in einer Definitionsliste


<fieldset>[edit]

Größere Formulare bestehen häufig aus Gruppen von Elementen. Ein typisches Bestellformular besteht beispielsweise aus Elementgruppen wie "Absender", "bestellte Produkte" und "Formular absenden/abbrechen". Solche Elementgruppen können Sie ab HTML 4.0 eigens auszeichnen. Ein Web-Browser kann Elementgruppen durch Linien oder ähnliche Effekte optisch sichtbar machen.

Child elements:

  • legend defines a caption for the

<font>[edit]

'<font [size=<[1..7]>] 'color=<Color>> Fonteintstellungen.


<footer>[edit]

<head>[edit]

Child elements:

<header>[edit]

<h4>[edit]

<h4 align=<xx>> </h4> Überschrift 4

<i>[edit]

<i> </i> italic

<img>[edit]

<img> s. Grafiken 10

<input>[edit]

s. Forms

<label>[edit]

<label for="<Label-Name>" accesskey="<Letter>"> <Labeltext> </label>

Der accesskey bestimmt ein einzelnes Zeichen als Hotkey für das zugehörige Element.

<legend>[edit]

<legend><Text></legend>

<li>[edit]

list item as part of an unordered list

<link>[edit]

Attribute:

  • ...
  • rel
    • rel="contents" steht für: Bezug zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
    • rel="chapter" steht für: Bezug zum Kapitel (chapter = Kapitel)
    • rel="section" steht für: Bezug zum Abschnitt (section = Abschnitt)
    • rel="subsection" steht für: Bezug zum Unterabschnitt (subsection = Unterabschnitt)
    • rel="index" steht für: Bezug zum Stichwortverzeichnis
    • rel="glossary" steht für: Bezug zum Glossar
    • rel="appendix" steht für: Bezug zum Anhang (appendix = Anhang)
    • rel="search" steht für: Bezug zur Suchfunktion
    • rel="author" steht für: Bezug zum Autor
    • rel="copyright" steht für: Bezug zur Copyright-Angabe
    • rel="next" steht für: Bezug zur nächsten Datei in der "Guided tour" (next = nächste Seite)
    • rel="prev" steht für: Bezug zur vorherigen Datei in der "Guided tour" (prev = previous = vorherige Seite)
    • rel="first" steht für: Bezug zur ersten Datei in der "Guided tour" (first = erste Seite)
    • rel="last" steht für: Bezug zur letzten Datei in der "Guided tour" (last = letzte Seite)
    • rel="up" steht für: Bezug zur übergeordneten Kapitelseite
    • rel="top" und rel="start" steht für: Bezug zur Startseite
    • rel="help" steht für: Bezug zum Hilfekontext (help = Hilfe)
    • rel="bookmark" steht für: Bezug zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
    • rel="stylesheet" steht für: Bezug zu einer Datei mit Style-Definitionen, die zur Darstellung herangezogen werden.
    • rel="alternate" steht für: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternierend).
    • rel="alternate stylesheet" steht für: Bezug zu einer Datei mit alternativen Style-Definitionen, die auf Wunsch des Benutzers zur Darstellung herangezogen werden.
    • rel="shortcut icon" steht für: Bezug zu einem in der Adressleiste oder in den Lesezeichen angezeigten Icon (Favicon).
  • ...

<marquee>[edit]

<marquee direction=(left|right)> <text> </marquee>

Lauftext. Marquee ist IE spezifisch. Direction="Up"

<nav>[edit]

<object>[edit]

<object classID="<Name>" width="<pixel>" heigth="<pixel>"> {<param name="<property>" value="<value>">}</object> The object element is used to embed custom objects in an HTML document. The object element is used to extend HTML by embedding Java applets, ActiveX controls, and supported MIME types. Browser that use the object elements ignore any HTML statements in between. Therefor you can put a not past the parameter section which tells the user that his browser does not support object elements.

<p>[edit]

<p [align=(center|left|right|justify|top)]> [</p>]

Absatz

<span>[edit]

Analog zum div-Element, das andere Block-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von nach unten CSS formatiert zu werden.

<strike>[edit]

<strike> </strike> <s> </s> Durchgestrichener Text.

<textarea>[edit]

s. Forms

<title>[edit]

<title> <text> </title> dieser Text steht im Browser als window caption.

<u>[edit]

<u> </u> Unterstrichener Text.

<ul>[edit]

unordered list, can be nested in list items

Farben[edit]

Obwohl die HTML-Tags der entsprechenden Farbdefinitionen sehr unterschiedlich sind, gilt bei allen Farbdefinitionen ein einheitliches Schema. Grundsätzlich gibt es zwei Möglichkeiten, Farben in HTML zu definieren:

  • durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe)
  • durch Angabe eines Farbnamens

Wenn Sie hexadezimale Werte angeben, arbeiten Sie Browser-unabhängig, und Sie haben die volle Freiheit zwischen 16,7 Millionen Farben. Wenn Sie Farbnamen angeben, umgehen Sie die etwas schwierige Definition einer Farbe im Hexadezimal-Modus. Derzeit gibt es jedoch noch keine standardisierten Farbnamen. Farbnamen sind also weitgehend Browser-abhängig. #<ZweiZiffernFuerRot><ZweiZiffernFuerGrün><ZweiZiffernFuerBlau> Hexadezimale Eingabe von Farben

Eine gute Übersicht über 216 Farben gibt es bei http://www.uni-essen.de/www/selfhtml/tcaeb.htm.

Tabellen[edit]

<table [border[=<Aussenrahmendicke in Pixel>]] [cellspacing=<Pixel>] [cellpadding=<Pixel>] [frame=box] [bgcolor=<Color>] [width=(<Pixel>|<Prozent>)]  [height=(<Pixel>|<Prozent>)]>
[<colgroup> { <col width=<ColWidth>>} </colgroup> |

<colgroup width=<ColWidth> span=<NrOfCols>>} {<col [width=<Number>]>}</colgroup>]

['<th 'colspan=<AnzahlSpalten>]> {<tr [bgcolor=<Color>] [valign=(top|...)]> {<td [bgcolor=<Color>] [height=<Number>] [nowrap] [align=(center|right|???)> []} }

border steuert, ob die Tabelle blind ist d.h. ohne oder mit Rahmen. bgcolor steuert die Hintergrundfarbe der gesamten Tabelle. Prozentangaben beziehen sich auf das Elternelement, wirken aber nur, wenn Platz aufzufüllen ist. HTML 4.0 bietet eine neue Syntax an (<colgroup> </colgroup>), um dem Browser gleich zu Beginn der Tabelle mitzuteilen, wie viele Spalten die Tabelle hat. Dadurch kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist. Man kann dabei die einzelnen Spaltenbreiten angeben oder über span und width für eine bestimmte Anzahl eine Breite vorgeben.

(table row) leitet eine neue Tabellenzeile ein. Im Anschluß daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag notiert. valign=top in der ersten Zeile bewirkt, daß alle Zellen am oberen Rand beginnen. (th = table header = Tabellenkopf ) definiert eine Kopfzelle. (table data) definiert eine normale Datenzelle. Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. Die Befehlsfolge   nutzt man am besten für leere Tabellenzellen aus. height erzwingt eine spezifierte Höhe der gesamten Zeile.

Grafiken[edit]

<img src="<Filename>">

Frames[edit]

Das Grundgerüst einer HTML-Datei, in der Frame-Sets definiert werden, weicht vom Grundgerüst einer gewöhnlichen HTML-Datei ab. Hinter dem abschließenden </head> beginnt die Frame-Set-Definition. <frameset> leitet die Definition eines Frame-Sets ein. Dahinter folgen die Definitionen der einzelnen Frames oder verschachtelter Frame-Sets. </frameset> schließt die Definition des Frame-Sets ab. Hinter dem letzten </frameset> sollten Sie immer einen normalen Dateikörper definieren. Dies geschieht wie üblich durch <body> und </body>. Innerhalb dieses Dateikörpers können Sie alle üblichen HTML-Elemente notieren. So können Sie dem Anwender in diesem Bereich mitteilen, daß sein WWW-Browser keine Frames unterstützt und Ihr Projekt deshalb nicht anzeigen kann. Frames werden oft bei Seiten mit Menüs verwendet. Im Menu-Teil wird der Inhalt-Frame per target-Attribut in Verweisen umgeschaltet (s.HTML#A).

Framesets definieren[edit]

<html>
<head>
...
</head>

<frameset (rows=(<Höhe>[%] {, <Höhe>[%]}| *) 
 cols=(<BreiteInPixel>[%] {, <BreiteInPixel>[%]} | *) ) 
 bordercolor= <Color> [border= <Number>] [frameborder=  
 0|1|yes|no) ] [framespacing= <Number> >
  <FramesetDefinition> or
  <frame src="<HTML page>" [name="<Name>"] [scrolling= [yes|no]]
   [marginwidth= <Number>] [marginheight= <Number> [noresize] 
   [frameborder= <Number>] >
</frameset>
<body>
  Ihr Browser versteht keine Frames.
</body>

* kennzeichnet quasi den Rest des zur Verfügung stehenden Platzes. src kennzeichnett die in dem Frame angzeigte HTML-Page. noresize bewirkt, daß die frame size vom Anwender nicht verändert werden kann. Wenn man frameborder, framespacing und border auf 0 setzt, werden keine Rahmen gezeichnet. Über die cols und rows wird die Aufteilung festgelegt. Zahlen ohne Prozentangaben bestimmen Pixel. * kennzeichnet den restlichen Bereich.

Scripts/DHTML[edit]

Script-Programme werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden nicht - wie etwa Java-Programme - compiliert, sondern als Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw. Shellscripts. Dazu besitzen moderne WWW-Browser wie Netscape oder Microsoft Internet Explorer entsprechende Interpreter-Software. By embedding scripts in a document you can access the HTML objects to manipulate the elements on a Web page. A minimal HTML object model was first introduced as part of NN 2.0 JavaScript implementation. IE 3.0 separated the original object model for describing the document from the language implementation. IE 4.0 built on this object model to completely expose all aspects of the document. Developers designed the DHTML object model as a superset of the existing model. The ability to access and change any aspect of a page demonstrates one of the key innovations enabled by DHTML. Whenever a script manipulates and changes an attribute of an element or a style sheet or modifies the contents, the document intelligently recalculates and repaints the page. The DHTML object model exposes a reflection of the document to the scripting language. A HTML document can contain any number of script elements. A script element can live in either the head or the body. Scripts that execute during the parsing of a page and that reference elements on the page need to be positioned carefully because only those elements are available that have been loaded prviously. Therefore you should check for the existance of the object. Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muß. Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen solchen Bereich im Kopf der HTML-Datei, also zwischen <head> und </head> zu definieren und durch HTML-Kommentare zu klammern. Dadurch ist am ehesten sichergestellt, daß der Code vom WWW-Browser bereits eingelesen ist und zur Verfügung steht, wenn er ausgeführt werden soll. 

<head> <!-- nicht zwingend im Head Bereich -->
<script [type="text/javascript"] [src="<Filename>"] [Defer]>
  <Script statements>
</script>
</head>

If the language attribute is missing JavaScript is used. Die Script Sprache kann auch über den MIME type eingestellt werden. Scripts contained within a Script element can execute code in two contexts: during the parsing of the page and as the result of an event. Ein sogenannter EventHandler wird an den HTML-Tags spezifiziert. Das Attribut beginnt in der Regel mit on<Event> gefolgt von einem =-Zeichen und dem JavaScript-Code. Alles was nicht in einer Function steht direkt beim Laden der Page ausgeführt. So kann es u.U. sinnvoll sein den Code am Ende zu plazieren, damit bestimmte Felder initial gefüllt werden. Browser that support the src tag ignore the contents of the script element. The defer attribute tells the browser that it does not need to wait until the script is parsed but can continue to load the page. Variables and functions that are scoped to the window object e.g. declared in the statement block are added to the window object as properties. Therefore it is possible to call a function from one script statement in another script statement even if they are implemented in a different language. Code that calls a function while the page is loading must have the function declared in advance . This feature can be used to find out which Scripting language is supported by the browser . To prevent that down-level browser will render the script code as HTML text the code should be wrapped in comment, while the closing comment is preceeded by the language-specific comment delineator , but be careful not to put the HTML comment anywhere as a string in your code section. In a <NOSCRIPT> <HTML statements> </NOSCRIPT> section there can be a note that the current browser does not support scripting . For browser that do not support the <NOSCRIPT> tag it is possible to put a note in the code section . Another solution might be to test the browser version and switch to another page . Die Quellen in eine Source-Datei abzulegen ist eine simple Möglichkeit die Quellen zu schützen. Leider kann man den Schutz mit <a href="<URL>\<SourcePath>\<SourceFile>"> Load <\a> leicht umgangen werden.

Events[edit]

Events are notifications that occur as a result of user actions or state changes within a document or window. The user generates events by moving or clicking the mouse. Document state changes that can fire events include the loading of the document, the occurrence of an error or the changing of focus. HTML documents are structured documents with a defined containership hierarchy. Event bubbling is the generic capability for all actions to follow this hierarchy. When an event occurs it fires first on the source element and then on the source’s parent element and so on until it reaches the document element. All elements on the page even P, H1, etc. do fire events. In addition to event bubbling many events have default actions. A default action is what a browser normally does as a result of an event, for example loading a page for a link <A HREF...>. It is possible to override the default action. The default action can be performed by the parent element. If the child already cancels the the action the default action of the parent will not be called. Event bubbling and default actions are different concepts and can be controlled differently. Event Binding is the association between a specific event and a script. In DHTML all the elements within a document have been extended to support keyboard and mouse events. These events are exposed as attributes directly on each element, allowing a direct association between the element and the behavior. For example you can bind the onclick event of a button to a function using the attribute as follows : <input type=button value="Click Here" onclick="foo();" language="JavaScript"> The called funtion has to be declared before. The disadvantage of this approach is that the event attribute is part of the HTML standard which has to be extended for every new attribute. Another binding mechanism overcomes this disadvantage. It uses a script extension like in the following example: 

<script for="document" event="onmousemove()" language="JavaScript"> <code></script>

Java Script is case sensitive for the event and for attribute values. The NN ignores the two attributes and executes the code at once . The parantheses after the function name are optional. Events are also available as properties of DHTML objects. These events can be assigned to a function pointer. The functions have access to the object, which have an appropriate event handler through the this construct and access to the element, which fired the element through the srcElement construct.

Specials[edit]

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren.

Forms[edit]

Beispiele[edit]

  • JSTEST.HTM
  • SCPTTST.HTM

Literatur[edit]

Ein Verweis auf weitere Literatur enthält http://hau1.hub.de/digimat/entwick/noworld/nomirror/html/tbad.htm]|http://hau1.hub.de/digimat/entwick/noworld/nomirror/html/tbad.htm.

Retrieved from "http://uweheuer.spdns.de/mediawiki_new/index.php?title=HTML&oldid=7032"