Grundlagen der Informatik

Transkript

1 Grundlagen der Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 1

2 Gliederung 1. WWW / HTML / CSS 2. Unix 3. Unix Shellprogrammierung 4. XML Einführung 5. Betriebssysteme (Aufgaben, Dateien, Speicher, Prozesse, E-A-Geräte) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 5

6 Cascading Stylesheets Adressen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 8

9 Einführung in das World-Wide-Web Adressierung URL-Adresse DNS Basisdienst FTP Grenzen des WWW Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 9

10 Adressierung im Internet: Basis ist ein Hauptrechner IP Adresse Netz Adresse Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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). Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 12

13 FTP mittels Browser Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Explorersyntax: ftp-myweb.hs-harz.de Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 16

17 Übertragung get datei.doc bin get datei.doc ascii Apple Unix DOS CR und ab OS X LF LF CR / LF Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 17

18 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 19

20 HTML Beispiel mit Mindestinhalt: <html> </html> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp01 20

21 HTML Beispiel mit Mindestinhalt2: <html> <head> <title> Titel des Dokuments </title> </head> </html> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp02 21

22 HTML Beispiel mit Mindestinhalt3: <html> <head> <title> Titel des Dokuments </title> </head> <body> Kern des Dokuments </body> </html> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp03 22

23 HTML Beispiel mit Mindestinhalt3: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp04-header 24

25 HTML Überschriften: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 26

27 Sonderzeichen Unicode Leerzeichen, Leerzeichen Breite n Leerzeichen Breite m Leerzeichen, schmal < < > > 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp05-absatz 28

29 HTML Absätze: Text <br /> <p> Text </p>: Leerzeile vorher und nachher Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 30

31 Einheitliches Aussehen: Firmenwebsite ohne CSS Formate: Header Tabelle Listen Absätze Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I st_bsp1.html 31

32 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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; } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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% Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 38

39 CSS-Referenz: white-space Legt fest, wie Textumbrüche, Leerzeichen und Tabulatoren im Quellcode vom Browser angezeigt werden. Normal Zeilenumbrüche im Quellcode werden nicht dargestellt und mehrere Leerzeichen im Quellcode zu einem zusammengefügt. Der Browser fügt einen Zeilenumbruch am Zeilenende ein. Pre Zeilenumbrüche und Leerzeichen werden, wie im <pre>-tag, so dargestellt, wie sie im Quellcode eingegeben sind. Nowrap Zeilenumbrüche im Quellcode werden nicht dargestellt, mehrere Leerzeichen im Quellcode zu einem zusammengefügt und der Browser fügt am Zeilenende keinen Zeilenumbruch ein. Dieser kann nur mit dem <br />-Tag erzeugt werden. Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 39

40 CSS-Referenz: white-space Legt fest, wie Textumbrüche, Leerzeichen und Tabulatoren im Quellcode vom Browser angezeigt werden. pre-wrap Wie im <pre>-tag stellt der Browser Zeilenumbrüche und Leerzeichen dar wie sie im Quellcode eingegeben sind, jedoch erfolgt am Zeilenende ebenfalls ein automatischer Zeilenumbruch. pre-line Mehrere Leerzeichen im Quellcode werden zu einem zusammengefügt und Zeilenumbrüche fügt der Browser am Ende der Zeile, durch das <br />-Tag und dort, wo sie im Quellcode eingegeben sind, ein. /* Kommentare werden in CSS so geschrieben */ Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 40

41 CSS-Definition: 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: red; font-size: 1.2em; font-family: Times; } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 41

42 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> <body> </body> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 42

43 CSS-Beispiele: body { font-size: 14pt; color: rgb(20,100,100); font-family:arial,garamond, Times, "Gill Sans", Serif; font-weight:400; } ul{ list-style-type:circle; // square, dics, none list-style-position:outside; } ol{ list-style-type:lower-alpha; // decimal, upper-roman, // decimal-leading-zero } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 43

44 CSS-Beispiele: st_bsp2.css table { } border: 1px solid; /* einfacher Rand in der Tabelle */ td, th { border: 1px solid; border-color: black; } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 44

45 CSS-Beispiele: st_bsp2.html <h2> 1. Beispiel, Header H2 </h2> <p> Der Fachbereich Automatisierung und Informatik </p> <table> <tr> <th> </th> <th> 22222</th> </tr> </table> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 45

46 CSS-Beispiele: st_bsp3.html Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I st_bsp3.html 46

47 CSS-Beispiele: st_bsp3.css h2 { } font-size: 1.2em; color: #0000FF; width:70%; padding-left: 41px; // Innenrand h3 { } font-size: 1.1em; color: #2E3A83; background-color:#f0f0f0; padding-left: 41px; margin-left: 20mm; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 47

48 CSS-Beispiele: st_bsp3.css ul{ font-size: 1em; list-style-type:circle; llist-style-position:inside; // outside; } ol{ font-size: 0.5em; list-style-type:decimal-leading-zero; } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 48

49 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) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp06-body 49

50 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 50

51 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 51

52 Websichere Farben Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I

53 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 53

54 HTML CSS-Body-Attribute: Link-Attribute link alink vlink Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 54

55 HTML CSS-Body-Attribute: Link-Attribute a:link{ } color: #0000FF; a:visited{ } color: #0000FF; a:active{ } color: #FF0000; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I

56 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 /> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp07-fontsize 56

57 HTML Schriften: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp07-fontsize 57

58 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik Ibsp08-Fontfarbe.html 58

59 Schriftgrößen und Farbe in CSS Fachbereich Automatisierung und Informatik, Grundlagen der Informatik Ibsp08-Fontfarbe.html 59

60 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 60

61 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 61

62 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 62

63 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp13-text-align 63

64 <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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 64

65 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 65

66 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 66

67 Beispiel css_bsp1.xhtml Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 67

68 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 68

69 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 69

70 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 70

71 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp09-fontattribute 71

72 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. Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp12-hr 72

73 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 73

74 Horizontale Linien Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 74

75 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 75

76 HTML Listen: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Bsp10-Listen 76

77 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Bsp11-Listen 77

78 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 78

79 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=.) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 79

80 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp14 80

81 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp14 81

82 HTML Verknüpfungen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp14 82

83 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I bsp-img-01->bsp-img-06 83

84 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 84

85 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table01 85

86 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table02 86

87 /* 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 87

88 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Table

89 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 89

90 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Table04a/b 90

91 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table05 91

92 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table06 92

93 Tabellen in HTML: Ausrichtung, Ergebnis Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table06 93

94 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table07 94

95 Tabellen in HTML: Vertikale Ausrichtung+Listen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table07 95

96 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table08 96

97 Tabellen in HTML: Zellen über mehrere Bereiche Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table08 97

98 Tabelle: Zellen über mehrere vertikale Bereiche Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table09 98

99 /* 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); } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table09 99

100 <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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table09 100

101 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I table09 101

102 Tabelle mit logischem Header und Fußzeile Table_Body_THead_Foot_Body Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 102

103 Tabelle mit einem Scrollfeld <div style="overflow: auto; width: 450px; height: 300px; "> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Floating_Table 103

104 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Table_rules 104

105 Tabelle mit vertikalen Strichen table { border-left:3px solid black; border-right:3px solid black; border-collapse:collapse; // Verhindert doppelte Striche } /* einfacher Rand in der Tabelle */ td, th { border-left:1px solid black; border-right:1px solid black; } Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I Table_Rules 105

106 CSS-Referenz: (unabhängige Styles) Cascade Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 106

107 CSS-Referenz: Unabhängige Sheets (Bereiche) Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 107

108 CSS-Referenz: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik I 108