Editing HTML (section)

==General ==
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===
#[[#Web_Storage|Client side DBs/storage (local storage)]]
#better performance with JavaScript 1.6
#[[#Offline_Cache|cache for offline times and to avoid Http request]]
#form attributes
#[[#Custom_Data_Attributes|'''data-'''* attribute for each HTML element (* means free choice)]]

====Viewport====
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#Viewport|CSS]].
====Web Storage====
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:
#window.localStorage: storage without time limit
#window.sessionStorage: storage for a session (data will be deleted, when the tab is closed) 

For an implementation see [[jStorage|jStorage]].

====Offline Cache====
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection (see [https://www.html5rocks.com/de/tutorials/appcache/beginner/ 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====
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===
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>
 <nowiki>
   <body>
     <h1>
       <h2>
         <h3>
           <h4>
             <h5>
               <h6>
                 <p>
                   <a href="<ULR>">
                   </a>
                 </p>
                 <ul>
                   <li>
                   </li>
                 </ul>
               </h6>
             </h5>
           </h4>
         </h3>
       </h2>
     </h1>
   </body>
 </nowiki>
 </html>

===Document Object Model===
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.