Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Hypertext Markup Language

Ähnliche Präsentationen


Präsentation zum Thema: "Hypertext Markup Language"—  Präsentation transkript:

1 Hypertext Markup Language
HTML Hypertext Markup Language

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)

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. 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:

4 Einführung in HTML und CSS

5 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 Head Body Attribute Tags
Evtl. Dokument gemeinsam mit Studenten erstellen (und in der Regel die Dateierweiterung html oder htm hat) HTML-Seite ist ein Textdokument, das über Tags strukturierte Informationen enhält Metainformation: Information über die Information Attribute Tags

7 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 Auszeichnung <pre>, <code>, <em>, <strong>, <cite> Formatierung <table>, <tr>, <td> Formulare <form action=„XY“>, <input>, <select>, <option> Bilder <img src=„XY.gif“> *) Auszug

8 Übung 1: Bewerbungsseite
Inhalt (Werte willkürlich) Demographische Angaben: Name, Adresse, .. Lebenslauf (zweite Seite auf die verlinkt ist) Hobbys (Liste) Tabellarischer Notenspiegel (Fach, Note) Sonstiges Engagement, Besonderheiten Zu verwendende HTML Elemente html, head, title, (meta), body, h1, h2, p, a, ul, li, img*), (table, tr, td) Hinweis auf Stern und auf Farbcode Hilfsmittel: Texteditor Tabelle: Konstruktion anschreiben Kurze Beispiele!!

9 Beispiel csszengarden
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 csszengarden

10 Trennung: Darstellung und Inhalt
Erst den Inhalt und die Struktur, dann die Formatierung Quelle:

11 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> <head> <style type=„text/css“> <!-- HIER_DIE_ANGABEN --> </style> </head> CSS extern: zweite Textdatei Extern: Option 2 <head> <style “style.css";</style> </head>

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

13 CSS „Selektoren“ Elemente (p, h1, ul, div, body, table...) Klassen IDs
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> Gleich ausprobieren? Attribute könnten auch spezifiziert werden, dies wird aber vom IE nicht interpretiert p[align] { color:red; } p[align=center] { color:blue; text-align:left; } Hinweis, dass erster Typ der wichtigste ist und in Übungen verwendet wird

14 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

15 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}

16 Optional: Übung 2: CSS-Dateien
Gehen auf die Seite Lade dort den HTML Quelltext („Download the sample html file“) Betrachte die HTML-Datei im Browser (ohne CSS) Lade zwei CSS-Dateien auf die Festplatte Öffnen die HTML-Datei im Texteditor und setzen den Stylesheet-Pfad auf die erste CSS-Datei. Öffnen die HTML-Datei im Browser Wiederholen Schritt 5. für zweite CSS-Datei Ziel: Es sollte klar sein, dass die Zengarden-HTML-Datei ohne CSS genauso “nackt” wie der Arztbrief aussieht

17 Übung 3: Formatieren mit CSS
Bewerbung formatieren In HTML auf neue CSS-Datei verweisen Schriftart für gesamtes Dokument: Arial Farbe der Überschriften: blau Optional: Hintergrund der Liste: hellgrau Optional: Hobbys mit <span> kursiv formatieren Optional: Elemente in Bewerbung positionieren Demographische und restliche Daten in ein <div>-Element einbetten Elemente positionieren: Demographische Daten links, Rest rechts Es gibt Lösungsdatei Optional  Hausaufgabe Browser Name: XY Geb: 1923 Ort: Freiburg Ausbildung Schule: XXXX HTWG: YYYY Hobbys xxx

18 Limitierung von HTML Keine Überprüfung der Struktur
Bsp.: „Das Dokument hat vier Überschriften <h1>. Jeder Überschrift folgt ein oder mehre Absätze“ Keine Trennung von Struktur und Semantik Bsp.: <p> kann Laborwerte oder Anamnese enthalten Keine Erweiterbarkeit der Tags Bsp.: Tag <patient> gibt es nicht Keine Überprüfung der Semantik (folgt) Bsp.: Beschreibt Dokument genau einen Patienten? Kein Ersatz für Austauschformate Bsp.: *.doc (Nicht Alles lässt sich in HTML darstellen) Unvollständige Trennung von DatenDarstellung

19 Trennung: Daten und Darstellung
Tabelle Balkendiagramm Kreisdiagramm

20 Zusammenfassung 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


Herunterladen ppt "Hypertext Markup Language"

Ähnliche Präsentationen


Google-Anzeigen