Einführung in die Informatik

Transkript

1 Einführung in die Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / FB Automatisierung und Informatik: Einführung in die Informatik 1

2 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

3 Literatur HTML Shafer, Yank; Cascading Stylesheets; ISBN 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 3 Anhang

4 Literatur HTML Laborenz, Kai; CSS; Das umfassende Handbuch ISBN Chao, Ingo; Rudel, Corina; Fortgeschrittene CSS-Techniken, ISBN Hoffmann, Manuela; Modernes Webdesign; ISBN Avci, Trittmann, Mellis; Web-Programmierung; Vieweg Verlag, ISBN Wenz, Christian; JavaScript, Das umfassende Handbuch; ISBN FB Automatisierung und Informatik: Einführung in die Informatik 4

5 Literatur HTML Andreas Buschmann; Java-Script - Interaktiv; ISBN Stefan Koch; Java-Script; ISBN Heiko Wöhr; Webtechnologien; ISBN X Buchmann, Smolarek; PHP - interaktiv; ISBN X Kevin Yank; PHP und MySQL; ISBN Bongers, Frank; Vollendorf, Maximilian; jquery, Das Praxisbuch; ISBN FB Automatisierung und Informatik: Einführung in die Informatik 5

6 Cascading Stylesheets Adressen FB Automatisierung und Informatik: Einführung in die Informatik 6

7 Entwicklung des Internet 1968/69 ARPANET, militärische Entwicklung 1973 erste internationale Verbindungen 1976 Netzwerksoftware uucp im Betriebssystem UNIX 1979 USENET NEWS 1982 Eunet 1990 Archie 1991 WAIS und GOPHER 1992-? World-Wide Web(WWW) FB Automatisierung und Informatik: Einführung in die Informatik 7

8 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

9 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

10 Adressierung im Internet: Basis ist ein Hauptrechner IP Adresse Netz Adresse FB Automatisierung und Informatik: Einführung in die Informatik 10

11 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 Internetprotokoll :// URL-Zeichensetzung Domainname /vorlesungen/internet/ Verzeichnis bsp1.html Name FB Automatisierung und Informatik: Einführung in die Informatik 11

12 Weitere Beispiele: gopher://gopher.std.com/pub telnet://std.com ftp://ftp.std.com/ub/oakridge/test.txt news.hs-harz.de Dokumentation zu URL: 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

13 FTP mittels Browser FB Automatisierung und Informatik: Einführung in die Informatik 13

14 Domain Name Service (DNS) Es gibt keinen Rechner mit der Internetadresse Jeder Rechner hat eine Adresse, die aus 4 (6) Zahlen besteht DNS-Server setzen die Textadressen in Rechneradressen um. Diese Server sind hierarchisch organisiert. HS Harz: FB Automatisierung und Informatik: Einführung in die Informatik 14

15 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-myweb.hs-harz.de FB Automatisierung und Informatik: Einführung in die Informatik 15

16 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

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

18 FB Automatisierung und Informatik: Einführung in die Informatik 18

19 Hypertext Markup Language HTML basiert auf SGML (ISO 8850) ca 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 FB Automatisierung und Informatik: Einführung in die Informatik 19

20 HTML Beispiel mit Mindestinhalt: <html> </html> FB Automatisierung und Informatik: Einführung in die Informatik bsp01 20

21 HTML Beispiel mit Mindestinhalt2: <html> <head> <title> Titel des Dokuments </title> </head> </html> FB Automatisierung und Informatik: Einführung in die Informatik bsp02 21

22 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

23 HTML Beispiel mit Mindestinhalt3: FB Automatisierung und Informatik: Einführung in die Informatik 23

24 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

25 HTML Überschriften: FB Automatisierung und Informatik: Einführung in die Informatik 25

26 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

27 Sonderzeichen Unicode Leerzeichen, Leerzeichen Breite n Leerzeichen Breite m Leerzeichen, schmal < < > > &#8804 <= &#8805 >= Pfundzeichen Eurozeichen Centzeichen Paragraphenzeichen Copyright eingetragene Marke Trademark-Zeichen ³ ³ hochgestellte 3 ² ² hochgestellte 2 &#185 ¹ hochgestellte 1 ½ ½ ¼ ¼ ¾ ¾ μ α β λ ω Ω π &#928i ä Ä ö Ö ü Ü ß ± µ Microzeichen a alpha ß beta λ lambda (z.b. Wellenlänge) ω omega (z.b. Kreisfrequenz) Ω Omega (z.b. Widerstand) π Kreiszahl Π Absatz-Zeichen ä deutsche Umlaute Ä ö Ö ü Ü ß ± plusminus Man. Trennung: shy FB Automatisierung und Informatik: Einführung in die Informatik 27

28 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

29 HTML Absätze: Text <br /> <p> Text </p>: Leerzeile vorher und nachher FB Automatisierung und Informatik: Einführung in die Informatik 29

30 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: FB Automatisierung und Informatik: Einführung in die Informatik 30

31 Einheitliches Aussehen: Firmenwebsite ohne CSS Formate: Header Tabelle Listen Absätze FB Automatisierung und Informatik: Einführung in die Informatik st_bsp1.html 31

32 FB Automatisierung und Informatik: Einführung in die Informatik st_bsp1.html 32

33 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

34 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 blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow FB Automatisierung und Informatik: Einführung in die Informatik 34

35 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

36 CSS-Referenz: Font font-family: font-style: normal italic oblique// ähnlich italic 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) FB Automatisierung und Informatik: Einführung in die Informatik 36

37 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

38 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

39 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

40 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

41 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

42 HTML Body-Atribute CSS- Attribute zu body sind: background-color Hintergrundfarbe link, alink, vlink Farbe der Links color Textfarbe background-image Hintergrund mit einem Bild background-repeat Farben werden hexadezimal, in Prozent oder als 0 bis 255 eingetragen: #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

43 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

44 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

45 HTML CSS-Body-Attribute: #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% 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

46 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

47 HTML Schriften: FB Automatisierung und Informatik: Einführung in die Informatik bsp07-fontsize 47

48 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> FB Automatisierung und Informatik: Einführung in die Informatik bsp08-fontfarbe.html 48

49 Schriftgrößen und Farbe in CSS FB Automatisierung und Informatik: Einführung in die Informatik bsp08-fontfarbe.html 49

50 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

51 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

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

53 FB Automatisierung und Informatik: Einführung in die Informatik 53

54 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

55 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

56 Beispiel css_bsp1.xhtml FB Automatisierung und Informatik: Einführung in die Informatik 56

57 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

58 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

59 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

60 FB Automatisierung und Informatik: Einführung in die Informatik bsp09-fontattribute 60

61 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: border 1 Wert top, left, bottom, right Hintergrundfarbe, nur sichtbar bei großer Höhe 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

62 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

63 Horizontale Linien FB Automatisierung und Informatik: Einführung in die Informatik 63

64 Listen in CSS none Circle square disc Kein Aufzählungszeichen Kreis, nur Rahmen Quadrat 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 georgian Armenische Nummerierung Georgische Nummerierung FB Automatisierung und Informatik: Einführung in die Informatik 64

65 HTML Listen: FB Automatisierung und Informatik: Einführung in die InformatikBsp10-Listen 65

66 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

67 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). HTML- Seiten 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 images\bild.gif /images/bild.gif FB Automatisierung und Informatik: Einführung in die Informatik 67

68 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

69 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

70 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

71 HTML Verknüpfungen FB Automatisierung und Informatik: Einführung in die Informatik bsp14 71

72 HTML CSS-Body-Attribute: Link-Attribute link alink vlink FB Automatisierung und Informatik: Einführung in die Informatik 72

73 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

74 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

75 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: th td: colspan: rowspan: TableRow Table-Header, fett Table-Data Spalten verbinden Zeilen verbinden FB Automatisierung und Informatik: Einführung in die Informatik 75

76 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

77 Tabellen in HTML mit CSS /* Aussenrand */ table { <html> <head><title> 2. Tabellenbeispiel </title> </head> <body> <table> <tr> </tr> </table> <th>überschrift</th> <td>zelle(1,1)</td> <td>zelle(1,2)</td> } 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

78 /* Aussenrand */ table { border: 1px solid; } /* einfacher Rand in der Tabelle */ td, th { border: 1px solid; border-color: black; } /* Aussenrand */ table { border: 1px solid; border-collapse:collapse; } /* einfacher Rand in der Tabelle */ td, th { border: 1px solid; border-color: black; } Rand ist doppelt Rand ist einfach Border-collapse FB Automatisierung und Informatik: Einführung in die Informatik 78

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

80 Tabellen in CSS border 1px solid #000 border-collapse collapse, separate - Darstellung untersch. Rahmen border-spacing caption-side empty-cells - Leere Zelle, aber mit td,td table-layouts - Breite der Zellen Länge top, bottom show, hide auto, fixed vertical-align: top, center, bottom overflow: 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

81 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

82 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

83 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

84 Tabellen in HTML: Ausrichtung, Ergebnis FB Automatisierung und Informatik: Einführung in die Informatik table06 84

85 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

86 Tabellen in HTML: Vertikale Ausrichtung+Listen FB Automatisierung und Informatik: Einführung in die Informatik table07 86

87 Tabellen in HTML: Zellen über mehrere Bereiche <table> <caption> Firmenfahrzeuge und Nutzung der privaten PKWs </caption> <tr > <th> Name </th> <th colspan="2" > Geschlecht </th> <th colspan="3" > Fahrzeug </th> </tr> <tr class="center"> <th> <br /> </td> <th> Weiblich</td> <th> Männlich</td> <th> Firmen-PKW</td> <th> Eigener PKW</td> <th> PKW des Partners</td> </tr> <tr> <td> Meyer, Hans Hugo</td> <td> <br /> </td> <td> X </td> <td> Jaguar </td> <td> Porsche </td> <td> <br /> </td> </tr> <tr > <td> Schulze, Petra </td> <td> X </td> <td> <br /> </td> <td> Ford Focus </td> <td> Camaro </td> <td> Golf </td> </tr> <tr > <td> Vega, Suzanne </td> <td> X </td> <td> <br /> </td> <td> <br /> </td> <td> Lancia </td> <td> Fahrrad </td> </tr> FB Automatisierung und Informatik: Einführung in die Informatik table08 87

88 Tabellen in HTML: Zellen über mehrere Bereiche FB Automatisierung und Informatik: Einführung in die Informatik table08 88

89 Tabelle: Zellen über mehrere vertikale Bereiche FB Automatisierung und Informatik: Einführung in die Informatik table09 89

90 /* Aussenrand */ table {.center { border: 2px solid; text-align:center; caption-side:bottom; }.left { border-collapse:collapse; text-align:left; width:100%; } }.right { /* einfacher Rand in der Tabelle */ text-align:right; td, th { } border: 2px solid;.top { border-color: black; vertical-align: top; } } td { h2 { color:rgb(100%,0%,100%); color:green; } } th { color:rgb(0,100,255); } FB Automatisierung und Informatik: Einführung in die Informatik table09 90

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

92 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