CSS Cascading Stylesheets
|
|
|
- Harry Bauer
- vor 9 Jahren
- Abrufe
Transkript
1 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 ihnen spezielle gewünschte Darstellungsmerkmale. Man stelle sich mal vor, man möchte die Schrift auf allen Seiten des Projekts durch eine andere ersetzen. Mit HTML müsste man überall die einzelnen Attribute des Textes ändern..was sehr aufwändig und mühsam ist. Mit CSS kann man das an einer einzigen Stelle festlegen und die gesamten Veränderungen erfolgen automatisch: WICHTIG: Eine gute Webseite trennt Inhalte und Struktur (HTML) vom Layout (CSS). Was kann CSS? a) CSS kann bewirken, daß spezielle Textarten (z. B. Bildunterschriften, Erläuterungen etc. Tabellen, Grafiken ) überall im Dokument in gewünschter Formatierung erscheinen, ohne daß diese jedesmal angegeben werden muß. b) Man kann alle Formatierungsanweisungen in einer speziellen Datei mit der Kennung ".css" ablegen, auf die alle Seiten einer Präsentation zugreifen. Änderungen dieser Datei verändern dann die gesamte Präsentation. c) CSS bietet Formatieroptionen, die weit über die Möglichkeiten von HTML hinausgehen. d) Weil im HTML-Code Formatieranweisungen entfallen können, werden die Seitentexte erheblich kürzer, was der Ladezeit für eine Seite zugute kommt. Beispiel 1 Wir legen eine eigene CSS Datei an, in der wir für jedes HTML Tag (z.b: <table> oder <p>) entsprechende Angaben über die Formatierung geben (z.b. die Textfarbe etc.) 1. Schritt: Erstelle folgende HTML Seite namens test.html. Überlege Dir, ob Du alle tags kennst und streiche gegebenenfalls Ausdrücke an, welche Dir nicht klar sind. <html> <head> <title>css-uebung</title> </head> <body> <h1>css-beispiel 1</h1> Die Hintergrundfarbe ist nun grundsätzlich für jeden body identisch.<br> <table> <tr><td><h1> Tabellenüberschrift </h1></td></tr> <tr><td><p> Der Text in diesem Abschnitt ist rot. </p></td></tr> <tr><td><p> Der Text in diesem Abschnitt ist ebenfalls rot, da er in einem <p> tag steht.</p></td></tr> <tr><td><a> Hier ist ein oranger Link </a></td></tr> </table> 1
2 </body> </html> 2. Schritt: Erstelle eine CSS Datei namens stylesheet.css. Die HTML-tags lassen sich nun ein dieser externen Datei für die gesamten HTML definieren. Beachte jeweils das Semikolon am Ende der Definitionen! body{ background-color:#c2f0eb; font-family:arial; h1{font-size:18px; p{color:#fc4303; a{color:#fca Schritt: Damit die ALyoutdefinitionen auch Auswirkung haben, muss die CSS Datei im HTML Dokument verknüpft werden (in jedem Dokument) und zwar im <head> Abschnitt ein: <head> <title>css-uebung</title> <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> </head> Falls die stylesheet.css Datei im gleichen Ordner wie test.html gespeichert wurde, musst man auch den Link so anpassen: href="stylesheet.css"> Beispiel 2 Meistens will man die Definitionen noch gezielter anpassen. Zum Beispiel soll der Text nicht in jedem <p> gleich aussehen. Erweitere die stylesheet.css Datei wie folgt: p.unwichtig{color:#1a0919; p.wichtig{color:#fc4303;..und andere das <p> tag im HTML Dokuments test.html folgendermassen ab: <p class= wichtig > Der Text in diesem Abschnitt ist rot. </p></td></tr> <p class= unwichtig > Der Text in diesem Abschnitt ist nun nicht mehr rot</p> Auch lässt sich der Link verfeinern!je nach Zustand ändert der Link seine Farbe z.b. hover (mit der Maus darüber fahren), active (während des Anklickens etc.) a:link{color:#f9b606; a:hover{color:#ecf90c a:active{color:#2716d6; a:visited{color:#0307f9 Am <a> muss hier nichts mehr geändert werden. 2
3 Auch für Tabellen gibt es unzählige Formatierungsmöglichkeiten. Ergänze das stylesheet.css wie folgt: table{ border:1px solid #12081E; background-color: #FBFCFA; td{ border-top: 1px dashed #BEBEAE; td.ueberschrift{ border-top: 1px none #12081E; background-color:#1c8988; color:#ffffff; text-align:center;..und ändere die benötigten Stellen im HTML Dokument test.html selbständig. 2. Grundprinzip Format Klassen Im obigen Beispiel haben wir sogenannte Format-Klassen definiert. Genauer ausgedrückt, man definiert zu einem Tag eine oder mehrere Klassen, indem man an den Tag-Bezeichner mit Punkt einen neu eigenen Klassen-Namen anhängt. p.gelb{color:yellow HTML-Tag Klassenname CSS Attribute Möchte man nicht nur für ein spezielles Tag sondern allgemeine Formatierung vornehmen, so lässt man einfach die Bezeichnung des Tags vor dem Punkt weg:.gelb{color:yellow Einbettung der CSS Datei in eine HTML Seite Damit die Datei mit den CSS Definitionen genutzt werden kann, muss Sie zuerst in die HTML Seite eigebunden werden. Dies geschieht mit der Angabe im <head> Teil der Seite: <LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css"> Die Nutzung der Format-Klassen geschieht mit einem speziellen HTML-Attribut, mit "class". Der Aufruf erfolgt ganz HTML-gemäß mit <tag CLASS="klassenbezeichner">... </tag>, beim Klassenbezeichner entfällt natürlich der führende Punkt. Ich habe außer dem obigen Definitionsteil im <head> nun hier folgend diese Aufrufe eingefügt: <p class="gelb"> Hier steht der Text </p> Einbettung Klassenname 3
4 3. Die wichtigsten CSS Attribute (unvollständig) px (Pixel): Feste Grösse bei Längenangangaben. Vorteil: Immer gleich gross. Nachteil: Beim Skalieren im Browser keine Veränderung. em: Grösse relativ zur übergeordneten Grösse. Wenn z.b. die Schriftgrösse im body mit 16px festgelegt wird, so entspricht 1em= 16px. 2em entspricht 32px etc Vorteil: Beim Skalieren (z.b. Browserinhalt) bleiben die Verhältnisse gleich. %: Relative Grösse zum übergeordneten Element. Vorteil: Skalierbar. Nachteil: Fortlaufende Skalierung (wenn Angabe in übergeordnetem Element =80%, so beträgt die Skalierung bei erneuter Definition von 80% dann nur noch 64%. font-size : 10px font-family : arial ; font-style : italic ; font-weight : bold ; color : text-align: center; text-decoration: none; background-color: #fff666; background-image: url(header.jpg); background-repeat: repeat-y; border-bottom: 1px solid #345fff; border-top: border-left: border-right: border: 1px none #fff034; width: 650px height : 30% margin-left: 3px ; margin-right: 3px ; margin-bottom: 3px ; margin-top: 3px ; margin : 3px 3px 4px 5px ; margin : 0px 2px auto padding : 3px 3px 4px 5px ; list-style-type: none; float: right; clear: left; position: relative; display: inline; a : hover{.. a : active{.. a : link{.. a : visited{.. Schriftgrösse: em, px, % Schriftart: Arial, Helvetica, Schriftstil: italic, normal, oblique. Schriftgewicht: bold, lighter, normal,... Schriftfarbe Postition innerhalb des Blockelements : left,center, right Spezielle Textformatierung: underline, etc.. Hintergrundfarbe im jeweiligen Blockelement. Hintergrundbild. Repetition des Hintergrundbildes: no-repeat, repeat-y, repeat-x; Rahmen des jeweiligen Blockelements: Dicke, Art, Farbe. Dicke: Art: solid, dashed, Farbe: Breite und Höhe des Blockelements: em, px, % Aussenabstand zum übergeordneten Blockelement (Ebene, body etc.) Einheiten: px, em Kurzschreibweise (zusammengefasst) auto legt die Werte automatisch und identisch fest (hier links und rechts, also zentriert) Innenabstand im Blockelement. Aufzählungszeichen vor Liste :none, circle etc. Umfliessen des Blockelements: left, right. Umfliessen aufheben: left, right, both. Position des Blockelements: absolut, relativ etc.. Zeigt an, wie ein Element angezeigt werden soll: inline, block, none. Hyperlinkformatierung. <a href > </a> ÜBUNGEN : Gehe zu hauseurs.ch Unterricht EFI 5. KlassenÜbungen und bearbeite bei Einführung CSS Link zur Übungsseite alle Abschnitte ausser Barrierefreies Webdesign und Formularfelder. Experimentiere im Onlineeditor! 4
5 4. Positionierung von Seitenelementen Die Positionierung von Seiteninhalten war in HTML bisher nur mit Tabellen möglich. Mit Hilfe von CSS so gibt es nun die Möglichkeit, alle Elemente einer Seite pixelgenau im Browserfenster anzuordnen. Die Positionierung kann absolut oder relativ erfolgen, sie umfaßt auch die Möglichkeit, umfließenden Text zu gestalten, Elemente überlappen zu lassen etc. Wie bei fast allen neuen Möglichkeiten von CSS werden auch hier nicht alle vorgesehenen Optionen in allen Browsern genutzt. Zwar sollte die Positionierung für alle Tags gelten, bei denen das sinnvoll wäre. Sicherer ist es, die Positionieraufrufe immer auf Bereiche zu anzuwenden, die mit <div> oder mit <span> eigens abgegrenzt wurden. Beispiel: Unser Ziel ist es nun, auf einfachste Art und Weise auf der Seite test.html drei farbige Kästchen mit Text einzufügen und zwar pixelgenau. Sie sollen absolut positioniert werden. 1.Schritt: Mit dem <div>-tag werden drei Textbereiche formatiert. Ergänzen Sie test.html wie folgt: <html> <head> <title>css-uebung</title> <LINK REL="stylesheet" TYPE="text/css" HREF="css/stylesheeti.css"> </head> <body> <div class= position1 >Hier könnte Text stehen</div> <div class= position2 >Hier könnte Text stehen</div> <div class= position3 > Hier könnte Text stehen </div> </body> </html> 2. Schritt: Nun können Sie die CSS Datei ergänzen:.position1{ top:0px; left:0px; width:340px; z-index:1; background-color:#ffdddd; padding:10mm.position2{ top:260px; left:30px; width:700px; z-index:1; 5
6 background-color:#aaffcc; padding:10mm.position3{ top:300px; left:340px; width:340px; z-index:2; background-color:#cfddef; padding:50mm.position { top:230px; left:340px; width:340px; z-index:2; background-color: #???; padding:10mm Positionsangabe (absolute, relativ) Abstand vom oberen Browserrahmen Abstand vom linken Browserrahmen Breite des Rahmens Überlappungsreihenfolge(je kleiner desto weiter unten) Rahmen Hitergrundfarbe unsichtbarer Rahmen um Schrift (vergrössert Fenstergrösse) 6
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...
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...
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 ,
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
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-,
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
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
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
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
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,
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
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: 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:
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
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:
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.
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
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 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
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
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,
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
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
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
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:
Ä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
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
[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort](/thumbs/92/108574680.jpg "[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort")
[Guide] CSS (+ CSS 3!) Vorwort CSS in HTML einbinden HTML mit CSS ansprechen Farben Jetzt geht es los: Normales Stylen Boxen (DIVs) mit dem Boxmodel Fliessende Boxen Links formatieren & Pseudoklassen/Elemente
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
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........................
Tabellenfreies Layout in HTML
Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau
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,
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
17. 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
CSS 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
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
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...
Ü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,
Cascading Stylesheets (CSS)
Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen
Web-basierte Anwendungssysteme XHTML- CSS
Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev ([email protected]) Prof. Dr. Armin Lehmann ([email protected]) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen
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
CSS Einführung & CSS Frameworks
CSS Einführung & CSS Frameworks Leif Singer [email protected] Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen
3 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
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
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker [email protected] 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen [email protected] Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
Praktikum 8: CSS-Layout
WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die
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
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
Probeklausur Besprechung
WiSe 2018/19 Aufgabe 1: Huffman (10 Punkte) 1 Geben Sie für die Nachricht schnelldurchlauf den Zeichenvorrat mit der Wahrscheinlichkeitsverteilung an. 2 Zeichnen Sie den resultierenden Codebaum und beachten
Introduction to Technologies. Stylesheets mit CSS
Introduction to Technologies Stylesheets mit CSS Beispiele CSS http://css.maxdesign.com.au/listamatic/ http://www.csszengarden.com/tr/deutsch/ http://www.albinoblacksheep.com/livedesign http://de.selfhtml.org/css/layouts/index.htm
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
Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes
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
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
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
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
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
Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel
Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:
PresseBox Presseticker
PresseBox Presseticker Version 1.0 letzte Aktualisierung: 09.04.2013 2013 unn UNITED NEWS NETWORK GmbH, Karlsruhe Inhaltsverzeichnis Einführung... 3 Standard-Ticker... 3 Flying-Ticker... 3 Extended-Ticker...
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
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
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
Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)
Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte
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
Responsive Webdesign
ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte
Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen :
Nachbau der Website http://www.lake-festival.at/ Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen : https://archive.org/web/ dann Erstelle eine neue Bootstrapsite im Ordner lakefestival.
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
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
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
Seminar DWMX 2004. DW Session 004
Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der
Cascading Style Sheets II (CSS)
Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,
Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch
Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1
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