HTML und CSS - johner.org · • 1996 Erste Recommendation der Cascading Style Sheets, level 1 •...

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/

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>


</tr>

<tr>



</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

http://www.csszengarden.com/

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">



</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>




</p>


</body>

body

h1

em

p

em ul

li

em

p > em { color : red;} p

em

Selektor: nachfolgendes Element

21

<body>




</p>


</body>

body

h1

em

p

em ul

li

em

h1 + p {color : red;} p

em

Selektor: Attributwerte

22

<body>


<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

http://de.selfhtml.org/

http://slides.html5rocks.com/

http://slides.html5rocks.com/

HTML und CSS - johner.org · • 1996 Erste Recommendation der Cascading Style Sheets, level 1 •...

Documents

Transcript of HTML und CSS - johner.org · • 1996 Erste Recommendation der Cascading Style Sheets, level 1 •...