Ausgabeformatierung 08
|
|
|
- Franziska Krüger
- vor 6 Jahren
- Abrufe
Transkript
1 Ausgabeformatierung 08 G. Görz, J. Schneeberger Lehrstuhl Informatik 8 (KI) goerz@informatik.uni-erlangen.de! josef.schneeberger@fh-deggendorf.de! 1 Ausgabeformatierung mit HTML, CSS, XSL:FO
2 Übersicht HTML CSS XSL:FO 3 HTML Das, was im Browser dargestellt wird. Zusätzlich: CSS Formatierung JavaScript (AJAX) Animationen Aktive Elemente Menüs etc. Flash ActiveX PDF... 4
3 Versionen HTML (3. November 1992) 2.0 (November 1995) Die erste stabile HTML-Version. Expansion des WWW. 3.2 (14. Januar 1997) Weitere Expansion des WWW. Design fängt an eine große Rolle zu spielen. HTML wird mißbraucht. 4.0/4.01 (Dez. 1997/1999) Bereinigung von HTML. Browserkrieg Versionswirrwar und Browserinkompatibilitäten. XHTML 1.0/1.1 (2000/2001) Versuch einer Bereinigung Browser können (fast) alles HTML 5 in der Entwicklung: neue Tags 5 [ Aufbau einer Seite <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>beschreibung der Seite</title> </head> <body> </body> </html> Version Kopf Titel Metadaten (Stichwörter, Zusammenfassung, Zeichensatz, DC) Rumpf 6
4 Absätze Überschriften: h1, h2,..., h6 Absätze: <p>... </p> Zeilenumbruch: <br> bzw. </br> Listen (nummeriert / unnummeriert) <ol> <li>...</li> </ol> <ul> <li>...</li> </ul> Zitate und Adressen vorformatierter Text physische vs. logische Auszeichnung: <b>...</b> / <strong>...</strong> 7 Links Anker (absolut/relativ/intern) Zielmarken Typisierte Verweise 8 <a href=" Tagesschau</a> <a name="ziel"> <div style="width:100%; background-color:#eee; padding:5px"> <a href="../../../index.htm" rev="contents">inhalt</a> <a href="../tastatur.htm" rel="next">weiter</a> <a href="../dateitypen.htm" rel="prev">zurück</a> <a href="../index.htm" rev="chapter">zum Kapitelanfang</a> </div>
5 Blocklevel- und Inline-Elemente Allgemeine Tags für Blocklevel-Elemente Allgemeines Inline-Element 9 <div align="right"> <h1>alles rechts am Rand</h1> <ul> <li>alles rechts am Rand</li> <li>...</li> </ul> </div> <h1 style="font-size:500%"> <span style="color:blue">a</span> <span style="color:red">b</span> <span style="color:green">c</span> </h1> Tabellen 10 <table border="1"> <tr> <th>berlin</th> <th>hamburg</th> <th>münchen</th> </tr> <tr> <td>miljöh</td> <td>kiez</td> <td>bierdampf</td> </tr> <tr> <td>buletten</td> <td>frikadellen</td> <td>fleischpflanzerl</td> </tr> </table>
6 Bilder und Objekte Bilder <img src="verzeichnis/datei.gif" alt="grafik"> <img src="verzeichnis/unterverz/datei.gif" alt="grafik"> <img src="../datei.gif" alt="grafik"> <img src="../../../datei.gif" alt="grafik"> <img src="../woanders/datei.gif" alt="grafik"> Verweissensitive Grafiken Objekte (Applets, SVG, Flash, etc.) <object data="uhr.svg" type="image/svg+xml" width="200" height="200"> <param name="src" value="uhr.svg"> Ihr Browser kann das Objekt leider nicht anzeigen! </object> 11 Formulare <form action="input_text.htm"> <p>vorname:<br> <input name="vorname" type="text" size="30" maxlength="30"> </p> <p>zuname:<br> <input name="zuname" type="text" size="30" maxlength="40"> </p> </form> 12
7 Programmierstil Nicht für bestimmten Browser schreiben Nicht für bestimmte Bildschirmauflösung schreiben HTML-Elemente nicht zweckentfremden Bestimmte Attribute sind inzwischen zwingend vorgeschrieben. HTML-Validierung Ehrliche und aussagekräftige Verweistexte verwenden Grafiken richtig einsetzen HTML barrierefrei einsetzen. 13 Links Selfhtml (jetzt ohne Stefan Münz) 14
8 CSS 15 XSL-FO extensible Stylesheet Language Formatting Objects
9 XSL-FO Offizielle Bezeichnung: XSL XML-Sprache zur Formatierung von XML-Daten, z.b. für Druckausgabe Automatisierung von Seitengestaltung und Umbruch (Satz und Umbruch) Verarbeitung von großen Dokumenten (z.b. juristische Publikationen, technische Dokumentationen) konsistentes Layout, Single-Source Publishing Minderung der Satzkosten (Kosten für Seitengestaltung) Ausgabe ist eine Folge von Seiten in fester Höhe und Breite 17 Problembereiche Kopfbereich Fußbereich Ränder Mehrspaltigkeit Platzierung von Inhalten außerhalb des Textflusses Zeilenumbruch (Silbentrennung) Spalten-/Seitenumbruch 18
10 XSL-FO : Eigenschaften portrait and landscape pages multiple page sizes multiple writing directions headers/footers generated page numbering graphics tables, including running heads, row and column spans floating areas widow/orphan control Hyphenation and justification recto-verso pages multiple columns of text on a page Unicode generated ToCs re-sorting items for output 19 Verarbeitungsschritte! Verarbeitung von XML zu XSL-FO mittels XSLT! Eine XSL-FO Engine interpretiert die FO-Instanz und übersetzt sie in gedruckte Seiten (z.b. PDF, RTF, etc) 20
11 21 FO-Engines XSL Formatter, Antenna House ( Kommerzielles Produkt (v5.1) Compliant with XSL 1.1 Implementierung der aktuellen XSL-FO- Spezifikation zu großen Teilen GUI und Command Line Interface Kann auch in Server-Umgebung verwendet werden Produziert PDF/X und PDF/A aus XML-Input Mehrsprachigkeit bei der Silbentrennung 22 FO-Engines FOP, Apache Foundation ( )! Freie, Open-Source Applikation (v. 0.95)! Geschrieben in Java! Nur unvollständige Implementierung der aktuellen XSL- FO Spezifikation! Keine GUI; kann in andere Systeme eingebunden werden! Produziert PDF, PS, PCL, AFP, XML, Druck, AWT, PNG
12 Maßeinheiten in FO cm: Zentimeter mm: Millimeter in: Inch (1 in = 2.54 cm) pt: (DTP-Punkte (1 pt = 1/72 in = mm) geringfügig abweichend von Didot-Punkten (=0.376 mm) pc: Picas (1 pc = 12 pt) px: Pixel em: von der Schriftart und -größe abhängige Einheit; in der Praxis entspricht 1 em der Höhe des Buchstabens m 23 Seitenlayout fo:root - Wurzelelement jeder FO-Datei Kinderelemente von fo:root ein <fo:layout-master-set>: enthält seitenspezifische Informationen (Größe einer Seite, Ränder, Kopf- und Fußbereich) optionale <fo:declarations>: z.b. Farbprofile (wird selten eingesetzt, da durch aktuelle Engines nicht unterstützt) ein oder mehrere <fo:page-sequence>: legt die Reihenfolge fest, in der die die im <fo:layout-master-set> definierten Seiten erscheinen sollen 24
13 Druckbereich festlegen (Layout-master-set) <fo:simple-page-master page-width="15cm page-height="15cm margin="1cm master-name= example"> <fo:region-before extent= 20mm /> <fo:region-after extent= 20mm /> <fo:region-body margin= 1cm padding-top= 3cm padding-bottom= 3cm /> </fo:simple-page-master> extent: Gibt die Ausdehnung des Bereiches an (für Kopf- und Fussbereich also die Höhe) Der body-bereich benötigt kein extent (ist der Bereich, der übrig bleibt) Weitere Attribute für Rahmen, Ränder, Füllungen und Hintergründe, Schreibrichtung, Schriftausrichtung 25 Layout-master-set Margin <fo:region-before extent="20mm /> margin padding <fo:simple-page-master page-width="15cm" page-height="15cm margin="1cm" master-name= example"> regionstart <fo:region-body margin= 1cm padding-top= 3cm padding-bottom= 3cm /> regionend padding fo:region-after extent="20mm 26
14 27 Beispiel <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name= TitlePage" page-width="210mm" page-height="297mm"> <fo:region-body margin="15mm" margin-top="30mm" border="1pt black solid" padding="3mm" /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="titlepage"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="arial" font-size="36pt" color="red"> Dies ist eine Titelseite! </fo:block> </fo:flow> </fo:page-sequence> </fo:root> 28
15 Blöcke Zentrales Konzept in XSL-FO Bindet Elemente wie Tabellen, Bilder, Listen, Absätze usw. in rechteckige Anzeigebereiche ein Blöcke können ineinander verschachtelt werden Vielzahl von Attributen: z.b. zur Font-Bestimmung: font-family, font-size, font-weight, Block-Rahmen: border-style, border-width Zeilenvorschub: space-before, space-after margin, background-color, text-indent 29 Beispiele <fo:block font-size="14pt" font-family="verdana" font-color="red" space-before="5mm" space-after="5mm"> Blöcke </fo:block> <fo:block text-indent="5mm" font-family="verdana" font-size="12pt" font-weight= bold" space-before="5mm" space-after="5mm"> Blöcke sind ein zentrales Konzept in XSL-FO </fo:block> 30
16 Typografie Textausrichtung (text-align, text-align-last) center, left, right, justify (Blocksatz) Einrückungen (start-indent, end-indent, textindent, last-line-indent) Font (font-family, font-size, font-style, font-weight) Unterstreichung, Überstreichung, Durchstreichung (text-decoration) underline, overline, line-through Silbentrennung (hyphenation), Wortabstände Groß- und Kleinschreibung, Hoch-Tiefstellung Zeilen-, Spalten, Seitenumbruch orphans (Schusterjungen), widows (Hurenkinder) 31 Rahmen, Ränder, Abstände Abstände zwischen Bereichs-(Block-)grenzen margin, margin-top, margin-left, margin-right, margin-bottom Innenabstände: Abstände von den Blockgrenzen nach innen padding... Rahmen: umfassen Blöcke werden außerhalb der Block-Fläche hinzugefügt border-before, border-after, border-start, borderend, color, style, width Vorschübe space-after, space-before 32
17 Flow-Konzept <fo:flow> fließen die Inhalte und werden ggf. zu mehreren Seiten umgebrochen, wenn der Umfang das Aufnahmevermögen einer Seite übersteigt. Der Inhalt von <fo:flow> bestimmt den Zeilen- und Seitenumbruch und damit die Anzahl der generierten Seiten Das Element <fo:static-content> bestimmt die statischen Inhalte von Seitenbereichen, außerhalb des Fließtextes (z.b. für Kopfzeilen etc.) Ist der static-content zu groß für eine Seite, wird die Formatierung abgebrochen oder eine Warnung angegeben Eine Page-Sequence muss immer static-content oder flow-bereiche enthalten 33 Beispiel <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="simplepage" page-width="210mm" page-height="297mm" margin="20mm"> <fo:region-body margin="15mm" margin-top="30mm" border="1pt black solid" padding="3mm" /> <fo:region-before extent="20mm" background-color="yellow" /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="simplepage"> <fo:static-content flow-name="xsl-region-before" font="italic 10pt Times"> <fo:block>static text in de fo:region-before </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <!-- snip --> </fo:flow> </fo:page-sequence> </fo:root> 34
18 Ergebnis 35 Seiten-Sequenzen <fo:layout-master-set> <fo:simple-page-master master-name="titlepage" ( def. )> <fo:region-body /> </fo:simple-page-master> <fo:simple-page-master master-name="simplepage" ( def. )> <fo:region-body /> <fo:region-before /> </fo:simple-page-master> <fo:page-sequence master-reference="titlepage"/> <fo:page-sequence master-reference="simplepage"/> </fo:layout-master-set> 36
19 Listen <fo:list-block> (Liste) <fo:list-item> (Listenelement) <fo:liste-item-label> (Listenelement-Etikett) <fo:liste-item-body> (Listenelement-Inhalt) List-block List-item List-item-body List-item-label 37 Beispiel: Liste 38 <fo:list-block><fo:list-item> <fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>volvo</fo:block> </fo:list-item-body> </fo:list-item><fo:list-item> <fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>saab</fo:block> </fo:list-item-body> </fo:list-item></fo:list-block> * Volvo * Saab
20 Tabellen Tag <fo:table> Beschreibung! oberstes Element f"r Tabelle! <fo:table-and-caption> Tabelle mit #berschri$ und Legende! <fo:table-caption> <fo:table-header> <fo:table-body> <fo:table-footer> <fo:table-column> <fo:table-row> <fo:table-cell> #berschri$% kommt nach &fo:table'and' caption(! Kopfbereich! Tabelleninhalt! Fussbereich! Vorweg'Spez)kation von Spalten! Tabellenzeile! Tabellenzelle! 39 Beispiel: Tabelle <fo:table-and-caption> <fo:table> <fo:table-column column-width="25mm"/> <fo:table-column column-width="25mm"/> <fo:table-header> <fo:table-cell><fo:block font-weight="bold">car</fo:block></fo:table <fo:table-cell><fo:block font-weight="bold">price</fo:block></fo:tab </fo:table-header> <fo:table-body> <fo:table-row> <fo:table-cell><fo:block>volvo</fo:block></fo:table-cell> <fo:table-cell><fo:block>$50000</fo:block></fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell><fo:block>saab</fo:block></fo:table-cell> <fo:table-cell><fo:block>$48000</fo:block></fo:table-cell> </fo:table-row> </fo:table-body> </fo:table> 40 </fo:table-and-caption>
21 Weitere Anweisungen <fo:page-number> : Stelle aktuelle Seitenzahl dar (z.b. in static-content) Überschriften: Werden über XSLT als eigene Blöcke generiert Bei der XSL-Produktion erleichtert die Verwendung von xsl:attribute-sets die Definition von häufig vorkommenden Block- Formatierungen Weitere wichtige Konzepte: Fußnoten Grafiken Hyperlinks automatische Indexerstellung 41
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
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
Seminar Dokumentenverarbeitung Sommersemester 2002
Formatierung mit XSL-FO Seminar Dokumentenverarbeitung Sommersemester 2002 Jörn Clausen Formatierung mit XSL-FO p.1/13 Technikalitäten Dateien in /vol/lehre/dokumentenverarbeitung/ Environment anpassen:.
XSL-Formatting Objects.
XSL-FO XSL-Formatting Objects http://www.w3.org/tr/xsl11/ Das Umfeld XSL-FO... bildet zusammen mit XSLT und XPath die XSL (extensible Stylesheet Language)... ist eine XML Applikation... definiert das visuelle
XML-Praxis XSL-FO. Jörn Clausen
XML-Praxis XSL-FO Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht XSL Formatting Objects Seitendefinitionen Blöcke und Inlines XML-Praxis XSL-FO 2/27 Eigenschaften von XSL-FO zweiter Teil von XSL
XML-Praxis XSL-FO. Jörn Clausen.
XML-Praxis XSL-FO Jörn Clausen joern@techfak.uni-bielefeld.de 1 Übersicht XSL Formatting Objects Seitendefinitionen Blöcke und Inlines 2 Eigenschaften von XSL-FO zweiter Teil von XSL (neben XSLT) XML-Sprache
Druckvorlage mit XSL FO
Druckvorlagen mit XSL FO Schulung ist als Spezialisierung des Themas Transformation konzipiert Schulung ist als Einführung in das Thema Formatting Objects konzipiert Übungsmaterialien für die Schulung
Einführung in XSL-FO
Einführung in XSL-FO Druckvorlagen erzeugen Martina Semlak Zentrum für Informationsmodellierung, Universität Graz martina.semlak@uni-graz.at Überblick XSL-FO Grundlagen Seitenvorlagen und Seitenaufbau
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
CSS. Cascading Style Sheets
CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
XML-Praxis. XSL-FO Übungen. Jörn Clausen
XML-Praxis XSL-FO Übungen Jörn Clausen joern@techfak.uni-bielefeld.de XSL-FO Engines übersetze minimal.fo in PDF-Datei XEP von RenderX: $ xep minimal.fo FOP von Apache: $ fop minimal.fo minimal.pdf mit
Formatieren mit DSSSL und XSL-FO
Formatieren mit DSSSL und XSL-FO Referat von Nils im Seminar Dokumentenverarbeitung von Jörn Clausen SS 2001 1 Inhalt 1. Was ist Formatierung? 2. Die Grenzen von CSS. 3. DSSSL: Document Style Semantics
APEX und Apache FOP Freie PDF-Erstellung mit APEX 3.0.1
APEX und Apache FOP Freie PDF-Erstellung mit APEX 3.0.1 Dr. Gudrun Pabst Basel Baden Bern Lausanne Zürich Düsseldorf Frankfurt/M. Freiburg i. Br. Hamburg München Stuttgart Agenda Kürzel: XML, XSL, XSLT,
Leseprobe. Daniel Koch. XML für Webentwickler. Ein praktischer Einstieg ISBN: Weitere Informationen oder Bestellungen unter
Leseprobe Daniel Koch XML für Webentwickler Ein praktischer Einstieg ISBN: 978-3-446-42256-8 Weitere Informationen oder Bestellungen unter http://www.hanser.de/978-3-446-42256-8 sowie im Buchhandel. Carl
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
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
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...
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 ,
XSL-FO Formatting/Flow Objects
Aufbauend auf XLST und CSS XSL-FO Formatting/Flow Objects Julian Raschke 1 Motivation Wir haben strukturierte XML-Daten Wir sollen diese ansehnlich drucken! Und: Consider that a single
Web-basierte Anwendungen. Eine Vertiefungsveranstaltung mit Schwerpunkt auf XML-Technologien
Fachhochschule Wiesbaden - Fachbereich Informatik 7363 - Web-basierte Anwendungen Eine Vertiefungsveranstaltung mit Schwerpunkt auf XML-Technologien 31.05.2005 H. Werntges, FB Informatik, FH Wiesbaden
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
XML. XML-Verarbeitung mittels XSL
XML-Einführung XML u n i XML-Verarbeitung mittels XSL Dr. Eckhardt Schön TU Ilmenau Institut für Medientechnik, FG Audiovisuelle Technik Inhalt XML-Wiederholung / Beispiel XSLT-Verarbeitungskonzept Szenarien
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
Erstellen von PDF-Dokumenten für Business-Anwendungen mit XSL-FO
Erstellen von PDF-Dokumenten für Business-Anwendungen mit XSL-FO Ich über mich Rudi Gast (rgast@ghs-software.de) seit 2000 angestellt bei der GHS Tätigkeiten: Projektleitung Softwareentwicklung F&E ca.
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,
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
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
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
PrintCSS in der Praxis Ein neuer Standard kommt
PrintCSS in der Praxis Ein neuer Standard kommt Frankfurter Buchmesse 2015 15. Oktober 2015 von: Christin Götz 1 Modernes Publizieren Ein Content Mehrere Layouts Mehrere Medien HTML - InDesign, + CSS 3B2,
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
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
Ü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:
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
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
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
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
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:
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
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
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
XSL-FO. Dienstag, 16. Mai Manuel Montero Pineda data2type GmbH
XSL-FO Dienstag, 16. Mai 2017 Zu meiner Person: Manuel Montero Pineda > Dipl.-Wirtschaftsinformatiker (FH), M.A. > XML-Entwickler und Berater im Bereich XML Schema, OOXML, XSLT, XSL-FO, u.v.m. > Veröffentlichungen
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
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
CSS-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
Erste Schritte mit XHTML
Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
XSL-FO verstehen und anwenden
Manfred Krüger XSL-FO verstehen und anwenden XML-Verarbeitung für PDF und Druck 2., überarbeitete und veränderte Ausgabe Vorwort zur zweiten Ausgabe ix I. Grundlagen 1 XSL Was? Wozu? Warum? 3 1.1 XSL Was
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
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,
XSL Formatting Objects (XSL-FO)
XSL Formatting Objects (XSL-FO) XML XSLFO Sie wissen, was Formatting Objects sind und weshalb man sie verwendet Sie wissen, was CSS sind und kennen den Unterschied zu XSL-FO Sie können selber einfache
Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML
Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,
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,
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
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
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
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
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
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
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:
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-,
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
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
HTML-Grundlagen (X)HTML:
HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein
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
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
3. 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,
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
Informatik und Programmiersprachen
Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
Anhang B - Nutzung von XSQL
Anhang B - Nutzung von XSQL Bei der Erstellung von XSQL-Seiten, werden immer zwei Dateien benötigt. Als erstes die XSQL-Datei und dann das dazugehörige Stylesheet (welches wiederum zur Formatierung der
Vergleich automatisierbarer XML-Satzsysteme
Vergleich automatisierbarer XML-Satzsysteme Martin Kraetke, GmbH Hochschule für Technik, Wirtschaft und Kultur Leipzig Frankfurter Buchmesse, 12. Oktober 2011 Drei Thesen zum Anfang 1. Die Wahl des Satzsystems
Einführung in XSL-FO
Einführung in XSL-FO Druckvorlagen erzeugen Martina Semlak martina.semlak@uni-graz.at Überblick XSL-FO Grundlagen Seitenvorlagen und Seitenaufbau definieren Inhalte einfügen Seitenfolgenvorlagen XSLT +
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
Praktikum zur Veranstaltung XML-Technologie: Übung 09
Fachhochschule Wiesbaden - Fachbereich Informatik Praktikum zur Veranstaltung XML-Technologie: Übung 09 XSLT Eine HTML-Tabelle 06.01.2005 (c) 2004 H. Werntges, FB Informatik, FH Wiesbaden 1 Organisatorisches
Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02
Einfach mehr können. HTML/CSS Einstieg für Anspruchsvolle Bonusmaterial Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02 Inhaltsverzeichnis
Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an.
Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an. 1 QuickInfo, Tooltips Autor: pe/sl Version: 1.0, 2017-04-05 DESITE MD: 2.0.11 2 1 QuickInfo 3 1 QuickInfo Die QuickInfo ermöglicht einen schnellen
PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite
PDF Einstellungen zur PDF-Generierung. PDF-Generierung aktivieren Aktiviert die PDF-Generierung für diesen Mandanten. Der Link - über welchen auf der Website das PDF erzeugt wird - muss manuell ins Template
Web-Publishing mit HTML
Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration , um diese Version von anderen Versionen zu unterscheiden.
Ä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
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
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte
HTML / CSS Übersicht der Schulungsinhalte Grundlagen Einleitung HTML-Historie Java Script, XML, PHP, Flash Webstandards und Browser Werkzeuge und Tools UltraEdit und Dreamweaver TopStyle, Web Developer
Automatisierte Dokumentenproduktion mit Apache FOP
Automatisierte Dokumentenproduktion mit Apache FOP Jeremias Märki OpenExpo 2008, Bern, 13. März 2008 Über mich Selbstständiger Software-Entwickler & Berater aus Luzern Hauptfokus
1. Seminar Multimediale Werkzeuge Sommersemester 2011
1. Seminar Multimediale Werkzeuge Sommersemester 2011 Marco Niehaus marco.niehaus@tu-ilmenau.de 12.04.2011 Page 1 Organisatorisches Terminplanung? Übungs- & Hausaufgaben Gehen zu 30 % in die Endnote ein
XSL und XSLT. Inhalt. Mathias Heilig email: mathias.heilig@gmx.de. XSL Übersicht. Formatierungsprozess. Sprachbeschreibung. Vorführung Resümee
Mathias Heilig email: mathias.heilig@gmx.de Inhalt XSL Übersicht XSL im XML- Umfeld XSLT XPath XSL- FO Was können wir mit XSLT heute machen? Formatierungsprozess XSLT im XML- Formatierungsprozess Transformation
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
HTML Theoriefragen 1. Wofür steht die Abkürzung HTML? 2. Warum ist HTML keine Programmier sprache? 3. Wofür steht die Abkürzung DTD? 4. Beantworten Sie die Fragen zur folgenden DTD:
HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.
HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ
Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger
Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default
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,
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
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:
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
Agenda GRUNDKURS INFORMATIK 5. MARKUP UND HTML. Wo stehen wir? Markup-Language. Markup-Language. Standard Generalized Markup Language
Agenda Markup Sprachen SGML HTML GRUNDKURS INFORMATIK 5. MARKUP UND HTML WiSe 2010/2011 Marcel Götze Wo stehen wir? Markup-Language Vergangenen Vorlesung: Text und Typographie: Gestaltung eines Druckwerks