pdf

Literatur
[2-1]
Münz, Stefan: SelfHTML 8.1.2
http://aktuell.de.selfhtml.org/extras/download.shtml
Etwas veraltet, aber immer noch sehr gut
[2-2] Robbins, Jennifer: HTML&XHTML kurz&gut. 4. Auflage, O'Reilly, 2010
[2-3]
Hess, Uwe; Günther, Karl: html 4. bhv-Taschenbuch, 2. Auflage, 2002
[2-4]
Tolksdorf, Robert: Die Sprachen des Web: html & XHTML. dpunkt, 4.
Auflage, 2000
[2-5]
Kloss, Birgit: CSS und DHTML. Markt + Technik, 2002
[2-6]
Lubkowitz, Mark: Webseiten programmieren und gestalten. Galileo
Computing, 2003, Teil 2
[2-7]
Münz, Stefan: <professionelle Websites>. Addison-Wesley, 2005
[2-8]
http://www.w3.org/TR/xhtml1/
[2-9]
https://de.wikipedia.org/wiki/Extensible_Hypertext_Markup_Language
Webtechnologien – SS 2017 - Teil 2/HTML I
2
Übersicht
• Geschichte von HTML
• Ziele von HTML und XHTML
• Grundlagen
– Kopfteil
– Body
– Tabellen
Webtechnologien – SS 2017 - Teil 2/HTML I
3
Geschichte
• HTML 1, 1990
• HTML 2, 1995, RFC 1866
Vieles nie implementiert, anderes zusätzlich realisiert
• HTML 3.2, 1997
Tabellen, Auszeichnungen
• HTML 4.01, 1998
Style Sheets (CSS), Einbindung von Scripts, Unicode
• XHTML = XML + HTML, ab 1995
• HTML 5, ab 2010
Nicht vollständig standardisiert.
Ein vollständiger Standard wird 2017 erwartet.
Webtechnologien – SS 2017 - Teil 2/HTML I
4
Kompatibilität I
• Es bestimmen die Browser, was HTML ist und welche Bedeutung ein
bestimmtes Konstrukt hat.
• Da jeder implementieren kann, was er will, und das auch leider tut,
gibt es viele Inkompatibilitäten.
• Hier wird HTML 4.01, HTML 5 und XHTML 1.0 betrachtet.
Wer Web-Sites für Desktop-Rechner baut, muss leider seine Seiten
mit folgenden Browsern testen:
Windows
Macintosh
Unix/Linux
Wie Windows
Ab Firefox 40.*
Ab Explorer 9
Ab Firefox 40.*
Ab Opera 15.*
Ab Chrome 31.*
Lynx 2.8
Versionen
ab 2013
Ab Opera 15.*
Ab Safari 7.*
Ab Chrome 31.*
Lynx 2.8
Siehe auch: https://www.browser-statistik.de/statistiken/versionen/
Webtechnologien – SS 2017 - Teil 2/HTML I
5
Kompatibilität II – Beispiel aus http://caniuse.com
http://caniuse.com/#feat=inline-block
Webtechnologien – SS 2017 - Teil 2/HTML I
8
Kompatibilität III
• Wenn sich eine Site von "allein" im Layout an die Größe des
Ausgabegeräts anpassen kann, dann wird vom Responsive
Design gesprochen.
• Das Testen wird dann noch schlimmer, da mit den Browsern
auf den mobilen Endgeräten getestet werden muss; denn dann
kommen noch Android, iOS und Windows Phone hinzu.
Test auf html 4/xhtml 1.0/HTML 5-Kompatibilität:
http://validator.w3.org
http://www.validome.org/
http://www.w3schools.com/website/web_validate.asp
http://schneegans.de/sv/
http://jigsaw.w3.org/css-validator/
http://aktuell.de.selfhtml.org/artikel/server/validator/
Webtechnologien – SS 2017 - Teil 2/HTML I
9
Validatoren
Webtechnologien – SS 2017 - Teil 2/HTML I
10
Grammatik in den Foliensätzen
• Syntaktische Abschnitte werden hier in einer Pseudo-BNF
dargestellt:
– Worte in Normalschrift sind terminale Symbole
(terminal bedeutet direkt zur Sprache gehörig)
– Worte in Kursiv sind nonterminale Symbole
(nonterminal bedeutet Name einer Regel)
– Worte geklammert in eckigen Klammern sind optional
– Drei Punkte ... bedeuten beliebiger Text, der keine eigene Bedeutung in
HTML bzw. im betroffenen Kontext hat.
• Um alles etwas einfacher zu machen, werden nicht immer alle
optionalen Teile eines Elementes aufgeführt.
• Die folgenden Abschnitte beschreiben HTML daher nicht vollständig.
Webtechnologien – SS 2017 - Teil 2/HTML I
11
Erläuterungen zur Grammatik
• Grammatik = Regelsystem, das den syntaktischen Aufbau einer
Sprache (im Sinne der Informatik) bestimmt
• Terminale Symbole = Zeichenketten, die zur Sprache selbst
gehören und daher so wie ausgedrückt benutzt werden müssen
• Nonterminale Symbole = Namen von Regeln, also
Zeichenketten, die nur zur Grammatik, aber nicht zur Sprache
gehören
Diese müssen durch andere Texte, die Terminale Symbole sind,
ersetzt werden
• BNF = Backus-Naur-Form = Bestimmte Form einer
Grammatikdefinition
(benannt zu Ehren der beiden "Erfinder" Backus und Naur)
Siehe: http://de.wikipedia.org/wiki/Backus-Naur-Form
Webtechnologien – SS 2017 - Teil 2/HTML I
12
Ziele von HTML I
• HTML ist (eigentlich) eine Auszeichnungssprache.
Diese definiert ein abstraktes Layout ohne Festlegung der
Umsetzung in eine Präsentation; es wird nur die Funktion oder die
Rolle eines Textstücks beschrieben.
• Layout = (hier:) Regeln zur Kombination und für Werte von
graphischen Attributen von Elementen, z.B.:
–
–
–
–
Zeichengröße, Schriften
Farben, Farbverläufe
Größe
Umrahmungen
Diese Regeln befassen sich mit der Präsentation, also der extern
wahrnehmbaren Darstellung.
• Software zur Präsentation macht aus Daten bzw. Anweisungen und
den Layoutregeln eine konkrete Seite.
Webtechnologien – SS 2017 - Teil 2/HTML I
13
Ziele von HTML III
• Ein wichtiges Ziel des W3C ist die Mehrsprachlichkeit.
Dies betrifft:
– Wahl landes-/sprachspezifischer Kodierungen, z. B. Russisch
– Wahl der Anordnung der Zeichen auf einer Seite (Leserichtung)
– Wahl der Anordnung der Seiten (von Vorne nach Hinten oder
umgekehrt)
• Ein weiteres Ziel ist der erleichterte Zugang von Menschen mit
Behinderungen.
Ein gutes Beispiel: http://www.sos-kinderdorf.de/portal
Siehe auch: http://www.biene-award.de/ausschreibung/
Webtechnologien – SS 2017 - Teil 2/HTML I
15
Grundlagen der Syntax I
• Tag = Marke = Etikett = Zeichenkette innerhalb von <>
• Container-Elemente haben neben dem Inhalt ein Start- und ein
Ende-Tag:
Start: <xyz> Ende: </xyz> mit xyz als Tag-Name
– Die Wirkung des Tags bezieht sich auf den umschlossenen Bereich.
– Diese Tags können geschachtelt werden, wobei die Wirkung von außen
nach innen vererbt wird.
– Bei XHTML muss es immer ein abschließendes </xyz> geben, bei HMTL
4/5 kann es bei manchen Tags weggelassen werden.
• Elemente ohne Inhalt haben bei XHTML am Ende den Slash:
<xyz />, sonst ohne Slash <xyz>
• Beispiele:
<em> ... </em>
<body> ... </body>
<hr>
Webtechnologien – SS 2017 - Teil 2/HTML I
16
Grundlagen der Syntax II
• Die Tag-Namen werden klein geschrieben.
• Unbekannte Tags werden normalerweise von den Browsern
ignoriert, sofern sie der generellen Syntax von (X)HTML
entsprechen.
• Attribute = Zusatzbestimmungen innerhalb eines Tags
– Aufbau: key=value, wobei value ein String umschlossen von " ist.
– Mehrere Attribute werden in Listen mit Leerzeichen als
Trennzeichen zusammengefügt.
– Hat ein Attribut keinen Wert, so wird es in XHTML key="key"
geschrieben, in HTML 4/5 einfach nur key.
– Die Namen von Attributen werden immer klein geschrieben.
Beispiele:
<img src="logo.gif">
<link rel="Glossary" href="URL"/>
<hr noshade="noshade"/>
HTML 4/5
XHTML
XHTML
17
Webtechnologien – SS 2017 - Teil 2/HTML I
Werte und Einheiten
Typ
Beispiel
Werte in Pixel
width="36"
Werte relativ zum Umfeld
width="30%"
Fließkommazahl mit Einheit
width="1.7in"
Einheiten (Auszug)
pt
Punkt
absolut
in
Inch, Zoll
absolut
cm
em
absolut
Höhe des Fonts (Zeichen M) relativ
72 pt = 1 in = 2,54 cm
Webtechnologien – SS 2017 - Teil 2/HTML I
em ist eine relative Maßeinheit,
da deren Größe sich auf die
aktuelle Font-Größe bezieht.
18
Syntaktischer Aufbau einer Seite
<!DOCTYPE ... ... >
<html>
<head>
... Kopfteil
</head>
<body>
... Seiteninhalt
</body>
Leerzeichen, Tabulatoren, Zeilenumbrüche werden ignoriert. Das Tag
<pre> beachtet diese „Whitespaces“.
Framesets bilden eine Ausnahme.
Diese werden aber in dieser Veranstaltung nicht betrachtet.
</html>
19
Webtechnologien – SS 2017 - Teil 2/HTML I
Typ des Dokuments
<!DOCTYPE html PUBLIC TYP Grammatik>
Version
TYP
xhtml 1.0
"-//W3C//DTD XHTML 1.0 Transitional//EN"
html 4.0
"-//W3C//DTD html//4.0//EN"
html 5.0
html
Der Typ des Dokuments ist eine URN!
•
•
•
Für HTML5: <!DOCTYPE html>
Am Ende gibt es kein abschließendes „/".
DOCTYPE und PUBLIC müssen groß geschrieben werden.
Webtechnologien – SS 2017 - Teil 2/HTML I
20
Kopfteil (Auszug) I
Art
Syntax
Beschreibung
Titel
<title> ... </title>
Max. 70 Zeichen (Richtwert),
notwendige Angabe
für Bookmarks, Suchmaschinen
Bezüge
<link rel=relation
href=URL title=…>
Verweis vorwärts auf externes
Objekt
MetaInformation
<meta name=Key
content=Value>
Beschreibungen der Seite
Stil
<style>
Einbettung von CSS
Script
<script>
Einbettung von Skripten
21
Webtechnologien – SS 2017 - Teil 2/HTML I
Kopfteil (Auszug) I - Werte für relation
relation
Beschreibung
stylesheet
Verweis auf eine Style Sheet-Datei
icon
Verweis auf die favorite icon-Datei
Beispiel:
<link rel="stylesheet" href="URL">
<link rel="icon" href="favicon.gif" type="image/x-icon">
Webtechnologien – SS 2017 - Teil 2/HTML I
22
Kopfteil (Auszug) II - Kleine Icons/favicon
23
Webtechnologien – SS 2017 - Teil 2/HTML I
Kopfteil (Auszug) III - Meta-Information
Key
Beschreibung
author
name des Autors
copyright
Inhaber des Urheberrechts
description
Kurze Beschreibung des Inhalts, max. 175 Zeichen
keywords
Stichworte zur Einordnung der Seite
language
Sprache
expires
Verfallsdatum der Seite
revisit-after
Zeitraum für erneuten Suchmaschinenbesuch
robots
Anweisungen an Suchmaschinen
Das Format eines Datums sollte das GMT-Format nach RFC 2068 bzw.
ISO 8601 sein, z.B. "Mon, 10 Apr 2017 12:12:45 GMT +01:00"
Webtechnologien – SS 2017 - Teil 2/HTML I
24
Beispiel
html4
<meta http-equiv="content-type"
content="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
html5
<meta
<meta
<meta
<meta
<meta
<meta
<meta
<meta
•
•
name="author" content="...">
name="copyright" content="...">
name="keywords" lang="de" content="Autos,Bahn">
name="description" lang="de" content="...">
name="language" content="de,at,ch">
name="expires" content="never">
name="revisit-after" content="60 days">
name="robots" content="index,follow">
Da diese Meta-Tags in der Vergangenheit für eine Erhöhung des Rankings
von Suchmaschinen missbraucht wurden, werden diese kaum noch
beachtet.
Sie sollten aber trotzdem immer noch benutzt werden, denn die
Algorithmen der Suchmaschinen können sich wieder ändern.
Webtechnologien – SS 2017 - Teil 2/HTML I
25
Erläuterungen zu HTTP-EQUIV I
<meta http-equiv="content-type"
content="content-type" content="text/html; charset=utf-8">
Schlüsselwort http-equiv erzwingt Angaben durch den Server im Kopfteil der
HTTP-Antwort im Format name:Value, wenn
<meta http-equiv="name" content="Value"> ist.
http-equiv
Beschreibung
expires
Datum des spätesten Löschens aus dem Cache des Browsers
refresh
Automatisches Neuladen bzw. Nachladen
content-type
MIME-Typ mit Zeichensatz (charset)
cache-control
No-cache: kein Speichern im Cache des Browsers
Webtechnologien – SS 2017 - Teil 2/HTML I
26
Erläuterungen zu HTTP-EQUIV II
(1)<meta http-equiv="refresh" content="20">
(2)<meta http-equiv="refresh" content="1;url=URL">
•
•
In der Version (1) wird das Dokument nach 20 Sekunden neu vom
Server geladen.
In der zweiten Form wird sofort umgeleitet. Dies ist nach einem
Relaunch einer neuen Version für die veralteten Bookmarks wichtig.
27
Webtechnologien – SS 2017 - Teil 2/HTML I
Erläuterungen zu Robots
<meta name="robots" content="index,follow">
Hier werden Anweisungen an Suchmaschinen eingefügt.
Werte
Bedeutung
index, follow
Indizieren der Seite sowie Weitergehen der URLs
index, nofollow
Indizieren der Seite
noindex, follow
Nur URLs heraus zum Indizieren benutzen
noindex, nofollow
Nichts tun
Siehe: http://de.wikipedia.org/wiki/Meta-Element
Webtechnologien – SS 2017 - Teil 2/HTML I
28
body I
<body [lang="Sprache"]>
...
</body>
•
Sprache nach ISO 639, z. B. "de", "mk" (Maori) oder "zu" (Zulu)
Siehe dazu: http://de.wikipedia.org/wiki/ISO_639
29
Webtechnologien – SS 2017 - Teil 2/HTML I
Zeichendarstellung I
Für Zeichen außerhalb des Bereichs a-z, A-Z, 0-9 gibt es eine
Ersatzdarstellung:
– &Symbol;
– &#Code;
Groß-/Kleinschreibung ist relevant.
Zeichen
Ersatz
Zeichen
Ersatz
<
<
'
'
>
>
Blank
 
ä
ä
Ä
Ä
ö
ö
Ö
Ö
ü
ü
Ü
Ü
ß
ß
Bullet
•
"
"
Tilde
˜
Siehe: http://sonderzeichentabelle.de/
Webtechnologien – SS 2017 - Teil 2/HTML I
30
Zeichendarstellung III
Webtechnologien – SS 2017 - Teil 2/HTML I
32
Zeichendarstellung V
Das ist ein Auszug aus dem
Source-Code der Site
(kein XHTML).
Kopf
Menue
Webtechnologien – SS 2017 - Teil 2/HTML I
34
Überschriften
html
Bedeutung
<h1> ... </h1>
Oberste Gliederungsstufe
<h2> ... </h2>
2. Gliederungsstufe
<h3> ... </h3>
3. Gliederungsstufe
<h4> ... </h4>
4. Gliederungsstufe
35
Webtechnologien – SS 2017 - Teil 2/HTML I
Absätze
<br>
<p> … … …
<br/>
<p> … … … </p>
HTML 4, 5
XHTML
• <br> fügt einen Zeilenumbruch ein, ohne einen Absatz zu
erzeugen (hat den normalen Zeilenabstand).
• <p> generiert einen Absatz mit größerem Zeilenabstand.
Beispiel (XHTML):
Das ist der 1. Absatz.
<p> und das der zweite </p><p> gefolgt vom Dritten.
Das nächste Zeilenende ist einfach: </p><br/>
Jetzt geht es direkt in der nächsten Zeile weiter.
Webtechnologien – SS 2017 - Teil 2/HTML I
36
Tags für Texte innerhalb von Absätzen I
html
Bedeutung
<strike> ... </strike>
Durchgestrichen
<big> ... </big>
Größere Schrift
<small> ... </small>
Kleinere Schrift
<sub> ... </sub>
Index-Schreibweise
<sup> ... </sup>
Exponenten-Schreibweise
Beachten Sie die Vererbung bei Schachtelung.
37
Webtechnologien – SS 2017 - Teil 2/HTML I
Tags für Texte innerhalb von Absätzen II
html
Bedeutung
<em> ... </em>
Hervorheben
<strong> ... </strong>
Betonen
<cite> ... </cite>
Zitat
<kbd> ... </kbd>
Tastatureingabe
<q> ... </q>
Kurzes Zitat
<ins> ... </ins>
Hinzugefügter Text
<del> ... </del>
Gelöschter Text
<abbr> ... </abbr>
Abkürzung (Kürzel)
Das sind "echte" Auszeichnungen.
Webtechnologien – SS 2017 - Teil 2/HTML I
38
Einbinden von Graphiken
<img src="URL" [alt="Text"] [height="…"] [width="…"]>
•
•
•
Text ist ein alternativer Text, der ausgegeben wird, wenn die Graphik
nicht geladen oder wenn die Seite vorgelesen wird.
Breite und Höhe der Graphik sollten immer angegeben werden, da
dann der Browser den Text herum unmittelbar setzen kann.
Beispiel:
<img src="images/logo.gif" alt="Logo">
HTML 4/5
Webtechnologien – SS 2017 - Teil 2/HTML I
39
Links - Referenzen
(1) <a id="Ankername"> ... </a>
(2) <a href="URL" [title="Text"]> ... </a>
•
•
•
•
(1) definiert eine Stelle, die (von außen) referenzierbar ist (Anker). Das ist
also der „Landungsprunkt" für eine Referenz.
(2) definiert einen Verweis auf ein Objekt (URL) oder auf eine Stelle
innerhalb eines HTML-Dokuments, die mit (1) definiert ist.
Alle Ankernamen müssen innerhalb der Seite eindeutig sein.
Ankername kann sein:
– Lokaler Anker: #name
– URL mit angehängtem lokalen Anker: http://....#name
Webtechnologien – SS 2017 - Teil 2/HTML I
40
Graphik als Link
<a href="URL">
<img src="URLBILD" [alt="Text"] [height="…"] [width="…"]>
</a>
•
•
•
Ein Klick auf die Graphik geladen von URLBILD lässt ein Objekt mit der URL
laden.
Die Graphik liegt an der Adresse URLBILD und hat einen alternativen Text,
der - falls die Graphik nicht geladen wird - als Linktext gekennzeichnet
wird.
Beispiel:
<a href="http://www..../index.html">
<img src="Home.gif" alt="[Home]">
</a>
41
Webtechnologien – SS 2017 - Teil 2/HTML I
Listen I
html
Bedeutung
<ul> ... </ul>
Ungeordnete Liste
<li> ... </li>
Eintrag in der Liste
<ol> ... </ol>
Nummerierte Liste
Ein Beispiel für eine Liste von Links:
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
href="Common/Common.htm">Allgemeines</a></li>
href="CSCW.htm">Computer Supported Coop. Work</a></li>
href="FML/FML.htm">Facility Management</a></li>
href="Kommunen/Kommunen.htm">Kommunen</a></li>
href="Medizin/Medicine.htm">Medizin</a></li>
href="WFMS/WFMS.htm">Workflow Management</a></li>
</ul>
Webtechnologien – SS 2017 - Teil 2/HTML I
42
Listen II - Beispiele
<ul>
<li> Koffer </li>
<li> Tasche </li>
<li> Mantel </li>
</ul>
<ol>
<li> Mehl abwiegen </li>
<li> Eier schlagen </li>
<li> Zusammenmischen </li>
</ol>
43
Webtechnologien – SS 2017 - Teil 2/HTML I
Tabellen I
<table>
<tr>
<th> Kopf 1. Zeile, 1. Spalte </th>
<th> Kopf 1. Zeile, 2. Spalte </th>
<th> Kopf 1. Zeile, 3. Spalte </th>
</tr>
<tr>
<td> Daten 2. Zeile, 1. Spalte </td>
<td> Daten 2. Zeile, 2. Spalte </td>
<td> Daten 2. Zeile, 3. Spalte </td>
Die angesprochenen
Attribute werden über
CSS definiert:
table, th, td {
border: 1px solid;
}
</tr>
<tr>
<td> Daten 3. Zeile, 1. Spalte </td>
<td> Daten 3. Zeile, 2. Spalte </td>
<td> Daten 3. Zeile, 3. Spalte </td>
</tr>
</table>
Tabelle mit definiertem
Rahmen
Webtechnologien – SS 2017 - Teil 2/HTML I
44
Tabellen II
<table>
<tr>
<th>
<th>
<th>
</tr>
<tr>
<td>
<td>
<td>
</tr>
Die angesprochenen
Attribute werden über
CSS definiert.
Kopf 1. Zeile, 1. Spalte </th>
Kopf 1. Zeile, 2. Spalte </th>
Kopf 1. Zeile, 3. Spalte </th>
Daten 2. Zeile, 1. Spalte </td>
Daten 2. Zeile, 2. Spalte </td>
Daten 2. Zeile, 3. Spalte </td>
..... Wie oben
Tabelle mit Rahmen
und mit definiertem
Zellabstand (cellspacing)
Tabelle ohne Rahmen
und mit definiertem
Zellabstand (cellspacing)
45
Webtechnologien – SS 2017 - Teil 2/HTML I
Tabellen III
html
Bedeutung
<table> ... </table>
Gesamtdefinition der Tabelle
<tr> ... </tr>
Tabellenzeile ("row")
<td> ... </td>
Einleitung der Daten ("data")
<th> ... </th>
Einleitung der Überschrift ("header")
•
•
•
•
Alle Rechteck-förmige Elemente können einen Abstand haben:
zwischen Rahmen und Inhalt sowie zwischen Zelle und Zelle
Der Inhalt kann wie jeder Text ausgerichtet werden: linksbündig,
rechtsbündig etc.
Die Position der Tabelle insgesamt kann in Bezug auf den
umfassenden Rahmen ausgerichtet werden.
Dies alles erfolgt über CSS.
Webtechnologien – SS 2017 - Teil 2/HTML I
46
Nach dieser Anstrengung etwas Entspannung...
Webtechnologien – SS 2017 - Teil 2/HTML I
48