Erstellung von dynamischen Webseiten mit Cascading StyleSheets

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Erstellung von dynamischen Webseiten mit Cascading StyleSheets"

Transkript

1 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 Professur für Raumentwicklung Dr. Hany Elgendy [ 1 ]

2 Ablauf Termin Thema Einführung PIS Einführung Internet PIS-Planung Organisation HTML CSS I Praktische Übung Referate 1 CSS II Screen Design Editoren Referate 2 JavaScript Referate 3 DB ASP Referate 4 DB/ASP Web-Karten Résumé FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 2 ]

3 Gliederung Eine Einführung in CSS (Cascading StyleSheets) CSS Eigenschaften CSS Selektoren Stylesheets einbinden (31.03.) FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 3 ]

4 Gliederung Eine Einführung in CSS (Cascading StyleSheets) CSS Eigenschaften CSS Selektoren Stylesheets einbinden FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 4 ]

5 Eine Einführung in CSS Einführungsbeispiel Wie lässt sich diese Seite gliedern? Welche Elemente finden Sie? FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 5 ]

6 Eine Einführung in CSS Einführungsbeispiel Welche Eigenschaften wurden verändert? Wie wurden die Elemente angesprochen? Wie bzw. wo wurden die Stile definiert? FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 6 ]

7 Eine Einführung in CSS Begriffsdefinition CSS oder Cascading StyleSheets (wörtlich: verschachtelte Formatvorlagen), sind eine unmittelbare Ergänzung zu HTML. HTML ist die Sprache zur logischen Kennzeichnung von Inhalten. Mit CSS hat man eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Sie gibt dem Browser die Anweisungen, wie dieser die einzelnen Elemente darzustellen hat. Damit werden die Darstellung und Positionierung dieser Elemente im Webbrowser genau beschrieben. HTML ist das Skelett einer Website, mit CSS wird diese dann angekleidet. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 7 ]

8 Eine Einführung in CSS Vorteile von CSS Die Trennung von Inhalt und Gestaltung vereinfacht eine HTML-Seite: sie wird kleiner und übersichtlicher. Spätere Änderungen werden erleichtert, da man das Layout vieler Webseiten aus einer einzigen StyleSheet-Datei heraus kontrollieren kann. CSS-Anweisungen bieten mehr Gestaltungsmöglichkeiten als reines HTML. Ein HTML-Dokument lässt sich durch StyleSheets für verschiedene Medien aufbereiten (z.b. für den Druck oder mobile Geräte wie das iphone). FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 8 ]

9 Gliederung Eine Einführung in CSS (Cascading StyleSheets) CSS Eigenschaften CSS Selektoren Stylesheets einbinden FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 9 ]

10 CSS Eigenschaften CSS Eigenschaften lassen sich in verschiedene Gruppen einteilen. Nicht alle Gruppen können jedem HTML-Element zugewiesen werden. Die nun vorgestellten Gruppen sind allgemeingültig und können jedem sinnvollen HTML-Element zuwiesen werden: Formatierung von Schriften u.a. Schriftgrösse (font-size), Schriftart (font-family), -farbe (color), -stärke (font-weight) Dimensionen, Abstände und Rahmen Breite (width) und Höhe (height) des Elements, Abstand zum Rahmen (padding) und zu anderen Elementen (margin) sowie Rahmeneigenschaften (border). Verhalten im Textfluss / Positionierung Die Positionierung eines jeden Elements kann beeinflusst werden (position). Auch das Verhalten eines Elementes innerhalb des Textflusses ist steuerbar (float). Farben und Hintergründe Die Schriftfarbe (color) wurde erwähnt. Den meisten HTML-Elementen können auch eine Hintergrundfarbe (background-color) und/oder ein Hintergrundbild (background-image) zugewiesen werden. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 10 ]

