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 ]

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

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände... CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...

Mehr

Allgemeine Technologien II Sommersemester Mai 2011 CSS

Allgemeine Technologien II Sommersemester Mai 2011 CSS Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden

Mehr

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,

Mehr

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10 CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...

Mehr

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

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

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

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

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung

Mehr

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

Grundlagen-Beispiel CSS

Grundlagen-Beispiel CSS Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:

Mehr

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

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

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

CSS - Cascading Stylesheets

CSS - Cascading Stylesheets CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache

Mehr

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

CSS. Cascading Style Sheets

CSS. Cascading Style Sheets CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln

Mehr

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

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

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

4. Briefing zur Übung IT-Systeme

4. Briefing zur Übung IT-Systeme 4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:

Mehr

CSS Cascading Style Sheets

CSS Cascading Style Sheets XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,

Mehr

Praktikum im Grundstudium

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

Mehr

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

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc. Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

Mehr

4. Briefing zur Übung IT-Systeme

4. Briefing zur Übung IT-Systeme 4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00

Mehr

Eine Schnelleinführung in CSS

Eine Schnelleinführung in CSS Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:

Mehr

Introduction to Technologies for Interaction Design. Stylesheets

Introduction to Technologies for Interaction Design. Stylesheets Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen

Mehr

Aufbau einer HTML Seite:

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

Mehr

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

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

Wert. { color: blue; }

Wert. { color: blue; } CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder

Mehr

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

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

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

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

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

ANWENDUNGSSOFTWARE CSS

ANWENDUNGSSOFTWARE CSS ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,

Mehr

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

Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen

Mehr

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

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

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01. 1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes

Mehr

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

Cascading Stylesheets (CSS)

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

Mehr

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

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

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

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

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

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

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

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

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

http://www.therealgang.de/

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

Mehr

3. Briefing zur Übung IT-Systeme

3. Briefing zur Übung IT-Systeme 3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,

Mehr

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

Cascading Style Sheets II (CSS)

Cascading Style Sheets II (CSS) Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,

Mehr

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

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche

Mehr

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

Tutorial zum erstellen einer Webseite

Tutorial zum erstellen einer Webseite Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,

Mehr

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

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

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

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

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

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

Mehr

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

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

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

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

CSS-Boxen. Hans Gell Schulungen & Dienstleistungen  Übersicht der Schulungsinhalte CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr

Mehr

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

Formatierung eines Text Ads in CSS

Formatierung eines Text Ads in CSS Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.

Mehr

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

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

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

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

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

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

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

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

Mehr

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

Praktikum 8: CSS-Layout

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

Mehr

Introduction to Technologies. Stylesheets mit CSS

Introduction to Technologies. Stylesheets mit CSS Introduction to Technologies Stylesheets mit CSS HTML-CSS enthält den Inhalt HTML- Datei *.html CSS- Datei *.css enthält die Layoutangaben ist austauschbar Darstellung des Seiteninhaltes im erstellten

Mehr

Inhalt: 1)Das Box-Modell

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

Mehr

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

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente

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

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,

Mehr

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

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

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

Übung: Bootstrap - Navbar

Übung: Bootstrap - Navbar Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:

Mehr

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

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

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

Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung

Mehr

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

Schiller-Gymnasium Hof 20.12.2004

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

Mehr

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

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

Mehr

Web-basierte Anwendungssysteme XHTML- CSS

Web-basierte Anwendungssysteme XHTML- CSS Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen

Mehr

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

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

4.8 Das Box Modell, Block- vs Inline-Elemente

4.8 Das Box Modell, Block- vs Inline-Elemente 4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente

Mehr