HTML und CSS Eine kurze Einführung
Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird <b>fett</b> dargestellt b) \section{überschrift 1} c) 2
Historie William Tunnicliffe stellt 1967 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 3
HTML & CSS 4
Was sehen Sie?
Auszeichnung von Dokumenten (Text-) Dokumente bestehen aus Struktur Kapitel, Abschnitte, Verweise, Fußnoten, Aufzählungen usw. Inhalt/Daten Text, Bilder, Audio, Video Format/Darstellung Schriftarten, -größen, -formate, Farben, Positionen 6
Beispiele 7
Head Body Tags Attribute 8
HTML: Erlaubte Tags *) Dokument <html>, <head>, <body>, <title>, <meta> Listen <ul>, <ol>, <li> Gliederung <h1>..<h4>, <p>, <br> Bereiche <div>, <span> Links <a href="http://xx">, <a href="mailto:ab@cd.ef"> Auszeichnung <pre>, <code>, <em>, <strong>, <cite> Formatierung <table>, <tr>, <td> Formulare <form action= XY >, <input>, <select>, <option> Bilder <img src="xy.gif"> *) Auszug 9
Neuerungen bei HTML 5 <meta charset="utf-8"> <!DOCTYPE html> Struktur: section, article, aside, header, footer, nav, figure Sonstige: vido, progress, canvas, details,summary, datalist Input-Types: tel, search, url, email, date, number, color center, font, strike, u, frame, frameset, Draggable, video, offline web applicastions Quelle: http://www.w3.org/tr/2010/wd-html5-diff-20100624/ 10
Hinweis <table>-tag <table border="1"> <tr> <th>spalte 1</th> <th>spalte 2</th> </tr> <tr> <td>zeile 1, Spalte 1</td> <td>zeile 1, Spalte 2</td> </tr> <tr> <td>zeile 2, Spalte 1</td> <td>zeile 2, Spalte 2</td> </tr> </table> 11
HTML: Don t Dos Attribute zur Formatierung font, font-size text-align, valign bgcolor, color padding, margin width, height (Frames) (Tabellen zum Positionieren) Arztbrief? Arztbrief Beispiel 12 csszengarden
Trennung: Darstellung und Inhalt Quelle: www.csszengarden.com 13
Cascading Style Sheets CSS Festlegung von Layout/Formatierung Werden im Head definiert (extern/intern) Extern: Option 1 intern <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> Extern: Option 2 <head> <style type="text/css">@import "style.css";</style> </head> <head> <style type="text/css"> <!-- HIER_DIE_ANGABEN --> </style> </head> 14
Syntax von CSS-Angaben Syntax selector {css-element:wertangabe;} Beispiele h1 {font-familiy:arial; color:green;} p {font-weight:bold;} 15
CSS Selektoren Elemente (p, h1, ul, div, body, table...) Stylesheet: p,li {font:arial; color:green;} HTML <p>dieser Text würde grün erscheinen</p> Klassen Stylesheet:.fett {font-weight:bold;} HTML <p class= fett >Dieser Text würde fett erscheinen</p> IDs Stylesheet: #box1 {top:50px;} HTML <div id= box1 >Dieser Text wäre positioniert (s.u.)</div> Pseudoformate (Links: link visited hover..) Stylesheet: a:visited {text-decoration:none;} HTML <a href= index.html >Home</p> 16
Beispiele für CSS Angaben Schriftfomatierung font-family: Times New Roman, Times, serif font-style:italic font-size:x-small font-weight:bold color:red / color:#ff0000 / font-size:12pt Schriftausrichtung text-align:left (right, center, justify) line-height:20px 17
Positionierung mit CSS Elemente <div>: Erzwingt Zeilenumbruch; für Positionierung und Formatierung <span>: Text ist fortlaufend, zur Formatierung Beispiel HTML <div id= box1 >Dieser Text wäre positioniert </div> Stylesheet: #box1 {position:relative;top:50px; left:9px; width:150px; height:50px; background:red} 18
Selektor: Direkte und indirekte Kindelemente <body> <h1>überschrift <em>wichtig</em></h1> <p>selektoren <em>erster</em> Teil <ul><li>ein <em>listenelement</em><ul> </p> <p>unser <em>zweiter</em> Absatz</p> </body> body h1 em em p ul p em p em {color : red;} li em 19
Selektor: Direkte Kindelemente <body> <h1>überschrift <em>wichtig</em></h1> <p>selektoren <em>erster</em> Teil <ul><li>ein <em>listenelement</em><ul> </p> <p>unser <em>zweiter</em> Absatz</p> </body> body h1 em em p ul p em p > em { color : red;} li em 20
Selektor: nachfolgendes Element <body> <h1>überschrift <em>wichtig</em></h1> <p>selektoren <em>erster</em> Teil <ul><li>ein <em>listenelement</em><ul> </p> <p>unser <em>zweiter</em> Absatz</p> </body> body h1 em em p ul p em h1 + p {color : red;} li em 21
Selektor: Attributwerte <body> <h1>überschrift <em>wichtig</em></h1> <a href="www.ab.de">link 1</a> <a href="www.ce.de">link 1</a> </body> body h1 a a a[href="www.ab.de"] {color : red;} Noch mehr Selektoren unter http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ 22
Trennung: Daten und Darstellung Tabelle Balkendiagramm Kreisdiagramm 23
Limitierung von HTML Keine ausreichende Überprüfung Struktur: Bsp.: Das Dokument hat vier Überschriften <h1>. Jeder Überschrift folgt ein oder mehre Absätze Semantik: Bsp.: Beschreibt Dokument genau einen Patienten? Datum möglich? Keine Trennung von Struktur und Semantik: Bsp.: <p> kann Laborwerte oder Anamnese enthalten Daten und Darstellung Sonstiges Kein Ersatz für Austauschformate. Bsp.: *.doc (Nicht alles lässt sich in HTML darstellen) Erweiterbarkeit der Tags: Bsp.: Tag <patient> gibt es nicht 24
Zusammenfassung HTML geht auf Tim Berner-Lee (CERN) zurück ( 92) ist eine (nicht erweiterbare) Markup-Sprache beschreibt die Struktur (nicht Semantik) von Dokumenten nutzt CSS zur Formatierung/fürs Layout kann mit dem Tutorial von Stefan Münz (http://de.selfhtml.org) erlernt werden wird durch HTML5 erweitert, was die Seite http://slides.html5rocks.com schön erklärt 25