11 CSS Eigenschaften Links Mit den folgenden Eigenschaften kann das Verhalten von Links (normal, besucht, hervorgehoben, aktiv) gesteuert werden: a:link { color: #00d; } a:visited { color: #d0d; } a:hover { color: #04f; } a:active { color: #f00048; } Wichtig ist dabei die Reihenfolge einzuhalten, da ansonsten die Browserkompabilität nicht immer gewährleistet ist. Abstände Für das Anordnen von Elementen ist es wichtig, das Box-Model von CSS zu kennen (siehe auch CSS Cheat-Sheet). Ein Element hat immer eine Breite (width). Die Breite (width) bezieht sich auf den Inhalt z.b. einen Textabsatz. Um diesen Inhalt fliessen die, paddings sie definieren den Abstand zum Rahmen (border). Die Abstände zwischen den Elementen wiederum werden über den margin definiert. Listen Listen können speziell formatiert werden. Z.b. kann die Wahl des Aufzählungszeichens beeinflusst werden: ul { list-style-type: square; } Auch das Verhalten von Zeilenumbrüchen in Listen kann gesteuert werden: ul { list-style-position: outside; } (bzw. inside) Bei geordneten Listen können sowohl die Nummerierungsart als auch der Startwert für die Nummerierung gewählt werden. Tabellen Auch Tabellen können mit Stilen beeinflusst werden. Um z.b. den Abstand zwischen den Zellen festzulegen, können Sie auf die folgende Eigenschaft zurückgreifen: table { border-spacing: 2px; } Möchten Sie doppelte Rahmen verhindern hilft: table { border-collapse: collapse; } Kurzformen Für viele Formatierungen gibt es Kurzformen. Um z.b. einen Rahmen zu formatieren, können sie die Eigenschaften einzeln notieren: border-color: #000; border-style: solid; border-width: 3px; oder sie notieren die Kurzform (Stärke, Stil, Farbe): border: 3px solid #000; Häufig werden Sie die Kurzform für die Abstände benötigen. Für padding und margin werden die Werte im Uhrzeigersinn oben beginnend notiert (oben, rechts, unten, links): margin: 10px 0 10px 10px; Achtung: Die Kurzformen werden nur mit einem Abstand zwischen den einzelnen Werten notiert! Einheiten Neben absoluten Werten (z.b. px) gibt es auch relative Werte (z.b. %). Der Attributswert und die Einheit (wenn erforderlich) werden immer ohne Abstand notiert zusammen. Ansonsten kann es passieren, dass ihr Browser die CSS-Eigenschaft nicht richtig interpretiert. p { margin-left: 20px; } und nicht p { margin-left: 20 px; } Standardwerte Auch ein nacktes HTML-Skelette hat vordefinierte Stile (siehe Einführungsbeispiel). Die Textgrösse beträgt z.b. 16px oder Links werden in blau und unterstrichen dargestellt. weiterführende Informationen - weiterführende Informationen - weiterführende Informationen FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 11 ]

12 Gliederung Eine Einführung in CSS (Cascading StyleSheets) CSS Eigenschaften CSS Selektoren Stylesheets einbinden FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 12 ]

13 CSS Selektoren 1) Stile für einen ausgewählten Element-Typ (bestimmtes HTML-Tag) definieren z.b. <body>, <p> oder <li> <html> <head> <style type="text/css"> selector {property: value;} </style> </head> <body> <selector>inhalt</selector > </body> </html> Quelle: FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 13 ]

14 CSS Selektoren Beispiel: Stile für einen ausgewählten Element-Typ <head> <style type="text/css"> p { text-align: justify; } a { color: #005; } q { font-style: italic; } </style> </head> <body> <p> [ ] <a href="link.html">gregor Samsa</a> [ ] </p> <p> [ ] <q>es ist ein eigentümlicher Apparat</ q> [ ] </p> <p>[ ]</p> </body> Absätze werden in Blocksatz ausgerichtet. Links werden in einem dunklen blau dargestellt. Zitate werden kursiv dargestellt. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 14 ]

15 CSS Selektoren 2) Stile für Gruppen bestimmter Elemente definieren Klassen z.b. für hervorgehobene Absätze rechts angeordnete Bilder usw. Die Gruppen von Elementen werden über ihre Klassenzuweisung angeprochen: <html> <head> <style type="text/css">.special {property: value;} </style> </head> <body> <selector class="special">inhalt</selector > </body> </html> Achtung: Klassenstile werden mit einem Punkt [.] vor ihrem Klassennamen deklariert. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 15 ]

