CSS - Cascading Style Sheets (Level 3) Grundlagen. Marc Haunschild. 2. Ausgabe, Oktober 2014 CSS3
|
|
|
- Nicolas Gehrig
- vor 7 Jahren
- Abrufe
Transkript
1 Marc Haunschild 2. Ausgabe, Oktober 2014 CSS - Cascading Style Sheets (Level 3) Grundlagen CSS3
2 5 CSS - Cascading Style Sheets (Level 3) - Grundlagen 5 Texte gestalten In diesem Kapitel erfahren Sie wie Sie Text vertikal und horizontal ausrichten wie Sie Text hervorheben wie Sie die Textabstände und die Zeilenhöhe verändern wie Sie Texteinzüge erzwingen wie Sie die Leserichtung eines Textes ändern Voraussetzungen Erstellen und Einbinden von Stylesheets Selektoren 5.1 CSS-Eigenschaften zur Textgestaltung Die Gestaltung der Schrift (Typographie) beeinflusst maßgeblich die Lesbarkeit und damit die Verständlichkeit Ihrer Texte und unterstützt ein einheitliches und stimmiges Gesamtbild. Wenn Sie zu viele unterschiedliche Schriften einsetzen, kann eine Webseite auch unruhig oder unordentlich aussehen. Die folgenden CSS- Eigenschaften dienen der Gestaltung von Texten: text-align, vertical-align letter-spacing, word-spacing text-transform text-indent text-decoration white-space line-height text-shadow 5.2 Text ausrichten Horizontale Ausrichtung mit text-align Hiermit steuern Sie die horizontale Ausrichtung innerhalb eines Elements. text-align: Wert; Werte left für linksbündige Ausrichtung (Standard) Standardwert left right für rechtsbündige Ausrichtung center für zentrierte Ausrichtung justify für Ausrichtung als Blocksatz Vererbbar Anwendbar auf Ja Alle Block-Elemente Diese Eigenschaft wirkt sich nur auf Block-Elemente aus, beispielsweise address, blockquote, dl, div, fieldset, form, h1 bis h6, hr, ol, p, pre, table und ul. 54 HERDT-Verlag
3 Texte gestalten 5 Beispiel: kap05\text-align.htm Drei aufeinanderfolgende Absätze werden rechtsbündig, linksbündig und im Blocksatz ausgerichtet. Zum leichteren Verständnis werden die Klassen entsprechend benannt. <html lang="de"> <head> <title>text-align</title> <style type="text/css"> body { font-family: Georgia,Times,"Times New Roman",serif; text-align:justify; h1 { font-size:18px; text-align:center;.rechts { text-align:right;.links { text-align:left; </style> </head> <body> <h1>änderung der Eigenschaft "text-align"(texte ausrichten)</h1> <p class="rechts">die Angabe von <b>text-align:right</b> bewirkt eine rechtsbündige Ausrichtung.</p> <p class="links">standardmäßig wird Text linksbündig ausgerichtet: <b>text-align:left</b>.</p> <p>blocksatz wird folgendermaßen festgelegt: <b>text-align:justify</b>. Da Sie das Ergebnis am besten bei vielen Zeilen sehen können, folgt ein platzfüllender Blindtext ohne weitere Bedeutung:[ ]</p> </body> </html> Über body definieren Sie die grundsätzliche Schriftformatierung des Dokuments. Diese wird an alle eingeschlossenen Elemente (Nachfahren) weitervererbt. Überschriften h1 werden zentriert mit größerer Schrift hervorgehoben. Elemente, denen die Klassen rechts und links zugewiesen werden, werden entsprechend horizontal ausgerichtet. Nach der zentrierten Überschrift wird der Inhalt des ersten Absatzes rechtsbündig, der Inhalt des zweiten Absatzes linksbündig ausgerichtet. Der letzte Absatz besitzt keine Klasse. Er wird so dargestellt, wie für den gesamten body in festgelegt. Der Text ist dank text-align: justify links und rechts bündig (Blocksatz). Unterschiedliche Ausrichtungsarten Vertikale Ausrichtung mit vertical-align Hiermit legen Sie die vertikale Ausrichtung innerhalb eines Inline-Elementes fest, also wie sich kleiner Text in einer Zeile zu größerem Text in derselben Zeile verhalten soll oder wie Text neben einem Bild dargestellt wird. Außerdem können tabellarische Daten innerhalb einer Tabellenzeile vertikal ausgerichtet werden. Mit vertical-align sind keine Ausrichtungen in Block-Level-Elementen (z. B. div) möglich. vertical-align: Wert; HERDT-Verlag 55
4 5 CSS - Cascading Style Sheets (Level 3) - Grundlagen Mögliche Werte für diese Eigenschaft sind: Werte top = richtet alle Elemente am oberen Rand aus bottom = richtet alle Elemente am unteren Rand aus text-top = Ausrichtung am oberen Rand des Textes text-bottom = Ausrichtung am unteren Rand des Textes baseline = richtet alle Elemente an der Grundlinie aus middle = standardmäßige mittlere Ausrichtung sub = das Element wird tiefgestellt super = das Element wird hochgestellt Prozentangabe Standardwert baseline Vererbbar Anwendbar auf Nein Inline-Elemente, wie z. B. a, acronym, br, em, img, input, small, span, strike, strong, textarea; zusätzlich auf td Eine positive oder negative Prozent- oder Zahlenangabe verschiebt das Element entweder über oder unter die Grundlinie. Beispiel: kap05\vertical-align.htm Für die Anzeige der Ausrichtungsarten müssen kleine Elemente an einem großen Element ausgerichtet werden. Dazu erstellen Sie einen Absatz, dessen Inhalt unterschiedliche Schriftgrößen aufweist. <html lang="de"> <head> <title>vertical-align</title> <style type="text/css"> body, td { font:12px Georgia,Times,"Times New Roman",serif; table { width: 500px; height: 100px; border-collapse: collapse; td { border: 3px solid #333; </style> </head> <body> <h1>ausrichtungen mit vertical-align</h1> <p style="font-size:36px;">baseline, normal <span style="font-size:12px;"> <span style="vertical-align:top;">top</span> <span style="vertical-align:middle;">middle</span> <span style="vertical-align:bottom;">bottom</span> <span style="vertical-align:-10%;">-10%</span> <span style="vertical-align:75%;">75%</span> </span></p> <p>es folgt ein hochgestellter Text: <span style="vertical-align:super;">vertical-align:super.</span></p> <p>es folgt ein tiefgestellter Text: <span style="vertical-align:sub;">vertical-align:sub.</span></p> <table> <tr> 56 HERDT-Verlag
5 Texte gestalten 5 <td style="vertical-align:top;">dieser Text ist in der Zelle oben ausgerichtet.</td> <td style="vertical-align:bottom;">dieser Text ist in der Zelle unten ausgerichtet.</td> </tr> </table> </body> </html> Der Inhalt des Absatzes wird grundsätzlich in der Schriftgröße 36 Pixel dargestellt. Die von span umfassten Inhalte werden in der Größe 12 Pixel angezeigt. Durch die unterschiedliche Schriftgröße in einem Absatz ist es möglich, die Inhalte einzeln vertikal auszurichten. Die Ausrichtung erfolgt dabei am vorangegangenen Text, der mit 36 Pixeln eine bestimmte Höhe einnimmt. An dieser Höhe kann der kleiner formatierte Inhalt oben, mittig und unten ausgerichtet werden. Auch die Prozentangaben sind möglich. In diesem Absatz wird ein Teil des Textes hochgestellt. Hier wird der Text tiefergestellt. Am besten ist die vertikale Ausrichtung in Tabellenzellen sichtbar. Durch die vorgegebene Tabellenhöhe von 100 Pixeln werden die Zellen nicht voll ausgefüllt. Die Angabe der CSS-Eigenschaft ermöglicht somit das unterschiedliche Ausrichten des Textes in den Zellen. Unterschiedliche vertikale Ausrichtungsarten Vertikal zentrieren Um Texte oder Elemente vertikal zu zentrieren, bietet CSS außerhalb von Tabellenzellen keine offensichtliche Möglichkeit. Wie Sie bestehende Eigenschaften dafür nutzen können, zeigen die folgenden Beispiele: Einzeiliger Text, zum Beispiel ein Wort als Beschriftung eines Buttons, richten Sie in der Höhe mittig aus, indem Sie identische Werte für die Höhe des Buttons und der Zeile angeben..button { height: 2em; line-height: 2em; Sie haben auch die Möglichkeit, einem Element zu sagen, dass es sich wie eine Tabellenzelle verhalten soll. Dazu benutzen Sie die Display-Eigenschaft.vertical-alignment { display: table-cell; vertical-align: middle; Unter finden Sie sechs Methoden. Prüfen Sie die Methoden und verwenden Sie diejenige, die am besten zu Ihrer Umgebung passt. Viele Erklärungen finden Sie in englischer Sprache. Dank der einfachen Codebeispiele, die Sie in Ihr eigenes Projekt kopieren und damit experimentieren können, ist die Seite auch mit geringen Englischkenntnissen gut nutzbar. HERDT-Verlag 57
6 5 CSS - Cascading Style Sheets (Level 3) - Grundlagen Die Sprache (deutsch) wird angegeben. Eine Liste aller Sprachen finden Sie unter Mit hyphens: auto aktivieren Sie die automatische Silbentrennung für alle Texte in Artikeln. Die Worte in Artikeln werden den Regeln der angegebenen Sprache entsprechend getrennt. Nicht immer sorgt der Automatismus für eine korrekte Trennung. Wenn Sie vermeiden wollen, dass sich dies negativ auf Ihre Reputation auswirkt (insbesondere wenn sich Ihre Website mit Sprache oder verwandten Themen beschäftigt), sollten Sie sich nicht auf den Browser verlassen. Besonders lange Wörter können das Layout negativ beeinflussen. Sie haben die Möglichkeit, händisch ein HTML-Entity mitzugeben, das dem Browser mitteilt, wo ein Wort zu trennen ist. Dies ist ein benanntes Entity und wird wie folgt notiert: Beispiel: Donau dampf schiff fahrts gesellschaft Obwohl das mühsam ist, hat es doch einen Vorteil: Sie bestimmen exakt, welche Wörter wo getrennt werden dürfen. Da Sie das meist nur bei sehr langen Wörtern benötigen, ist dieses Vorgehen durchaus praktisch nutzbar. Bedenken Sie auch, dass im Quelltext das Wort "Donaudampfschifffahrtsgesellschaft" nicht mehr vorkommt, wenn Sie die Entities eingefügt haben. Google andererseits erkennt das Wort dennoch, so dass durch die Entities die Auffindbarkeit Ihrer Site in der Suchmaschine nicht leidet. 5.9 Übungen Übung 1: Theoriefragen zu Textabständen Übungsdatei: -- Ergebnisdatei: kap05\uebung1-2.doc Erläutern Sie den Unterschied zwischen einer Zeilenhöhe, einem Zeichenabstand und einem Wortzwischenraum. Wie groß sollte eine Zeilenhöhe in einem Fließtext mindestens sein, damit das Lesen am Bildschirm vereinfacht wird? Wovon ist die Zeilenhöhe abhängig? Übung 2: Lesbarkeit verbessern Übungsdatei: kap05\chalkidiki.htm Ergebnisdateien: kap05\uebung3.htm, kap05\uebung4.htm, kap05\uebung5.htm, kap05\uebung6.htm Erweitern Sie die Webseite zur Geschichte Chalkidikis aus dem vorherigen Kapitel. Verdoppeln Sie die Zeilenhöhe der Überschrift. Zentrieren Sie die Überschrift. Die Abstände der einzelnen Absätze setzen Sie auf 150 %, die Zeichenabstände erweitern Sie um jeweils einen Pixel. Rücken Sie die einzelnen Absätze um 50 Pixel ein. 68 HERDT-Verlag
7 Texte gestalten 5 Das Endergebnis der Übung im Browser Firefox HERDT-Verlag 69
CSS - Cascading Style Sheets (Level 3) Grundlagen. Marc Haunschild. 1. Ausgabe, 1. Aktualisierung, April 2012 CSS3
CSS - Cascading Style Sheets (Level 3) Marc Haunschild Grundlagen 1. Ausgabe, 1. Aktualisierung, April 2012 CSS3 CSS-Syntax und Selektoren 3 3.2 Wie Browser Ihre Webseite untergliedern Für den richtigen
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...
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
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.
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
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 ,
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
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
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
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
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
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
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
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...
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,
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
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
Ü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:
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
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
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
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
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
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. 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
Ü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
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:
Der 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
Ü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
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-,
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
Kennen, 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...
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
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
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,
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
<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
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
Ü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
Aufbau einer Tabelle
Aufbau einer Tabelle : leitet Tabelle ein border="wert": legt Umrandung fest : beendet die Tabelle : definiert eine Zeile : definiert eine Zelle Beispiel: dies
Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt
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 & 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
Navigation für Internetpräsenzen
Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben
CSS Einführung & CSS Frameworks
CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen
Fließlayout. »World of Fish«
Fließlayout 4»World of FishWorld of Fish«stellt ein kleines Informationsangebot zu einem begehbaren Aquarium dar, und dieses Angebot soll von uns umgesetzt werden. Im Vorfeld haben wir wie immer ein Konzept
HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.
HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ
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
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:
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
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
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
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
Einführung in HTML. Ich bin der Seiteninhalt
Einführung in HTML 1 Grundstruktur einer HTML-Seite HTML-Dateien sind reine Text-Dateien, dh sie können in einem beliebigen Editor geschrieben werden und müssen lediglich mit der Endung html versehen werden
Navigationsmenü im Stil von Registern
Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben
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
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
Ü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:
HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.
HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm
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
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
Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS
Inhalt Vorwort 13 Teil I CSS kennenlernen: Einstieg in XHTML und CSS 1 Auf die Plätze 17 1.1 Wozu CSS lernen? 18 1.2 Wem nützt dieses Buch? 19 1.3 Wie funktioniert dieses Buch? 19 2 Was Sie wissen sollten
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
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
Einführung in HTML. Hui Dai
Einführung in HTML Hui Dai Grundgerüst einer HTML-Datei HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle
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
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung.
Bootstrap4 Layout Komponenten Teil 2 Inhalt: 1. Card 2. Accordion 1)cards In der Bootstrap Version 3 gab es die cards noch nicht. Dort wurden noch panels eingesetzt. In Bootstrap 4 wurde die Komponente
Ü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,
Inhalt: 1)Header-Widget, 2)Footer-Widget, 3)Buttons, 4)Übung: Wohnungskauf, 5)Controlgroups, 6)Listview, 7)Panel-Widget
jquery 3 Inhalt: 1)Header-Widget, 2)Footer-Widget, 3)Buttons, 4)Übung: Wohnungskauf, 5)Controlgroups, 6)Listview, 7)Panel-Widget Erstelle folgendes einfache Beispiel mit einem Header, einem Content und
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
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
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
Absatzformate. Die Absatzmarke
Absatzformate Zeichenformatierungen wirken sich auf das aktuelle Wort oder auf einen markierten Textblock aus. Absatzformate hingegen gestalten immer den gesamten Absatz, in dem der Cursor steht, oder
XSL-FO XSL Formatting Objects
XML-Praxis XSL-FO XSL Formatting Objects Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Funktionsweise von XSL-FO Seitendefinitionen Areas block- und inline-elemente Fonts XSLT und XSL-FO XML-Praxis
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery Für unser Miniredaktionssystem, das wir im Laufe der nächsten Wochen / Monate entwickeln werden, verwenden wir eine der Website
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
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
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
HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild. 4. Ausgabe, 1. Aktualisierung, Mai 2017 ISBN HTML5
HTML5 Marc Haunschild 4. Ausgabe, 1. Aktualisierung, Mai 2017 ISBN 978-3-86249-701-0 Grundlagen der Erstellung von Webseiten HTML5 4 Erste optische Anpassungen mit CSS 4 4. Erste optische Anpassungen mit
Ändern der Schriftgröße für den Monitorexport
Ändern der Schriftgröße für den Monitorexport (Stand: 12/2017) In der Datei SUBST_ MO NITOR sind einige wenige Einträge zu ändern. Die Datei finden Sie im Programmverzeichnis von Untis: Wenn Sie diese
Texte erstellen und bearbeiten mit Word 2007
Texte erstellen und bearbeiten mit Word 2007 ISBN 978-3-938178-87-4 HM-WW07TEB Autoren: Sabine Spieß, Charlotte von Braunschweig Inhaltliches Lektorat: Ortrun Grill 1. Ausgabe vom 14. Januar 2008 HERDT-Verlag
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
Web und Multimedia. HTML 4.x, Teil 2. Quelle: Hess HTML4
Web und Multimedia HTML 4.x, Teil 2 Quelle: Hess HTML4 1 Inhalte Einführung in HTML Textgestaltung - HTML - Cascading Style Sheets Screenlayout - HTML (Tabellen) - Frames - Cascading Style Sheets Hyperlinks
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
Classangaben für die in CMS Imperia gepflegten Webseiten der FernUniversität
1 Classangaben für die in CMS Imperia gepflegten Webseiten der FernUniversität Class-Angaben können im Editorfenster von Imperia über den Icon ID/Class verwen- det werden, aber auch indem im Quelltext
Eine Linkliste in Word anlegen und zur Startseite des Browsers machen
Eine Linkliste in Word anlegen und zur Startseite des Browsers machen In dieser Anleitung wird beschrieben, wie man mit Word eine kommentierte Linkliste erstellt und diese im Internet Explorer bzw. in
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
Umsetzen einer skalierbaren horizontalen Navigation:
Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer
Auf einen Blick. Vorwort Einführung in CSS Grundlegende Konzepte von CSS Die Zukunft von CSS Browser-Kompatibilität 97
Auf einen Blick Vorwort 13 1 Einführung in CSS 17 2 Grundlegende Konzepte von CSS 41 3 Die Zukunft von CSS 81 4 Browser-Kompatibilität 97 5 CSS in der Praxis 133 6 Beispiele 271 7 Tools für CSS 355 8 Die
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
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
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
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
FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab
FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3
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,