3 XML, HTML und XSL die Ausgabe
|
|
|
- Hella Eberhardt
- vor 7 Jahren
- Abrufe
Transkript
1 3 XML, HTML und XSL die Ausgabe XML und VBA lernen ISBN Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige im Internet Explorer ist zur reinen Informationsvermittlung okay, allerdings wenig brauchbar, da die Benutzer von Browsern anderes gewöhnt sind. Die Daten sollen auf vernünftige, das heißt ansehnliche Weise veröffentlicht werden. Und genau hier greift HTML. Eine einfache Möglichkeit, XML-Dokumente anzuzeigen, sind Style Sheets 3.1 Style Sheets So wie Dokumente in Textverarbeitungsprogrammen nicht hart, sondern mit Formatvorlagen formatiert werden sollten, stellen viele Browser die Möglichkeit zur Verfügung, mit CSS (Cascading Style Sheets) zu arbeiten. Diese Technik wurde vom World Wide Web Consortium 1996 entwickelt und im Netscape 4.0 und Internet Explorer 4.0 vollständig implementiert. Der dahinter liegende Grundgedanke ist die Trennung von Information und Gestaltung. CSS ist lediglich für das Aussehen eines Dokumentes zuständig; in ihm sind keinerlei Informationen über die Struktur des Dokuments verzeichnet. Verzichtet man auf CSS, kann ein aufgeblähter und unübersichtlicher Code entstehen. Mit CSS können kürzere Ladezeiten erreicht werden. Und schließlich ist die Pflege der Formate leichter, wenn CSS verwendet wird. Ein CSS-Dokument ist eine Datei, in der die Stile für andere HTML- Seiten festgelegt werden. Sie wird als Textdatei mit der Endung *.css abgespeichert und könnte beispielsweise folgende Gestalt haben: Style Sheets 91
2 <HTML> <HEAD> <TITLE>Verwendete Stile</TITLE> <STYLE> H1 font-size: 14pt; color: #FF0000; margin-top: 0; margin-bottom: 6pt P font-size: 12pt; line-height: 120%; margin-top: 0; margin-bottom: 6pt TABLE font-size: 12pt TBODY font-size: 12pt SPAN font-size: 12pt; list-style-type: disc UL font-size: 12pt; list-style-type: disc </STYLE> </HEAD> <BODY> </BODY> </HTML> Wird diese Stilvorlage von einem anderen Dokument verwendet, so wird in diese der Befehl <LINK REL="stylesheet" HREF="RenesFormate01.css" TYPE="text/css"> eingefügt. Dieser Befehl wird im Kopfteil (HEAD) untergebracht. Wie das obige Beispiel verdeutlicht, besteht ein CSS aus zwei Teilen: einem Selektor, beispielsweise H1, und der Deklaration, die in geschweiften Klammern geschrieben wird. Die Deklaration wiederum besteht aus zwei Teilen: den Eigenschaften, wie zum Beispiel Größe und Farbe, und dem Wert (Tag), beispielsweise 14 pt und Rot. Solche Deklarationen können vererbt werden (deshalb der Name cascading ). Wird beispielsweise für das <BODY>-Tag die Farbe per CSS bestimmt, hat der <LI>-Tag automatisch die gleiche Farbe, wenn diese dort nicht definiert ist. Selbstverständlich könnten nun direkt im Quellcode Befehle eingegeben werden, die vom vorgegebenen Design abweichen: <H1 style="letter-spacing:30;" >Überschrift</h1> Die folgende Tabelle liefert die wichtigsten CSS-Befehle: 92 XML, HTML und XSL die Ausgabe
3 Befehl Bedeutung weitere mögliche Angaben Schrift font-family Schriftart Arial, Times New Roman etc. font-size Schriftgröße numerischer Wert in pt (Punkt), color Schriftfarbe red, green, white usw. oder HTML Farbangabe background-color Hintergrundfarbe font-variant Schriftvariante normal, small-caps font-weight Schriftgewicht normal, bold, bolder, lighter font-style Schriftstil normal, oblique, italic float Position des umfließenden Textes left, right oder none, wenn Text ein Element umfließen soll Textgestaltung text-align Textausrichtung left, right, center, justify (Blocksatz) line-height Zeilenabstand (Durchschuss) numerischer Wert in pt (Punkt), text-decoration Textgestaltung underline, overline, linethrough, blink word-spacing Wortabstand numerischer Wert in pt (Punkt), letter-spacing Zeichenabstand numerischer Wert in pt (Punkt), text-indent Texteinrückung numerischer Wert in pt (Punkt), text-transform Textart capitalize, uppercase, lowercase, none vertical-align vertikale Textausrichtung baseline, sub, super, top, texttop, middle, bottom oder textbottom Seitenränder margin-left margin-right margin-bottom margin-top absoluter Abstand zum linken Seitenrand absoluter Abstand zum rechten Seitenrand absoluter Abstand zum unteren Seitenrand absoluter Abstand zum oberen Seitenrand numerischer Wert in pt (Punkt), numerischer Wert in pt (Punkt), numerischer Wert in pt(punkt) numerischer Wert in pt(punkt) Links A:link Link fast alle CSS-Befehle anwendbar Tabelle 3.1: Die wichtigsten CSS-Befehle Style Sheets 93
4 Befehl Bedeutung weitere mögliche Angaben A:visited Besuchter Link fast alle CSS-Befehle anwendbar A:active Angeklickter Link fast alle CSS-Befehle anwendbar A:hover Link beim Überfahren mit Maus fast alle CSS-Befehle anwendbar Bilder background Hintergrundfarbe red, green, white usw. oder HTML-Farbangabe background-image Hintergrundbild none, URL background-repeat Kachel repeat, repeat-x, repeat-y, norepeat Ränder border-top-width Dicke der Rahmenlinie thin, medium, thick oder numerischer Wert border-bottomwidth Dicke der Rahmenlinie thin, medium, thick oder numerischer Wert border-left-width Dicke der Rahmenlinie thin, medium, thick oder numerischer Wert border-right-width Dicke der Rahmenlinie thin, medium, thick oder numerischer Wert border-style Rahmentyp none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color Rahmenfarbe Farbname oder Hex. padding-top Tabellenabstand oben Prozent oder numerischer Wert. padding-bottom Tabellenabstand unten Prozent oder numerischer Wert. padding-right Tabellenabstand rechts Prozent oder numerischer Wert. padding-left Tabellenabstand links Prozent oder numerischer Wert. width Rahmenbreite Auto, Prozent, numerischer Wert height Rahmenhöhe Auto, Prozent, numerischer Wert Tabelle 3.1: Die wichtigsten CSS-Befehle (Forts.) Und sehr viel mehr gibt es zu XML auch nicht zu sagen. Die XML-Datei sieht folgendermaßen aus: <?xml version="1.0" encoding="iso "?> <?xml-stylesheet href="renesformate02.css" type="text/css"?> <!DOCTYPE Artikel [ <!ELEMENT Artikel (Buch*)> <!ELEMENT Buch (Nummer, Titel, Gruppe, Preis?)> <!ELEMENT Nummer (#PCDATA)> <!ELEMENT Titel (#PCDATA)> <!ELEMENT Gruppe (#PCDATA)> ]> <Artikel> 94 XML, HTML und XSL die Ausgabe
5 <Buch> <Nummer>12039</Nummer> <Titel>Wie man mit einem Lachs verreist</titel> <Gruppe>Unterhaltung</Gruppe> </Buch> <Buch> <Nummer>20048</Nummer> <Titel>Baudolino</Titel> <Gruppe>Unterhaltung</Gruppe> </Buch> </Artikel> Über den Tag <?xml-stylesheet href="renesformate02.css" type="text/css"?> wird das Stylesheet RenesFormate02.css eingebunden. Diese Zeile wird auch Verarbeitungsanweisung ( Processing Instruction ) genannt. Der Speicherordner ist der gleiche wie derjenige, in dem sich die XML-Datei befindet. Er kann absolut oder relativ sein (wie in diesem Fall). Mit dem type ist die Art des Stylesheets gemeint "text/css" entspricht CSS. Während in HTML ein internes Stylesheet möglich ist (vergleichbar mit internen DTD bei XML-Dokumenten), so muss bei XML das Stylesheet außerhalb liegen. Die CSS-Datei RenesFormate02.css sieht dann folgendermaßen aus: Nummer font-size: 40pt; color: FF0000; margin-top: 0; margin-bottom: 6pt Titel font-size: 14pt; color:blue; Gruppe font-size: 12pt; list-style-type: disc Style Sheets 95
6 Preis font-size: 12pt; list-style-type: disc Abbildung 3.1: An das XML-Dokument wird eine css-datei gebunden. Damit kann die Ausgabe gestaltet werden. Im Unterschied zur CSS-Datei, die in HTML verwendet wird, müssen in HTML die Stilklassen von HTML verwendet werden. In XML werden eigene Stilklassen benutzt: die Namen der XML-Elemente. Die Formatierungen sind die gleichen wie in HTML, wie sie in obiger Tabelle beschrieben worden sind. Will man die einzelnen Elemente untereinander stellen und nicht als Fließtext hintereinander laufen lassen, so muss das Attribut hinzugefügt werden. Die css-datei sieht dann wie folgt aus: Nummer font-size: 40pt; color: FF0000; 96 XML, HTML und XSL die Ausgabe
7 margin-top: 0; margin-bottom: 6pt Titel font-size: 14pt; color:blue; Gruppe font-size: 12pt; list-style-type: disc Preis font-size: 12pt; list-style-type: disc Es können auch mehrere Selektoren gruppiert werden. Dazu werden sie durch ein Komma getrennt, hintereinander aufgelistet: Nummer font-size: 40pt; color: FF0000; margin-top: 0; margin-bottom: 6pt Titel, Gruppe font-size: 14pt; color:blue; Preis Style Sheets 97
8 font-size: 12pt; list-style-type: disc Abbildung 3.2: Das gleiche Dokument anders gestaltet Farben In den letzten Beispielen wurde sowohl die Farbe red als auch FF0000 verwendet. Es stellt sich die Frage, welche Farben zur Verfügung stehen und wie sie ausgedrückt werden. Alle Farben, die im Internet dargestellt werden, setzen sich aus den drei Grundfarben Rot, Grün und Blau zusammen. Dieses additive Farbmodell wird überall bei Ausgabequellen mit Licht verwendet: Bildschirm, Beamer, LCD-Display,... Dieses Modell wird RGB-Farbmodell genannt: red, green und blue. Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert, erhält man die reine Farbe. So ist Rot dann 255 rot, 0 grün, 0 blau. Weiß ist 255, 255, 255 und Schwarz das Gegenteil 0, 0, 0. Eine Farbe, hier Rot, wird in der Regel wie folgt angegeben: color="#ff0000" 98 XML, HTML und XSL die Ausgabe
9 Eigentlich müsste doch eine neunstellige Zahl dastehen. Allerdings werden die Werte hexadezimal angegeben. Jedoch unterstützt jedes bessere HTML-Tool die Umwandlung. In den meisten HTML-Editoren können Sie direkt aus den Farben auswählen und bekommen dann die Hexadezimalzahlen. Der Aufbau der Farbnummer ist im Hexadezimalsystem immer wie folgt: # Die ersten beiden Ziffern stehen für den Rot-Anteil, die nächsten für den Grün-Anteil und die hinteren beiden für den Blau-Anteil. Farben können auch über ihre englischen Namen angegeben werden. Achtung: Obwohl Browser eine große Anzahl von vordefinierten Farbnamen unterstützen, können in einer css-datei lediglich 16 Farben verwendet werden: Farbname Bedeutung Farbname Bedeutung Dezimal Hexadezimal A B C D E F FF Aqua Blaugrün Navy Marineblau Black Schwarz Olive Olivgrün Blue Blau Purple Violett Fuchsia Fuchsin Red Rot Gray Grau Silver Silber Green Grün Teal Braun Lime Zitronengelb White Weiß Maroon Kastanienbraun Yellow Gelb Tabelle 3.2: Die vom CSS-Standard unterstützten Farben Die nächste Abbildung zeigt einen HTML-Editor, bei welchem lediglich eine Farbe angeklickt werden muss. Der Editor berechnet den zugrunde liegenden Farbwert und fügt ihn in das HTML-Dokument ein. Die folgende Abbildung zeigt den HTML-Editor Phase 5, der kostenlos von der Seite heruntergeladen werden darf. Style Sheets 99
10 Abbildung 3.3: Viele HTML-Editoren helfen bei der Umwandlung der Farbe in den hexadezimalen Code (hier: rechts außen) Klassen Sollen nicht alle Elemente einer Liste gleich gestaltet werden, so können sie mit Hilfe des Attributs CLASS formatiert werden. Von der oben verwendeten css-datei werden die Elemente Titel und Gruppe um zwei Klassen ( Rot und Schwarz ) erweitert: Nummer font-size: 40pt; color: FF0000; margin-top: 0; margin-bottom: 6pt Titel, Gruppe font-size: 14pt;.Blau color:blue;.schwarz color:black; 100 XML, HTML und XSL die Ausgabe
11 In das Tag werden nun das Attribut CLASS und seine Werte ( Blau oder Schwarz ) eingefügt: <Artikel> <Buch> <Nummer>12039</Nummer> <Titel CLASS="Blau">Wie man mit einem Lachs verreist</titel> <Gruppe CLASS="Blau">Unterhaltung</Gruppe> </Buch> <Buch> <Nummer>20048</Nummer> <Titel CLASS="Schwarz">Baudolino</Titel> <Gruppe CLASS="Schwarz">Unterhaltung</Gruppe> </Buch> </Artikel> Wenn Sie mit einer DTD arbeiten, so beachten Sie, dass Sie diese ebenfalls erweitern müssen: <?xml version="1.0" encoding="iso "?> <?xml-stylesheet href="renesformate04.css" type="text/css"?> <!DOCTYPE Artikel [ <!ELEMENT Artikel (Buch)*> <!ELEMENT Buch (Nummer, Titel, Gruppe, Preis)> <!ELEMENT Nummer (#PCDATA)> <!ELEMENT Titel (#PCDATA)> <!ATTLIST Titel CLASS CDATA #IMPLIED> <!ELEMENT Gruppe (#PCDATA)> <!ATTLIST Gruppe CLASS CDATA #IMPLIED> ]> Die Regeln zum Erstellen einer Klasse sind offensichtlich: In der css- Datei wird vor den Namen ein Punkt gestellt. Sie gehört zu der Klasse, die ihr direkt vorangestellt ist. Das Attribut CLASS kann nun in den entsprechenden Elementen verwendet werden, muss allerdings in der DTD deklariert werden. Style Sheets 101
12 Abbildung 3.4: Das Dokument wird mit Klassen gestaltet Bilder Befinden sich im XML-Dokument Bilder, das heißt existiert dort ein Tag <IMG>, so muss dieser mit dem Attribut versehen werden, welches die Quelle des Bildes angibt: <Buch> <Nummer>123</Nummer> <HTML:IMG SRC="Bildband_Wolff.gif"></HTML:IMG> <Titel>Wolff</Titel> <Gruppe>Autobiografie</Gruppe> </Buch> <Buch> <Nummer>124</Nummer> <HTML:IMG SRC="Bodycheck.gif"></HTML:IMG> <Titel>Bodychek</Titel> <Gruppe>Ratgeber</Gruppe> </Buch> Der Namensraum wird selbstverständlich im Wurzelelement deklariert: <Artikel xmlns:html=" In den Processing-Instructions wird erneut auf eine css-datei verwiesen: <?xml-stylesheet href="renesformate05.css" type="text/css"?> 102 XML, HTML und XSL die Ausgabe
13 Dort wird deklariert: Nummer font-size: 40pt; color: FF0000; margin-top: 0; margin-bottom: 6pt Titel, Gruppe font-size: 14pt; position: relative; top: -55 Die Veränderung der Position war nötig, damit der Text ordentlich neben den Bildern zu stehen kommt. Abbildung 3.5: Ein XML-Dokument mit Bildern Style Sheets 103
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
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...
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
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
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
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
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-,
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 ,
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
CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -
// = 3) version = "n3"; if (browsername == "Netscape" && browserver >= 4) version = "n4"; if (browsername == "Microsoft Internet Explorer" && browserver >= 3.01 && browsermac!= -1) version = "ie3m"; if
CSS Cascading 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,
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
HTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
CSS - 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
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
Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:
1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel
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:
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:
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
17. CSS - Cascading Style Sheets Kapitel 17: CSS
17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung
CSS - Cascading Style Sheets
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,
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
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
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
CSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011
Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten
Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort](/thumbs/92/108574680.jpg "[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort")
[Guide] CSS (+ CSS 3!) Vorwort CSS in HTML einbinden HTML mit CSS ansprechen Farben Jetzt geht es los: Normales Stylen Boxen (DIVs) mit dem Boxmodel Fliessende Boxen Links formatieren & Pseudoklassen/Elemente
Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei
CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
CSS 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
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
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
1 Ein erster Überblick 3
xiii I Grundlagen 1 Ein erster Überblick 3 1.1 CSS im Zusammenhang........................................3 1.2 Der eigentliche Zweck von CSS.................................4 1.3 Warum die meisten Tabellen
Digitale Medien 4. STYLESHEETS, CSS
Digitale Medien 4. STYLESHEETS, CSS Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie
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
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
Auszeichnungssprachen
Auszeichnungssprachen HTML Was ist HTML? HTML - HyperText Markup Landguage (Dt. Hypertext Auszeichnungssprache). HTML ist die Sprache, mit der WWW-Seiten definiert werden und die die Struktur, den Inhalt
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt
CSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
Ü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:
1. Einführung 2. DTD 3. XML Schema 4. XPath 5. XSLT 6. XSL-FO 7. XQuery 8. Web Services 9. XML und Datenbanken
XSL-FO 1. Einführung 2. DTD 3. XML Schema 4. XPath 5. XSLT 6. XSL-FO 7. XQuery 8. Web Services 9. XML und Datenbanken Inhalt des Moduls: Grundlagen Dokumentaufbau Blöcke Textstruktur Grundlagen XSL-FO
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
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
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
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
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,
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
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,
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
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,
Ü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:
Installationsbeschreibung des Homepagekalenders
Installationsbeschreibung des Homepagekalenders Bitte beachten Sie: Um den Homepagekalender (im Folgenden HPK) als kostenlosen Service installieren zu können, müssen Sie registrierter Anbieter im Umweltkalenders
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
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
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
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.
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
<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
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
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,
Kurzeinführung in XML. Was ist XML? Well-formed u. gültiges XML Erste Anwendung in XML Externe DTD Attribute und Entities Datenausgabe mit XSL
Kurzeinführung in XML Was ist XML? Well-formed u. gültiges XML Erste Anwendung in XML Externe DTD Attribute und Entities Datenausgabe mit XSL Was ist XML? XML steht für Extensible Markup Language XML ist
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
Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.
CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen
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
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
CSS Einführung & CSS Frameworks
CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen
HTML 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
DML Befehl: UPDATE II
HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS PL Speyer Daniel Jonietz 2011 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. Was ist XHTML? Textbasierte Auszeichnungssprache
Hyper. Text. Markup. Language
Hyper Text Markup Language Dateiname und-endung Wir schreiben mit dem Editor eine HTML-Quelldatei, diese endet immer auf Punkt html, also beispielsweise: hello-world.html Wir verwenden in unseren Dateinamen
Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2
Duale Hochschule Baden-W ürttemberg Villingen-Schwenningen Fakultät für W IRTSCHAFT Studiengang Wirtschaftsinformatik Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2 Jahrgang: WWI 2009,
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
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
Navigationsmenü im Stil von Registern
Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben
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
index.html schwerpunkt HTML und Informationssysteme 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
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
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
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
Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
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
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........................
Auf einen Blick. Vorwort Einführung in CSS Grundlegende Konzepte von CSS Die Zukunft von CSS Browser-Kompatibilität 97
Auf einen Blick Vorwort 13 1 Einführung in CSS 17 2 Grundlegende Konzepte von CSS 41 3 Die Zukunft von CSS 81 4 Browser-Kompatibilität 97 5 CSS in der Praxis 133 6 Beispiele 271 7 Tools für CSS 355 8 Die
SASS und Compass. Struktur für eure Stylesheets
SASS und Compass Struktur für eure Stylesheets Guten Tag Thomas Moseler Frontend-Developer www.rufzeichen-online.de Warum? .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler
Farben sind im Webdesign wichtig z.b. für die Schriftfarbe oder den Hintergrund.
Layout: Farben Farben sind im Webdesign wichtig z.b. für die Schriftfarbe oder den Hintergrund. Farben festlegen: Schriftfarbe: color:red Hintergrund: background-color: #ff0000 Die Farbe kann entweder
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
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