16 CSS Selektoren Beispiel: Stile für Gruppen bestimmter Elemente definieren Klassen <head> <style type="text/css">.abstract { font-weight: bold; padding: 10px; background-color: #bbb; } </style> </head> <body> <p class="abstract"> [ ] </p> <p> [ ] </p> <p> [ ] </p> <p class="abstract"> [ ] </p> </body> </html> Absätze mit der Klasse abstract werden hervorgehoben. Achtung: Klassenstile werden mit einem Punkt [.] vor ihrem Klassennamen deklariert. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 16 ]

17 CSS Selektoren 3) Stile für ein einzelnes Element definieren z.b. für die Haupt-Navigation den Kopfbereich einer Seite usw. Die einzelnen Elemente werden über ihre ID angeprochen: <html> <head> <style type="text/css"> #unique {property: value;} </style> </head> <body> <selector id="unique">inhalt</selector > </body> </html> Achtung: In der CSS-Deklaration wird vor der Angabe der ID eine Raute [#] gesetzt. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 17 ]

18 CSS Selektoren Beispiel: Stile für ein einzelnes Element definieren <head> <style type="text/css"> #contact-bar{ position:absolute; top: 30px; right: 30px; padding: 5px 0 5px 5px; border-bottom: 3px solid #bbb; border-left: 3px solid #bbb; } </style> </head> <body> <p id="contact-bar"> Kontakte: [ ] </p> </body> </html> Das Element mit der Id contact-bar wird neu positioniert und vom eigentlichen Inhalt freigestellt. Achtung: In der CSS-Deklaration wird vor der Angabe der ID eine Raute [#] gesetzt. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 18 ]

19 CSS Selektoren CSS bietet mehr als die hier vorgestellten Selektoren. Zum Beispiel können mittels Trennung durch Kommas, unterschiedlichen Elementen die gleichen Eigenschaften zugewiesen werden, ohne die Definition mehrfach schreiben zu müssen: h1, h2,.subtitle {color:green} Verschachtelung Oder es können Verschachtelungen stattfinden (z.b. alle Absätze innerhalb eines Elements mit der ID navi ): #navi p { color: #22ff33 } Eine Klasse kann allgemein definiert werden z.b.:.left { float: left; margin-right: 20px; } oder man schränkt die Klasse auf ein bestimmtes HTML-Element ein, zum Beispiel für alle Bilder gilt: img.left { float: left; margin-right: 20px; } Intern vs. Extern Wird in einem Dokument gleichzeitig ein internes und externes Style Sheet verwendet, haben die internen Definitionen Priorität, d.h. falls irgendwo exakt die selben Attribute angesprochen werden, wird die interne Definition verwendet. Dies gibt bei Verwendung einer längeren CSS-Definition die Möglichkeit für eine Internetseite auch nur ein einzelnes Attribut abzuändern. Tipps zur Fehlervermeidung: Beginnen Sie einen Klassen- oder ID-Namen nie mit einer Zahl! Manche Browser haben Probleme damit. Bei der Verwendung von IDs wird in der CSS-Notation eine Raute [#] vor die ID gestellt #navi, beim HTML-Element wird die ID ohne Raute notiert <div id="navi"> Bei der Verwendung von Klassen wird in der CSS-Notation ein Punkt [.] vor den Klassennamen gestellt.subtitle, beim HTML-Element wird die Klasse ohne Punkt notiert <h2 clas="subtitle"> Klassen oder ID? Am Anfang ist es schwierig, zu entscheiden ob jetzt eine ID oder eine Klasse verwendet werden sollte. Eine einfache gültige Regel ist, kommt ein Stil mehrmals auf der Seite vor (und kann er nicht direkt über das HTML-Element angesprochen werden), sollte eine Klasse verwendet werden z.b..left { float: left; margin-right: 20px; } Eine ID darf zudem nur einmal vergeben werden, das heisst es gibt nur ein HTML-Element mit der ID navi auf jeder Seite. Je mehr Gedanken man sich über die Gliederung und das Layout einer Seite macht, bevor man mit deren Umsetzung beginnt, desto einfacher wird die Entscheidung, was nun mit einer Klasse und was mit einer ID gelöst werden sollte. weiterführende Informationen - weiterführende Informationen - weiterführende Informationen FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 19 ]

