Logo

Kurs: Internet/Intranet Dienste des Internet Inet-Kurs (INHALT) Registrierung im Internet
Hypertext Markup Language

6.1HTML-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
    KursbezeichnungKurszeitraumRaumTeilnehmerplatz
    TIKIN2-PB24-28.03.2016PC-Labor 42PC-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.2Das WorldWideWebConsortium (W3C)
6.3 Nachschlagewerke (für HTML/CSS)
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.5Webseiten für Mobile-Browser

Meinolf Mühlenjost 2020 Dienste des Internet Inet-Kurs (INHALT) Registrierung im Internet