Web-Technologien. FB Automatisierung und Informatik, Einf. Webtechnologien 1
|
|
|
- Cornelius Lorentz
- vor 5 Jahren
- Abrufe
Transkript
1 Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / FB Automatisierung und Informatik, Einf. Webtechnologien 1
2 Inhalt 1. HTML und CSS 2. Formulare 3. PHP 4. PHP-OOP 5. PHP-Datenbanken 6. node.js 7. Jsp FB Automatisierung und Informatik, Einf. Webtechnologien 2
3 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. Webtechnologien 3
4 Einheitliches Aussehen: Firmenwebsite ohne CSS Formate: Header Tabelle Listen Absätze FB Automatisierung und Informatik, Einf. Webtechnologien st_bsp1.html 4
5 FB Automatisierung und Informatik, Einf. Webtechnologien st_bsp1.html 5
6 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. Webtechnologien 6
7 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. Webtechnologien 7
8 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. Webtechnologien 8
9 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. Webtechnologien 9
10 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. Webtechnologien 10
11 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. Webtechnologien 11
12 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. Webtechnologien 12
13 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> FB Automatisierung und Informatik, Einf. Webtechnologien 13
14 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 FB Automatisierung und Informatik, Einf. Webtechnologien 14
15 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. Webtechnologien bsp06-body 15
16 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. Webtechnologien 16
17 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. Webtechnologien 17
18 Websichere Farben FB Automatisierung und Informatik, Einf. Webtechnologien 18
19 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. Webtechnologien 19
20 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. Webtechnologien bsp07-fontsize 20
21 HTML Schriften: FB Automatisierung und Informatik, Einf. Webtechnologien bsp07-fontsize 21
22 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. Webtechnologien bsp08-fontfarbe.html 22
23 Schriftgrößen und Farbe in CSS FB Automatisierung und Informatik, Einf. Webtechnologien bsp08-fontfarbe.html 23
24 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. Webtechnologien 24
25 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. Webtechnologien bsp13-text-align 25
26 <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. Webtechnologien 26
27 FB Automatisierung und Informatik, Einf. Webtechnologien 27
28 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. Webtechnologien 28
29 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. Webtechnologien 29
30 Beispiel css_bsp1.xhtml FB Automatisierung und Informatik, Einf. Webtechnologien 30
31 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. Webtechnologien 31
32 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. Webtechnologien 32
33 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. Webtechnologien 33
34 FB Automatisierung und Informatik, Einf. Webtechnologien bsp09-fontattribute 34
35 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. Webtechnologien bsp12-hr 35
36 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. Webtechnologien 36
37 Horizontale Linien FB Automatisierung und Informatik, Einf. Webtechnologien 37
38 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. Webtechnologien 38
39 HTML Listen: FB Automatisierung und Informatik, Einf. Webtechnologien Bsp10-Listen 39
40 HTML Listen: ibib 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. Webtechnologien Bsp11-Listen 40
41 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: FB Automatisierung und Informatik, Einf. Webtechnologien 41
42 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. Webtechnologien 42
43 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. Webtechnologien bsp14 43
44 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. Webtechnologien bsp14 44
45 HTML CSS-Body-Attribute: Link-Attribute link alink vlink FB Automatisierung und Informatik, Einf. Webtechnologien 45
46 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. Webtechnologien 46
47 HTML Bilder: Bilder: Anzeigen eines Bildes <img src="/images/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. Webtechnologien bsp-img-01->bsp-img-06 47
48 CSS-Referenz: white-space Legt fest, wie Textumbrüche, Leerzeichen und Tabulatoren im Quellcode vom Browser angezeigt werden. Normal Pre 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. 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. FB Automatisierung und Informatik, Einf. Webtechnologien 48
49 CSS-Referenz: white-space (2) 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 */ FB Automatisierung und Informatik, Einf. Webtechnologien 49
50 HTML CSS-Body-Attribute: Link-Attribute link alink vlink FB Automatisierung und Informatik, Einf. Webtechnologien 50
51 HTML CSS-Body-Attribute: Link-Attribute a:link{ color: #0000FF; a:visited{ color: #0000FF; a:active{ color: #FF0000; FB Automatisierung und Informatik, Einf. Webtechnologien
52 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. Webtechnologien 52
53 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. Webtechnologien bsp13-text-align 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. Webtechnologien 54
55 Beispiel css_bsp1.xhtml FB Automatisierung und Informatik, Einf. Webtechnologien 55
56 Klassen-Selektoren in CSS Klassen werden in den Definitionen verwendet. Es gibt: vordefinierte Selektoren Pseudo-Selektoren eigene Selektoren mit beliebigen Namen. Beispiele für vordefinierte Klassen: h1 h6 body td th p FB Automatisierung und Informatik, Einf. Webtechnologien 56
57 Klassen-Selektoren in CSS Beispiel: body { background: yellow; font-size: 16pt; table { border:1px solid blue; FB Automatisierung und Informatik, Einf. Webtechnologien 57
58 Klassen-Selektoren in CSS: Beispiel rahmen Ein Style kann man nun in die CSS-Datei eintragen, um spezielle Formate zu definieren, ohne in die HTML-Datei weitere Attribute einzufügen:.rahmen { border:1px solid green; background-color:red; p.rahmen { border:1px solid red; h1.rahmen { border:1px solid blue; allgemeine Regel gilt nur in einem p-abschnitt gilt nur in einem h1-abschnitt FB Automatisierung und Informatik, Einf. Webtechnologien 58
59 Klassen-Selektoren in CSS Anwendung: <h1 class="rahmen">eine h1-überschrift mit Rahmen</h1> <h2 class="rahmen">eine h2-überschrift, allgm. Regel</h2> <p class="rahmen">ein Absatz, p-regel</p> <div class="rahmen">ein Absatz, allgm. Regel</div> FB Automatisierung und Informatik, Einf. Webtechnologien 59
60 CSS-Beispiele: st_bsp4.html st_bsp4.html FB Automatisierung und Informatik, Einf. Webtechnologien 60
61 CSS-Beispiele: st_bsp5.html FB Automatisierung und Informatik, Einf. Webtechnologien 61
62 Klassen-Selektoren in CSS Beispiele: h1 { color:red; h1 { font-size: 2em; Beispiele: h2 { font-size: 1.5em;.under { text-decoration:underline;.blue { color:blue; Anwendung: <p class="under blue">ein Text in blauer Schrift und unterstrichen</p> FB Automatisierung und Informatik, Einf. Webtechnologien 62
63 Pseudo-Elemente und -Klassen in CSS :after :before :first-letter :first-line Gilt nach einem Element Gilt Vor einem Element Das erste Zeichen in einer Zeile Die erste Zeile in einem Absatz :first-child :last-child :active :focus :hover :lang :link :visited Das erste "Kind" des Abschnittes (body,ol) Das letzte "Kind" des Abschnittes (body,ol) benutzt in Hyperlink wenn Element den Fokus erhält Maus über Elemente, (Hyperlink) Sprache Normaler Link (Hyperlink) Besuchter Link FB Automatisierung und Informatik, Einf. Webtechnologien 63
64 st_bsp6.html und st_bsp6.css <p> A.B Zeile </p> Dies ist die 2. Zeile<br /> Dies ist die 3. Zeile<br /> <ul > <li> Text1 </li> <li> Text2 </li> <li> Text3 </li> <li> Text4 </li> </ul> p:first-letter{ font-size:3em; color:green; p:first-line{ font-size:80%; color:#ff96ff; li:first-child{ color:red; font-size:2em; FB Automatisierung und Informatik, Einf. Webtechnologien 64
65 st_bsp6.html und st_bsp6.css FB Automatisierung und Informatik, Einf. Webtechnologien 65
66 Id-Selektor in CSS Die Klassen-Styles können an mehreren Stellen benutzt werden. Dies ist bei der Benutzung von Java-Script bzw. bei der Layout Definition von Bereichen (Sheets) nicht immer gewünscht. Deshalb existieren ID-Selektoren Die Style-Definition und die Adresse eines ID-Selektors sollte nur einmal existieren. Jedes Element besitzt eine eindeutige ID, mit der dieses adressiert werden kann. ID-Selektoren werden häufig in Verbindung mit Ajax benutzt FB Automatisierung und Informatik, Einf. Webtechnologien 66
67 Beispiel.div1 { color:blue; #iddiv1 { color:green;.over { text-decoration: overline; <div id="iddiv1"> 2. Zeile, im Beispiel, iddiv1, sollte nur einmal vorhanden sein </div> <div class="div1"> 3. Zeile, im <span class="over">zweiten</span> Beispiel, div </div> FB Automatisierung und Informatik, Einf. Webtechnologien 67
68 st_bsp7.html FB Automatisierung und Informatik, Einf. Webtechnologien 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> FB Automatisierung und Informatik, Einf. Webtechnologien 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> FB Automatisierung und Informatik, Einf. Webtechnologien 70
71 FB Automatisierung und Informatik, Einf. Webtechnologien bsp09-fontattribute 71
72 Cascade und Nachbarschaft in CSS Alle Elemente erben alle Eigenschaften des Parent-Element (außer body) Um genauer die Vererbung steuern zu können, existieren mehrere Selektor-Typen. Es stehen jeweils zwei Elemente in Beziehung Direkter Nachfahr-Selektor (Element ist in parent) - ol ol td li Nachfahr-Selektor, Tiefe > 1 - body * p div * h2 Nebeneinander-Selektor (Hintereinander) - div + h2 ul + ul p + h2 Direkter Nachfahr oder Hintereinander -Selektor - body > p p > h2 div > h2 FB Automatisierung und Informatik, Einf. Webtechnologien 72
73 Cascade mit cs_bsp01.html ul { color:blue; list-style-type: circle; ul ul{ color:green; list-style-type: disc; ul + ul{ color:yellow; background-color:black; list-style-type: disc; list-style-position: inside; FB Automatisierung und Informatik, Einf. Webtechnologien 73
74 cs_bsp02.css ol { color:blue; list-style-type: lower-roman; /* Element liegt in einem anderen Element */ ol ol{ color:green; list-style-type: lower-greek; ol + ol{ color:red; background-color:#e8e8e8; /* Element liegt hinter- oder ineinander eines anderen Element */ ol > ol{ color: cyan; list-style-type: upper-latin; /* Element liegt ineinander eines anderen Element */ ol * ol{ color:teal; background-color:yellow; list-style-type: decimal-leading-zero; list-style-type: upper-latin; FB Automatisierung und Informatik, Einf. Webtechnologien 74
75 FB Automatisierung und Informatik, Einf. Webtechnologien
76 <ol> <li> Text1 </li> <ol > <li> Text2-1 </li> <ol > <li> Text2-1 </li> <li> Text2-2 </li> </ol> <li> Text2-2 </li> </ol> <li> Text2 </li> <li> Text3 </li> </ol> <h3> Die unteren Listen</h3> <ol> <li> Text3 </li> <li> Text4 </li> <li> Text5 </li> </ol> <ol > <li> Text6 </li> <li> Text7 </li> </ol> <ol > <li> OL1-Text1 </li> <ol> <li> OL2-Text3 </li> <ol > <li> OL3-Text7 </li> </ol> <li> OL2-Text8 </li> </ol> <li> OL1-Text9 </li> <ol > <li> OL4-Text10 </li> </ol> <li> OL1-Text14 </li> </ol> FB Automatisierung und Informatik, Einf. Webtechnologien
77 cs_bsp04.html: Cascade mit ID-Selektor ul { color:blue; #nav ul { color:green; <div id="nav"> <ul > <li> Text1 </li> <li> Text2 </li> </ul> </div> <div> <ul > <li> Text1 </li> <li> Text2 </li> </ul> </div> FB Automatisierung und Informatik, Einf. Webtechnologien 77
78 cs_bsp04.html: Komplettes Beispiel FB Automatisierung und Informatik, Einf. Webtechnologien 78
79 weine.html: a { color: blue; a.weisswein { color: #FFBB00; a.rotwein { color: #FF00FF; remark { font-size=2pt; FB Automatisierung und Informatik, Einf. Webtechnologien 79
80 weine.html: <ul> <li><a href="ri.htm" class="weisswein">riesling</a></li> <li><a href="ch.htm" class="weisswein">chardonnay</a></li> <li><a href="pb.htm" class="weisswein">pinot Blanc</a></li> </ul> <p>trauben für Rotwein:</p> <ul> <li><a href="cs.htm" class="rotwein">cabernet Sauvignon</a></li> <li><a href="me.htm" class="rotwein">merlot</a></li> <li><a href="pn.htm" class="rotwein">pinot Noir</a></li> </ul> FB Automatisierung und Informatik, Einf. Webtechnologien 80
81 CSS-Beispiele: <-- Farbe eines nicht besuchten Links -> a:link{ color: #FF0000; <-- Farbe eines besuchten Links -> a:visited{ color: #00FF00; <-- Farbe, wenn Maustaste über einen Link gedrueckt wird -> a:active{ color: #FFFF00; FB Automatisierung und Informatik, Einf. Webtechnologien 81
82 Sheets in CSS Bereiche werden mit dem "div"-tag erstellt Jeder Bereich hat einen "parent" und erbt alle Eigenschaften - Ränder, Schriftgrößen, Fonts - Problem Multiplikation 2em Man kann diese Bereiche beliebig positionieren - top, left, width, height - Ränder, Abstände (margin) - float, none, left und right Das "parent"-element eines Bereiches kann sich beim Vergrößern oder Verkleinern ändern FB Automatisierung und Informatik, Einf. Webtechnologien 82
83 sh_bsp01.html: Bereiche über- und nebeneinander FB Automatisierung und Informatik, Einf. Webtechnologien 83
84 #box1 { position:absolute; top:50%; left:10px; width:50%; height:150px; z-index:1; #box2 { position:absolute; top:80px; left:40px; width:100px; height:100px; z-index:2; #box3 { position:absolute; top:120px; left:50px; width:150px; height:150px; z-index:3; #box4 { position:absolute; top:80px; left:220px; width:70px; height:70px; z-index:1; FB Automatisierung und Informatik, Einf. Webtechnologien 84
85 sh_bsp02.html: Bereiche nebeneinander FB Automatisierung und Informatik, Einf. Webtechnologien 85
86 Padding und Margin Rand Außenrand, Margin Innenrand, Padding Element FB Automatisierung und Informatik, Einf. Webtechnologien 86
87 Attribute für die Positionierung und Größe bottom clear clip Position unten, Längen- oder, Prozentangabe, auto Text umfließen beenden, left, right, both, none Ausschnitt, rect(), auto display float Anzeigeart, none und viele weitere Text umfließen, left, right, none height Höhe, Längen- oder Prozentangabe, auto FB Automatisierung und Informatik, Einf. Webtechnologien 87
88 Attribute für die Positionierung und Größe left Position links, Längen- oder Prozentangabe, auto max-height Maximale Höhe, Längen- oder Prozentangabe, none max-width Maximale Breite, Längen- oder Prozentangabe, none min-height Minimale Höhe, Längen- oder Prozentangabe min-width Minimale Breite, Längen- oder Prozentangabe overflow Überlauf in Tabellen, visible, hidden, scroll, auto FB Automatisierung und Informatik, Einf. Webtechnologien 88
89 Attribute für die Positionierung und Größe Position Positionsart, absolute, relative, static, fixed right Position rechts, Längen- oder Prozentangabe, auto top Position oben, Längen- oder Prozentangabe, auto visibility width Unsichtbar, visible,hidden, collapse Breite, Längen- oder Prozentangabe, auto z-index Überlappung, Zahl, auto FB Automatisierung und Informatik, Einf. Webtechnologien 89
90 Attribut position: Zeigt an, wie die Box positioniert wird static keine spezielle Positionierung, normaler Elementfluss (Normal- Einstellung) relative relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst fließt mit den anderen Elementen absolute fixed absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit Unabhängig von anderen Elementen absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen FB Automatisierung und Informatik, Einf. Webtechnologien 90
91 float Attribut zeigt an, wie ein Element andere umfließt - left Aktive Element fließt links von anderen - right - none zeigt an, an welche Seite das Element fließt Es muss immer eine Breite, width, angegeben werden Ersetzt das Attribut align FB Automatisierung und Informatik, Einf. Webtechnologien 91
92 Wichtige display-attribute none block inline Keine Anzeige (Ausschalten der Listensymbole) Das Element wird als Block-Element dargestellt Das Element wird als Inline-Element dargestellt list-item Sichtbar. Das Element erzeugt einen Absatz und hat ein Aufzählungszeichen FB Automatisierung und Informatik, Einf. Webtechnologien 92
93 Positionieren von Blöcken: float mit umbrechen float:left width:14em; height:auto; float:left width:600 px; height:auto; Beispiel: sh_bsp02.html FB Automatisierung und Informatik, Einf. Webtechnologien 93
94 Positionieren von Blöcken: float ohne umbrechen float:left position:relative; width:14em; top:0; left:0; height:auto; margin-left:15em; width:600 px; height:auto; Beispiel: sh_bsp03.html FB Automatisierung und Informatik, Einf. Webtechnologien 94
95 Positionieren von Blöcken: absolute position:absolute; width:14em; top:0; left:0; height:auto; position:absolute; width:500 px; top:0; left:15em; (left:auto); height:auto; Beispiel: sh_bsp04.html FB Automatisierung und Informatik, Einf. Webtechnologien 95
96 Positionieren von Blöcken: absolute position:absolute; width:14em; top:0; left:0; height:auto; position:absolute; top:0; left:200px; right:10px; height:auto; Ohne width Beispiel: sh_bsp04a.html FB Automatisierung und Informatik, Einf. Webtechnologien 96
97 Positionieren von Blöcken: absolute position:absolute; top:0; left:0; bottom:0px; right:400px; position:absolute; top:0; left:400px; bottom:10px; right:10px; Beispiel: sh_bsp04b.html FB Automatisierung und Informatik, Einf. Webtechnologien 97
98 Modernes Layout Header main left right FB Automatisierung und Informatik, Einf. Webtechnologien 98
99 sh_bsp05.html: Bereiche nebeneinander FB Automatisierung und Informatik, Einf. Webtechnologien 99
100 sh_bsp06.html: table-layout:fixed und overflow FB Automatisierung und Informatik, Einf. Webtechnologien 100
101 <table border="1" style="width:100%; table-layout:fixed; bordercollapse:collapse"> <tr> <td style="width:15%; overflow:hidden; font-size:1.5em;"> </td> <td style="width:30%; overflow:hidden; font-size:1.5em;"> </td> <td style="width:55%; overflow:hidden; font-size:1.5em;"> </td> </tr> </table> FB Automatisierung und Informatik, Einf. Webtechnologien 101
102 sh_bsp06.html: table-layout:fixed und overflow table-layout:fixed Problem ist der Text ohne White-Spaces Der Eintrag "fixed" verhindert, dass die Spalten den Text komplett anzeigen Die Breite muss aber pro Spalte angegeben werden Der Eintrag "border-collapse" zeichnet nur einen Rand pro Zelle. Beeinflusst also die Darstellungen von Zellen mit unterschiedlichen Rahmen Das overflow-attribt schneidet die Einträge am Ende der Spalte ab FB Automatisierung und Informatik, Einf. Webtechnologien 102
103 sh_bsp06.html: nebeneinander liegende Spalten FB Automatisierung und Informatik, Einf. Webtechnologien 103
Einführung in die Web-Technologien
Einführung in die Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich Automatisierung
Einführung in die Web-Technologien
Einführung in die Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich Automatisierung
CSS. Cascading Style Sheets
CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
Einführung in die Informatik
Einführung in die Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659 338 FB
Einführung in die Informatik
Einführung in die Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659 338 FB
Grundlagen der Informatik
Grundlagen der Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich Automatisierung und
Grundlagen der Informatik
Grundlagen der Informatik Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich Automatisierung und
ANWENDUNGSSOFTWARE CSS
ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011
Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten
Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
Eine Schnelleinführung in CSS
Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:
1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel
Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung
Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung
Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,
HTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -
// = 3) version = "n3"; if (browsername == "Netscape" && browserver >= 4) version = "n4"; if (browsername == "Microsoft Internet Explorer" && browserver >= 3.01 && browsermac!= -1) version = "ie3m"; if
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
Kapitel 17: CSS. Inhalt. Was kann CSS? (1) Was kann CSS? (2) 1. Einführung CSS. 2. Farben, Hintergründe, Zeichensätze. 3. Gruppierungen. 4.
17. CSS - Cascading Style Sheets 17-1 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze Kapitel 17: CSS 3. Gruppierungen 4. Box-Modell 5. Validierung
Grundlagen-Beispiel CSS
Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:
17. CSS - Cascading Style Sheets Kapitel 17: CSS
17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
Digitale Medien 4. STYLESHEETS, CSS
Digitale Medien 4. STYLESHEETS, CSS Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
CSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012
Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:
1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
Tabellenfreies Layout in HTML
Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau
XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß
XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß 1 2 XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß Webseite zum Buch: www.comelio-medien.com/dedi3_568.php 2008 Comelio Medien 3 Alle
Web-basierte Anwendungssysteme XHTML- CSS
Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
CSS Einführung & CSS Frameworks
CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen
HTML und CSS. Eine kurze Einführung
HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
CSS Cascading Stylesheets
CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel
Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,
<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
3 XML, HTML und XSL die Ausgabe
3 XML, HTML und XSL die Ausgabe XML und VBA lernen ISBN 3-8273-1952-8 Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige
Auf einen Blick. Vorwort Einführung in CSS Grundlegende Konzepte von CSS Die Zukunft von CSS Browser-Kompatibilität 97
Auf einen Blick Vorwort 13 1 Einführung in CSS 17 2 Grundlegende Konzepte von CSS 41 3 Die Zukunft von CSS 81 4 Browser-Kompatibilität 97 5 CSS in der Praxis 133 6 Beispiele 271 7 Tools für CSS 355 8 Die
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
Ändern der Schriftgröße für den Monitorexport
Ändern der Schriftgröße für den Monitorexport (Stand: 12/2017) In der Datei SUBST_ MO NITOR sind einige wenige Einträge zu ändern. Die Datei finden Sie im Programmverzeichnis von Untis: Wenn Sie diese
Formatierung eines Text Ads in CSS
Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.
Entwicklung multimedialer Anwendungen
Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659
Entwicklung multimedialer Anwendungen
Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659
Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut
Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei
CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche
4.8 Das Box Modell, Block- vs Inline-Elemente
4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
1 Ein erster Überblick 3
xiii I Grundlagen 1 Ein erster Überblick 3 1.1 CSS im Zusammenhang........................................3 1.2 Der eigentliche Zweck von CSS.................................4 1.3 Warum die meisten Tabellen
XSL-FO XSL Formatting Objects
XML-Praxis XSL-FO XSL Formatting Objects Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Funktionsweise von XSL-FO Seitendefinitionen Areas block- und inline-elemente Fonts XSLT und XSL-FO XML-Praxis
Introduction to Technologies. Stylesheets mit CSS
Introduction to Technologies Stylesheets mit CSS Beispiele CSS http://css.maxdesign.com.au/listamatic/ http://www.csszengarden.com/tr/deutsch/ http://www.albinoblacksheep.com/livedesign http://de.selfhtml.org/css/layouts/index.htm
XML-Praxis XSL-FO. Jörn Clausen
XML-Praxis XSL-FO Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht XSL Formatting Objects Seitendefinitionen Blöcke und Inlines XML-Praxis XSL-FO 2/27 Eigenschaften von XSL-FO zweiter Teil von XSL
XML-Praxis XSL-FO. Jörn Clausen
XML-Praxis XSL-FO Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht XSL Formatting Objects Seitendefinitionen Blöcke und Inlines XML-Praxis XSL-FO 2/27 Eigenschaften von XSL-FO zweiter Teil von XSL
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
Die wichtigsten HyperTextMarkupLanguage tags 1(6)
Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser
Der CSS-Problemlöser
Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche
HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.
HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ
CSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
Auszeichnungssprachen
Auszeichnungssprachen HTML Was ist HTML? HTML - HyperText Markup Landguage (Dt. Hypertext Auszeichnungssprache). HTML ist die Sprache, mit der WWW-Seiten definiert werden und die die Struktur, den Inhalt
Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.
CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen
Wert. { color: blue; }
CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder
Vorlesung: Entwicklung multimedialer Anwendungen
Hochschule Harz FB Automatisierung und Informatik 3. Laborversuch: Thema: HTML5 CSS3 Erstellen einer XHTML-Seite mit Transition-Elementen Vorlesung: Entwicklung multimedialer Anwendungen Versuchsziele:
Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
Fließlayout. »World of Fish«
Fließlayout 4»World of FishWorld of Fish«stellt ein kleines Informationsangebot zu einem begehbaren Aquarium dar, und dieses Angebot soll von uns umgesetzt werden. Im Vorfeld haben wir wie immer ein Konzept
SASS und Compass. Struktur für eure Stylesheets
SASS und Compass Struktur für eure Stylesheets Guten Tag Thomas Moseler Frontend-Developer www.rufzeichen-online.de Warum? .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler
Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes
IT- und Medientechnik
IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments