3. Zeichen und Schrift
|
|
|
- Anton Bauer
- vor 7 Jahren
- Abrufe
Transkript
1 3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung Tabellen Cascading Style Sheets Framesets Medieneinbettung Weitere Informationen: Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-99
2 Cascading Style Sheets (CSS) Von HTML prinzipiell unabhängige Sprache zur Beschreibung von Formatierungsinformation Standardisierung durch W3C Besonders für HTML geeignet Entstehungsgeschichte: Vielzahl von "Standard-Attributen" in vielen HTML-Elementen (align, pos, color, font,...) Vereinheitlichung in CSS (aktuelle Version 2.0) In HTML 4.0 wird die Ablösung "alter" Konstrukte zugunsten einheitlicher CSS-beschriebener Styles forciert. Universalattribut style Alte Schreibweise (nicht mehr empfehlenswert): <p><font size="7">text</font></p> Neue Schreibweise mit CSS-Syntax: <p style="font-size:250%">text</p> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-100
3 CSS-Eigenschaften, Beispiel Schriftformatierung CSS-Syntax: Eigenschaft-Wert-Paare Beispiel: font-size:250% Umfangreiche Liste an Eigenschaften und Maßeinheiten Eigenschaften zur Schriftformatierung: font Zusammenfassung anderer Eigenschaften font-family Gewünschte Schrift(en) mit Priorisierung font-style Kursiv / normal font-variant Kapitälchen (small caps) / normal font-size Größe (numerisch oder ungenau) font-weight Strichstärke (fett / mager) font-stretch Laufweite word-spacing Wortabstand letter-spacing Zeichenabstand color Farbe... Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-101
4 CSS-Syntax Eigenschaft-Wert-Paar Eigenschaft : Wert z.b. font-style:italic Wenn als Wert eines HTML-Attributs: Anführungszeichen "" empfehlenswert Mehrere Eigenschaft-Wert-Paare Abtrennen mit Strichpunkt z.b. font-style:italic; font-size:large; Anführungszeichen für Werte (z.b. bei Leerzeichen im Wert) Einfache Anführungszeichen ' ' z.b. font-family:'times New Roman' Mehrere Werte (Sequenz) für eine Eigenschaft Abtrennen mit Komma z.b. font-family:'times New Roman', 'Times', serif Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-102
5 Weitere CSS-Eigenschaften Schriftformatierung (auch mit Schriftartendatei) Ausrichtung und Absatzkontrolle Außenrand und Abstand Innenabstand Rahmen Hintergrundfarben und -bilder Listenformatierung Tabellenformatierung Pseudoformate z.b. link, visited, focus Positionierung und Anzeige von Elementen Layouts für Printmedien Sound-Kontrolle für Sprachausgabe Anzeigefenster Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-103
6 Einbindung von CSS in HTML (1) Individuell formatieren: Universelles style-attribut für alle HTML-Tags z.b. <p style="font-weight:bold; font-size:200%"> Beispieltext</p> Zentrale Stildefinitionen: Festlegung der Style-Attribute für Standard-HTML-Elemente z.b. body {margin-left:100px; } h1 { font-size:48pt; font-style:italic; border-bottom:solid thin black; } p,li { font-size:12pt; line-height:14pt; font-family:helvetica,arial,sans-serif; letter-spacing:0.2mm; word-spacing:0.8mm; color:blue; } Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-104
7 Einbindung von CSS in HTML (2) Ablage von zentralen Stildefinitionen im Kopfbereich der HTML-Datei <style type="text/css">... Stildefinitionen... </style> Wegen Problemen älterer Browser oft Stildefinitionen als Kommentar Ablage von zentralen Stildefinitionen in separater CSS-Datei (.css) Enthält nur Stildefinitionen, kein HTML Einbindung in HTML-Dateien: <link rel="stylesheet" type="text/css" href=dateireferenz> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-105
8 Beispiel zu CSS (Variante 1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>beispiel zu CSS</title> <style> p {font-family:verdana; font-size:16pt} h1 {font-family:verdana; color:green} </style> </head> <body> <h1>überschrift 1</h1> <p>absatz 1</p> <h1>überschrift 2</h1> <p>absatz 2</p> <h1>überschrift 3</h1> <p>absatz 3</p> </body> </html> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-106
9 Beispiel zu CSS (Variante 2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>beispiel zu CSS</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>überschrift 1</h1> <p>absatz 1</p> <h1>überschrift 2</h1> <p>absatz 2</p> <h1>überschrift 3</h1> <p>absatz 3</p> </body> </html> Datei styles.css (im gleichen Verzeichnis): p {font-family:verdana; font-size:16pt} h1 {font-family:verdana; color:green} Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-107
10 Selbstdefinierte Stilklassen Eigene Stilklassen (außer den HTML-Elementen) können frei definiert und verwandt werden Deklaration bei der Stildefinition (mit dem Namen vorangestelltem Punkt) z.b..navigation {font-size:16pt; color:blue; } Anwendung mit dem universellen class-attribut aller HTML-Tags z.b. <li class="navigation">home</li> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-108
11 Blockweise Formatierung mit CSS Ganze Textbereiche einheitlich formatieren Verwendung des Inline-Elements <span>... </span> Keinerlei Effekt auf die Dokumentstruktur Kann Text oder andere Inline-Elemente enthalten Völlig äquivalent zur Wiederholung der angegebenen Stilangaben bei allen enthaltenen HTML-Elementen (mit style) Verwendung des allgemeinen Blockelements <div>... </div> Kann Text oder andere Blockelemente enthalten, z.b. auch Grafiken Weitergabe der angegebenen Stilangaben zu allen enthaltenen HTML- Elementen Kann mit der CSS-Eigenschaft position absolut positioniert werden Kann mit Skripten ein- und ausgeblendet werden Anmerkung: Oft benannt nach dem alten Netscape-spezifischen Element "layer" Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-109
12 Beispiel zu selbstdefinierten Stilklassen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>beispiel zu CSS: Selbstdefinierte Klassen</title> <link rel="stylesheet" type="text/css" href="styles1.css"> </head> <body> <p>dies ist ein ganz normaler Absatz ohne spezielle Formatierung. </p> <p class="merksatz">dies ist ein Merksatz, speziell formatiert mit Hilfe von CSS.</p> <p>dies ist wieder ein ganz normaler Absatz.</p> <span class="programm"> <p>dies sind zwei aufeinander folgende Absätze, die speziell formatiert werden.</p> <p>dies ist der zweite solche Absatz.</p> </span> </body> </html> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-110
13 3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung Cascading Style Sheets Tabellen Framesets Medieneinbettung Weitere Informationen: Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-111
14 Framesets Einteilung einer Seite in separate Segmente (frames) Die Gesamtseite definiert ein so genanntes frameset. Jedes Einzelframe liegt in einer Einzeldatei. Anzeige der Frames ist unabhängig voneinander (werden separat geladen). Grundgerüst eines Framesets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>text des Titels</title> </head> <frameset...> <!-- Frameset-Definition --> <frame...> <!-- Framefenster-Definition --> <noframes> Wird angezeigt, wenn der Browser keine Frames anzeigen kann </noframes> </frameset> </html> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-112
15 Beispiel: Basisdatei eines Framesets <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>beispiel zu Frames</title> </head> <frameset cols="250,*"> <frame src="verweise.html" name="navigation"> <frame src="startseite.html" name="daten"> <noframes> Ihr Browser kann diese Seite leider nicht anzeigen! </noframes> </frameset> </html> Aufteilung der Seite: Horizontal (rows) oder vertikal (cols) In absoluten (Pixel-)Zahlen oder prozentual "*" = Rest der Fläche Komma-getrennte Liste Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-113
16 Anzeige von Inhalten in Framesets Bei Verweisen kann mit dem target-attribut festgelegt werden, in welchem Frame die Anzeige erfolgt. Beispiel: Datei "verweise.html" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>text des Titels</title> </head> <body> <h1>navigation</h1> <p> <a href="allgem.html" target="daten"><b>allgemeines</b></a><br> <a href="styles.html" target="daten"><b>styles</b></a><br> <a href="table.html" target="daten"><b>tabellen</b></a> </p> </body> </html> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-114
17 Vor- und Nachteile von Framesets Vorteile: Elegante Gestaltungsmöglichkeiten Navigationshilfen bleiben auch beim Blättern in angezeigter Information am gleichen Platz Nachladen von Einzelinformation u.u. schneller als ohne Frames Parallele Anzeige von Information z.b. zu Vergleichszwecken Nachteile: Inkompatibilität mit älteren Browsern Gesamtladezeit schlechter als ohne Frames Einzelansichten nicht mehr als Ganzes adressierbar» Bruch mit den Grundparadigmen von HTML? Suchmaschinen indizieren oft Teile von Framesets Empfehlungen: Frames nur da einsetzen, wo wirklich sinnvoll! Idealerweise Frame-freie Alternative (nicht nur Fehlertext) anbieten Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-115
18 Verwendung des "target"-attributs Werte für "target"-attribut in Links (Anchor-Tag <a>): _blank = Verweis in neuem Fenster öffnen _self = Verweis im gleichen Fenster öffnen _parent = aktuelles Frameset beim Ausführen des Verweises sprengen _top = alle Framesets beim Ausführen des Verweises sprengen "target" auch außerhalb von Framesets anwendbar _blank Beispiel: Hier ist ein <a target="_blank" href="allgem.html">link</a>, der ein neues Fenster öffnet. Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-116
19 3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung Cascading Style Sheets Tabellen Framesets Medieneinbettung Weitere Informationen: Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-117
20 Integration von Bildern Bilder einbinden mit <img> Attribut src gibt Quelle an (auch von anderen Servern möglich) Achtung Copyright-Fragen! Größenangaben mit width und height Bei Angabe beider Werte Verzerrung möglich Bilder können auch als Inhalt eines Verweises vorkommen z.b. grafische Navigationsleisten <html>... <body> <h1>ein JPEG-Bild des Eiffelturms</h1> <p><img src="../demoimages/eiffelturm.jpg" width="350" alt="eiffelturm"> </p> </body> </html> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-118
21 Integration anderer Dateien Prinzipiell alle Dateien einbettbar mit dem <object>-tag als Hyperlinks Beispiel zu Sound: Achtung: nur in neuesten Browsern unterstützt Ältere Variante: <embed>-tag <p>sound-objekt <object data="../sounds/bgndmusic.mid" type="audio/midi"> Ihr Browser kann das Objekt leider nicht anzeigen! </object> </p> <p>sound als Link<br> <a href="../sounds/technobop.mid" type="audio/midi">bitte klicken!</a> </p> Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-119
22 MIME MIME = Multipurpose Internet Mail Extensions In HTML mit dem type-attribut an vielen Stellen angebbar (z.b. <link>, <object>) Erleichtert dem Browser (bzw. seinem Benutzer) die Entscheidung, wie Dateien zu behandeln sind Jeder Browser führt eine Liste der akzeptierten MIME-Extensions und Regeln für die Behandlung (z.b. speichern, Programm aufrufen) Liste siehe Syntax: Medientyp / Untertyp Medientypen: text, image, video, audio, application,... Untertypen, die auf dem Server auszuführen sind, beginnen meist mit x- Hersteller- (vendor-)spezifische Untertypen im speziellen Unterbaum "vnd." Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-120
23 Design vs. Flexibilität Aus gestalterischer Motivation werden oft folgende Konzepte verwendet: Feste Formatvorgaben für die Seite Spezial-Schriften Feste Schriftgrößen Frames Aufwändige grafische Elemente Die maximale Flexibilität in der Verwendung spricht für: Flexible Fenstergröße ( liquid design ) Unabhängigkeit von Schriftwahl Vom Benutzer bestimmbare Schriftgrößen Keine oder sehr eingeschränkte Benutzung von Frames Kleine, sparsame grafische Elemente Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-121
24 Barrierefreiheit von Webseiten Gesellschaftliche Funktionen des WWW: Wesentliches Medium für staatliche Informationsdienste und Bürgerservice Tendenziell besonders leicht zugänglich für Personen, die andere Zugänge nur schwer nutzen können (z.b. Behinderte) Generell ein demokratisches Medium, das für alle offen sein soll Nutzung des WWW bei eingeschränkten Wahrnehmungs- und Aktionsmöglichkeiten Seh- oder Hörbehinderung Leseschwäche, Aufnahme-, Lernschwäche Einschränkungen bei der Benutzung von zeigenden Eingabegeräten Richtlinien: Web Accessibility Initiative ( Beispiele: Ergänzung grafischer Information durch textuelle Beschreibung» Auch bei zeitabhängigen Medien (Untertitel zu Video) Benutzbarkeit mit Tastatur (d.h. auch mit Spracheingabe) Orientierung durch klare Struktur und kleine Textblöcke erleichtern Hoher Kontrast zwischen Vordergrund und Hintergrund Auslösung epileptischer Anfälle durch blinkende Inhalte verhindern Ludwig-Maximilians-Universität München Prof. Hußmann Digitale Medien 3-122
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift 3.2! Mikro-Typografie: Zeichensätze 3.3! Makro-Typografie: Gestalten mit Schrift 3.4! Hypertext und HTML!! (Fortsetzung)! Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML (Fortsetzung) Allgemeines Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift 3.2! Mikro-Typografie: Zeichensätze 3.3! Makro-Typografie: Gestalten mit Schrift 3.4! Hypertext und HTML!!! Allgemeines Textstrukturierung Tabellen
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift! 3.2! Mikro-Typografie: Zeichensätze! 3.3! Makro-Typografie: Gestalten mit Schrift! 3.4! Hypertext und HTML!!!!! Allgemeines! Textstrukturierung!
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML Ludwig-Maximilians-Universität München Prof.
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...
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
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...
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
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
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:
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
Übung 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
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
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
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
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
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1 Medien Zeichen, Text, Schrift 3.2 Mikro-Typografie: Zeichensätze 3.3 Makro-Typografie: Gestalten mit Schrift 3.4 Hypertext und HTML Allgemeines zu Hypertext HTML Textstrukturierung
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
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 ,
1 Ein erster Überblick 3
xiii I Grundlagen 1 Ein erster Überblick 3 1.1 CSS im Zusammenhang........................................3 1.2 Der eigentliche Zweck von CSS.................................4 1.3 Warum die meisten Tabellen
Ü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
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
Unterschied zwischen HTML & XHTML?
Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare
Ü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
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
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift 3.2! Mikro-Typografie: Zeichensätze 3.3! Makro-Typografie: Gestalten mit Schrift 3.4! Hypertext und HTML Allgemeines zu Hypertext HTML Textstrukturierung
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift 3.2! Mikro-Typografie: Zeichensätze 3.3! Makro-Typografie: Gestalten mit Schrift 3.4! Hypertext und HTML Allgemeines zu Hypertext HTML Textstrukturierung
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
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
3. Zeichen und Schrift
3. Zeichen und Schrift 3.1! Medien Zeichen, Text, Schrift 3.2! Mikro-Typografie: Zeichensätze 3.3! Makro-Typografie: Gestalten mit Schrift 3.4! Hypertext und HTML Allgemeines zu Hypertext HTML Textstrukturierung
Digitale Medien 4. STYLESHEETS, CSS
Digitale Medien 4. STYLESHEETS, CSS Vergangene Vorlesungen HTML-Grundlagen Wichtige HTML-Elemente Heute: Stylesheets Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie
Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
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
Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015
Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur
33 CSS in HTML einbinden
D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
Übung: Überschriften per CSS gestalten
Übung: Überschriften per CSS gestalten Teil 1: Umsetzung eines Layouts mit zwei Überschriften mit zwei verschiedenen Hierarchieebenen, ergänzt durch einen beschreibenden Textabsatz. Teil 2: Wie Teil 1,
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
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
Projektseminar "Texttechnologische Informationsmodellierung"
Projektseminar "Texttechnologische Informationsmodellierung" Markup- und Metasprachen Ziel dieser Sitzung Nach dieser Sitzung sollten Sie: Mit dem Begriffen Markupsprachen bzw. Auszeichungssprachen und
CSS-Klassen am Beispiel von List-Definitionen
CSS-Klassen am Beispiel von List-Definitionen Jobst-Hartmut Lüddecke 10. Oktober 2011 Zusammenfassung Es werden verschiedene CSS-Definitionen für den Tag vorgestellt. Diese CSS-Definitionen sollten
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
Dr. Thomas Meinike
Dr. Thomas Meinike thomas.meinike@et.fh-merseburg.de Fachhochschule Merseburg Fachbereich Elektrotechnik Studiengang Kommunikation und Technische Dokumentation Überblick Streifzug durch 10 Jahre Web Was
Ü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:
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können. Web-Seite wird langsamer geladen
Was ist ein Frame? Frames teilen Browser-Fenster in rechteckige Bereiche. Mehrere Web-Seiten können gleichzeitig angezeigt werden unabhängig voneinander gesteuert werden Web-Seite wird langsamer geladen
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-,
Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei
CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche
Workshop HTML5 & CSS3
Workshop HTML5 & CSS3 Weblayouts professionell umsetzen - ein Einstieg in die Frontendentwicklung Bearbeitet von Stephan Heller 1. Auflage 2012. Taschenbuch. XIV, 302 S. Paperback ISBN 978 3 89864 807
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,
HTML Cascading Style Sheets
Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht
Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S.
128 5XHTML&CSS* Wissensbaustein»CSS: ID-Attribut«(S. 180) Wissensbaustein»CSS: Umrandungen«(S. 182) Wissensbaustein»CSS: Füllungen & Abstände«(S. 185) Wissensbaustein»CSS: Pseudo-Klassen & -Elemente«(S.
Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6
ix Einleitung 1 Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design 1 So geht der Workshop vor 6 2 Vorbereitungen 8 2.1 Anlegen einer sinnvollen Ordnerstruktur... 9 2.2 Das brauchen
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 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
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
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
HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
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:
<html> <body> <h1>html ist ganz einfach!</h1> </body> </html> Marc Schanne HTML
HTML Überblick html ist ganz einfach! 1 HTML HTML ist eine Dokumentbeschreibungssprache, die logische Strukturen zur Beschreibung eines HTML-Dokuments beinhaltet.
HTML Spielend gelingt die Website
HTML Spielend gelingt die Website TOBIAS HAUSER CHRISTIAN WENZ HTML - PDF HTML - Spielend gelingt die Website Impressum Liebe Leserin, lieber Leser! 9 Wir legen los 11 Was ist HTML? 12 Browser 14 Editoren
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
1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel
Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung
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,
7 Tabellen. 7.1 Erstellen einer Tabelle. - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen
1 7 Tabellen - übersichtliches Gestalten von Websites - enorme Steigerung der Layoutmöglichkeiten durch Tabellen 7.1 Erstellen einer Tabelle Syntax: Inhalt1 Inhalt2 Kommentar
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS PL Speyer Daniel Jonietz 2011 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. Was ist XHTML? Textbasierte Auszeichnungssprache
Wir studieren HTML-Tags
Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
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
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
V by WBR1/BFH-TI 2011 by MOU2/BFH-TI
Java-Applets Unterlagen zum Modul OOP mit Java V 3.0 2007 by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets V3.0 2011 by WBR1&MOU2/BFH- TI Lernziele Die Kursteilnehmer sind in der Lage: Möglichkeiten und
Ü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:
Gestaltung von Head Bereich und Impressum bei der Partner-Website
1 Gestaltung von Head Bereich und Impressum bei der Partner-Website Dieser Ratgeber zeigt, wie Sie Texte in der Grösse anpassen, Stile und Formatierungen einfügen und ein eigenes Foto einbinden. 2 Webmaster-Alliance
CSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß
XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß 1 2 XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß Webseite zum Buch: www.comelio-medien.com/dedi3_568.php 2008 Comelio Medien 3 Alle
HTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
2. Webapplikationen. Webzugang. Präsentation. Geschäftslogik. Browser. Datenhaltung. JSP, Servlets, ASP, PHP. HTML + JavaScript? +Java Applets?
1 2. Webapplikationen Web Client Präsentation HTML + JavaScript? +Java Applets? Browser Cookies HTTP mit HTML+Cookies HTTP mit Formularinhalt und Cookie Server Webzugang JSP, Servlets, ASP, PHP Geschäftslogik
Kurzeinführung in XML. Was ist XML? Well-formed u. gültiges XML Erste Anwendung in XML Externe DTD Attribute und Entities Datenausgabe mit XSL
Kurzeinführung in XML Was ist XML? Well-formed u. gültiges XML Erste Anwendung in XML Externe DTD Attribute und Entities Datenausgabe mit XSL Was ist XML? XML steht für Extensible Markup Language XML ist
DML Befehl: UPDATE II
HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit
HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt
HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer
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
CSS Cascading Stylesheets
CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht