html - M. Wilhelm

Einführung in die Informatik
Dipl.-Inf.,
Dipl.-Ing. (FH) Michael Wilhelm
Hochschule Harz
FB Automatisierung und Informatik
[email protected]
http://www.miwilhelm.de
Raum 2.202
Tel. 03943 / 659 338
FB Automatisierung und Informatik: Einführung in die Informatik
1
Inhalt
1. Einführung, Literatur, Begriffe
2. Zahlensysteme
3. Rechnen in den Zahlensysteme
4. Rechneraufbau
5. Nichtnumerische Informationen (kurz)
6. XHTML und CSS
7. XML
FB Automatisierung und Informatik: Einführung in die Informatik
2
Literatur HTML
■
Shafer, Yank; Cascading Stylesheets; ISBN 3-89864-248-8
■
Lubkowitz, Mark, Webseiten programmieren und gestalten Das umfassende Handbuch
■
Bongers, Frank: XHTML, HTML und CSS - Handbuch und
Referenz; Modernes Seitenlayout und standardkonforme
Websites
■
Münz, Stefan: Webseiten professionell erstellen;
Programmierung, Design und Administration von Webseiten
■
Holzschlag, Molly; Shea, Dave: Zen und die Kunst des
CSS-Designs Inspiration und Umsetzung
■
Webseiten für Dummies: Mit wenigen Klicks zur eigenen
Homepage
FB Automatisierung und Informatik: Einführung in die Informatik
Anhang
3
Literatur HTML
Laborenz, Kai; CSS; Das umfassende Handbuch
ISBN 978-3-8362-1725-5
Chao, Ingo; Rudel, Corina; Fortgeschrittene CSS-Techniken,
ISBN 978-3-8362-1695-1
Hoffmann, Manuela; Modernes Webdesign; ISBN 978-3-83621502-2
Avci, Trittmann, Mellis; Web-Programmierung; Vieweg Verlag,
ISBN 3-528-05857-9
Wenz, Christian; JavaScript, Das umfassende Handbuch; ISBN
978-3-8362-1678-4
FB Automatisierung und Informatik: Einführung in die Informatik
4
Literatur HTML
Andreas Buschmann; Java-Script - Interaktiv; ISBN 3-93612100-1
Stefan Koch; Java-Script; ISBN 3-89864-111-2
Heiko Wöhr; Webtechnologien; ISBN 3-89864-247-X
Buchmann, Smolarek; PHP - interaktiv; ISBN 3-936121-01-X
Kevin Yank; PHP und MySQL; ISBN 3-89864-198-8
Bongers, Frank; Vollendorf, Maximilian; jQuery, Das Praxisbuch;
ISBN 978-3-8362-1810-8
FB Automatisierung und Informatik: Einführung in die Informatik
5
Cascading Stylesheets
Adressen
■
■
■
■
■
■
■
■
http://de.selfhtml.org/css/intro.htm
http://de.selfhtml.org/css/eigenschaften/index.htm
http://www.w3schools.com/CSS/
http://www.css4you.de
http://www.w3.org/TR/REC-CSS2/
http://webcom.net/~gmc/html/quick_ref.html
http://www.zdim.com/content/anchors/199704/28/1.html
http://www.htmlhelp.com/reference/css/structure.html
FB Automatisierung und Informatik: Einführung in die Informatik
6
Entwicklung des Internet
1968/69
1973
1976
1979
1982
1990
1991
1992-?
ARPANET, militärische Entwicklung
erste internationale Verbindungen
Netzwerksoftware uucp im Betriebssystem UNIX
USENET NEWS
Eunet
Archie
WAIS und GOPHER
World-Wide Web(WWW)
FB Automatisierung und Informatik: Einführung in die Informatik
7
Web-Editoren / CMS
Software für die Erstellung der von Web-Seiten
HTML-Editoren
Content Management System
–
Web2Date
–
Typo3
–
STRATO Livepage
–
Macromedia Dreamweaver
Scriptsprachen im WWW
–
PHP / Perl
–
Javascript
Macromedia Flash
FB Automatisierung und Informatik: Einführung in die Informatik
8
Einführung in das World-Wide-Web
Adressierung
URL-Adresse
DNS
Basisdienst FTP
Grenzen des WWW
FB Automatisierung und Informatik: Einführung in die Informatik
9
Adressierung im Internet: Basis ist ein Hauptrechner
IP Adresse
Netz
email Adresse
FB Automatisierung und Informatik: Einführung in die Informatik
10
URL-Adresse
•
URL: Uniform Resource Locator
Ein URL enthält Informationen über das verwendete Protokoll,
die Adresse des Bereiches auf der sich die Resource bezieht,
den Standort des Unterverzeichnisses / Namen der Datei
Beispiel: http://www.hs-harz.de/vorlesungen/internet/bsp1.html
http
://
www.hs-harz.de
/vorlesungen/internet/
bsp1.html
Internetprotokoll
URL-Zeichensetzung
Domainname
Verzeichnis
Name
FB Automatisierung und Informatik: Einführung in die Informatik
11
Weitere Beispiele:
gopher://gopher.std.com/pub
telnet://std.com
ftp://ftp.std.com/ub/oakridge/test.txt
[email protected]
news.hs-harz.de
Dokumentation zu URL:
http://www.ncsa.uiuc.edu/demoweb/url-primer.html
Der URL stellt eine Methode dar, mit der die Internetbenutzer
von einem Großteil der Komplexität des Internet abgeschirmt
werden (z.B.: FTP).
FB Automatisierung und Informatik: Einführung in die Informatik
12
FTP mittels Browser
FB Automatisierung und Informatik: Einführung in die Informatik
13
Domain Name Service (DNS)
Es gibt keinen Rechner mit der Internetadresse
http://www.hs-harz.de
http://www.oracle.com
http://www.FBI.com
Jeder Rechner hat eine Adresse, die aus 4 (6) Zahlen besteht.
193.175.34.142
DNS-Server setzen die Textadressen in Rechneradressen um.
Diese Server sind hierarchisch organisiert.
HS Harz: 193.175.32.0 - 193.175.35.255
FB Automatisierung und Informatik: Einführung in die Informatik
14
Basisdienst FTP
dient zum Übertragen von Dateien zwischen zwei Rechnern im
Internet
ftp ist kein Terminal und erlaubt somit kein Programmstart à la Telnet;
ftp verwendet eine Kommandosprache: besteht aus
–
einem Kommando und
–
einem oder mehreren Parametern
Wird für eigene Seiten benötigt
Ordner: html
Explorersyntax:
ftp://[email protected]/
ftp-myweb.hs-harz.de
FB Automatisierung und Informatik: Einführung in die Informatik
15
Kommandos für FTP
Kommandobeispiel
ftp www-informatik.fh-harz.de
ls
get datei.doc
put datei.doc
cd
mkdir
rmdir
mput datei.*
mget datei.*
ascii
bin
prompt
quit
open rechner
user name
Kommentar
Verbindungsaufnahme zum entfernten
Rechner; auch per IP Adresse
Dateien anzeigen
hole eine Datei vom anderen Rechner
kopiere eine Datei zum anderen Rechner
wechsle in eine Verzeichnis
erzeuge eine Verzeichnis
lösche ein Verzeichnis
kopiere mehrere Dateien
hole mehrere Dateien
erzwinge Textbehandlung (CR LF ⇔ CR)
keine Veränderung der Daten
kopiere mehrfach ohne Nachfragen ein/aus
beende die Sitzung
verbinde mit einem anderen Rechner
ändere Benutzereinstellungen
FB Automatisierung und Informatik: Einführung in die Informatik
16
Übertragung
get datei.doc bin
get datei.doc ascii
Apple
Unix
DOS
CR und ab OS X LF
LF
CR / LF
FB Automatisierung und Informatik: Einführung in die Informatik
17
FB Automatisierung und Informatik: Einführung in die Informatik
18
Hypertext Markup Language HTML
basiert auf SGML (ISO 8850)
ca. 1992 von Mark Andreesen entwickelt
•
•
•
•
•
dargestellt durch Browser (Mosaic, Netscape, Word,
Lynx, Opera, MS Explorer, ...)
ein HTML-Element begrenzt den Inhalt eines
Dokuments mit Tags
ein Tag kann Attribute und Attributwerte enthalten
Attribute sind mit CSS nicht mehr erlaubt
Trennung Inhalt und Design
Dokumentation zu HTML:
SelfHTML
http://www.dpunkt.de:80/techno/HTML/HTML-Ref.html
FB Automatisierung und Informatik: Einführung in die Informatik
19
HTML Beispiel mit Mindestinhalt:
<html>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp01
20
HTML Beispiel mit Mindestinhalt2:
<html>
<head>
<title> Titel des Dokuments </title>
</head>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp02
21
HTML Beispiel mit Mindestinhalt3:
<html>
<head>
<title> Titel des Dokuments </title>
</head>
<body>
Kern des Dokuments
</body>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp03
22
HTML Beispiel mit Mindestinhalt3:
FB Automatisierung und Informatik: Einführung in die Informatik
23
HTML Überschriften:
<html>
<head> <title> alle sechs Überschriften </title>
</head>
<body>
<h1>Text der 1. Überschrift</h1>
<h2>Text der 2. Überschrift</h2>
<h3>Text der 3. Überschrift</h3>
<h4>Text der 4. Überschrift</h4>
<h5>Text der 5. Überschrift</h5>
<h6>Text der 6. Überschrift</h6>
</body>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik bsp04-Header
24
HTML Überschriften:
FB Automatisierung und Informatik: Einführung in die Informatik
25
XHTML: Extensible HTML
■
■
■
Neuformulierung von HTML 4.01
Doc-Type bestimmt den Typ
Jedes Tag beginnt und endet mit einem Tag
- <table>
</table>
- <br />, html und body müssen vorhanden sein
■
■
■
■
■
■
■
Trennung Inhalt und Darstellung
Bessere Analyse von XML-Parser
Mehr Möglichkeiten durch CSS
Fast alle visuellen "tags" sind verboten (strong, em)
Attributwert immer in Anführungszeichen angeben
boolean-Werte Attributname als Attributwert angeben,
z. B. <input type="radio" checked="checked" />
Mathematical Markup Language
FB Automatisierung und Informatik: Einführung in die Informatik
26
Sonderzeichen Unicode
 
 
 
 
<
>
&#8804
&#8805
£
€
¢
§
©
®
™
³
²
&#185
½
¼
¾
μ
α
β
λ
ω
Ω
π
&#928i
¶
µ Microzeichen
a alpha
ß beta
λ lambda (z.B. Wellenlänge)
ω omega (z.B. Kreisfrequenz)
Ω Omega (z.B. Widerstand)
π Kreiszahl
Π
¶ Absatz-Zeichen
Leerzeichen,  
Leerzeichen Breite n
Leerzeichen Breite m
Leerzeichen, schmal
<
>
<=
>=
£ Pfundzeichen
€ Eurozeichen
ä ä deutsche Umlaute
¢ Centzeichen
Ä Ä
§ Paragraphenzeichen
ö ö
© Copyright
Ö Ö
® eingetragene Marke
ü ü
™ Trademark-Zeichen
Ü Ü
³ hochgestellte 3
ß ß
² hochgestellte 2
± ± plusminus
¹ hochgestellte 1
­ Man. Trennung: shy
½
¼ FB Automatisierung und Informatik: Einführung in die Informatik
¾
27
HTML Absätze:
<html>
<head>
<title> Absatzdefinition </title>
</head>
<body>
Dies ist die erste Zeile des Tests, <br />
<br />
Dies ist die zweite Zeile des Tests,<br />
<br />
<p>
Dies ist die dritte Zeile des Tests,<p>
</p>
Dies ist die vierte Zeile des Tests </body>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp05-Absatz
28
HTML Absätze:
Text <br />
<p> Text </p>: Leerzeile vorher und nachher
FB Automatisierung und Informatik: Einführung in die Informatik
29
Cascading Stylesheets
Eigenschaften von CSS:
Ergänzung zu HTML
Definition von Formateigenschaften von HTML-Elemente (Styles)
–
–
–
Format Überschrift
Abstand eines Absatzes
Tabellenkopf
Eigene Hintergrundfarbe pro Absatz
Eigener Rahmen
Umfangreiche Styles und Maßeinheiten
Definition von Styles mittels Ort (Cascade)
Definition von Absätzen, auch übereinander (Sheets)
Akustische Wiedergabe von Texten (SMIL)
Adresse: http://de.selfhtml.org/css/intro.htm
http://de.selfhtml.org/css/eigenschaften/index.htm
http://www.w3.org/TR/REC-CSS2/
FB Automatisierung und Informatik: Einführung in die Informatik
30
Einheitliches Aussehen: Firmenwebsite ohne CSS
Formate:
•
•
•
•
Header
Tabelle
Listen
Absätze
FB Automatisierung und Informatik: Einführung in die Informatik
st_bsp1.html
31
FB Automatisierung und Informatik: Einführung in die Informatik
st_bsp1.html
32
CSS-Begriffe:
CCS steuert das Aussehen von HTML-Elementen
Die „Konstanten“ stehen in der HTML-Datei
Die „Konstanten“ stehen in einer externen CSS-Datei
Der Selektor bestimmt das Aussehen
• Selektor {
Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
}
Beispiel:
h2 {
font-size: 14pt;
color: #0000FF;
font-weight: small;
background-color: yellow;
}
FB Automatisierung und Informatik: Einführung in die Informatik
33
CSS-Referenz:
Messeinheiten:
•in
inch
•cm
centimeter
•mm
millimeter
•em
Höhe des aktuellen Fonts
•ex
Höhe des Buchstaben „x“ des aktuellen Fonts
•pt
point, 1/72 in, entspricht 0,35278 mm
•pc
pica, entspricht 12 points: 4,23 mm
•px
Pixel
Farbeinheiten:
#rrggbb
Hexadezimale Darstellung
rgb(x,y,z)
Farbanteil pro Farbe, jeweils 0 bis 255
rgb(x%,y%,z%) Farbanteil in Prozent pro Farbe, jeweils 0 bis 100%
Farbnamen:
aqua
black
navy
olive
blue
purple
fuchsia gray
red
silver
green
teal
lime
white
FB Automatisierung und Informatik: Einführung in die Informatik
maroon
yellow
34
CSS-Referenz:
Font
•font-family
•font-style
•font-variant
•font-weight
•font-size
Text
•word-spacing
•letter-spacing
•text-decoration
•vertical-align
•text-transform
•text-align
•text-indent
•line-height
Color Background
•color
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
Classification
•display
•white-space
•list-style-type
•list-style-image
•list-style-position
•list-style
FB Automatisierung und Informatik: Einführung in die Informatik
35
CSS-Referenz:
Font
font-family:
Die Fonts werden nach ihrer Reihenfolge ausgewählt.
a)
feste Namen wie
Garamond, Palatino, Serif, Times, Courier New,
b)
generische Namen
Serif
sans-serif
Kursiv (Italic ?)
Fancy
Monospace
Gibt die Stil an (normal oder kursiv)
font-style:
• normal
• italic
• oblique// ähnlich italic
FB Automatisierung und Informatik: Einführung in die Informatik
36
CSS-Referenz:
Font
font-size:
Gibt die Größe der Schrift an. Vier Möglichkeiten
a)
Absolute Größe
• xx-small
x-small
small
• medium
large
x-large
• xx-large
• 18pt
18in
18cm
• 18mm
18pc
18px
b)
Relative Größe entsprechend des aktuellen Fonts
• smaller
• larger
c)
Relative Höhe entsprechend des aktuellen Fonts, Multiplikation
• 1,5 em = 150%
d)
Prozentwert, Verhältnis zum aktuellen Font
• 300%
FB Automatisierung und Informatik: Einführung in die Informatik
37
CSS-Referenz:
Font
font-variant:
• normal
• small-caps
Setzt den Text in KAPITÄLCHEN.
font-weight:
Dicke der Buchstaben (normal, fett etc).
a)
Nummern
• 100
// Dünn, lighter
• 200 bis
• 900
// Fett, bold
•
•
•
•
b)
Name
lighter
normal
bold
bolder
// Verringerung zur Elternschrift
// Vergrößerung zur Elternschrift
FB Automatisierung und Informatik: Einführung in die Informatik
38
CSS-Definition Beispiele:
Externes Format:
Datei: bsp1.xhtml
<head>
<title>Link mit CSS</title>
<link rel="stylesheet" type="text/css" href="../../bsp1.css">
</head>
Datei: bsp1.css
body {
background-color: red;
font-size: 1.2em;
font-family: Times;
}
FB Automatisierung und Informatik: Einführung in die Informatik
39
CSS-Definition:
Internes Format:
<head>
<title> Test mit interner Definition</title>
<style type="text/css">
h1 {
background-color: #00FF00;
font-family: Helvetica; Arial; sans-serif;
}
</style>
•ibib
<body>
…
</body>
FB Automatisierung und Informatik: Einführung in die Informatik
40
CSS-Beispiele:
body {
font-size: 14pt;
color: rgb(20,100,100);
font-family:Arial,Garamond, Times, "Gill Sans", Serif;
font-weight:400;
}
FB Automatisierung und Informatik: Einführung in die Informatik
41
HTML Body-Atribute
CSS-„Attribute“ zu body sind:
•
•
•
•
•
Hintergrundfarbe
Farbe der Links
Textfarbe
Hintergrund mit einem Bild
Farben werden hexadezimal, in Prozent oder als 0 bis
255 eingetragen:
•
•
background-color
link, alink, vlink
color
background-image
background-repeat
#C0C0C0
rgb(100,200,255);
Dabei bezeichnet je eine zweistellige hexadezimale
Zahl die Intensität von rot, grün und blau (RGB-Wert)
FB Automatisierung und Informatik: Einführung in die Informatik
bsp06-Body
42
HTML Body-Atribute
<style type="text/css">
body {
color: rgb(0, 0, 255); /* Textfarbe */
background-color: yellow;
background-image:url("Virus.jpg");
background-repeat:no-repeat;
background-attachment:fixed; /* scroll fixed */
background-position:top; /* left center right top bottom */
}
</style>
FB Automatisierung und Informatik: Einführung in die Informatik
43
Farben in HTML
rot/grün/blau (RGB) Angaben
zum body Tag, meist
hexadezimal
#C0C0C0 für grau
#FFFFFF für weiß
#FF69B4 für pink
in Angaben von 0 bis 255
In Prozentangaben
getrennte Farben für
Hintergrund, Text, Verweise,
besuchte Verweise
FB Automatisierung und Informatik: Einführung in die Informatik
44
HTML CSS-Body-Attribute:
#rrggbb
rgb(x,y,z)
rgb(x%,y%,z%)
Hexadezimale Darstellung
Farbanteil pro Farbe, jeweils 0 bis 255
Farbanteil in Prozent pro Farbe, jeweils 0 bis 100%
body {
background-color:#ff0000;
background-color:#0000ff;
background-color:#00ff00;
}
zeigt eine rote Farbe an.
zeigt eine blaue Farbe an.
zeigt eine grüne Farbe an.
Alternative können auch definierte Konstanten verwendet werden.
white
black
red
blue
green
yellow
cyan
magenta
purple
navy
olive
lime
aqua
teal
silver
maroon
FB Automatisierung und Informatik: Einführung in die Informatik
45
Die sieben HTML CSS-Schriftgrößen:
<font style="font-size:xx-small"> für die kleinste Schrift xx-small </font>
<br />
<font style="font-size:x-small"> für eine kleine Schrift x-small </font>
<br />
<font style="font-size:small"> für die Schrift small </font>
<br />
<font style="font-size:medium;"> für die Schrift medium </font>
<br />
<font style="font-size:large"> für die Schrift large </font>
<br />
<font style="font-size:x-large"> für die Schrift x-large </font>
<br />
<font style="font-size:xx-large"> für die Schrift xx-large </font >
<br />
FB Automatisierung und Informatik: Einführung in die Informatik bsp07-Fontsize
46
HTML Schriften:
bsp07-Fontsize
FB Automatisierung und Informatik: Einführung in die Informatik
47
Text und Farbe
Farbe kann auch für einzelne Schriften festgelegt werden:
<font style="font-size:xx-small; color:#ff0000"> für die kleinste Schrift xx-small </font>
<font style="font-size:x-small; color:rgb(0,0,255)"> für eine kleine Schrift x-small </font>
<font style="font-size:small"> für die Schrift small </font>
<font style="font-size:medium; color:green"> für die Schrift medium </font>
<font style="font-size:large"> für die Schrift large </font>
<font style="font-size:x-large; color:rgb(100%,100%,0%)"> für die Schrift x-large </font>
<font style="font-size:xx-large"> für die Schrift xx-large </font>
bsp08-Fontfarbe.html
FB Automatisierung und Informatik: Einführung in die Informatik
48
Schriftgrößen und Farbe in CSS
bsp08-Fontfarbe.html
FB Automatisierung und Informatik: Einführung in die Informatik
49
Inhalte strukturieren
Das <div>-Tag ist ein Container für mehrere HTML-Elemente, denen
durch die Kernattribute des <div>-Tags Stylesheet-Eigenschaften
zugewiesen werden.
div-Elemente sind Blockelemente, da das öffnende und das schließende
<div>-Tag jeweils zu Zeilenumbrüchen – äquivalent zum <br />-Tag –
führen.
<div>-Tags lassen sich ineinander verschachteln und bilden einen
leistungsfähigen Mechanismus
Man verwendet das <div>-Tag dazu, eine Menge von logisch
zusammengehörigen HTML-Elementen mit der Hilfe von Cascading
Stylesheets zu formatieren, positionieren oder mit JavaScript zu
animieren. Dazu werden die Kernattribute class, id und style benutzt.
Äquivalent zum <div>-Tag gibt es das <span>-Tag, das benutzt wird,
wenn einer Gruppe von HTML-Elementen Inlinestile – also Stile ohne
Zeilenumbruch – zugewiesen werden sollen.
Css\Test4.html
FB Automatisierung und Informatik: Einführung in die Informatik
50
Text und Ausrichtung
CSS-Ausrichtungs-Attribute
text-align:left;
text-align:center;
text-align:right;
text-align:justify;
<style type="text/css">
.align_l {
text-align:left;
color:#0000ff;
}
.align_r {
text-align:right;
color:#ff0000;
}
.align_c {
text-align:center;
color:#ff00ff;
}
.align_j {
text-align:justify;
color:#00ff00;
}
</style>
FB Automatisierung und Informatik: Einführung in die Informatik bsp13-Text-Align 51
<div class="align_l">
L: Die Texte können mit dem Attribut ALIGN innerhalb eines Blockes ausgerichtet
werden. Als mögliche Werte stehen "LEFT, CENTER, RIGHT, JUSTIFY" zur Verfügung.
</div> <br />
<div class="align_c">
C: Die Texte können mit dem Attribut ALIGN innerhalb eines Blockes ausgerichtet
werden. Als mögliche Werte stehen "LEFT, CENTER, RIGHT, JUSTIFY" zur Verfügung.
</div> <br />
<div class="align_r">
R: Die Texte können mit dem Attribut ALIGN innerhalb eines Blockes ausgerichtet
werden. Als mögliche Werte stehen "LEFT, CENTER, RIGHT, JUSTIFY" zur Verfügung.
</div> <br />
<div class="align_j">
J: Die Texte können mit dem Attribut ALIGN innerhalb eines Blockes ausgerichtet
werden. Als mögliche Werte stehen "LEFT, CENTER, RIGHT, JUSTIFY" zur Verfügung.
Ich bin kein Donauschifffahrtskapitänsanwärter. Die Texte können mit dem Attribut
­ manuell getrennt werden.
</div>
FB Automatisierung und Informatik: Einführung in die Informatik
52
FB Automatisierung und Informatik: Einführung in die Informatik
53
Beispiel css_bsp1.xhtml
.div1 {
color:blue;
}
p {
color:green;
}
.over {
text-decoration: overline;
}
<p>
Diese Zeile sollte in grün angezeigt werden
</p>
<div class="div1">
3. Zeile, im <span class="over">zweiten</span> Beispiel, div
</div>
css_bsp1.xhtml
FB Automatisierung und Informatik: Einführung in die Informatik
54
Beispiel css_bsp1.xhtml
.div1 {
color:blue;
}
p {
color:yellow;
background-color:blue;
}
.over {
text-decoration: overline;
}
<p>
Diese Zeile sollte in grün angezeigt werden
<div class="div1">
3. Zeile, im <span class="over">zweiten</span> Beispiel, div
</div>
</p>
css_bsp1.xhtml
FB Automatisierung und Informatik: Einführung in die Informatik
55
Beispiel css_bsp1.xhtml
FB Automatisierung und Informatik: Einführung in die Informatik
56
Font-Attribute: tt gibt es nicht mehr
.tt {
font-family: "courier new",courier,monospace;
}
<body>
iiiiii mmmmm<body>
<div class="tt">
<tt>iiiiii mmmmm</tt>
</div>
<div style="font-style:italic;">
<i> liefert Kursive schrift<br />
</div>
<div style="font-weight:900;"> // 100 bis 900
Test: Nun Fett
</div>
FB Automatisierung und Informatik: Einführung in die Informatik
57
Font-Attribute
<div style="text-decoration:underline;">
Test: Nun Unterstrichen
</div>
Test: <span style="text-decoration: overline;">Nun Überstrichen</span>
<div style="text-decoration: line-through;">
Test<u>Nun Durchgestrichen</u>
</div>
<div style=" text-decoration: blink;">
Test<u>Nun Blinkend</u>
</div>
Test <span style="font-variant: small-caps;">Nun Kapitälchen</span>
FB Automatisierung und Informatik: Einführung in die Informatik
58
Font-Attribute
Test H<span style="vertical-align:sub;">2</span>0
Test: A<span style="vertical-align:super;">2</span>+B<span style="verticalalign:super;">2</span>=C<span style="vertical-align:super;">2</span>
<div>
Test Normale Schrift:imnpj<span style="font-size:smaller">Etwas kleiner:
imnpj<span style="font-size:smaller"> Noch kleiner:
imnpj</span></span></span>
</div>
<div>
Test Normale Schrift:imnpj<span style="font-size:larger">
Etwas größer: imnpj<span style="font-size:larger">
Noch größer: imnpj</span></span></span>
</div>
FB Automatisierung und Informatik: Einführung in die Informatik
59
bsp09-Fontattribute
FB Automatisierung und Informatik: Einführung in die Informatik
60
Horizontale Linien
In HTML können horizontale Linien auf einfache Art erzeugt werden:
Das Tag <hr> erlaubt die Definition einer Linie
Weitere CSS-Attribute:
width:
Pixel
Länge in Pixel
width:
%
Länge in Prozent
height:
Pixel
Höhe in Pixel, oder ä.
color:
rgb
Farbe, Randfarbe
background-color:
Hintergrundfarbe, nur sichtbar bei großer Höhe
border
1 Wert
top, left, bottom, right
border
2 Werte
top/left und bottom/right
border
4 Wert
top, left, bottom, right
text-align
left, center, right nur mit margin-right etc.
FB Automatisierung und Informatik: Einführung in die Informatik bsp12-HR
61
Horizontale Linien
Linie mit einer Breite von 300 px, Farbe yellow
<hr style="width:300px; color:yellow;" />
Linie mit einer Breite von 200 px, Farbe rot, Ausrichtung rechts, Höhe 5px
<hr style="width:300px; color:red; height:5px; margin-right:0px; text-align:right;" />
Linie mit einer Breite von 50%, Farbe blue, BGColor: green, Ausrichtung rechts, Höhe
15px
<hr style="width:50%; color:blue; background-color:green; height:15px; margin-right:12px;
text-align:right;">
Linie mit einer Breite von 50%, Farbe blue, BGColor: green, Ausrichtung rechts, Höhe
15px, Border
<hr style="width:50%; color:blue; background-color:green; height:15px; margin-right:12px;
text-align:right; border:3px dashed red;">
</p>
FB Automatisierung und Informatik: Einführung in die Informatik
62
Horizontale Linien
FB Automatisierung und Informatik: Einführung in die Informatik
63
Listen in CSS
■
■
■
■
■
■
■
■
■
■
■
■
■
none
Kein Aufzählungszeichen
Circle
Kreis, nur Rahmen
square
Quadrat
disc
Gefüllter Kreis
decimal
Dezimalzahlen (1. ,2. , 3. , ...)
lower-roman
Kleine römische Zahlen (i. ,ii. ,iii. , ...)
upper-roman
Grosse römische Zahlen (I. ,II. , III., ...)
decimal-leading-zero Dezimalzahlen mit führender 0 (01. ,02. , 03. , ...)
lower-greek
Kleine griechische Nummerierung alpha, beta, gamma,...
lower-latin
Kleine Ascii-Zeichen (a. ,b., c. , ...)
upper-latin
Große Ascii-Zeichen (A., B. ,C. , ...)
armenian
Armenische Nummerierung
georgian
Georgische Nummerierung
FB Automatisierung und Informatik: Einführung in die Informatik
64
HTML Listen:
FB Automatisierung und Informatik: Einführung in die InformatikBsp10-Listen
65
HTML Listen:
Liste mit Nummern
<ol style="list-style-type:decimal;" start="4">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li value="8" >Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 14</li>
<li>Punkt 24</li>
</ol>
FB Automatisierung und Informatik: Einführung in die InformatikBsp11-Listen
66
HTML Verknüpfungen
Eine Verknüpfung kann auf eine beliebige Datei
verweisen. Dabei kann diese Datei ein HTML-Seite oder
eine beliebige andere Datei (z. B. Test.pdf). HTMLSeiten werden direkt angezeigt, andere Dateien werden
über einen Viewer geladen oder direkt gestartet.
Angabe des Pfades:
Möglichkeit
Datei als URL-Angabe
Datei lokal mit relativen Pfad
Datei lokal mit absoluten Pfad
Beispiel
http://www.hs-harz.de
images\bild.gif
/images/bild.gif
FB Automatisierung und Informatik: Einführung in die Informatik
67
HTML-Verknüpfungen
Text-Link
Anker
Link eines Bildes
Mehrere Links in einem Bild (Bereiche)
Links mit Schalter
Frames
Target
Mail-To
Formulare (Button)
Event (onload=….)
FB Automatisierung und Informatik: Einführung in die Informatik
68
HTML Verknüpfungen / Anker: / ist das
Trennzeichen unter Linux bzw. Unix
<p> <h2> <b> Links </b></h2> </p>
<p><h4 >
<a href="/bsp/bsp05.htm" >Verweis zum Beispiel 05</a>
</h4></p>
<p><h4 >
<a href="images/bsp06.html" target="NewFrame" >Bsp06 mit neuem Frame</a>
</h4></p>
<p><h4 >
<a href="./images/bild.gif" target="_blank">Aufruf eines Bildes im Unterverzeichnis in
einem neuem Fenster</a>
</h4></p>
<p><h4 >
<a href="/html/images/bild.gif" >Aufruf eines Bildes (absolut)</a>
</h4></p>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp14
69
HTML Anker-Verknüpfungen
Verweis auf einer Stelle in der Datei, also nicht am
Anfang
<h2>Anker, Link in selben Datei
<a href="#LISTE1" > Go to Liste1</a>
</h2>
<a name="LISTE1"> 1. Anker</a>
Datei: bsp06.html
<h2>Anker, Link in einer anderen Datei
<a href="bsp07.html#LISTE1" > Go to Liste1 in bsp07</a>
</h2>
Datei: bsp07.html
<a name="LISTE1"> 1. Anker</a>
FB Automatisierung und Informatik: Einführung in die Informatik
bsp14
70
HTML Verknüpfungen
FB Automatisierung und Informatik: Einführung in die Informatik
bsp14
71
HTML CSS-Body-Attribute: Link-Attribute
link
alink
vlink
FB Automatisierung und Informatik: Einführung in die Informatik
72
HTML CSS-Body-Attribute: Link-Attribute
a:link{
color: #0000FF;
}
a:visited{
color: #0000FF;
}
a:link, a:visited, a:active{
color: #FF0000;
}
a:active{
color: #FF0000;
}
FB Automatisierung und Informatik: Einführung in die Informatik
73
HTML Bilder:
Bilder:
Anzeigen eines Bildes
<img src="skully.gif" width="160" height=„168“>
Anzeigen eines Bildes mit Link
<a href="bsp1.htm">
<img src="skully.gif" width="160" height="168">
</a>
Besser wäre es, nur „width“ oder „height“ anzugeben
FB Automatisierung und Informatik: Einführung in die Informatikbsp-img-01->bsp-img-06 74
Tabellen in HTML
regelmäßige Anordnung des Zelleninhalts
mit Rand/ohne Rand: mehrspaltige Dokumente
beliebige Zellenelemente (andere Tabellen, Bilder
usw.)
keine absolute Ausrichtung, nur relative Ausrichtung:
tr:
TableRow
th
Table-Header, fett
td:
Table-Data
colspan:
rowspan: Zeilen verbinden
Spalten verbinden
FB Automatisierung und Informatik: Einführung in die Informatik
75
Tabellen in HTML
<html>
<head><title> 1. Tabellenbeispiel </title> </head>
<body>
<table>
<tr>
<th>Überschrift</th>
<td>Zelle(1,1)</td>
<td>Zelle(1,2)</td>
</tr>
</table>
</body>
</html>
th: Table Header
td: Table Data
FB Automatisierung und Informatik: Einführung in die Informatik
table01 76
Tabellen in HTML mit CSS
<html>
<head><title> 2. Tabellenbeispiel </title> </head>
<body>
<table>
<tr>
<th>Überschrift</th>
<td>Zelle(1,1)</td>
<td>Zelle(1,2)</td>
</tr>
</table>
/* Aussenrand */
table {
border: 1px solid;
}
/* einfacher Rand in der Tabelle */
td, th {
border: 1px solid;
border-color: black;
}
</body>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik
table02 77
/* Aussenrand */
table {
border: 1px solid;
}
/* einfacher Rand in der Tabelle */
td, th {
border: 1px solid;
border-color: black;
}
•
Rand ist doppelt
/* Aussenrand */
table {
border: 1px solid;
border-collapse:collapse;
}
/* einfacher Rand in der Tabelle */
td, th {
border: 1px solid;
border-color: black;
}
•
•
Rand ist einfach
Border-collapse
FB Automatisierung und Informatik: Einführung in die Informatik
78
Tabellen in CSS-HTML
<html>
<head><title> 3. Tabellenbeispiel </title> </head>
<body>
<table>
<tr>
<th>1. Überschrift</th>
<th>2. Überschrift</th>
</tr>
<tr>
<td>Zelle(1,1)</td>
<td>Zelle(1,2)</td>
</tr>
</table>
</body>
</html>
FB Automatisierung und Informatik: Einführung in die Informatik Table03
160
79
Tabellen in CSS
■
■
border
border-collapse
-
■
■
■
■
■
■
auto, fixed
Breite der Zellen
vertical-align:
overflow:
-
Länge
top, bottom
show, hide
Leere Zelle, aber mit td,td
table-layouts
-
■
Darstellung untersch. Rahmen
border-spacing
caption-side
empty-cells
-
1px solid #000
collapse, separate
top, center, bottom
hidden
Elementbereich mit übergroßem Inhalt, Breite=200, Bild mit 250
speak-header
always, once
table, tr, colgroup, col, thead, tbody, tfoot, th und td
FB Automatisierung und Informatik: Einführung in die Informatik
80
Tabellen in HTML: Leerzellen
<tr>
<th>zentriert</th>
<td>Zelle(1,2)</td>
<td>Zelle(1,3)</td>
</tr> <tr>
<td>Zelle(1,1) mit inhalt</td>
<td>Zelle(1,2)</td>
<td> <br /> </td>
</tr> <tr>
<td>Zelle(2,1)</td>
<td>Zelle(3,1)</td>
<td> abcdef </td>
</tr> <tr>
<td>Zelle(3,1)</td>
<td>Zelle(3,2)</td>
<td>      </td>
<td>Zelle(4,3)</td>
</tr>
<br /> oder  
FB Automatisierung und Informatik: Einführung in die Informatik
Table04a/b
81
Tabellenüberschrift: caption-side:top/bottom
<table>
<caption> Noten in der Klausur </caption>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td> Müller, Peter</td>
<td> 1.0</td>
</tr>
<tr>
<td> Meyer, Hans Hogo</td>
<td> 2- </td>
</tr>
<tr>
<td> Schmidt, Peter Maria</td>
<td> 2 </td>
</tr>
</table>
FB Automatisierung und Informatik: Einführung in die Informatik
table05 82
Tabellen in HTML: Horizontale Ausrichtung
<tr class="center" >
<th>Name</th>
<th>Hobbies</th>
<th>Bemerkung</th>
</tr>
<tr class="center">
<td> Müller, Peter</td>
<td> Tauchen, Segeln, Fahrradfahren</td>
<td class="left" > keine </td>
</tr>
<tr>
<td> Meyer, Hans Hugo</td>
<td> Tennis, Sportschießen </td>
<td> keine </td>
</tr>
<tr class="center">
<td> Schmidt, Peter Maria</td>
<td> Fußball </td>
<td class="right" > keine </td>
</tr>
FB Automatisierung und Informatik: Einführung in die Informatik
table06 83
Tabellen in HTML: Ausrichtung, Ergebnis
FB Automatisierung und Informatik: Einführung in die Informatik
table06 84
Tabellen in HTML: Vertikale Ausrichtung+Listen
<table>
<caption> Kollegen in der Abteilung Rechnungswesen </caption>
<tr >
<th>Name</th>
<th>Hobbies</th>
<th>Bemerkung</th>
</tr>
<tr class="top" class="center">
<td> Müller, Peter</td>
<td>
<ul>
<li> Tauchen</li>
<li> Segeln</li>
<li> Fahrradfahren</li>
</ul>
</td>
<td class="center" > keine </td>
</tr>
Abhilfe: vertical-align: top;
FB Automatisierung und Informatik: Einführung in die Informatik
table07 85
Tabellen in HTML: Vertikale Ausrichtung+Listen
FB Automatisierung und Informatik: Einführung in die Informatik
table07 86
Tabellen in HTML: Zellen über mehrere Bereiche
<table>
<caption> Firmenfahrzeuge und Nutzung der privaten PKWs </caption>
<tr >
<th> Name </th>
<tr >
<th colspan="2" > Geschlecht </th>
<td> Schulze, Petra </td>
<th colspan="3" > Fahrzeug </th>
<td> X </td>
</tr>
<td> <br /> </td>
<tr class="center">
<td> Ford Focus </td>
<th> <br /> </td>
<td> Camaro </td>
<th> Weiblich</td>
<td> Golf </td>
<th> Männlich</td>
</tr>
<th> Firmen-PKW</td>
<th> Eigener PKW</td>
<tr >
<th> PKW des Partners</td>
<td> Vega, Suzanne </td>
</tr>
<td> X </td>
<tr>
<td> <br /> </td>
<td> Meyer, Hans Hugo</td>
<td> <br /> </td>
<td> <br /> </td>
<td> Lancia </td>
<td> X </td>
<td> Fahrrad </td>
<td> Jaguar </td>
</tr>
<td> Porsche </td>
<td> <br /> </td>
</tr>
FB Automatisierung und Informatik: Einführung in die Informatik
table08 87
Tabellen in HTML: Zellen über mehrere Bereiche
FB Automatisierung und Informatik: Einführung in die Informatik
table08 88
Tabelle: Zellen über mehrere vertikale Bereiche
FB Automatisierung und Informatik: Einführung in die Informatik
table09 89
/* Aussenrand */
table {
border: 2px solid;
caption-side:bottom;
border-collapse:collapse;
width:100%;
}
/* einfacher Rand in der Tabelle */
td, th {
border: 2px solid;
border-color: black;
}
td {
color:rgb(100%,0%,100%);
}
th {
color:rgb(0,100,255);
}
.center {
text-align:center;
}
.left {
text-align:left;
}
.right {
text-align:right;
}
.top {
vertical-align: top;
}
h2 {
color:green;
}
FB Automatisierung und Informatik: Einführung in die Informatik
table09 90
<table>
<caption>Tabellentitel</caption>
<tr>
<th>Kopf spalte 1</th>
<th>Kopf spalte 2</th>
</tr>
<tr>
<td colspan="2" class="center">...</td>
</tr>
<tr>
<td rowspan="3" class="top">1. Testzeile</td>
<td >2. testzeile</td>
</tr>
FB Automatisierung und Informatik: Einführung in die Informatik
table09 91
Tabelle: Zellen über mehrere vertikale Bereiche
<tr>
<td>Zelle(n,1)</td>
</tr>
<tr>
<td>Zelle(n,1)</td>
</tr>
<tr>
<td>Zelle(n,1)</td>
<td>Zelle(n,2)</td>
</tr>
</table>
FB Automatisierung und Informatik: Einführung in die Informatik
table09 92