Upload
vuongnhan
View
222
Download
0
Embed Size (px)
Citation preview
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
3 Quelle: http://www.f4.fhtw-berlin.de/people/thomas/pdf/glMESO_02.pdf
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
Tags
Attribute
Head
Body
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:[email protected]">
• Auszeichnung <pre>, <code>, <em>, <strong>, <cite>
• Formatierung <table>, <tr>, <td>
• Formulare <form action=„XY“>, <input>, <select>, <option>
• Bilder <img src="XY.gif">
9 *) Auszug
Neuerungen bei HTML 5
10
<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/
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)
12
Arztbrief
Arztbrief
?
Beispiel csszengarden
Trennung: Darstellung und Inhalt
13 Quelle: www.csszengarden.com
Cascading Style Sheets CSS
• Festlegung von Layout/Formatierung
• Werden im Head definiert (extern/intern)
14
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<head>
<style type="text/css">
<!--
HIER_DIE_ANGABEN
-->
</style>
</head>
<head>
<style type="text/css">@import "style.css";</style>
</head>
intern Extern: Option 1
Extern: Option 2
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-size:12pt
font-weight:bold
color:red / color:#FF0000
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
19
<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
p
em ul
li
em
p em {color : red;} p
em
Selektor: Direkte Kindelemente
20
<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
p
em ul
li
em
p > em { color : red;} p
em
Selektor: nachfolgendes Element
21
<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
p
em ul
li
em
h1 + p {color : red;} p
em
Selektor: Attributwerte
22
<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[href="www.ab.de"] {color : red;}
a
Noch mehr Selektoren unter
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Trennung: Daten und Darstellung
23
Tabelle Balkendiagramm Kreisdiagramm
Limitierung von HTML
24
• 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 ausreichende Überprüfung
• … Struktur und Semantik: Bsp.: <p> kann Laborwerte oder Anamnese enthalten
• … Daten und Darstellung
Keine Trennung von…
• Kein Ersatz für Austauschformate . Bsp.: *.doc (Nicht alles lässt sich in HTML darstellen)
• Erweiterbarkeit der Tags: Bsp.: Tag <patient> gibt es nicht
Sonstiges
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