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.

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

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

Transkript

1 17. CSS - Cascading Style Sheets 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 Die Beispiele sind dem Tutorial: entnommen. 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets 17-4 Was kann CSS? (1) CSS steht für Cascading Style Sheets. Es ist ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z.b. zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittenere Positionierung und vieles anderes benutzen. Zum Verständnis von CSS sind Grundkenntnisse von HTML nötig. Was kann CSS? (2) Mit CSS kann Inhalt und Layout einer HTML-Seite voneinander getrennt werden. CSS bietet mehr Möglichkeiten und ist zudem viel genauer und ausgereifter als die Formate von HTML. CSS wird von allen neueren Browsern unterstützt.

2 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets 17-6 Werkzeuge für CSS Vorteile von CSS Zum Erstellen von Style Sheets sollte nur ein einfacher Texteditor, der keine Formatinformationen mit speichert, verwendet werden (z. B. Notepad oder Wordpad - Speicherung als text - in Windows). Es gibt auch spezielle CSS-Editoren (z.b. Topstyle) Zum Testen benutzt man einen möglichst aktuellen Browser. Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus präzisere Kontrolle über das Layout verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.) eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets 17-8 Wo wird der CSS-Code angegeben? (1) Syntax von CSS Selector {Eigenschaft : Wert;...} Selector: Welchem HTML-Tag wird diese Eigenschaft zugeordnet (z. B."body") Eigenschaft: Die Eigenschaft kann z. B. die Hintergrundfarbe sein ("background-color") Wert: Der Wert der Eigenschaft background-color kann z. B. rot sein ("#FF0000") 3Möglichkeiten: 1. In-line mit dem Attribut style: Beispiel: <html> <head> <title>example</title> </head> <body style="background-color: #FF0000;"> <p>das ist eine rote Seite.</p> </body> </html>

