Einführung in die Web-Technologien
|
|
|
- Ralph Giese
- vor 7 Jahren
- Abrufe
Transkript
1 Einführung in die Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 1 Inhalt 1. HTML und CSS 2. Formulare 3. PHP 4. PHP-OOP 5. PHP-Datenbanken 6. Unix 7. Unix Shellprogrammierung Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 2 1
2 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 II bsp04-header 3 HTML Überschriften: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 4 2
3 Sonderzeichen Unicode Leerzeichen, Leerzeichen Breite n Leerzeichen Breite m Leerzeichen, schmal < < > > Pfundzeichen Eurozeichen Centzeichen Paragraphenzeichen Copyright eingetragene Marke Trademark-Zeichen ³ ³ hochgestellte 3 ² ² hochgestellte 2 ¹ ¹ hochgestellte 1 ½ ½ ¼ ¼ ¾ ¾ μ α β λ ω Ω π Πi ä Ä ö Ö ü Ü ß ± µ 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 II 5 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 II bsp05-absatz 6 3
4 HTML Absätze: Text <br /> <p> Text </p>: Leerzeile vorher und nachher Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 7 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 II 8 4
5 Einheitliches Aussehen: Firmenwebsite ohne CSS Formate: Header Tabelle Listen Absätze Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II st_bsp1.html 9 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II st_bsp1.html 10 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 11 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 II 12 6
7 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 II 13 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 II 14 7
8 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 II 15 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 II 16 8
9 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 17 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 II 18 9
10 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 II 19 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 II bsp06-body 20 10
11 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 II 21 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 II 22 11
12 Websichere Farben Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 23 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 II 24 12
13 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 II bsp07-fontsize 25 HTML Schriften: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik IIbsp07-Fontsize 26 13
14 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 II bsp08-fontfarbe.html 27 Schriftgrößen und Farbe in CSS Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp08-fontfarbe.html 28 14
15 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 II 29 Text und Ausrichtung CSS-Ausrichtungs-Attribute text-align:left; text-align:center; text-align:right; text-align:justify; <style type="text/css">.align_l { Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp13-text-align 30 text-align:left; color:#0000ff;.align_r { text-align:right; color:#ff0000;.align_c { text-align:center; color:#ff00ff;.align_j { </style> text-align:justify; color:#00ff00; 15
16 <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 II 31 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 32 16
17 Beispiel css_bsp1.xhtml body { color:black;.div1 { color:blue; p { color:green;.over { text-decoration: overline; color:red; Hier im body <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 II 33 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 34 17
18 Beispiel css_bsp1.xhtml Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 35 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 II 36 18
19 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 II 37 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 II 38 19
20 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp09-fontattribute 39 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 II bsp12-hr 40 20
21 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 II 41 Horizontale Linien Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 42 21
22 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 Armenische Nummerierung georgian Georgische Nummerierung Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 43 HTML Listen: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II Bsp10-Listen 44 22
23 Das Bild kann zurzeit nicht angezeigt werden. 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II Bsp11-Listen 45 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: Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 46 23
24 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 II 47 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/firmenhaus.png" target="newframe" >Neues Gebäude</a> </h4></p> <p><h4 > <a href=./images/firmenhaus.png" target="_blank" >Neues Gebäude</a> </h4></p> </h4></p> <p><h4 > <a href="/images/bild.gif" >Aufruf eines Bildes (absolut)</a> </h4></p> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp
25 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 II bsp14 49 HTML CSS-Body-Attribute: Link-Attribute link alink vlink Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 50 25
26 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 51 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp-img-01->bsp-img
27 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 II 53 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 II table
28 Tabellen in HTML mit CSS /* Aussenrand */ table { <html> <head><title> 2. Tabellenbeispiel </title> </head> <body> <table> <tr> <th>überschrift</th> <td>zelle(1,1)</td> <td>zelle(1,2)</td> </tr> </table> 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 II table02 55 /* 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 II 56 28
29 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 II Table 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 II 58 29
30 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 II Table04a/b 59 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 II table
31 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 II table06 61 Tabellen in HTML: Ausrichtung, Ergebnis Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II table
32 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 II table07 63 Tabellen in HTML: Vertikale Ausrichtung+Listen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II table
33 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 II table08 65 Tabellen in HTML: Zellen über mehrere Bereiche Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II table
34 Tabelle: Zellen über mehrere vertikale Bereiche Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II table09 67 /* Aussenrand */ table { border: 2px solid; caption-side:bottom; border-collapse:collapse; width:100%; /* einfacher Rand in der Tabelle */ td, th { border: 2px solid; border-color: black; td { color:rgb(100%,0%,100%); th { color:rgb(0,100,255);.center { text-align:center;.left { text-align:left;.right { text-align:right;.top { vertical-align: top; h2 { color:green; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II table
35 <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 II table09 69 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 II table
36 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 II 71 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 */ Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 72 36
37 Websichere Farben Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II HTML CSS-Body-Attribute: Link-Attribute link alink vlink Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 74 37
38 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 II 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 II 76 38
39 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp13-text-align 77.align_r { text-align:right; color:#ff0000;.align_c { text-align:center; color:#ff00ff;.align_j { </style> text-align:justify; color:#00ff00; 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 II 78 39
40 Beispiel css_bsp1.xhtml Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 79 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 80 40
41 Klassen-Selektoren in CSS Beispiel: body { background: yellow; font-size: 16pt; table { border:1px solid blue; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 81 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 { allgemeine Regel border:1px solid green; background-color:red; p.rahmen { gilt nur in einem p-abschnitt border:1px solid red; h1.rahmen { gilt nur in einem h1-abschnitt border:1px solid blue; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 82 41
42 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 83 CSS-Beispiele: st_bsp4.html st_bsp4.html Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 84 42
43 CSS-Beispiele: st_bsp5.html Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 85 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 86 43
44 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 Das erste "Kind" des Abschnittes (body,ol) :last-child Das letzte "Kind" des Abschnittes (body,ol) :active benutzt in Hyperlink :focus wenn Element den Fokus erhält :hover Maus über Elemente, (Hyperlink) :lang Sprache :link Normaler Link (Hyperlink) :visited Besuchter Link Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 87 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 88 44
45 st_bsp6.html und st_bsp6.css Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 89 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 90 45
46 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 91 st_bsp7.html Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 92 46
47 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 II 93 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 II 94 47
48 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II bsp09-fontattribute 95 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 96 48
49 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 97 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 98 49
50 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II <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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 50
51 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 101 cs_bsp04.html: Komplettes Beispiel Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
52 weine.html: a { color: blue; a.weisswein { color: #FFBB00; a.rotwein { color: #FF00FF; remark { font-size=2pt; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 103 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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
53 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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 105 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, links und rechts Das "parent"-element eines Bereiches kann sich beim Vergrößern oder Verkleinern ändern Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
54 sh_bsp01.html: Bereiche über- und nebeneinander Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 107 #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; Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
55 sh_bsp02.html: Bereiche nebeneinander Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 109 Padding und Margin Rand Außenrand, Margin Innenrand, Padding Element Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
56 Attribute für die Positionierung und Größe bottom Position unten, Längen- oder, Prozentangabe, auto clear Text umfließen beenden, left, right, both, none clip Ausschnitt, rect(), auto display Anzeigeart, none und viele weitere float Text umfließen, left, right, none height Höhe, Längen- oder Prozentangabe, auto Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 111 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
57 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 Unsichtbar, visible,hidden, collapse width Breite, Längen- oder Prozentangabe, auto z-index Überlappung, Zahl, auto Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 113 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 absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit Unabhängig von anderen Elementen fixed absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
58 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 115 Wichtige display-attribute none Keine Anzeige (Ausschalten der Listensymbole) block Das Element wird als Block-Element dargestellt inline Das Element wird als Inline-Element dargestellt list-item Sichtbar. Das Element erzeugt einen Absatz und hat ein Aufzählungszeichen Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
59 Positionieren von Blöcken: float mit umbrechen float:left width:14em; height:auto; float:left width:600 px; height:auto; Beispiel: sh_bsp02.html Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 117 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
60 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 119 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
61 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 121 Modernes Layout Header main left right Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
62 sh_bsp05.html: Bereiche nebeneinander Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 123 sh_bsp06.html: table-layout:fixed und overflow Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
63 <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> Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II 125 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 Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
64 sh_bsp06.html: nebeneinander liegende Spalten Fachbereich Automatisierung und Informatik, Grundlagen der Informatik II
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
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
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
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, 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
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 ,
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
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...
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
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
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-,
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,
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
Ü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
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
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
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:
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
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
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
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
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
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:
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,
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
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
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,
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
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
Ü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:
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
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
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
Ü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:
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
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
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
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,
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...
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öß
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:
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,
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
Grundlagen der Informatik 2
Grundlagen der Informatik 2 Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de Raum 2.202 Tel. 03943 / 659 338 1 Gliederung 1. Einführung
Ä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
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
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
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
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
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
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
HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.
HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm
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
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
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
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
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
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.
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
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
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........................
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
Aufbau einer Tabelle
Aufbau einer Tabelle : leitet Tabelle ein border="wert": legt Umrandung fest : beendet die Tabelle : definiert eine Zeile : definiert eine Zelle Beispiel: dies
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
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
Online-Publishing mit HTML und CSS für Einsteigerinnen
Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
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
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
CSS. Cascading Stylesheets
CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische
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
Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?
Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen
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,
HTML-Programmierung. 1. Aufbau einer Webseite. 2. Hintergrund für eine ganze Seite
HTML-Programmierung Inhalt Seite 1. Aufbau einer Webseite 1 2. Hintergrund für eine ganze Seite 1 3. Kleine Farbtafel 2 4. Hexadezimalzahlen 2 5. Überschriften 3 6. Linien 3 7. Textformatierung 4 8. Sonderzeichen
Hyper. Text. Markup. Language
Hyper Text Markup Language Dateiname und-endung Wir schreiben mit dem Editor eine HTML-Quelldatei, diese endet immer auf Punkt html, also beispielsweise: hello-world.html Wir verwenden in unseren Dateinamen
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
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
Web und Multimedia. HTML 4.x, Teil 2. Quelle: Hess HTML4
Web und Multimedia HTML 4.x, Teil 2 Quelle: Hess HTML4 1 Inhalte Einführung in HTML Textgestaltung - HTML - Cascading Style Sheets Screenlayout - HTML (Tabellen) - Frames - Cascading Style Sheets Hyperlinks
Digitale Medien. Übung
Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift
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
Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte
Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
CSS. Webseiten- Layout mit. Know-how ist blau. Der perfekte Einstieg in Cascading Style Sheets
Clemens Gull Know-how ist blau. Berücksichtigt CSS 3 Webseiten- CSS Layout mit > CSS anhand von 23 Beispielen verstehen und praktisch einsetzen > Anspruchsvolle und flexible Weblayouts planen und realisieren
-Wählen Sie die gewünschten Kriterien für die Selektion und klicken Sie anschließend auf OK um die Datensätze zu selektieren.
HowTo: Personalisierte Serienemails aus Selektion (ggf. mit Anhang) Versionen: CRM 5, CRM SIX I. Vorbereitung a) Erstellen einer Selektion -Grundlage für alle Serienbriefe oder Serienemails mit SuperOffice
CSS - Cascading Style Sheets (Level 3) Grundlagen. Marc Haunschild. 2. Ausgabe, Oktober 2014 CSS3
Marc Haunschild 2. Ausgabe, Oktober 2014 CSS - Cascading Style Sheets (Level 3) Grundlagen CSS3 5 CSS - Cascading Style Sheets (Level 3) - Grundlagen 5 Texte gestalten In diesem Kapitel erfahren Sie wie
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte
CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr
HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
Web-Publishing mit HTML
Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration , um diese Version von anderen Versionen zu unterscheiden.
Cascading Style Sheets II (CSS)
Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,
2. Briefing zur Übung IT-Systeme
2. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 06.11.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel
Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie
Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger
Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default
FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab
FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3
Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch
Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1
Crashkurs Webseitenerstellung mit HTML
Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,