20 Kurze Übung Kopieren Sie sich die Dateien einfuehrung1_css.html und bild.png (./_matrial/vorlesung/04_css) in ihr Verzeichnis und versuchen Sie mit den den CSS-Eigenschaften zu spielen. a. Wie können Sie das Aufzählungszeichen bei der Liste ändern? b. Versuchen Sie die Position der Kontaktangaben zu verändern. c. Wie bekommen Sie das zweite Bild auf die linke Seite der Seite? d. Wie setzten Sie die Hintergrundfarbe der Seite auf weiss? praktische Übungen - praktische Übungen - praktische Übungen - praktische Übungen FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 20 ]

21 Gliederung Eine Einführung in CSS (Cascading StyleSheets) CSS Eigenschaften CSS Selektoren Stylesheets einbinden FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 21 ]

22 Stylesheets einbinden Methoden zur Einbettung eines StyleSheets in HTML a) Innerhalb von HTML-Tags (inline) <tag style="attribut: value;"> <p style="color:red; background-color:#b1c3d9;">text</p> b) Als internes StyleSheet im Kopfbereich einer HTML-Datei <html> <head> <style type="text/css"> p { color: red; background-color: #B1C3D9; } </style> </head> <body> <p>text</p> </body> </html> FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 22 ]

23 Stylesheets einbinden Methoden zur Einbettung eines StyleSheets in HTML c) Als externes StyleSheet für mehrere HTML-Dateien (Einbindung über das link-element im Kopfbereich der HTML-Datei) Quelle: index.html <html> <head> <link rel="stylesheet" type="text/css" ref="style.css" /> </head> style.css p { color:red; background-color:#66ff33; } <body> <p>text</p> </body> </html> FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 23 ]

24 Stylesheets einbinden Anwendungen der verschiedenen Methoden Die Einbindung als externes StyleSheet ist die am häufigsten verwendete Methode, sie bietet mehrere Vorteile: Für mehrere HTML-Dokumente kann dasselbe StyleSheet benutzt werden. Die Stile können zentral an einem Ort geändert werden und behalten ihre Gültigkeit über die ganze Webseite. Eine Wiederholung von Stilinformationen auf jeder Seite wird so vermieden. Die Stylesheet-Datei kann vom Browser zwischengespeichert werden (Browser Cache). Das hilft, Bandbreite zu sparen (Kostenfaktor z.b. bei Smartphones). Stilangaben im Kopfbereich kommen meistens dann zur Anwendung, wenn eine Seite speziell gestaltete Elemente enthält und diese im Rest der Webseite nicht benötigt werden. Sie bieten zudem die Möglichkeit zentral definierte Styles (im externen StyleSheet definierte Stile) für eine bestimmte Seite zu überschreiben. Mit inline-styles können gezielt bestimmte Elemente speziell gestaltet werden. Dabei werden im externen Stylesheet oder im Kopfbereich der Seite definierte Stile übersteuert. Eine Trennung von Inhalt und Gestaltung ist bei dieser Methode aber nicht mehr gegeben. Diese Methode wird meist nur in der Anfangsphase eines Projekts verwendet. Später sollten die Stile im Kopfbereich oder in einem externen Stylesheet definiert werden. Erläuterungen - Erläuterungen - Erläuterungen - Erläuterungen - Erläuterungen Erläuterungen FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 24 ]

25 CSS: Bücher / Links weiterführende Links Einführung: CSS-Selektoren Referenzen: Browser-Unterstützung Cheat-Sheet: (in der Vorlesung abgegeben) Usability, Design Tipps etc. Bücher Alle aufgelisteten Bücher sind in den ETH/Uni Bibliotheken ausleihbar. CSS Eric. A. Meyer (2006): CSS. The Definitive Guide. O Reilly (ISBN: ) David Sawyer McFarland (2009): CSS. The Missing Manual. O Reilly (ISBN: ) HTML/CSS/Javascript Jon Ducket (2010): Beginning HTML, XHTML, CSS and Javascript. Wiley (ISBN: ) Laura Lemay et al. (2010): Web Publishing with HTML and CSS in One Hour a Day. Sams (ISBN: ) Manuela Hoffmann et al. (2007): Professionelles Webdesign mit (X)HTML und CSS. Galileo (ISBN: ) weiterführende Informationen - weiterführende Informationen - weiterführende Informationen FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 25 ]

26 Lernziele Modul CSS Kenntnisse Fähigkeiten/Fertigkeiten Einführung Sie können CSS definieren. Sie kennen die Vorteile des Einsatzes von CSS. Methoden zur Einbettung eines CSS in HTML Sie können die grundsätzlichen Unterschiede der drei verschiedenen Style- Definitionsarten (direkt im HTML-Element, Kopfbereich der Seite, externes Stylesheet) erläutern. Sie können die drei verschiedenen Arten der Style-Definition anwenden. Sie können die drei Vorteile von externen CSS unter Anführung von Beispielen erklären. CSS Eigenschaften Sie kennen das Box-Model von CSS. Sie können Schriften formatieren und den Textfluss beeinflussen. Sie wissen wie man Farben / und Hintergrundfarben definiert. Sie können Abstände und Rahmen mit CSS umsetzten. CSS Selektoren Sie kennen die drei Möglichkeiten (HTML-Elementtyp, Klassen, gezieltes Element ansprechen) wie formatiert werden kann und sind in der Lage die Unterschiede zu erklären. Die gezeigten Arten der Formatdefinition über CSS können sie selbstständig umsetzen. FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung Dr. Hany Elgendy [ 26 ]

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

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

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

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

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

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

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

Cascading Style Sheets (CSS)

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

Mehr

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

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

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

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

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

Mehr

Aufbau 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

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

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

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

Mehr

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015 Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8

Mehr

1 Was sind Cascading Stylesheets?

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

Mehr

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]

Mehr

Webbasierte Programmierung

Webbasierte Programmierung Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert Inhalt Kapitel 4: CSS (Cascading Style Sheets) Einbindung von CSS CSS-Grammatik Boxmodell

Mehr

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr-

Mehr

Crashkurs HTML und CSS

Crashkurs HTML und CSS Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise

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

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

44 2CSS* Basistext. 2.1 Was ist CSS? *

44 2CSS* Basistext. 2.1 Was ist CSS? * 44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

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

Mehr

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

HTML & Co. Ein kurzer Einblick

HTML & Co. Ein kurzer Einblick HTML & Co Ein kurzer Einblick 1 Was ist HTML? HTTP= Datenübertragungsprotokoll HTML (Hypertext Markup Language) = Formatiersystem für Textdokumente Entwickelt in Genf (CH) am CERN Befehle zur Formatierung,

Mehr

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

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

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

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

Mehr

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

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index. Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

http://www.therealgang.de/

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

Mehr

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

Mehr

Kurzanleitung. Individuelle Schnellsuchmaske

Kurzanleitung. Individuelle Schnellsuchmaske Kurzanleitung Individuelle Schnellsuchmaske 1 Inhaltsverzeichnis Inhaltsverzeichnis...2 Übersicht...3 Das Einbinden der Schnellsuchmaske...5 Anpassen des Layouts...7 2 Übersicht Die Traffics Schnellsuchmaske

Mehr

3 WEBSEITEN GESTALTEN

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

Mehr

Einführungskurs HTML-CSS mit Buch

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

Mehr

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

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

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

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

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,

Mehr

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

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

Mehr

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

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

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf...... oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax:

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

HTML Programmierung. Aufgaben

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

Mehr

CSS zur Gestaltung von HTML-Seiten nutzen

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

Mehr

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

HTML Teil 2. So kann man HTML-Seiten mit

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

Mehr

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung...

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung... Inhaltsverzeichnis Die fehlenden Danksagungen........................................... Einleitung................................................................... XI XV Teil 1: CSS-Grundlagen Kapitel

Mehr

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [

Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [ Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [ Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht... 15 1 Einfach moderne Websites 19 1.1 Auf

Mehr

Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4

Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4 Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4 Webseiten gestalten Grundlagen HTML5 und CSS, Formulare und Urheberrecht Bluefish, CSS, CMSimple Arbeitsheft RS-WEB-HTML5 1.2 grundstruktur

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

Tab. Seitenverwaltung Dokumentansichten

Tab. Seitenverwaltung Dokumentansichten Einstieg Hauptbildschirm Menuleiste Symbolleiste Bearbeiten Symbolleisten Format Tab Tab schliessen Tab, nicht gespeichert Seitenverwaltung Dokumentansichten Bearbeitungsfenster Pfad zum aktuellen HTML-Tag

Mehr

HTML-Grundlagen (X)HTML:

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

Mehr

Information und ihre Darstellung: XHTML & CSS

Information und ihre Darstellung: XHTML & CSS Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache

Mehr

Planerische Informationssysteme. Erstellung von Webseiten mit Editoren. Dr.-Ing. Hany Elgendy

Planerische Informationssysteme. Erstellung von Webseiten mit Editoren. Dr.-Ing. Hany Elgendy Planerische Informationssysteme Erstellung von Webseiten mit Editoren Dr.-Ing. Hany Elgendy FS 2014 Erstellung von Webseiten Institut für Raum- und Landschaftsentwicklung Professur für Raumentwicklung

Mehr

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

HTML5, CSS3 und JavaScript 1.8. Isolde Kommer. Fortgeschrittene Entwicklung von Webseiten. 1. Ausgabe, Februar 2013 HTML5F Isolde Kommer 1. Ausgabe, Februar 2013 HTML5, CSS3 und JavaScript 1.8 Fortgeschrittene Entwicklung von Webseiten HTML5F Impressum Matchcode: HTML5F Autorin: Isolde Kommer Redaktion: Andreas Dittfurth,

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

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

Mehr

Das TYPOlight CSS-Framework

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

Mehr

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax 5.11.2015 bis 21.01.2016 Carolin Schneider (Matrikelnummer: 40127) Inhaltsverzeichnis Ziel des Projekts... 3 Projektverlauf...

Mehr

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet. Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die

Mehr

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39 Inhaltsverzeichnis Einführung....................................... 1 HTML und CSS im Überblick............................ 2 Browser........................................ 3 Webstandards und Webspezifikationen......................

Mehr

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1 1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der

Mehr

TYPOlight-Usertreffen 2009. Barrierefreiheit?

TYPOlight-Usertreffen 2009. Barrierefreiheit? Barrierefreiheit? Das ist doch nur für Blinde! Zu kompliziert. Zu teuer. Unsere Kunden sind nicht behindert. Müssen wir machen *seufz* sind verpflichtet Wir haben schon eine NurText-Version. Barrierefreiheit!

Mehr

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM

Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM Robert R. Agular Thomas Kobert 5. Auflage HTML Inklusive CD-ROM Vorwort 13 Einleitung 14 Arbeitsschritte 14 Wichtige Stellen im Buch 14 Buffi-Infokästen 14 Aufgaben 15 Wohin mit den Übungen? 15 HTML-Ordner

Mehr

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press

Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards 17 1.1 Webdesign, was ist das eigentlich? 17

Mehr

Inhaltsverzeichnis. Teil 1: Willkommen im Web... 7. Die fehlenden Danksagungen... XIII. Einleitung... 1

Inhaltsverzeichnis. Teil 1: Willkommen im Web... 7. Die fehlenden Danksagungen... XIII. Einleitung... 1 Inhaltsverzeichnis Die fehlenden Danksagungen........................................... XIII Einleitung................................................................... 1 Teil 1: Willkommen im Web.....................................

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

Best Practices für HTML & CSS. Johannes Eschrig

Best Practices für HTML & CSS. Johannes Eschrig Best Practices für HTML & CSS. Johannes Eschrig Gliederung. 2 1. Best Practices i. Standards ii. Standardfreundlichkeit iii. Grundlegende Regeln 2. Best Practices für HTML i. class & id ii. HTML & CSS

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

Homepage mit HTML und CSS

Homepage mit HTML und CSS Homepage mit HTML und CSS Ein schneller und zielgerichteter Einstieg zur Erstellung einer Homepage Erstellungsdatum: November 2010 Autor: Thomas von Glahn Seite 1 Inhaltsverzeichnis 1. Vorbereitende Tätigkeiten

Mehr

CAS Webdesign und Webpublishing

CAS Webdesign und Webpublishing CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Kapitel 3. Wichtige HTML-Elemente (1)

Kapitel 3. Wichtige HTML-Elemente (1) Kapitel 3 Wichtige HTML-Elemente (1) Worin Sie die wichtigsten HTML-Elemente kennenlernen. Sie teilen die Webseite zunächst in Bereiche ein und beginnen dann mit der Erstellung eines sinnvoll strukturierten

Mehr

Inhalt. Einleitung... 13

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

Mehr

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt

Mehr

Internet und Webseiten-Gestaltung

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

Mehr

<>Mini HTML-Kurs<>

<>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- -> Mini HTML-Kurs Dieser Mini HTML-Kurs soll Ihnen genau soviel HTML-Wissen vermitteln, wie Sie brauchen, um meine Homepage-Vorlagen nach Ihren Wünschen anpassen zu können. Ich werde Ihnen also genau

Mehr

Interface-Optimierung bei mobilen Endgeräten

Interface-Optimierung bei mobilen Endgeräten Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.

Mehr

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

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

Mehr

Informatik und Programmiersprachen

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.

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

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006 Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere

Mehr

Kapitel 3 Strukturierte Daten mit Listen und Tabellen

Kapitel 3 Strukturierte Daten mit Listen und Tabellen Kapitel 3 Strukturierte Daten mit Listen und Tabellen Daten spielen auf einer Website eine wichtige Rolle. Egal ob Terminliste, ein Kochrezept oder herunterladbare Dateien: Eine Fülle von Informationen

Mehr

Einführung 17. Teil I (X)HTML kennen lernen 23. Kapitel 1 Was Sie mindestens über HTML und das Web wissen müssen 25

Einführung 17. Teil I (X)HTML kennen lernen 23. Kapitel 1 Was Sie mindestens über HTML und das Web wissen müssen 25 Inhaltsverzeichnis Inhaltsverzeichnis Einführung 17 Über dieses Buch 17 Wie Sie dieses Buch nutzen 18 Törichte Annahmen über den Leser 19 Wie dieses Buch aufgebaut ist 19 Teil I: (X)HTML kennen lernen

Mehr

Kurzeinführung in HTML

Kurzeinführung in HTML Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1

Mehr

Crashkurs Webseitenerstellung mit HTML

Crashkurs Webseitenerstellung mit HTML Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,

Mehr

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy Grundelemente der Hypertext Markup Language (HTML) und Cascading StyleSheets (CSS) Allgemeines: HTML steht für Hypertext Markup Language aktueller Standard ist HTML 4.1 bzw. XHTML 1.0 (s.a. unter http://www.w3c.org)

Mehr

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

Internet und Webseiten-Gestaltung

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

Mehr

Kurs-Serie: Wordpress Themes erstellen

Kurs-Serie: Wordpress Themes erstellen Kurs-Serie: Wordpress Themes erstellen Die HTML-Vorlage für das Wordpress-Theme von Vladimir Simovic akademie.de asp GmbH & Co. Betriebs- & Service KG Lehrter Straße 16-17, 10557 Berlin Tel: (030) 61655-0

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

a. Bildtypen für Webseiten:

a. Bildtypen für Webseiten: HTML-Tipps 1. Ordnerstruktur Erstellt man eine umfassende Website, sollte man sich eine vernünftige Ordnerstruktur überlegen und nicht alle Dateien in einen Ordner stellen. Schließlich erleichtert einem

Mehr

Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles. Torsten Walter

Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles. Torsten Walter Gestalten von WebPoint-Anwendungen mit Hilfe von Struts-Tiles Torsten Walter 1 Tutorial In dem Tutorial zu WebPoint wurde exemplarisch die Realisierung eines Videoautomaten erklärt. Dieses Dokument beschreibt

Mehr

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

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

Mehr