3 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (2) 2. In-document (im Header) mit dem Tag <style>: Beispiel: <html> <head> <title>example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>das ist eine rote Seite. </p> </body> </html> Wo wird der CSS-Code angegeben? (3) 3. Verweis auf ein externes Style-Sheet: Dieser Verweis muss im Header des HTML-Dokumentes eingetragen werden Beispiel: <html> <head> <title>example</title> <link rel="stylesheet" type="text/css" href="css/name.css" /> </head> <body> CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (4) noch Verweis auf ein externes Style-Sheet: Das Style-Sheet Format(e) befindet sich in einer externen Datei mit Namen name.css Diese Datei im Unterverzeichnis css und hat den folgenden Inhalt (Beispiel): body { background-color: #FF0000; } Diese Form hat den Vorteil, dass das gleiche Style- Sheet für mehrere HTML-Dateien verwendet werden kann. 17. CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (5) Alle Formatierungsangaben werden durch den Namen bestimmten Gruppierungstags zugewiesen. P {font-style: italic; font-weight: bold; font-size: 15px; font-family: arial, sans-serif; color:maroon; text-align:center;} Diese Eigenschaften werden den Blöcken, die in <P>...</P> eingeschlossen sind, zugewiesen. mit * können Eigenschaften allen zugewiesen werden.

4 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Einführung CSS Inhalt 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung Farben und Hintergründe - Vordergrundfarbe Die Eigenschaft color beschreibt die Vordergrundfarbe (Textfarbe). alle Überschriften sollen rot dargestellt werden. Falls sie mit dem <h1>-tag markiert werden, kann man folgenden Code anwenden: h1 { color: #ff0000; } Farben können als Hexadezimalwerte, wie im obigen Beispiel (#ff0000), mit dem jeweiligen englischen Farbnamen (red) oder als RGB-Werte (rgb(255,0,0)) angegeben werden. 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Hintergrundfarbe Die Eigenschaft background-color beschreibt die Hintergrundfarbe. Die allgemeine Hintergrundfarbe sollte im Element <body> festgelegt werden. Zum Hinterlegen einer Schrift kann diese Eigenschaft aber auch anderen Elementen zugewiesen werden. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Liste der hexadezimalen Farbwerte: Hintergrundbild (1) Die Eigenschaft background-image beschreibt das Hintergrundbild. Sie muss im Element <body> zusammen mit dem Ort des Bildes angegeben werden. body { background-color: #FFCC66; background-image: url("bildname.gif");} Das Bild wiederholt sich standardmäßig sowohl horizontal als auch vertikal.

5 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Hintergrundbild (2) Mit der Eigenschaft background-repeat kann die Wiederholung des Bildes beeinflußt werden. Wert background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat Beschreibung Wdh.: horizontal Wdh.: vertikal Wdh.: horizontal und vertikal keine Wdh. Weitere Eigenschaften des Hintergrundbildes: Eigenschaft Wert Wirkung background-attachment fixed oder scroll Bild scrollt bzw.bleibt fest background-position z.b.bottom right Bild wird rechts unten pos. Hintergrundbild (3) body { background-color: #FFCC66; background-image: url( bild.jpg ); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; } Wenn die Reihenfolge eingehalten wird: background-color background-image background-repeat background-attachment background-position geht es noch einfacher: background: #FFCC66 url( bild.jpg ) no-repeat fixed top left; 17. CSS - Cascading Style Sheets Zeichensätze (Fonts)(1) CSS - Eigenschaften: font-style: "normal" (kein Stil), "italic" (kursiv) oder "oblique" (schräg) font-variant: "normal" oder "small-caps"(großbuchst. font-weight: "normal" oder "bold" font-size: Schriftgröße (Pixel oder Prozent) font-family: da man nicht weiss, welche Fonts auf dem Zielcomputer implementiert sind, werden möglichst mehrere angegeben, oder eine "font-family". Ein Font davon wird dann ausgewählt. 17. CSS - Cascading Style Sheets Zeichensätze (Fonts)(2) Alle Font-Eigenschaften werden in den Elementen zur Markierung von Texten angegeben z. B.: p, t1...t6, td, Beispiel: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } oder in Kurzform unter Beachtung der obigen Reihefolge: p { font: italic bold 30px arial, sans-serif; }

6 17. CSS - Cascading Style Sheets Absatzformatierungen Die Absatzformatierungen werden an den gleichen Stellen angegeben wie die Fonts und zwar: text-indent: Einrückung am Anfang eines Absatzes (in Pixel) text-align: Ausrichtung "left", "right", "center", "justify" (Blocksatz) text-decoration: "underline", "overline", "line-through" letter-spacing: Buchst.abst in Pixel (z.b. 3px) 17. CSS - Cascading Style Sheets Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung text-transform: "uppercase" Großbuchst., "capitalize" Anfbuchst. groß 17. CSS - Cascading Style Sheets Pseudoklassen Mit Pseudoklassen werden unterschiedliche Zustände (Ereignisse) bei Links beschrieben. Man verwendet das <a>-tag. Zustände: a: link: nicht besuchter Link a: visited: besuchter Link a: active: aktiver Link a: hover: vom Mauszeiger berührter Link Diesen Pseudoklassen können nun unterschiedliche Eigenschaften, z.b. Farben zugewiesen werden. 17. CSS - Cascading Style Sheets Links - Beispiele a:link { color: blue; } a:visited { color: red; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; } Effekt von hover - Die Schrift wird orange und kursiv beim Überfahren mit der Maus. Andere Effekte kann man erhalten, wenn man z.b. in a:hover letter-spacing:10px oder text-transform:uppercase benutzt. mit text-decoration:none wird die Unterstreichung von Links unterdrückt.

7 17. CSS - Cascading Style Sheets class Mit class wird es möglich, ausgewählten Elementen spezielle Eigenschaften zuzuweisen. Damit müssen nun nicht alle Links gleich aussehen. Im folgenden Beispiel sehen die Links für Weißwein gelb, die für Rotwein rot und die restlichen blau aus. Wie man im folgenden Beispiel sieht, kann man Eigenschaften von Elementen einer bestimmten Klasse mit Hilfe von.classname im Stylesheet des Webdokumentes festlegen. 17. CSS - Cascading Style Sheets Beispiel für class <p> Trauben für Weißwein</p> <ul> <li><a href="ri.htm" class="ww">riesling</a></li> <li><a href="ch.htm" class="ww">chardonnay</a></li> </ul> <p> Trauben für Rotwein</p> <ul> <li><a href="me.htm" class="rw">merlot</a></li> <li><a href="pn.htm" class="rw">pinot Noir</a></li> </ul> a { color: blue; } a.ww { color: #FFBB00; } a.rw { color: #800000; } 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets id Mit id kann einzelnen Elementen ein spezielles Format gegeben werden. Das besondere an dem Attribut id ist, dass es kein weiteres Element im selben Dokument geben kann, welches dieselbe id trägt. Jede id muss einzigartig sein. Im folgenden Beispiel werden den Kapitel-Überschriften eines Dokumentes unterschiedliche id s gegeben. Die Überschrift des Kapitels 1.1 soll rot sein. Beispiel für id <h1 id="k1">kapitel 1</h1>... <h2 id="k1-1">kapitel 1.1</h2>... <h1 id="k2">kapitel 2</h1>... <h2 id="k2-1">kapitel 2.1</h2>... CSS dazu: #k1-1 { color: red; }

8 17. CSS - Cascading Style Sheets Gruppierung mit span und div span und div dienen zur Gruppiereung und damit zur Strukturierung eines Dokumentes und sind von zentraler Bedeutung für die Anwendung von css. span allein ist neutral und bewirkt nichts, doch mit CSS zusammen können visuelle Besonderheiten erzeugt werden. Es wird innerhalb eines Blockes verwendet. div dagegen gruppiert Blöcke. Beim div-beispiel werden die Ergebnisse rot bzw. schwarz hinterlegt. Die Schriftfarbe ist weiß. 17. CSS - Cascading Style Sheets Beispiel für span In Goethes Ausspruch sollen die Tugenden rot geschrieben werden: <p><span class="tugend">edel</span> sei der Mensch, <span class="tugend">hilfreich</span> und <span class="tugend">gut</span>.</p> Das zugehörige CSS: span.tugend { color:red; } Das Ergebnis: Edel sei der Mensch, hilfreich und gut. 17. CSS - Cascading Style Sheets Beispiel für div Deutsche Bundeskanzler: <div id="spd"><ul> <li>gerhard Schröder</li> <li>helmut Schmidt</li> </ul></div> <div id="cducsu"><ul> <li>angela Merkel</li> <li>helmut Kohl</li> </ul> </div> CSS: #spd{ background red; color white;} #cducsu{ background black; color white;} 17. CSS - Cascading Style Sheets Verschachtelungen 1. Nachfahren-Selektor: 2 Selektoren Trennung - blank Beispiel: div i {color:red} in div geschachtelte i- Elemente werden immer rot angezeigt. 2. Kind-Selektor: 2 Selektoren Trennung > Beispiel: div > p {color:blue} in div geschachtelte p-elemente werden blau angezeigt, wenn die p- Elemente genau eine Ebene unter div stehen. 3. Nachbar-Selektor: 2 Selektoren Trennung + Beispiel: div + p {margin-top:100px;} Wenn div und p unmittelbar aufeinander folgen, dann 100px Abstand.

9 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Inhalt Box-Modell (1) 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung Das Box-Modell in CSS beschreibt die Boxen (oder Kästen), die für HTML-Elemente generiert werden. Einstellungen: Außenabstand - margin Rand - border Innenabstand - padding im Inhalt - height und with 17. CSS - Cascading Style Sheets Box-Modell (2) 17. CSS - Cascading Style Sheets Randabstände (1) Die Randeinstellungen gelten für die gesamte Seite: Beispiel: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } oder für einen Block: p { margin: 5px 50px 5px 50px;} ausschlaggebend ist das Gruppierungselement analog kann padding für die Innenabstände verwendet werden.

10 17. CSS - Cascading Style Sheets Randabstände(2) Die Elemente zum Einstellen der Boxen werden in den Gruppierungselementen z. B. div, span, p, h1...h6, ul, ol angegeben. <div class="beisp">dies ist ein Block, der gelb unterlegt ist und vorgegebene Randabstände hat. </div> CSS: div.beisp { background: yellow; padding: 20px 20px 20px 80px; } 17. CSS - Cascading Style Sheets Umrandung Die Boxen können umrandet werden. Die Umrandung kann farbig border-color in unterschiedlicher Dicke border-with z.b.thin, medium, thick oder Pixel in unterschiedlicher Strichart border-style z.b. solid, dotted, double,... ausgeführt werden. Dabei kan jeder Rand einzeln formatiert werden z.b.border-top-with 17. CSS - Cascading Style Sheets Umfließender Text Mit der Eigenschaft float kann ein Element (z.b. ein Bild) von einem anderen (z.b. Text) umflossen werden. <div id="pic"> <img src="bild.jpg" alt="bild"> </div> Dieser Text fließt um das Bild herum</p> CSS: #pic { float:left; width: 100px;} Dieser Text steht unter dem Bild <p id="unten">unterer Text</p> CSS: #unten {clear:left} 17. CSS - Cascading Style Sheets absolute Positionierung Es können auch Boxen fest positioniert werden. Das Browserfenster wird dabei als koordinatensystem verwendet. Die Positionierung wird in Pixel angegeben. <div id="box1"> Box 1 </div> CSS: #box1{position:absolute;top:50px;left:50px;} Wichtig ist die Angabe position: absolute; Die Abstände werden von oben top und rechts oder links right/left bzw. von unten bottom und rechts oder links in Pixeln angegeben.

11 17. CSS - Cascading Style Sheets CSS - Cascading Style Sheets Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung Validierung Zweck: Erfolgreich validierte Seiten genügen dem W3C-Standard. Sie werden deshalb mit hoher Wahrscheinlichkeit in unterschiedlichen Browsern gleich dargestellt. HTML- und CSS-Validator: CSS-Validator:

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

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

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

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

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

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

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

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

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

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

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

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

Ü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

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

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

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

Ü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

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

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

Mehr

CSS - Cascading Style Sheets

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,

Mehr

Tutorial zum erstellen einer Webseite

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,

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

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

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

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

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

Fließlayout. »World of Fish«

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

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

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

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

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

Ü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

XSL-FO XSL Formatting Objects

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

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

Abgabetermin: , 23:59 Uhr

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

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

Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker

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

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

Web-basierte Anwendungssysteme XHTML- CSS

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

Mehr

Tabellenfreies Layout in HTML

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

Mehr

ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?

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

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

HTML. Hypertext Markup Language

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

Mehr

Introduction to Technologies. Stylesheets mit CSS

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

Mehr

Wert. { color: blue; }

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

Mehr

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

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

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

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

Umsetzen einer skalierbaren horizontalen Navigation:

Umsetzen einer skalierbaren horizontalen Navigation: Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer

Mehr

HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016

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

Mehr

Clubsite4Fun Administration:

Clubsite4Fun Administration: Clubsite4Fun Administration: Farben und Schriftarten ändern Unser Fansite-Projekt macht Fortschritte: die Site präsentiert sich bereits mit neuer Kopfzeilengraphik und einem eigenen Logo. Irgendwie passt

Mehr

HTML Cascading Style Sheets

HTML Cascading Style Sheets Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

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,

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

Nachtrag: Nested Tree im Beispiel. 7. Vorlesung. Usability - Test. Usability - Typische Elemente. Was ist zu formatieren?

Nachtrag: Nested Tree im Beispiel. 7. Vorlesung. Usability - Test. Usability - Typische Elemente. Was ist zu formatieren? Nachtrag: Nested Tree im Beispiel 7. Vorlesung Usability, CSS EWA HTML JavaScript PHP Einführung Aufgaben einfach schwer Links CSS Syntax Beispiele Id Titel links rechts 100 EWA 1 101 HTML 2 3 102 JavaScript

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

Die Funktionalität von Suchportalen

Die Funktionalität von Suchportalen Studiengang Sprache und Kommunikation 1/6 Die Funktionalität von Suchportalen Anweisungen zur Erstellung eines eigenen Suchportals Ziel dieser Übung ist es, ein eigenes kleines Suchportal zu einem spezifischen

Mehr

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

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

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

Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.

Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente. HTML 8 Vorbereitung Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben!

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

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

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

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

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

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

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

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

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

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

Navigation für Internetpräsenzen

Navigation für Internetpräsenzen Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben

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

Unterschied zwischen HTML & XHTML?

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

Mehr

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

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:

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

XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß

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

Mehr

Kapitel 10: Cascading Style Sheets

Kapitel 10: Cascading Style Sheets 10. Einführung in CSS Cascading Style Sheets 10-1 Kapitel 10: Cascading Style Sheets Literatur: Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN 3-540-64700-7, 641 Seiten. Eric Ladd,

Mehr

Ändern der Schriftgröße für den Monitorexport

Ä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

Mehr

4.8 Das Box Modell, Block- vs Inline-Elemente

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

Mehr

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt

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

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

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

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

Mehr

Fotogalerie. Schwierigkeitsgrad: schwer

Fotogalerie. Schwierigkeitsgrad: schwer Fotogalerie 1 Vor uns haben wir ein wunderbares Layout, das eine Fotogalerie darstellt und das wir nicht mehr lediglich als Screenshot ansehen wollen. Anhand der anstehenden Aufgaben, die uns über horizontale

Mehr

XSLT 2015/2016 S Seite 1 h_da W

XSLT 2015/2016 S Seite 1 h_da W XSLT Seite 1 XSL / XSLT xsltransformation ::= stylesheet stylesheet ::= template* template pattern ::= pattern, content_constructor ::= patternpath Content_constructor ::= literal_result_element instruction

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

Praktikum 8: CSS-Layout

Praktikum 8: CSS-Layout WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die

Mehr

Inhalt: 1)Das Box-Modell

Inhalt: 1)Das Box-Modell Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box

Mehr

Wir studieren HTML-Tags

Wir studieren HTML-Tags Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des

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

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

HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt

HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer

Mehr

XML-Praxis XSL-FO. Jörn Clausen

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

Mehr

Digitale Medien. Übung

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

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

Webdesign mit (X)HTML und CSS

Webdesign mit (X)HTML und CSS Webdesign mit (X)HTML und CSS Das Praxisbuch zum Einsteigen, Auffrischen und Vertiefen Deutsche Ausgabe der 3. englischen Auflage Jennifer Niederst Robbins Übersetzung von Kathrin Lichtenberg O'REILLY*

Mehr

CSS EINFÜHRUNG. Cascading StyleSheets. November Seite 1

CSS EINFÜHRUNG. Cascading StyleSheets. November Seite 1 CSS EINFÜHRUNG Cascading StyleSheets Seite 1 Themen Einführung Syntax Stylesheets einbinden Alternative Stylesheets Texteigenschaften Positionieren Farben Hintergrund Pseudoklassen Selektoren (Vererbung)

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