Reader zum MOOC "Web-Engineering" Kapitel 4 & 5: HTML & CSS Die PDF-Datei wurde mit Hilfe des Open-Source-Werkzeugs „mwlib“ erstellt. Für weitere Informationen siehe http://code.pediapress.com/ PDF generated at: Fri, 08 Nov 2013 10:43:49 UTC Inhalt Artikel HTML 1 Auszeichnungssprache 1 Hypertext Markup Language 4 Extensible Markup Language 12 Extensible Hypertext Markup Language 21 WYSIWYG 29 WYSIWYM 31 Markdown 32 LyX 35 Zeichenkodierung 37 Zeichensatz 40 Unicode 42 UTF-8 51 Multipurpose Internet Mail Extensions 57 Lynx (Browser) 62 CSS 64 Cascading Style Sheets 64 Logische Auszeichnungen 76 Physische Auszeichnungen 76 Quirks-Modus 77 Reset-Stylesheet 78 Quellennachweise Quelle(n) und Bearbeiter des/der Artikel(s) 80 Quelle(n), Lizenz(en) und Autor(en) des Bildes 82 Artikellizenzen Lizenz 83 1 HTML Auszeichnungssprache Eine Auszeichnungssprache (englisch markup language, ML) dient zur Beschreibung des Inhalts eines Dokumentenformates und teilweise zur Beschreibung des Verfahrens, welches zur Bearbeitung dieser Daten benötigt wird. Ursprünglich dienten die Auszeichnungen im Text als Anweisungen für die Setzer im Drucksatz, mit der Weiterentwicklung in der Typografie für digitale Texte wurden daraus jedoch komplexe Sprachen. Geschichte Die Strukturmerkmale eines Textes können durch Schriftauszeichnung wie Hervorhebungen in Fett- oder Kursivschrift, Fußnoten, Literaturhinweise, Absätze, Überschriften „erkannt“ werden. Notiert wurden derartige Strukturen früher durch sogenannte Textauszeichnungen (markup), die ursprünglich – handschriftlich auf einem Manuskript eingetragen – Formatierungsanweisungen für den Schriftsetzer waren. Funktionsweise Bei Auszeichnungssprachen werden die Eigenschaften, Zugehörigkeiten und Verfahren von bestimmten Wörtern, Sätzen und Abschnitten (Auszeichnungselemente) eines Textes oder einer Datenmenge beschrieben und zugeteilt, in der Regel indem sie mit Auszeichnungselementen – auch Tags genannt – markiert werden. Die Quelltexte werden in der Regel in ASCII oder Unicode, meist UTF-8, verfasst. Oft bietet die Sprache auch die Möglichkeit, Sonderzeichen zu beschreiben, meist mit Hilfe einer numerischen Zuweisung (Unicode) oder durch Benennung, zum Beispiel \mu für µ in LaTeX und in HTML µ. Beispiele Vergleichstabelle Beispiel für … Darstellungsbeispiel HTML LaTeX Wikitext Überschrift Überschrift <h1>Überschrift</h1> \section{Überschrift} = Überschrift = Aufzählung • Punkt 1 <ul> \begin{itemize} * Punkt 1 • Punkt 2 <li>Punkt 1</li> \item Punkt 1 * Punkt 2 • Punkt 3 <li>Punkt 2</li> \item Punkt 2 * Punkt 3 <li>Punkt 3</li> \item Punkt 3 </ul> \end{itemize} fetten Text fett <b>fett</b> \textbf{fett} '''fett''' kursiven Text kursiv <i>kursiv</i> \textit{kursiv} ''kursiv'' Auszeichnungssprache 2 Unterscheidung und Abgrenzung Bei den Auszeichnungssprachen wird heute grob unterschieden in Sprachen zur reinen Beschreibung, Descriptive Markup Language (DML) und in prozedurale Auszeichnungssprachen, Procedural Markup Language (PML). Mit den reinen Beschreibungssprachen werden die Informationen beschrieben, also die physische und logische Struktur eines Dokumentes (neudeutsch: Layout) und die Semantik der Elemente, im Gegensatz zu den prozeduralen Auszeichnungssprachen, welche die Darstellung der Dokumente – unter anderem auf dem Bildschirm, im Webbrowser oder für Drucker – beschreiben.[1] Descriptive Markup Language Zu den reinen Beschreibungssprachen gehören unter anderem die in SGML oder XML definierten Sprachen HTML, DocBook, TEI, MathML, WML, XAML und SVG. Lightweight Markup Language Um Dokumente (z. B. in Wiki, Blogs, Foren) manuell erstellen und lesen zu können, werden vereinfachte Auszeichnungssprachen verwendet. Die Syntax konzentriert sich auf einfacher zu merkende und kürzere Elemente. Meist werden Dokumente für die endgültige Darstellung in eine gewöhnliche Auszeichnungssprache wie HTML oder XHTML serverseitig umgewandelt. Klassische Auszeichnungssprachen, die möglichst viele und genaue Details darstellen können, werden meist maschinell durch Skriptsprachen erzeugt und müssen nicht unbedingt von Menschen direkt verwendet werden können. Müssen aber Inhalte von Menschen manuell geschrieben oder sogar gelesen werden, so können diese entweder mit WYSIWYG grafisch aufbereitet oder direkt durch einfache Auszeichnungssprachen dargestellt werden. Im Gegensatz zu WYSIWYG muss der Text zum Schreiben und Lesen nicht bearbeitet werden. Vereinfachte Auszeichnungssprachen nutzen im Unterschied zu klassischen • keine ausführlichen Tags wie z. B. HTML <a href="Seite">Seite</a>, sondern wenige nicht benutzte Zeichenfolgen (zum Beispiel [[Seite]]), um die Lesbarkeit zu erhöhen • wenn möglich keinen zwingenden Abschluss wie bei SGML-Elementen durch schliessende Tags • dafür Nutzung von Zeilenumbruch oder Leerzeichen als Trennzeichen So ist ein Sternchen (*) am Anfang einer Zeile ein Listenpunkt und wird erst beim Kompilieren als typografisches Aufzählungszeichen dargestellt. Diese Schreibweise ist gegenüber nativem HTML (<ul><li>text</li></ul>) kürzer. Allerdings ist diese Methode nicht ganz eindeutig, denn eine andere Funktion des Sternchens zur Kennzeichnung einer Fußnote kollidiert hier. Andere Funktionen innerhalb einer vereinfachten Auszeichnungssprache verursachen so Fehler. In manchen vereinfachten Auszeichnungssprachen beginnt ein fett geschriebener Text mit dem Sternchen (ich rufe *laut* um Hilfe), was am Zeilenanfang (*Laut* rufe ich um Hilfe) mit der Darstellung für einen Listeneintrag kollidieren wird. Neben reinen logischen Auszeichnung wie Überschriften und reinen Schriftauszeichnung wie fett können auch weitere Funktionen erfüllt werden • Hyperlinks • Tags zur zusätzlichen Auszeichnung eines Datenbestandes mit zusätzlichen Informationen und zur Kategorisierung. • mit Transklusionen Teile anderer Dokumente durch einen Verweis einzuschließen. Vereinfachte Auszeichnungssprachen wurden schon immer in rein textbasierten Systemen (z. B. Readme oder E-Mails) zur Darstellung von Hervorherbungen wie Kursiv oder Fett verwendet, ohne dass diese weiter umgewandelt werden. Die meisten Auszeichnungssprachen haben sich in der Anwendung unterschiedlicher Software gebildet, es gibt kaum standardisierte oder einheitliche Lösungen, obwohl die Funktionen oft ähnlich sind. Auszeichnungssprache 3 • um in Wikis an Hypertexten zusammenzuarbeiten, gibt es unterschiedlichen Wikitext, aber auch den Versuch einer Standardisierung mit Creole • in Foren hat sich der BBCode etabliert • für den Emacs gibt es Org-mode • zur Einbettung von strukturierter Dokumentation in Computerprogramme, (Plain Old Documentation (POD) für Perl oder Javadoc für Java) • Markdown, Textile, AsciiDoc und reStructuredText konzentrieren sich auf jeweils andere Vorgehensweisen. Procedural Markup Language Die darstellenden Seitenbeschreibungssprachen wie das Textsatzsystem TeX und dessen Makropakete LaTeX oder ConTeXt, kann man weitläufigst zu den Auszeichnungssprachen zählen. Hier werden jedoch sowohl Eigenschaften der reinen Beschreibungssprachen sowie der prozeduralen Auszeichnungssprachen verwendet, wie das auch bei den Seitenbeschreibungssprachen für PDF und PostScript der Fall ist. Programmiersprache Die Abgrenzung ist zum Teil jedoch auch sehr schwierig, da beispielsweise bei der Sprache PostScript auch Eigenschaften von Programmiersprachen verwendet werden. Zur Darstellung einer Lissajous-Figur in Postscript müssen so z. B. nicht alle Kanten der Grafik in einer Segmentliste enthalten sein, da diese auch anhand eines programmierten Algorithmus zur Laufzeit erzeugt werden können. Das Ziel ist jedoch eine beschreibende Datenauszeichnung, allerdings wird diese unter Umständen erst zur Laufzeit aus einer prozeduralen Vorstufe dynamisch erzeugt. Die Abgrenzung zu Programmiersprachen wird in diesem Fall fließend, denn wie diese besitzen auch alle Auszeichnungssprachen eine Syntax, eine Grammatik und eine Semantik, was aber noch keine hinreichenden Bedingungen sind zur Definition einer Programmiersprache. Eine Programmiersprache unterscheidet sich von einer reinen Auszeichnungssprache durch die Elemente von Sequenz, Iteration und Auswahl. Einzelnachweise [1] DML (descriptive markup language) (http:/ / www. itwissen. info/ definition/ lexikon/ descriptive-markup-language-DML. html) – Eintrag bei ITWissen.info Hypertext Markup Language 4 Hypertext Markup Language HTML (Hypertext Markup Language) Dateiendung: .html, .htm MIME-Type: text/html Entwickelt von: World Wide Web Consortium Aktuelle Version: 4.01 Art: Auszeichnungssprache Erweitert zu: XHTML, HTML5 [1] [2] Standard(s): ISO/IEC 15445; W3C HTML 4.01, W3C HTML 3.2 [3] Website: www.w3.org/html Die Hypertext Markup Language (engl. ‚Hypertext-Auszeichnungssprache‘), abgekürzt HTML, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Die Auszeichnungssprache wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) weiterentwickelt. Aktuell trägt HTML die Versionsnummer 4.01. HTML5 des W3C bzw. der „HTML Living Standard“ der WHATWG befindet sich in der Entwicklung, wird jedoch schon von vielen aktuellen Layout-Engines unterstützt. Parallel existiert