Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
|
|
- Rainer Giese
- vor 7 Jahren
- Abrufe
Transkript
1 Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann
2 Inhaltsverzeichnis 11 Vorlesung Style-Sheets Wo werden Style-Sheets definiert? Erste Style-Sheet-Befehle Mögliche Größenangaben Schriftformatierung Ränder Text-Ausrichtung Hintergund einstellen
3 Kapitel 11 Vorlesung Übungsblatt 09: 11.1 Style-Sheets Style-Sheets, genauer Cascading Style-Sheets (CSS), ermöglichen die individuelle Gestaltung vieler Tags. Das Konzept der Style-Sheets ist vergleichbar mit den Formatvorlagen bei Microsoft Word oder den Makro-Paketen bei L A TEX. Mit Style-Sheets kann z.b. genau festgelegt werden, wie eine Überschrift 1. Grades (<h1>) dargestellt werden soll: Schriftgröße, Ausrichtung, Abstand zum nachfolgenden Text, Hintergrundfarbe, etc. Der Vorteil von Style-Sheets liegt in der genauerer Steuerung der Text-Präsentation und der besseren Verwaltung von größeren Dateimengen. Mit sorgfältiger Planung kann man in einem Web-Bereich so etwas wie Corporate Identity erzielen. So ist es möglich, mit der Änderung in einer einzigen Datei, in der das Style-Sheet definiert wird, in einem kompletten Web-Bereich das Aussehen von z.b. Überschriften 1. Grades zu verändern. Momentan existieren 2 Spezifikationen von Style-Sheets. Level 1 ist bis auf die üblichen kleinen Abweichungen, die das Leben so erschweren bei den Browsern von Microsoft und Netscape großteils realisiert. Level 2 ist bei beiden Herstellern noch eher unzureichend implementiert. Bei Level 2 ist es u.a. vorgesehen, daß drei verschiedene Formate definiert werden können. Eines für Bildschirm-Ausgabe, eines für Druck-Ausgabe und ein drittes für Audio-Ausgabe Wo werden Style-Sheets definiert? Es gibt drei Möglichkeiten Style-Sheets zu definieren: 1. Ein einzelner Tag kann durch eine Style-Sheet-Angabe verändert werden. 2. Style-Sheet-Definitionen im <head>-bereich einer Datei wirken sich auf die gesamte Datei aus. 2
4 3. Im <head>-bereich einer Datei kann auf eine Datei mit Style-Sheet-Definitionen verwiesen werden. Die Definitionen wirken sich dann auf alle HTML- Dateien aus, die auf diese Datei verweisen. Wir betrachten zunächst nur Möglichkeit 2 und 3. Die erste Variante werden wir später ausprobieren. Im Datei-Kopf werden Style-Sheet-Definitionen folgendermaßen gekennzeichnet: <head>... <style type="text/css"> <!--... Hier stehen die Style-Sheet-Definitionen //--> </style> </head> <body>... Um bei Browsern, die Style-Sheet-Angaben nicht verstehen, unnötige Verwirrung zu vermeiden, ist es günstig, wie im oberen Beispiel die Style-Sheet-Angaben zusätzlich mit einem HTML-Kommentar-Befehl zu umgeben. Eine externe Datei mit Style-Sheet-Definitionen bindet man so ein: <head> <link rel=stylesheet type="text/css" href="xxx.css">... </head> <body>... Dadurch werden die Definitionen aus der Datei xxx.css eingelesen. Aber nun zu den ersten Style-Sheet-Angaben Erste Style-Sheet-Befehle Die einfachste Möglichkeit, eine Style-Sheet-Angabe zu machen, ist, den Namen des Tags ohne spitze Klammern <> und dahinter in geschweiften Klammern die Style-Sheet-Information anzugeben. Beispiel: Wir wollen die Überschrift <h1> mit roter, kursiver Schrift definieren: h1 { color:red; font-style:italic; } Beim letzten Befehl vor } kann der Strichpunkt auch weggelassen werden. Man kann mehrere Definitionen zusammenfassen und schachteln: h1, h2 { font-family:helvetica; } h1 { color:red; font-style:italic; } h2 { color:#0000ff; } Kommentare kann man im Style-Sheet-Bereich genau wie in der Programmiersprache C angeben: Alles was zwischen /* und */ steht, wird ignoriert. Ein weiteres Beispiel: will man die Unterpunkte in Aufzählungen kursiv schreiben, so ist zu definieren: 3
5 li { font-style:italic; } Die Tags, die im Alltagsgebrauch nicht geschlossen werden, also etwa <p> und <li> sollten sicherheitshalber bei der Verwendung von Style-Sheets geschlossen werden. Style-Sheets ermöglichen auch die Definition mehrerer Varianten eines Tags. Dies geschieht mit sogenannten Format-Unterklassen. Wir können uns zum Beispiel einen grünen, roten und blauen Absatz definieren, Umlaute sollten in den Klassen-Namen vermieden werden: p.gruen { color:green; } p.rot { color:red; } p.blau { color:blue; } Dann können wir im laufenden Text setzen: <p class="gruen">hier ist grüner Text</p> <p class="rot">hier ist roter Text</p> <p class="blau">hier ist blauer Text</p> Man kann auch eine allgemeingültige Unterklasse für alle Tags definieren. Dies geht entweder über all.kursiv { font-style:italic; } oder einfach mit.kursiv { font-style:italic; } Dies kann dann zum Beispiel mit <table> <tr> <td class="kursiv">tabellenzelle<td> </tr> </table> verwendet werden. Eine allgemeine Unterklasse mit Text-Größenangabe ist meist wenig sinnvoll. Allerdings ist es möglich, prozentuale Angaben zu machen:.gross { font-size:200%; } Damit wird <h1 class="gross">titel</h1> <p class="gross">text</p> gleichmäßig größer. Formate können auch so definiert werden, daß die Neudefinition nur in Verwendung mit anderen Tags zur Geltung kommen: h1 b { font-weight:bold; font-style:italic; } 4
6 <h1>extra <b>fetter</b> Titel</h1> So kann dem Tag <b> in einer Überschrift <h1> eine spezielle Bedeutung gegeben werden. Ähnlich wie eine allgemeine Unterklasse kann man ein unabhängiges Format definieren. Dieses Format kann zusätzlich zu anderen Formaten verwendet werden, die für diesen Befehl definiert sind. Unabhängigen Formaten wird ein # vorangestellt. #fett { font-weight:bold; } Eingesetzt werden unabhängige Formate mittels: <li id="fett">ein Unterpunkt</li> Auch sogenannte Pseudo-Formate können mit Style-Sheets überschrieben werden: a:link { color:yellow; } a:visited { color:#00aaee; } a:active { color:#123456; } Dies sind die Einstellungen, die auch im <body>-tag mit link=, etc. eingestellt werden können Mögliche Größenangaben Folgende Längeneinheiten sind bei Style-Sheets bekannt: Zuerst die absoluten Maßeinheiten: pt pc in mm cm Punkt = 1/72 inch Pica = 12pt Inch = 2.54cm Millimeter Zentimeter Darüberhinaus gibt es einige relative Maßeinheiten: em urspr. die Breite des Buchstaben M ex die Höhe des Buchstaben X px Pixel % Prozentuale Angabe Bei Farbangaben gibt es wie üblich die vordefinierten Farbnamen wie red, green und die RGB-Angaben mit Hexadezimalwerten. Es ist noch ein drittes Schema möglich, nämlich prozentuale RGB-Angaben: a:link { color:rgb(100%,40%,70%); } setzt den Rot-Anteil auf 100%, den Grün-Anteil auf 40% und den Blau-Anteil auf 70%. Es sind auch absolute Angaben mit Werten zwischen 0 und 255 möglich. 5
7 Schriftformatierung Mit Hilfe von Style-Sheets kann die Schriftformatierung sehr präzise gewählt werden. Zuerst wird die Schriftart mit font-family: ausgewählt. Ähnlich wie beim <font face=...>-befehl können mehrere Schriftarten gleichzeitig angegeben werden. Der Browser zeigt die erste Schriftart, die im Rechner vorhanden ist, an. Beispiel: h1 { font-family:arial,helvetica; } Es können nun wieder beliebige Schriftenarten verwendet werden. Auch die dynamischen Fonts (pfrs) können verwendet werden. Enthalten die Namen der Schriftarten Leerzeichen, so sollten sie in Anführungszeichen gesetzt werden. Desweiteren gibt es einige plattformübergreifende Schriftarten, die auf jedem Betriebssystem vorhanden sein sollten. Diese sind: serif sans-serif cursive fantasy monospace Die nächste Einstellung, die getroffen werden kann, ist der Schriftstil fontstyle. Da gibt es die Variationen: italic: kursiv oblique: kursiv (funktioniert nicht mit Linux-Netscape) normal: normal Die Schriftgröße wird mit font-size:... eingestellt. Neben relativen und absoluten Maßangaben gibt es auch sogenannte ungenaue Angaben : xx-small: winzig x-small: sehr klein small: klein medium: normal large: groß x-large: sehr groß xx-large: riesig smaller: kleiner als normal larger: größer als normal 6
8 Mit font-weight kann der Fettigkeitsgrad der Schrift eingestellt werden. Zur Auswahl stehen: bold: fett bolder: sehr fett lighter: dünner normal: normal 100, 200, 300,...,900: sehr dünn (100) bis sehr fett (900). Nicht jede Schriftart unterstützt jeden Fettigkeitsgrad. Insbesondere bei den numerischen Angaben müssen Abstriche gemacht werden. Es existiert auch eine kompakte Schreibweise, in der alle Schriftmerkmale zusammengefasst werden. p { font: bolder italic 24pt sans-serif; } Die üblichen Varianten, wie Text unterstreichen, blinken, etc. werden mit text-decoration=... angesprochen. Es gibt die Variationen: underline: unterstreichen overline: überstreichen line-through: durchstreichen blink: blinken none: Normal-Text Allerdings kennt Netscape 4.x den overline-befehl nicht. Mit dem Befehl text-transform kann Klein- oder Großschreibung erzwungen werden, unabhängig davon wie der Text eingetippt wurde. Die Variationen sind capitalize: Erster Buchstabe im Wort groß uppercase: Alles in Großbuchstaben lowercase: Alles in Kleinbuchstaben none: keine Transformation Mit color: kann wie bereits ausprobiert die Textfarbe eingestellt werden. 7
9 Ränder Mit Style-Sheets können die Abstände eines Objektes zu den benachbarten Objekte oder zu den Fensterrändern eingestellt werden. Dazu gibt es die Befehle margin-top: oberer Rand margin-bottom: unterer Rand margin-left: linker Rand margin-right: rechter Rand Ein Beispiel: p { margin-top:10px; margin-bottom:20px; } Allerdings ist unterschiedlich, wie Netscape und Internet Explorer reagieren, wenn oberer und unterer Rand eines Elementes zusammenstoßen. Bei Netscape hat margin-top die Priorität vor margin-bottom. Beim Internet Explorer wird der größere der beiden Werte genommen. Es sind auch negative Werte zugelassen. Es gibt zudem die Möglichkeit, die Ränder in einem Befehl zusammenzzfassen: p { margin:1cm } /* 1cm in jede Richtung */ p { margin:1cm 2cm} /* 1cm in oben und unten, 2cm rechts und links */ p { margin:1cm 2cm 3cm} /* 1cm in oben, 2cm rechts und links, 3cm unten */ p { margin:1cm 2cm 3cm 4cm} /* 1cm in oben, 2cm rechts, 3cm unten, 4cm links */ Text-Ausrichtung Bei Büchern ist oft eine Einrückung des ersten Wortes in einem Ansatz sehr beliebt. Dies kann mit p { text-indent:1em; } erreicht werden. Auch hier sind negative Werte erlaubt. Die Zeilenhöhe kann mit p { line-height:16pt; font-size:14pt } eingestellt werden. Die vertikale Ausrichtung zum Beispiel bei Tabellen kann mit dem Befehl td { vertical-align:top; } eingestellt werden. Mögliche Werte sind: top 8
10 bottom middle baseline: an der Schrift-Grundline ausrichten sub: Tieferstellen super: Höherstellen text-top: am oberen Schriftrand ausrichten text-bottom: am unteren Schriftrand ausrichten. Die horizontale Ausrichtung wird mit text-align oder alignment eingestellt. Hier sind folgende Werte möglich: left right center justify: Blocksatz Hintergund einstellen Die im folgenden beschriebenen Befehle wirken sich auf Tags auf, die Blöcke bilden. Dies sind die Überschriften h1 bis h6, p, p, div, blockquote, address, pre. Dazu kommen Befehle wie div, center, th, td, td, tr, table und sogar body. Die Hintergrundfarbe wird mit background-color eingestellt. Ein Hintergrundbild wird mit table { background-image:url(xxx.gif); } eingebunden. In der Klammer von url(...) muß ein gültiger Verweis auf eine GIF- oder JPEG-Datei im Internet sein. Normalerweise wird der jeweilige Block mit dem Hintergrundbild parkettiert. Dies kann unterbunden werden mit dem Befehl table { background-image:url(xxx.gif); background-repeat:no-repeat; } Es gibt insgesamt folgende Variationen: repeat: parkettieren no-repeat: nicht parkettieren repeat-x: nur horizontal parkettieren repeat-y: nur vertikal parkettieren Beim Internet Explorer gibt es eine weitere Option: Der Befehl background-attachment: legt fest, ob das Hintergrundbild beim scrollen mitläuft oder nicht. Gültige Werte sind fixed oder scroll. 9
11 Literaturverzeichnis [1] Born, Günter: Referenzhandbuch Dateiformate, Addison-Wesley (1996). [2] Bruns, B., Gajewski, P.: Multimediales Lernen im Netz, Springer-Verlag (1999). [3] Bush, Vannevar: As we may think, in The Atlantic Monthly, July 1945, siehe [4] Haaß, Wolf-Dieter: Handbuch der Kommunikationsnetze, Springer-Verlag (1997). [5] Hauben, Michael: History of ARPANET, siehe [6] Klau, Peter: Das Internet, Thomson Publishing (1995). [7] Krol, Ed: Die Welt des Internet, O Reilly-Verlag (1995). [8] Levine, John, Young, Margaret: More Internet für Dummies, Thomson Publishing (1996). [9] Stefan Münz: SELFHTML, erhältlich bei [10] Rost, Martin, Schack, Michael (Hrsg.): Der Internet Praktiker (1995), Heise-Verlag. [11] Schulmeister, Rolf: Grundlagen hypermedialer Lernsysteme, Addison- Wesley (1996). 10
Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana'
Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,
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 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
Mehr1 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...
Mehrjetzt 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
MehrOnline-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
Mehr4. 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
Mehr4. 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
MehrCSS. 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
MehrInhaltsverzeichnis. 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...
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 6 Vorlesung 2 6.1 Querverweise............................. 2 6.2 Verweis-sensitive Graphiken, Image Maps.............
MehrE-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
MehrFarb-, 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
MehrCSS. 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
MehrCascading 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
MehrIT- 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,
MehrCascading 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
MehrDigitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
MehrCSS - 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
MehrCSS 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,
MehrPraktikum 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
MehrAllgemein. CSS Angaben sollten immer im Head-Bereich einer HTML-Datei definiert werden.
C S S Cascading Style-Sheets Allgemein Mit HTML wird lediglich der grundsätzliche Aufbau einer WWW-Seite definiert. HTML ist eigentlich nicht dazu gedacht, exakt anzugeben, wie ein Element genau aussehen
MehrDigitale 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
MehrHTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
MehrAufbau 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Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011
Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten
Mehr3 XML, HTML und XSL die Ausgabe
3 XML, HTML und XSL die Ausgabe XML und VBA lernen ISBN 3-8273-1952-8 Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige
MehrEine 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:
MehrHTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
MehrÜbung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
MehrAllgemeine 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-,
Mehr1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel
Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung
MehrAllgemeine 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
MehrCSS-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
MehrKennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
MehrHTML 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
MehrMitschrift 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
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 4 Vorlesung 2 4.1 Der Einstieg in das World Wide Web................ 2 4.1.1 Suchmaschinen........................
MehrCSS - 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,
MehrIntroduction 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
MehrGrundlagen-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:
MehrHTML Cascading Style Sheets
Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht
MehrHTML & 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,
MehrKapitel 17: CSS. Inhalt. Was kann CSS? (1) Was kann CSS? (2) 1. Einführung CSS. 2. Farben, Hintergründe, Zeichensätze. 3. Gruppierungen. 4.
17. CSS - Cascading Style Sheets 17-1 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze Kapitel 17: CSS 3. Gruppierungen 4. Box-Modell 5. Validierung
MehrErgänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
MehrÜ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:
MehrKennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
Mehr17. CSS - Cascading Style Sheets Kapitel 17: CSS
17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung
MehrCascading Style Sheets Sabine Grötz
CSS Cascading Style Sheets Sabine Grötz 1 Was ist CSS? CSS ist eine Formatvorlagensprache, welche die Möglichkeit bietet, Stilelemente wie Farben und Schriftarten, sowie die Aufteilung von Text und Bildern
MehrPublizieren 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
MehrComputergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
MehrANWENDUNGSSOFTWARE 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 ,
MehrCSS - 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
MehrRichtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
MehrHTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 13 Vorlesung 2 13.1 Cookies................................ 2 13.2 XML.................................. 3 13.3 WAP
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 8 Vorlesung 2 8.1 Frames................................. 2 8.2 Eingebettete Frames......................... 6 8.3
Mehr1 Vorbemerkungen CSS in HTML einbinden... 3
CSS Kurs 1 Vorbemerkungen... 1 2 CSS in HTML einbinden... 3 2.1 Formate zentral für eine HTML-Datei definieren... 3 2.2 Formate zentral in separater CSS - Datei definieren... 3 2.3 Formate innerhalb eines
MehrInhalt. 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,
MehrDie 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
MehrSeminar 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
MehrDigitale Medien 4. STYLESHEETS, CSS
Digitale Medien 4. STYLESHEETS, CSS Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie
Mehr<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
MehrVeranstaltung 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
MehrCSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
MehrFormatierung 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.
MehrHTML- 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)
MehrHTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
MehrSeiten 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
MehrAufbau 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Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:
1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 5 Vorlesung 2 5.1 Weitere Tags............................. 2 5.1.1 Textausrichtungen und Absatzgestaltung.........
MehrCAS 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
MehrDML Befehl: UPDATE II
HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit
MehrDie Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
MehrCSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
MehrStyling für Webseiten
Seite 1 Dies ist die deutsche Übersetzung des Tutorials zu CSS "Adding a touch of style" vom 8. April 2002 von Dave Raggett. Dave Raggett arbeitet für das World Wide Web Consortium (W3C) und ist einer
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 12 Vorlesung 2 12.1 Weitere Style-Sheet-Befehle..................... 2 12.1.1 Einzelne Tags verändern...................
Mehr3. 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,
MehrKapitel 10: Cascading Style Sheets
10. Einführung in CSS Cascading Style Sheets 10-1 Kapitel 10: Cascading Style Sheets Literatur: Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN 3-540-64700-7, 641 Seiten. Eric Ladd,
MehrVorlesungsinhalte. 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
MehrCascading 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
MehrGrundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann
Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann Inhaltsverzeichnis 2 Vorlesung 2 2.1 Einige technische Grundlagen.................... 2 2.1.1 Das Internet-Protokoll (IP).................
MehrCSS 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:
MehrCSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -
// = 3) version = "n3"; if (browsername == "Netscape" && browserver >= 4) version = "n4"; if (browsername == "Microsoft Internet Explorer" && browserver >= 3.01 && browsermac!= -1) version = "ie3m"; if
MehrInstallationsbeschreibung des Homepagekalenders
Installationsbeschreibung des Homepagekalenders Bitte beachten Sie: Um den Homepagekalender (im Folgenden HPK) als kostenlosen Service installieren zu können, müssen Sie registrierter Anbieter im Umweltkalenders
MehrEasyHTML v1.0. Eine vereinfachte Seitenbeschreibungssprache
EasyHTML v1.0 Eine vereinfachte Seitenbeschreibungssprache Stand: August 2002 EasyHTML 1.0 Inhaltsverzeichnis 1. Systemvoraussetzungen a. Server b. Client 2. Struktur der Sprache, Einbindung 3. Funktionen
MehrCascading Style Sheets
Jan-Hendrik Terstegge Ernst-Barlach-Gymnasium Unna Jahrgangsstufe 12.2 2001/2002 Cascading Style Sheets Grundlagen und Implementation sowie praktische Anwendung am Beispiel des Informatikbereichs der PGU-Homepage
MehrKapitel 3 Was für die Optik: Formatierungen mit CSS
Kapitel 3 Was für die Optik: Formatierungen mit CSS Kapitel 3 Was für die Optik: Formatierungen mit CSS Genügend oft hast du im letzten Kapitel den Satz gehört: aber diese Formatierung lässt sich mit CSS
MehrHintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.
HTML 8 Vorbereitung Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben!
MehrDigitale 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
MehrDigitale 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
MehrUm 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
MehrCascading Style Sheets Tutorial
Cascading Style Sheets Tutorial Christian Felken Webmaster Resource www.webmaster-resource.de 1 www.webmaster-resource.de Inhalt Cascading Style Sheets Tutorial 1 1 HTML und CSS 7 1.1 Warum Cascading Style
MehrSelektoren 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:
MehrDer CSS-Problemlöser
Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1
MehrCSS - Cascading Style Sheets (Level 3) Grundlagen. Marc Haunschild. 2. Ausgabe, Oktober 2014 CSS3
Marc Haunschild 2. Ausgabe, Oktober 2014 CSS - Cascading Style Sheets (Level 3) Grundlagen CSS3 5 CSS - Cascading Style Sheets (Level 3) - Grundlagen 5 Texte gestalten In diesem Kapitel erfahren Sie wie
Mehr