jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP"

Transkript

1 jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER

2 KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute die beste Methode, Webseiten effektiv zu formatieren. Wie Sie Style-Sheets einsetzen, haben Sie bereits in Kapitel 1»HTML und CSS lernen«gelesen. Dieses Kapitel führt Sie in den Einsatz der wichtigsten CSS-Befehle ein. Sie lernen: Text zu formatieren eine Schriftart für eine ganze Seite festzulegen Absätze zu verschönern Rollover mit hover Elemente mit CSS zu platzieren 3.1 Formatieren mit CSS In diesem Abschnitt wollen wir Ihnen einige Beispiele zeigen, die in der Praxis am häufigsten benötigt werden. Sie lernen die wichtigsten Befehle kennen, um Text zu formatieren, lernen, wie Sie am schnellsten einer ganzen Seite eine Schriftart zuweisen, und formatieren Links mit CSS Schriftformatierung Schriftformatierungen kommen meist in Absätzen oder Überschriften zum Einsatz. Der folgende Absatz ändert die Schriftart und den Schriftschnitt eines 93

3 jetzt lerne ich 3 CSS anwenden Absatzes. Die beiden Stilbefehle werden einfach durch Strichpunkt getrennt aneinandergefügt: Listing 3.1: Stilbefehle für einen Absatz <p style="font-family:courier; font-style:italic;">normaler Text in Courier und kursiv</p> Abb. 3.1: Die Schrift erscheint in Courier und kursiv Wie schon erwähnt, bietet CSS eine Vielzahl von Befehlen. Gerade zur Schriftformatierung gibt es immense Möglichkeiten. Die folgende Tabelle enthält die wichtigsten Formatierungen im Überblick: Tabelle 3.1: Schriftformatierung mit CSS Befehl Beschreibung Werte font-family font-style font-variant font-size Legt eine Schriftfamilie oder Schriftart fest. Mehrere Schriften schreiben Sie mit Kommata getrennt hintereinander. Legt den Schriftstil fest. Erlaubt Ihnen, einen Text nur als Kleinbuchstaben darzustellen. Funktioniert nur mit dem Internet Explorer. Legt die Größe der Schrift fest. Eine Schrift (z.b. Arial) oder eine Schriftfamilie (serif, sans serif etc.) italic (kursiv) oblique (Verwendet den Schriftschnitt oblique; meist auch kursiv) smallcaps (Text in Kleinbuchstaben) Numerische Werte. Können in Punkt (pt), Prozent von der normalen Schriftgröße (%) oder mit absoluten Begriffen wie small, medium und large angegeben werden. font-weight Stärke der Schrift bold (fett) numerisch in einer Skala von 100 bis (400 = normal, 700 = fett) 94

4 Formatieren mit CSS jetzt lerne ich Befehl Beschreibung Werte text-align Ausrichtung des Texts center (zentriert) justify (Blocksatz; funktioniert nicht mit gängigen Browsern) left (links) right (rechts) text-decoration Besondere Textauszeichnungen underline (unterstrichen) blink (Text blinkt) line-through (Text durchgestrichen) overline (Linie über Text) Einige der Stilbefehle können auch im font-befehl zusammengefasst werden: p {font: italic bold 18pt Arial;} Wichtig ist dabei die Reihenfolge. Wenn diese nicht stimmt, wird überhaupt keiner der Werte umgesetzt. Die richtige Reihenfolge ist: font-style, fontweight, font-size, font-face Eine Schriftart für die ganze Seite definieren Sehr häufig wollen Sie für eine Seite eine Standard-Schriftart definieren. Wenn Sie dies an zentraler Stelle in einem Style-Sheet tun, sind Sie sehr flexibel und können die Einstellung jederzeit ändern. <html> <head> <title>eine Schriftart für das gesamte Dokument</title> <style type="text/css"> <!-- body, td {font-family: Arial,sans-serif;} --> </style> </head> <body> <h1>eine Überschrift</h1> <p>normaler Text</p> <table border="1"> <tr> <td>text in einer Tabelle</td> </tr> </table> Tabelle 3.1: Schriftformatierung mit CSS (Forts.) 1 Listing 3.2: Eine Schriftart für die gesamte Seite 95

5 jetzt lerne ich 3 CSS anwenden <ul> <li>text in einer Liste</li> </ul> </body> </html> Abb. 3.2: Eine Schriftart für die gesamte Seite Das obige Beispiel zeigt eindrucksvoll die Wirkungsweise eines Style-Sheets. Mit einer einfachen Code-Zeile im Kopfbereich der Seite definieren Sie die Schriftart für alle vorkommenden Texte. 1 In dieser Zeile definieren wir die Schriftart für das <body>-tag und für das <td>-tag. Die Schriftart für den <body>-tag gilt für jeglichen Text innerhalb dieses Tags, mit Ausnahme dem in Tabellen. Die Schriftart für Text in Tabellen legen wir fest, indem wir das <td>-tag genauso definieren wie das <body>- Tag. Wenn Sie im Körper der Seite für ein Tag eine andere Schriftart definieren, so überschreibt diese die Vorgabe des Style-Sheets Links Für Links bieten die Style-Sheets einige interessante Variationen. Vor allem gibt es für den normalen Link mit <a> schon drei vordefinierte Versionen, sogenannte Pseudo-Klassen: a:link steht für einen normalen Link. a:active steht für den Link, wenn der Nutzer darauf klickt. a:visited legt die Attribute für einen besuchten Link fest. Jeder dieser Versionen können Sie einzeln Farbe, Schriftart etc. zuweisen. 96

6 Formatieren mit CSS jetzt lerne ich Eine weitere Besonderheit ist ein nicht unterstrichener Link wie ihn beispielsweise die Website des SPIEGEL ( einsetzt. Abb. 3.3: Auf der Homepage des Spiegel werden rote, nicht unterstrichene Links verwendet Einen nicht unterstrichenen Link erreichen Sie mit dem Attribut textdecoration: none. Im Folgenden ein kleines Beispiel: <html> <head> <title>nicht unterstrichene Links</title> <style type="text/css"> <!-- a {text-decoration: none;} --> </style> </head> <body> <p><a href="index.htm">ein nicht unterstrichener Link</a></p> </body> </html> Mittlerweile sind nicht unterstrichene Links auf sehr vielen Webseiten zu finden. Prinzipiell spricht auch nichts dagegen, allerdings sollten Sie darauf achten, dass der Nutzer klar erkennen kann, dass es sich um einen Link handelt. Listing 3.3: Ein nicht unterstrichener Link 1 97

7 jetzt lerne ich 3 CSS anwenden 3.2 Ein einfacher Rollover-Effekt Sie haben beim Surfen sicherlich schon öfter Schaltflächen entdeckt, die beim Darüberfahren mit der Maus ihr Aussehen ändern. Diese Funktionalität nennt man Rollover-Effekt. Sie wird normalerweise erreicht, indem eine Grafik mit dem Event-Handler onmouseover per JavaScript mit einer anderen vertauscht wird. Bisher ließ sich ein solcher Rollover-Effekt nicht mit normalem Text realisieren. Mit Style-Sheets gibt es allerdings einen Trick, der zumindest im Internet Explorer funktioniert. Und zwar die Pseudo-Klasse A:hover. Wenn Sie für sie eine andere Farbe definieren, wird beim Rollover die Farbe gewechselt. Im Folgenden finden Sie ein kleines Code-Beispiel: Listing 3.4: Ein einfacher Rollover-Effekt 1 <html> <head> <title>ein Rollover</title> <style type="text/css"> <!-- a:hover {color: yellow;} a:link {text-decoration: none; color: blue;} a:active {text-decoration: underline; color: red;} a:visited {text-decoration: none; color: green;} --> </style> </head> <body> <p><a href="index.htm">ein nicht unterstrichener Link</a></p> </body> </html> In dem Beispiel haben wir für die Rollover-Farbe gelb festgelegt. Außerdem haben wir die drei anderen Pseudo-Klassen für Links eingesetzt, um dem Link eine Farbe und keine Unterstreichung zu geben. Verwenden Sie diesen Effekt ruhig auf Ihren Seiten. Er funktioniert zwar nur auf dem Internet Explorer, aber Nutzer des Netscape Navigators oder des Mozilla erleiden keine funktionalen Einbußen. 3.3 Absätze Absätze lassen sich mit CSS in verschiedenster Form gestalten. Wie Sie sie positionieren, lernen Sie in Abschnitt 3.5. Hier finden Sie die Möglichkeiten, Absätze zu formatieren. Zwei Pseudo-Klassen helfen, die erste Zeile bzw. den ersten Buchstaben eines Absatzes mit eigenen Stil-Befehlen zu versehen: 98

8 Absätze jetzt lerne ich p:first-line. Diese Pseudo-Klasse erlaubt Ihnen, einen Stil für die erste Zeile eines Absatzes festzulegen. p:first-letter bietet Ihnen die Möglichkeit, für den ersten Buchstaben eines Absatzes einen anderen Stil zu vergeben. Das folgende Beispiel zeigt first-letter im Einsatz: <html> <head> <title>absätze mit Pseudo-Klassen</title> <style type="text/css"> <!-- p:first-letter {font-size:30pt;color:red} --> </style> </head> <body> <p>absatz mit großem Anfangsbuchstaben.</p> </body> </html> Listing 3.5: Ein Absatz mit Pseudo-Klasse Abb. 3.4: Der große Anfangsbuchstabe zieht Aufmerksamkeit auf sich, funktioniert aber nicht in Netscape 4.x Das folgende Beispiel zeigt eine weitere Alternative zum Formatieren von Rahmen. Mit dem Stil-Befehl border legen Sie einen Rahmen fest. Zuerst geben Sie den Stil, dann die Dicke und zum Schluss die Farbe fest: <html> <head> <title>absatz mit Rahmen</title> <style type="text/css"> <!--.rahmen1 {border: double 20px blue} --> </style> </head> <body> <p class="rahmen1">absatz mit Rahmen</p> </body> </html> Listing 3.6: Ein Absatz erhält einen Rahmen 99

9 jetzt lerne ich 3 CSS anwenden Abb. 3.5: Der Absatz hat einen doppelten, blauen Rahmen Neben dem allgemeinen Befehl border gibt es noch einige weitere, um Stil, Dicke und Farbe einzeln festzulegen. Die folgende Tabelle zeigt sie. Tabelle 3.2: Rahmen um Absätze Attribut Beschreibung Werte border-color Rahmenfarbe Als hexadezimaler Wert, mit dem Farbnamen oder als RGB-Wert (absolut und prozentual) border-style Art des Rahmens. Vorsicht, die meisten Effekte funktionieren nur im Internet Explorer. Normalerweise sollte man die Effekte vermeiden, da sie sehr uneinheitlich dargestellt werden. none (kein Rahmen wird angezeigt) double (doppelt) groove (Rahmen mit Beleuchtungssimulation) inset (3-D-Effekt mit Farbeffekt innen) outset (3-D-Effekt mit Farbeffekt außen) ridge (3-D-Effekt) solid (Rahmen ist normal einfarbig) Außerdem gibt es die zwei Werte dashed (gestrichelt) und dotted (gepunktet), die von keinem der beiden gängigen Browser dargestellt werden. border-width Dicke des Rahmens Längenmaß wie z.b. Pixel (px), Zentimeter (cm) oder Inch (in) medium (mittel) thin (dünn) thick (dick) 3.4 Hintergründe Style-Sheets erlauben, genau wie HTML-Befehle, einen Hintergrund zu vergeben. Allerdings können sie noch einiges mehr. Beispielsweise lassen sich Hintergründe mit CSS auch für Absätze anlegen. Das zugehörige Style-Sheet- Attribut für Hintergründe heißt background und enthält die meisten anderen Style-Sheet-Attribute durch Leerzeichen getrennt. Die Reihenfolge ist nicht wichtig: body {background: blue url(textur.gif) fixed;} 100

10 Hintergründe jetzt lerne ich Mit dem obigen Beispiel legen Sie einen Hintergrund mit der Farbe Blau und dem Hintergrundbild TEXTUR.GIF fest. Das Hintergrundbild ist fixiert und scrollt nicht mit. Farben geben Sie entweder mit Farbname, hexadezimaler Notation oder als RGB-Farbe (rgb(rot, Grün, Blau)) an. Die Farbe ist in diesem Fall allerdings nicht sichtbar, da das Hintergrundbild auf dem gesamten Hintergrund wiederholt wird. Die RGB-Notation von Farben kann entweder mit den absoluten Farbwerten oder mit Prozentwerten der RGB-Farben erfolgen. 1 Abb. 3.6: Ein Hintergrund mit CSS Neben background können Sie auch einige speziellere CSS-Befehle verwenden. Sie finden sie in der folgenden Tabelle: Attribut Beschreibung Werte background-attachment Legt fest, ob das Hintergrundbild gescrollt werden kann. fixed (Hintergrundbild ist fixiert) scroll (Hintergrund scrollt mit; Standardeinstellung) background-color Hintergrundfarbe Farbe in hexadezimaler Notation, als Farbname oder mit dem RGB- Farbwert transparent (transparente Hintergrundfarbe) background-image Adresse des Hintergrundbildes url(adresse) (bei Adresse geben Sie einen relativen oder absoluten Link an) transparent (kein Hintergrundbild, Standardeinstellung) Tabell 3.3: Befehle für Hintergrundbilder 101

11 jetzt lerne ich 3 CSS anwenden Tabell 3.3: Befehle für Hintergrundbilder (Forts.) Attribut Beschreibung Werte background-position background-repeat Die Position des Hintergrundbildes im x/y-koordinatensystem. Nullpunkt des Koordinatensystems ist die Fensterecke links oben. Legt fest wie das Hintergrundbild wiederholt wird. Koordinaten in Pixel oder Prozent (z.b. background-position: ). top (oben) center (mittig) bottom (unten) left (links) right (rechts) repeat (horizontal und vertikal wiederholt; Standardeinstellung) repeat-x (horizontal wiederholt) repeat-y (vertikal wiederholt) no-repeat (Hintergrundbild wird nicht wiederholt) 3.5 Positionieren mit CSS Da eine Webseite normalerweise von links oben nach rechts unten verläuft, ist die Positionierung von Elementen nicht so einfach. Im Prinzip gibt es nur zwei Methoden: die Positionierung mit Tabellen und die Positionierung mit CSS. Über Tabellen haben Sie schon in Kapitel 2»HTML anwenden«das Wichtigste gelesen. Die CSS-Alternative lernen Sie hier kennen Abstände Mit dem Attribut margin legen Sie den Abstand für Elemente fest. Für das <body>-tag sieht das so aus: body {margin: 60px 80px;} 1 Der linke Wert gibt den Abstand oben und unten an, der rechte den Abstand links und rechts. Mögliche Werte sind Angaben in Pixel (px), Prozent (%) oder Inch (in). Wenn Sie auf auto schalten, wird der Abstand vom Browser festgelegt. 102

12 Positionieren mit CSS jetzt lerne ich Abb. 3.7: Abstand von oben und links Weitere Attribute regeln den Abstand in alle vier Richtungen einzeln: Attribut Beschreibung Werte margin-bottom Abstand von unten Längenmaß oder Prozentwert margin-left Abstand von links Längenmaß oder Prozentwert margin-right Abstandvon rechts Längenmaß oder Prozentwert margin-top Abstand von oben Längenmaß oder Prozentwert Tabelle 3.4: Die Abstände für alle vier Richtungen Positionieren Abstände alleine reichen allerdings noch nicht zum exakten Positionieren aus. Dafür legen Sie Koordinaten für das jeweilige Element fest. top gibt die Koordinate von oben, left die Koordinate von links an: <div style="position:absolute; top:150px; left:150px; width:150px;"> <p>ein positionierter Absatz</p> </div> position legt fest, wie die Positionierung erfolgt: absolute fixiert ein Element absolut im immer gleichen Abstand zum Fensterrand. Diese Art der Positionierung kommt normalerweise zum Einsatz, wenn Sie mit Style-Sheets positionieren. fixed platziert ein Element ebenfalls im festgelegten Abstand. Allerdings wird das Element nicht mitgescrollt, wenn Sie sich mit den Scroll-Balken bewegen. Diese Option wird leider von keinem gängigen Browser unterstützt. relative orientiert die Position des Elements immer an dem jeweiligen Vorgänger. Wenn dieser beispielsweise größer ist, als es die Position des Nachfolgers erlaubt, wird es direkt an den Vorgänger angeschlossen. static behält die normale Folge der einzelnen Elemente bei. 103

13 jetzt lerne ich 3 CSS anwenden Abb. 3.8: Ein absolut positionierter Absatz Ebenenreihenfolge Ein positioniertes Element liegt damit in einer Ebene. Was aber, wenn Sie mehrere Elemente platzieren und sich diese überlappen? Dann kommt entscheidet die Reihenfolge im HTML-Code. Das zuletzt kommende Element liegt am höchsten: <div style="position:absolute; top:150px; left:150px; width:150px; border: double blue 10px; background:white;"> <p>ein positionierter Absatz</p> </div> <div style="position:absolute; top:150px; left:150px; width:150px; background:green;"> <p>ein zweiter Absatz</p> </div> Abb. 3.9: Der zweite Absatz liegt über dem ersten 104

14 Fragen jetzt lerne ich Um diese Reihenfolge umzudrehen, können Sie den Stil-Befehl z-index einsetzen. Er weißt einem Element einen Index zu, der bei 0 (auf der untersten Ebene) beginnt. <div style="position:absolute; top:150px; left:150px; width:150px; z-index:2; border: double blue 10px; background:white;"> <p>ein positionierter Absatz</p> </div> <div style="position:absolute; top:150px; left:150px; width:150px; z-index:1; background:green;"> <p>ein zweiter Absatz</p> </div> Abb. 3.10: Nun liegt der erste über dem zweiten Absatz, so dass der zweite Absatz ist vollständig verdeckt ist. 3.6 Fragen 1. Worin unterscheiden sich die Einheiten px und pt? 2. Wieso sollten Sie manchmal besser einen Rollover-Effekt mit JavaScript realisieren? 3. Welche Möglichkeiten zur Farbnotation gibt es in CSS? 4. Binden Sie zwei Grafiken in eine HTML-Seite ein. Positionieren Sie die beiden so, dass sie einander leicht überlappen. 5. Was müssen Sie tun, damit die überlappenden Grafiken auch im Netscape Navigator 4.x richtig positioniert werden? 6. Ändern Sie die Ebenenreihenfolge der beiden Grafiken. 105

Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana'

Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana' Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,

Mehr

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

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

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

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

Mehr

4. Briefing zur Übung IT-Systeme

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

Mehr

4. Briefing zur Übung IT-Systeme

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

Mehr

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

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

Mehr

CSS Cascading Style Sheets

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,

Mehr

Farb-, Text- und Schriftgestaltung mit CSS3

Farb-, Text- und Schriftgestaltung mit CSS3 CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite

Mehr

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

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

Mehr

HTML & CSS. Beispiele aus der Praxis

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

Mehr

Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte

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

Mehr

CSS-Tutorial. Grundlegende CSS-Kenntnisse

CSS-Tutorial. Grundlegende CSS-Kenntnisse 2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich

Mehr

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

Mehr

CSS. Cascading Stylesheets

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

Mehr

Grundlagen-Beispiel CSS

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:

Mehr

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

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

Mehr

CSS. Cascading Style Sheets

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

Mehr

1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel

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

Mehr

Format- oder Stilvorlagen

Format- oder Stilvorlagen Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen

Mehr

Praktikum im Grundstudium

Praktikum im Grundstudium Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

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

Mehr

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

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

Mehr

ANWENDUNGSSOFTWARE CSS

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 ,

Mehr

Text Formatierung in Excel

Text Formatierung in Excel Text Formatierung in Excel Das Aussehen des Textes einer oder mehrerer Zellen kann in Excel über verschiedene Knöpfe beeinflusst werden. Dazu zuerst die betroffenen Zelle(n) anwählen und danach den entsprechenden

Mehr

Inhalt. Einleitung... 13

Inhalt. Einleitung... 13 Inhalt Einleitung... 13 1. Der Einstieg in CSS... 17 1.1 Die Grundlagen von (X)HTML... 18 Anatomie eines (X)HTML-Elements... 19 Der Unterschied zwischen XHTML und HTML... 19 1.2 Was ist CSS, und was kann

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Kennen, können, beherrschen lernen was gebraucht wird

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

Mehr

IT- und Medientechnik

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,

Mehr

Digitale Medien. Übung

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

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

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

Mehr

Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.

Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten. CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009 TEIL A: ALLGEMEINE EINFÜHRUNG IN

Mehr

Introduction to Technologies for Interaction Design. Stylesheets

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

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

Cascading Style Sheets

Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

Mehr

3 XML, HTML und XSL die Ausgabe

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

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -

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

Mehr

Erstellung von dynamischen Webseiten mit Cascading StyleSheets

Erstellung von dynamischen Webseiten mit Cascading StyleSheets Planerische Informationssysteme Erstellung von dynamischen Webseiten mit Cascading StyleSheets Rolf Sonderegger FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

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

Mehr

HTML Programmierung. Aufgaben

HTML Programmierung. Aufgaben HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite

Mehr

Übung: Bootstrap - Navbar

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

Mehr

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,

Mehr

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

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

Mehr

Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann

Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 11 Vorlesung 2 11.1 Style-Sheets.............................. 2 11.1.1 Wo werden Style-Sheets definiert?.............

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Eine Schnelleinführung in CSS

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:

Mehr

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

Mehr

Schiller-Gymnasium Hof 20.12.2004

Schiller-Gymnasium Hof 20.12.2004 Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape

Mehr

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.

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

Mehr

Kurze Bedienungsanleitung für den Kompozer

Kurze Bedienungsanleitung für den Kompozer Kurze Bedienungsanleitung für den Kompozer Dateioperationen Datei öffnen Datei > Öffnen oder S + o Datei speichern Datei > Speichern oder S + s Datei unter einem neuen Namen oder an einem anderen Ort speichern

Mehr

PowerPoint: Text. Text

PowerPoint: Text. Text PowerPoint: Anders als in einem verarbeitungsprogramm steht in PowerPoint der Cursor nicht automatisch links oben auf einem Blatt in der ersten Zeile und wartet auf eingabe. kann hier vielmehr frei über

Mehr

Das TYPOlight CSS-Framework

Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

Mehr

3 WEBSEITEN GESTALTEN

3 WEBSEITEN GESTALTEN Webseiten gestalten FrontPage effektiv 3 WEBSEITEN GESTALTEN 3.1 Textformatierung Um einen Text formatieren zu können, müssen Sie ihn zuvor markieren. Anschließend hilft Ihnen die Format-Symbolleiste dabei,

Mehr

1 Was sind Cascading Stylesheets?

1 Was sind Cascading Stylesheets? Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff»Cascading Stylesheets«verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet

Mehr

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.

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

Mehr

Cascading Style Sheets II (CSS)

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,

Mehr

Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?

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

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

http://www.therealgang.de/

http://www.therealgang.de/ http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:

Mehr

3. Briefing zur Übung IT-Systeme

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,

Mehr

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug.

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug. Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer Thema Grundlagen der Erstellung von Webseiten Maximalplan 1 Was man wissen sollten 2 Die erste Webseite mit HTML erstellen

Mehr

HTML: Text und Textstruktur mit CSS gestalten

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

Mehr

CSS Cascading Stylesheets

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

Mehr

CSS - Cascading Style Sheets

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

Mehr

4. Blöcke und Gebiete

4. Blöcke und Gebiete 4. Blöcke und Gebiete Inhalt 1. Einführung 2. Architektur 3. Vorlagen 4. Blöcke 5. Tabellen 6. Listen 7. Textformatierung 8. Grafik und Farbe 9. Buch-Erstellung Grundlagen Verfeinerung, Formatierung Formatierung

Mehr

Cascading Stylesheets (CSS)

Cascading Stylesheets (CSS) Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen

Mehr

Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008

Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008 Veranstaltung 10033013 Systementwicklung HTML und CSS Uwe H. Suhl und Chris Bizer SS 2008 HTML - Hypertext Markup Language HTML ist eine Auszeichnungssprache für Web-Dokumente Auszeichnungssprachen Auszeichnen

Mehr

16. Schriftart formatieren

16. Schriftart formatieren 16. Schriftart formatieren 16.1 Überblick Das Aussehen verbessern Bis jetzt haben Sie gesehen, dass das Dokument, welches Sie erstellt haben schlicht und simpel war. Sie können das Aussehen Ihres Dokuments

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung

Mehr

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13

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

Mehr

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation. Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile

Mehr

CSS - Cascading Stylesheets

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

Mehr

CSS zur Gestaltung von HTML-Seiten nutzen

CSS zur Gestaltung von HTML-Seiten nutzen CSS zur Gestaltung von HTML-Seiten nutzen Handbuch und Literatur Handbuch des RRZNs: CSS Cascading Style Sheet; Level 2 Charles Wyke-Smith: Stylin with CSS; Addison-Wesley Tommy Olsson & Paul O'Brien:

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

Seiten und Inhalte verlinken

Seiten und Inhalte verlinken Seiten und Inhalte verlinken 70 Seiten verlinken Erstellen Sie zwei HTML-Seiten und speichern Sie sie unter den Namen seite.html und seite.html. Fügen Sie in seite.html ein -tag ein, um auf Seite zu

Mehr

4 Aufzählungen und Listen erstellen

4 Aufzählungen und Listen erstellen 4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer

Mehr

Erzherzog Johann Jahr 2009

Erzherzog Johann Jahr 2009 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein

Mehr

Hinweise zum Übungsblatt Formatierung von Text:

Hinweise zum Übungsblatt Formatierung von Text: Hinweise zum Übungsblatt Formatierung von Text: Zu den Aufgaben 1 und 2: Als erstes markieren wir den Text den wir verändern wollen. Dazu benutzen wir die linke Maustaste. Wir positionieren den Mauszeiger

Mehr

Crashkurs Webseitenerstellung mit HTML

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,

Mehr

Einführungskurs HTML-CSS mit Buch

Einführungskurs HTML-CSS mit Buch Einführungskurs HTML-CSS mit Buch Von Stand: 01.11.2013 Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige

Mehr

Kennen, können, beherrschen lernen was gebraucht wird

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

Mehr

HTML und CSS. Eine kurze Einführung

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

Mehr

Jetzt wird auf die Zahl 2 geklickt und die Höhe der Zeile 2 eingestellt. Die Vorgehensweise ist wie

Jetzt wird auf die Zahl 2 geklickt und die Höhe der Zeile 2 eingestellt. Die Vorgehensweise ist wie Hergestellt nur für den privaten Gebrauch von Harry Wenzel. w Kopieren Vervielfältigen nur mit Genehmigung des Verfassers! apple Mit Excel einen Kalender für das Jahr 2013 erstellen. Vorab erst noch ein

Mehr

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

Mehr

Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011

Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011 Softwaretechnik Teil Webprogrammierung (HTML, PHP) SS2011 Studiengang: Semester: 3. Gruppe: Wirtschaftsinformatik A & B Datum: 29.06.2011 Dozent: LfbA Dipl.-Hdl. Andreas Heß Hilfsmittel: alle Unterlagen/Bücher

Mehr

Erscheinungsbild. Lauri Watts Übersetzung: Frank Schütte

Erscheinungsbild. Lauri Watts Übersetzung: Frank Schütte Lauri Watts Übersetzung: Frank Schütte 2 Inhaltsverzeichnis 1 Erscheinungsbild 4 1.1 Allgemein.......................................... 4 1.2 Schriftarten.......................................... 4 1.3

Mehr

Formatierung eines Text Ads in CSS

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.

Mehr

Cascading Style Sheets Sabine Grötz

Cascading Style Sheets Sabine Grötz CSS Cascading Style Sheets Sabine Grötz 1 Was ist CSS? CSS ist eine Formatvorlagensprache, welche die Möglichkeit bietet, Stilelemente wie Farben und Schriftarten, sowie die Aufteilung von Text und Bildern

Mehr

Internetseiten selbst erstellt

Internetseiten selbst erstellt Internetseiten selbst erstellt Vorüberlegungen: Übersichtsplan aller geplanten Seiten zeichnen und bereits logische Dateinamen überlegen. Inhalt der Seite Willkommen/Was gibt es zu sehen und was will ich

Mehr

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

Mehr

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

Mehr

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut

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

Mehr

Styling für Webseiten

Styling für Webseiten Seite 1 Dies ist die deutsche Übersetzung des Tutorials zu CSS "Adding a touch of style" vom 8. April 2002 von Dave Raggett. Dave Raggett arbeitet für das World Wide Web Consortium (W3C) und ist einer

Mehr