20
HTML Hypertext Markup Language
| Date post: | 06-Apr-2015 |
| Category: |
Documents |
| Upload: | hadwigis-helling |
| View: | 123 times |
| Download: | 1 times |
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 <b>fett</b> dargestellt
b) \section{Überschrift 1}
c)
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
HTML
Einführung in HTML und CSS
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
TagsAttribute
Head
Body
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“>
*) Auszug
Ü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)
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
Trennung: Darstellung und Inhalt
Quelle: www.csszengarden.com
Cascading Style Sheets CSS
• Festlegung von Layout/Formatierung
• Werden im Head definiert (extern/intern)
<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>
internExtern: Option 1
Extern: Option 2
Syntax von CSS-Angaben
Syntaxselector {css-element:wertangabe;}
Beispiele h1 {font:arial; color:green;}
p {font-weight:bold;}
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>
• KlassenStylesheet: .fett {font-weight:bold;} HTML <p class=„fett“>Dieser Text würde fett erscheinen</p>
• IDsStylesheet: #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>
Beispiele für CSS Angaben
• Schriftfomatierungfont-family:‘Times New Roman‘, Times, serif
font-style:italic
font-size:x-small / font-size:12pt
font-weight:bold
color:red / color:#FF0000
• Schriftausrichtungtext-align:left (right, center, justify)
line-height:20px
Positionierung mit CSS
• Elemente<div>: Erzwingt Zeilenumbruch; für Positionierung und Formatierung
<span>: Text ist fortlaufend, zur Formatierung
• BeispielHTML <div id=„box1“>Dieser Text wäre positioniert </div>
Stylesheet: #box1 {position:relative;top:50px; left:9px; width:150px; height:50px; background:red}
Optional: Übung 2: CSS-Dateien
1. Gehen auf die Seite www.csszengarden.com 2. Lade dort den HTML Quelltext („Download the
sample html file“)3. Betrachte die HTML-Datei im Browser (ohne
CSS)4. Lade zwei CSS-Dateien auf die Festplatte5. Öffnen die HTML-Datei im Texteditor und
setzen den Stylesheet-Pfad auf die erste CSS-Datei. Öffnen die HTML-Datei im Browser
6. Wiederholen Schritt 5. für zweite CSS-Datei
Ü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
Name: XYGeb: 1923Ort: Freiburg
AusbildungSchule: XXXXHTWG: YYYYHobbys• xxx
Browser
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 DatenDarstellung
Trennung: Daten und Darstellung
Tabelle Balkendiagramm Kreisdiagramm
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
