6. MARKUP LANGUAGE ML
„Eine Auszeichnungssprache dient zur Beschreibung
des Inhalts eines Dokumentenformats“
- Quelle Wikipedia
7. MARKUP
MARKUP LANGUAGE ML
Beispiel für … HTML LaTeX Wikitext
<h1> section{
Überschrift Überschrift Überschrift = Überschrift =
</h1> }
<ul> begin{itemize}
<li>Punkt 1</li> item Punkt 1 * Punkt 1
Aufzählung <li>Punkt 2</li> item Punkt 2 * Punkt 2
<li>Punkt 3</li> item Punkt 3 * Punkt 3
</ul> end{itemize}
fetten Text <b>fett</b> textbf{fett} ''fett'''
9. HTML Historie
- 1967 William Tunnicliffe stellt generic coding – Konzept vor (Trennung
Information von Darstellung.) Buch-Designer Stanley Rice veröffentlicht Idee der
editorial structure tags.
- 1969 Generalized Markup Language (GML): Konzept eines formal definierten
Dokumententyps mit einer verschachtelten Struktur.
- 1986 GML wird zu ISO 8879: Standard Generalized Markup Language (SGML)
„Vater“ ist Charles Goldschwab, IBM
- 1989 Tim Berners-Lee (CERN) beschreibt Grundzüge des WWW
- 1992 Tim Berners-Lee stellt ersten Entwurf zu HTML vor
- 1993 Alpha-Version des "Mosaic for X"-Browser (Netscape Browser)
- 1994 MIT und CERN vereinbaren Gründung der W3 Organisation
- 1996 Erste Recommendation der Cascading Style Sheets, level 1
- 1996 Working Draft zur XML, 1998 erste Recommendation
- 2001 W3C verabschiedet den XML Schema-Standard
Quelle: http://www.f4.fhtw-berlin.de/people/thomas/pdf/glMESO_02.pdf
10. Dokumente bestehen aus
Struktur Format/Darstellung
(Kapitel, Abschnitte, (Schriftarten, -größen, -
Aufzählungen ...) formate, Farben, Positionen...)
Inhalt / Daten
(Text, Bilder, Video ...)
11. Grundgerüst einer XHTML-Datei
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beschreibung der Seite</title>
</head>
<body>
</body>
</html>
12. HTML XHTML
<!DOCTYPE html PUBLIC "-//W3C// <!DOCTYPE html PUBLIC "-//W3C//
DTD HTML 4.01//EN" DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/html4/ ! "http://www.w3.org/TR/xhtml1/
strict.dtd"> DTD/xhtml1-strict.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/
1999/xhtml" xml:lang="en"
lang="en">
<body> <body>
<h1>Überschrift1</h1> <h1>Überschrift1</h1>
<p>Paragraph</p> <p>Paragraph</p>
Zeilenumbruch<br> <p>Zeilenumbruch<br/></p>
<ul> <ul>
<li> Erstes Listen Element <li>
<li> Zweites Element Erstes Listen Element
</ul> </li>
</body> <li>
Zweites Element
</li>
</ul>
</body>
13. DOCTYPE - Document Type Definition
DOCTYPE Beschreibung
Schließt aus, dass die Darstellung des Dokuments
strict Elemente und Attribute benutzt, die das W3C als
Aufgabe von Stylesheets ansieht.
Kennzeichnet ein Dokument, in dem Elemente und
transitional Attribute benutzt werden, die als unerwünscht
gelten. (Dokumente für Browser ohne CSS)
Kennzeichnet ein Dokument, das Frames (nicht
frameset iframe) benutzt.
14. XHTML DOCTYPE Definition
XHTML 1.0 - Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
15. HTML Grundelemente
Überschriften <h1><h1>
Textabsätze <p></p>
Zeilenumbruch <br/>
Zitate <blockquote>
Präformatiertem Text <pre></pre>
Block-Elemente <div><div> <span>
Trennlinien <hr/>
20. Anti Pattern
„Anti-Pattern (deutsch: Antimuster) bezeichnet in der
Softwareentwicklung einen häufig anzutreffenden schlechten
Lösungsansatz für ein bestimmtes Problem.“ - Wikipedia
21. HTML - Anti Pattern
Attribute zur Formatierung
font, font-size
text-align, valign
bgcolor, color
padding, margin
width, height
Frames / iFrames
Tabellen zum Positionieren
23. Separation of Concerns (SoC)
„Verschiedene Elemente der Aufgabe sollten möglichst in
verschiedenen Elementen der Lösung repräsentiert werden.“
- Wikipedia
24. CSS
CASCADING STYLE SHEETS
Einführung in die Grundlagen von CSS
25. Syntax von CSS-Angaben
Syntax
selector {css-element:wertangabe;}
Beispiele
h1 {font:arial; color:green;}
p {font-weight:bold;}
26. CSS Selektoren
Elemente (p, h1, ul, div, body, table...)
Stylesheet
p {font:arial; color:green;}
HTML
<p>Dieser Text ist grün</p>
30. Zusammenfassung HTML CSS
HTML geht auf Tim Berner-Lee (CERN) zurück (´92)
Ist eine (nicht erweiterbare) Markup-Sprache
Beschreibt die Struktur (nicht Semantik) von Dokumenten
Sollte CSS zur Formatierung/Layouten nutzen
Kann mit dem Tutorial von Stefan Münz (http://
de.selfhtml.org) erlernt werden
31. HTML UND CSS
PATTERNS
Einführung in grundlegende HTML und CSS
Pattern
