Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML PowerPoint Presentation

HTML

128 Vues Download Presentation
Télécharger la présentation

HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 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: http://www.f4.fhtw-berlin.de/people/thomas/pdf/glMESO_02.pdf

  4. HTML 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

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

  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)

  9. 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 Beispielcsszengarden

  10. Trennung: Darstellung und Inhalt Quelle: www.csszengarden.com

  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> Extern: Option 2 <head> <style type="text/css">@import “style.css";</style> </head>

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

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

  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 www.csszengarden.com • 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

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