HTML und CSS. Eine kurze Einführung

Größe: px

Ab Seite anzeigen:

Download "HTML und CSS. Eine kurze Einführung"

Leonard Wetzel
vor 10 Jahren
Abrufe

1 HTML und CSS Eine kurze Einführung

$(ML) = Auszeichnungssprache Beispiele a) das Wort wird <b>fett</b> dargestellt b) \section{überschrift 1} c)$

2 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

Markup-Languge (ML) = Auszeichnungssprache Beispiele

3 Historie William Tunnicliffe stellt 1967 generic coding Konzept vor (Trennung Information von Darstellung.) Buch-Designer Stanley Rice veröffentlicht Idee der editorial structure tags Generalized Markup Language (GML): Konzept eines formal definierten Dokumententyps mit einer verschachtelten Struktur 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 Working Draft zur XML, 1998 erste Recommendation 2001 W3C verabschiedet den XML Schema-Standard Quelle: 3

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

4 HTML & CSS 4

5 Was sehen Sie?

6 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

7 Beispiele 7

8 Head Body Tags Attribute 8

9 HTML: Erlaubte Tags *) Dokument <html>, <head>, <body>, <title>, <meta> Listen <ul>, <ol>, <li> Gliederung <h1>..<h4>, <p>, <br> Bereiche <div>, <span> Links <a href=" <a Auszeichnung <pre>, <code>, <em>, <strong>, <cite> Formatierung <table>, <tr>, <td> Formulare <form action= XY >, <input>, <select>, <option> Bilder <img src="xy.gif"> *) Auszug 9

.<h4>, <p>, <br> Bereiche <div>, <span> Links <a href="http://xx">, <a href="mailto:ab@cd.

10 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, , date, number, color center, font, strike, u, frame, frameset, Draggable, video, offline web applicastions Quelle: 10

progress, canvas, details,summary, datalist Input-Types: tel, search, url, email, date, number,

11 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

12 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

13 Trennung: Darstellung und Inhalt Quelle: 13

14 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">  </style> </head> 14

href="style.css"> </head> Extern: Option 2 <head> <style type="text/css">@import "style.

15 Syntax von CSS-Angaben Syntax selector {css-element:wertangabe;} Beispiele h1 {font-familiy:arial; color:green;} p {font-weight:bold;} 15

16 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

fett {font-weight:bold;} HTML <p class= fett >Dieser Text würde fett erscheinen</p> IDs Stylesheet: #box1 {top:50px;}

17 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

font-weight:bold color:red / color:#ff0000 / font-size:12pt

Positionierung mit CSS Elemente <div>: Erzwingt Zeilenumbruch; für Positionierung und Formatierung <span>: Text ist fortlaufend, zur Formatierung Beispiel

18 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

Beispiel HTML <div id= box1 >Dieser Text wäre positioniert </div> Stylesheet:

19 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

20 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

21 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

22 Selektor: Attributwerte <body> <h1>überschrift <em>wichtig</em></h1> <a href=" 1</a> <a href=" 1</a> </body> body h1 a a a[href=" {color : red;} Noch mehr Selektoren unter 22

23 Trennung: Daten und Darstellung Tabelle Balkendiagramm Kreisdiagramm 23

24 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

25 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 ( erlernt werden wird durch HTML5 erweitert, was die Seite schön erklärt 25

Ähnliche Dokumente

HTML. Hypertext Markup Language

HTML. Hypertext Markup Language HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett