[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort
|
|
|
- Thomas Ursler
- vor 5 Jahren
- Abrufe
Transkript
1 [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 CSS 3 Download Schlusswort Inhaltsverzeichnis Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML- )Website ein Design. Mit CSS kannst du den Webseiten- Hintergrund ändern, Tabellen eine andere Farbe geben oder Links anders Färben. Dieser Guide gibt dir einen Einblick was du mit dem modernen CSS 3 alles machen kannst. Unter dem Link "" kannst du dir immer den vollständigen Code. Um CSS nutzen zu können, solltest du aber die Grundlagen zu HTML kennen. Dazu helfen dir die folgenden 2 Pokefans- Guides: Guide Autor [Guide] HTML LukeSkywalker [Guide] HTML lernen leicht gemacht RPGMKXP CSS in HTML einbinden CSS formatiert deine HTML- Seite. Dies bedeutet, dass alle CSS- Befehle mit dem HTML- Dokument verbunden sein müssen. Dazu gibt es 3 Methoden: In der HTML- Seite direkt einbinden Diese Methode verwenden wir in diesem Tutorial, da sie erstens nur eine Datei braucht und zweitens relativ übersichtlich ist. Für grössere Projekte sollte man aber Methode 2 nutzen. <!DOCTYPE html> <html lang="de"> <head> HIER DER CSS CODE forum.pokefans.net/post html#p /16
2 </head> <body> <h1>css GUIDE</h1> </body> </html> Als einzelne Datei Du kannst den CSS- Code auch in einer separaten Datei schreiben, und dann in dem HTML- Dokument verlinken. Die CSS- Datei hat die Endung (wer hätte es erwartet:).css. Diese Methode nutzt man für grössere Projekte, vor allem wenn das Stylesheet in mehreren Dateien gebraucht wird. In HTML wird sie folgendermassen verlinkt: <link href="design.css" type="text/css" rel="stylesheet"> Direkt im HTML- Tag Diese Methode nutzt man, wenn der Style nur bei einem bestimmten Tag gebraucht wird. Diese Methode ist aber schnell unübersichtlich: <h1 style="hier DER STYLE">Überschrift</h1> HTML mit CSS ansprechen In CSS können wir auswählen was bearbeitet wird, das ist der Selektor. Der Selektor kann ein bestimmter Tag (z.b. <h1> oder <b>), eine id (<b id='titel'>) oder eine Klasse (<b class='menu'>) sein. Ich zeige euch wie ihr das umsetzt (mit color wird jeweils die Textfarbe geändert). <b> Tag (Selektor) bearbeiten Will man jeden Tag bearbeiten, schreibt man einfach den Text zwischen den zwei Spitzen klammern auf. Hier ist das Beispiel mit <b>. <!DOCTYPE html> <html lang="de"> <head> b { color: green; </head> forum.pokefans.net/post html#p /16
3 <body> <b>das wird bearbeitet</b> <b class='klasse'>das auch (ist ja ein b Tag)</b> <b id='id'>das auch</b> </body> </html> <b id='gruen'> IDs bearbeiten Wenn man sich auf IDs beziehen will kommt zuerst eine Raute (#) und danach der Name der ID (hier "gruen"). <!DOCTYPE html> <html lang="de"> <head> #gruen { color: green; </head> <body> <b>hier wird nichts geändert</b> <b class='klasse'>hier wird nichts geändert</b> <b id='gruen'>das wird geändert</b> <h1 id='gruen'>das auch</h1> <b id='blau'>das wird nicht geändert</b> </body> </html> <b class='gruen'> Klassen bearbeiten. Der unterschied zwischen Klassen und IDs ist, das jede ID normalerweise nur einmal vorkommt. Klassen werden mit einem Punkt eingeleitet worauf der Name folgt. <!DOCTYPE html> <html lang="de"> <head>.gruen { color: green; </head> <body> forum.pokefans.net/post html#p /16
4 <b>hier wird nichts geändert</b> <b class='gruen'>hier wird etwas geändert</b> <b id='gruen'>das wird nicht geändert</b><h1 class='gruen'>das wird geändert</h1><b class='blau'>das wird nicht geändert</b> </body> </html> Farben Man kann in CSS viele verschiedene Farbcodes verwenden. Die drei beliebtesten zeige ich euch hier: Englische Farben Man kann in CSS einfache englische Farbnamen geben wie blue, red, lightblue, black, green, grey, white. HEX- Farbencodes Sehr beliebt sind HEX- Farbencodes. Diese kann man mit einem Color Picker generieren lassen. In CSS kennzeichnet man sie mit einer Raute (#). RGB- Farben Man kann auch RGB Farbencodes benutzen. Beispiel für alle drei Möglichkeiten (immer mit einem reinen Blau): background-color: blue; background-color: #0000FF; background-color: rgb(0,0,255); Jetzt geht es los: Normales Stylen Man designt mit CSS mit verschiedenen Befehlen, welche immer zwischen den beiden geschweiften Klammern stehen ( "{" und "" ). Die Befehle haben immer dasselbe Schema: Selektor { Eigenschaft: Wert; Die Anweisung kann eine Grösse/Breite sein (Pixel) oder eine Farbe (siehe Oben) oder ein Aussehen (z. B. italic für kursiv). Ich liste hier mal die oft genutzten Befehle auf: Eigenschaft Mögliche Werte Beschreibung color: [Anweisung];; Farben Textfarbe zwischen den Tags background-color: [Anweisung];; Farben Hintergrundfarbe font-size: [Anweisung];; Grösse in em/pt/cm/mm Schriftgrösse forum.pokefans.net/post html#p /16
5 font-family: [Anweisung];; Arial, Times New Roman,... Schriftart font-weight: [Anweisung];; normal, bold, bolder, lighter Schriftbreite font-style: [Anweisung];; normal, oblique, italic Schriftdesign text-align: [Anweisung];; center, left, right Text-Ausrichtung background-image: url([pfad_zum_bild]);; -- Hintergrundbild border-width: [Anweisung];; Grösse (px) Rahmenbreite border-color: [Anweisung];; Farben Rahmenfarbe border-style: [Anweisung];; none, dotted, dashed, solid, double, groove, ridge, inset, outset Art des Rahmens border-radius: [Anweisung];; Radius (px) Rahmen mit abgerundeten Ecken border: [Dicke] [Art] [Farbe];; Erst Rahmenbreite, dann die Art und am Schluss die Farbe Rahmen Grundsätzliches Boxen (DIVs) mit dem Boxmodel Für Templates werden statt Tabellen meist Boxen genutzt. Auf diese kann man fast alle oben genannten Anweisungen nutzten, und man kann sie sehr gut Stylen. Fangen wir mit dem Grundgerüst an: <!DOCTYPE html> <html lang="de"> <head>.box { </head> <body> <div class='box'>unser Text</div> </body> </html> Wenn man sich das im Browser anschaut, gibt es nichts spannendes zu sehen. Doch mit zwei neuen Befehlen und einem alten lässt sich das ändern. forum.pokefans.net/post html#p /16
6 {... {....box { background-color: #D8FFD6; width: 80%; Mit width und height geben wir der Box eine variable (prozentuale) Breite und eine feste Höhe. Mit der Hintergrundfarbe lassen wir sie zusätzlich sichtbar werden. Wenn man sich das Resultat nun anschaut sieht man, dass der Text ganz am Rand liegt. Dieses ändern wir indem wir den Innenabstand ändern. Padding - Der Innenabstand Der Befehl dazu lautet: padding. Wir wollen aber nur den Abstand von Links und von Oben ändern, dazu nutzen wir padding- top und padding- left. Achtung: Wenn du das padding erhöhst, wird das DIV automatisch grösser auch wenn du eine feste Breite hast (Trotz width: 400px; ist es dann eventuell 500px Breit). Der Innenabstand nützt extrem viel. Hier der Vergleich zwischen padding: 0px; und padding: 100px; Eigenschaft Mögliche Anweisungen Beschreibung padding[-left/-right/-top/-bottom]: [Anweisung];; Grösse in px Der Aussenabstand von der gewünschten Richtung padding: [oben] [rechts] [links] [unten];; Innenabstand von allen Richtung (px) Innenabstand von allen Richtungen (platzsparend) {....box { background-color: #D8FFD6; width: 80%; padding-left: 10px; padding-top: 10px; {... forum.pokefans.net/post html#p /16
7 Dies sieht schon um längen besser aus. Allerdings ist die Box noch ganz am Rand, dies ändern wir mit dem Aussenabstand. Margin - Der Aussenabstand Der Befehl lautet hierzu margin(- left/- right/- top/- bottom). Hier gibt es den unterschied zwischen 10 und 100px Aussenabstand (links und oben). Eigenschaft Mögliche Anweisungen Beschreibung margin[-left/-right/-top/-bottom]: [Anweisung];; Grösse in px Der Aussenabstand von der gewünschten Richtung margin: [oben] [rechts] [links] [unten];; Aussenabstand von allen Richtung (px) Aussenabstand von allen Richtungen (platzsparend) {... {....box { background-color: #D8FFD6; width: 80%; padding: 10px 0px 0px 10px; margin-left: 50px; margin-top: 100px; Zum Schluss von diesem Kapitel gibt es noch einen "Trick" um eine Box zu zentrieren. Bei margin gibt es die Regel, dass bei der Anweisung "auto" die beiden Seiten gleich sein müssen. Man zentriert die Box also so: {....box { background-color: #D8FFD6; width: 80%; padding-left: 10px; padding-top: 10px; forum.pokefans.net/post html#p /16
8 {... margin-left: auto; margin-right: auto; margin-top: auto 100px auto 0; Bild des Boxmodels und ein Beispiel- DIV Das Modell sieht so aus (ausgehen vom hellblauen Kasten der ein DIV darstellt). Natürlich kann man das Div noch viel weiter ausbauen mit den Anweisungen von "Normales Stylen". Wie das ausschauen könnte seht ihr hier: {....box { background-color: #D8FFD6; width: 80%; padding: 10px 0px 0px 10px; margin: 100px auto 0px auto; border: 1px solid black; border-radius: 20px; color: darkgreen; forum.pokefans.net/post html#p /16
9 font-size: 1cm; {... Fliessende Boxen Für ein Menü wünscht man sich schnell, dass man zwei DIVs nebeneinander setzen kann. Damit dies funktioniert, muss man den Befehl float nutzen. Befehl Mögliche Anweisungen Beschreibung float: [Anweisung];; left/right Wird meistens für DIVs genutzt. Lässt es in die angegebene Richtung fliessen Am besten versteht man es mit einem Beispiel: <!DOCTYPE html> <html lang="de"> <head>.website { width: 700px; margin-left: auto; margin-right: auto; background-color: black;.box_links { background-color: #D8FFD6; width: 200px; padding: 10px px; margin-left: 10px; border: 1px solid black; border-radius: 20px; color: darkgreen; font-size: 1cm; float: left;.box_rechts { background-color: #D8FFD6; width: 456px; padding: 10px px; margin-left: auto; forum.pokefans.net/post html#p /16
10 margin-right: auto; border: 1px solid black; border-radius: 20px; color: darkgreen; font-size: 1cm; float: right; </head> <body> <div class='website'> <div class='box_links'>menu</div> <div class='box_rechts'>inhalt</div> <br style='clear: both;'> </div> </body> </html> /Bild Zuerst wird ein Container mit der festen Grösse von 700px erstellt in dem der ganze Inhalt ist. Ich habe ihm die Klasse "website" gegeben. Zusätzlich gibt es zwei Boxen. Die Linke Box hat 200px die Rechte dann 700px- 200px- 10px (Aussenabstand)- 10px (Innenabstand)- 2px(Rahmen)- 10px (Aussenabstand der anderen Box)- 10px (Innenabstand der anderen Box)- 2px(Rahmen der anderen Box) = 458. Das <br style='clear: both'> sorgt dafür, dass das fliessen beendet wird und somit das DIV mit der Klasse Website die richtige Höhe hat. Links formatieren & Pseudoklassen/Elemente In CSS lassen sich auch Links formatieren. Dazu nutzt man Pseudoklassen und - Elemente. Dabei kann man einen besuchten Link (:visited), einen Link wo gerade drauf geklickt wird (:active), einen normalen Link (:link) und einen Link wo die Maus drüber ist Formatieren (:hover). Eine weitere Pseudoklasse ist :focus. Sie wird oft bei Textfeldern verwendet und wird aktiviert sobald das Textfeld fokusiert wird (also man etwas reinschreiben kann). Der CSS- Teil könnte also so sein. a:link { /* Link wenn er einfach irgendwo steht */ color:#3279f2; text-decoration:none; a:visited { /* einen besuchten Link */ font-weight:bold; color:#448699; text-decoration:none; a:hover { /* Link wo man rüber fährt */ font-weight:bold; color: #000000; text-decoration:none; a:active { /* Link wenn man draufdrückt */ color: #120E3F; forum.pokefans.net/post html#p /16
11 text-decoration:underline; #text:focus { /* Beispiel für ein Fokusiertes Textfeld */ background-color: #F0F0F0; Beispiel anzeigen CSS 3 Mit CSS 3 kommen einige nützliche Funktionen dazu. Einige möchte ich auch in diesem Guide zeigen. Allerdings gibt es zwei Dinge zu beachten: 1. Nicht alle Browser unterstützen die Neuerungen (der Internet Explorer v. a. Version 6/7 unterstütz kaum welche) 2. Für einige Funktionen/Eigenschaften wird ein Browser Präfix benötigt. Dazu kommen wir jetzt gleich: Farbverläufe Eine Neuerung mit CSS3 sind Farbverläufe. Da Farbverläufe schwer zu erstellen sind, nützt es wenn man sich dieses Tool als Hilfe nimmt. Erstellt man dort einen Farbverlauf, kann man den CSS- Code dazu ganz einfach kopieren. Der Code ist bei dem oberen Bild blau markiert. Achtung: Es gibt auf der Seite einen Farbverlauf- Generator für Firefox und einen für Safari/Chrome. Du solltest für beide Browser einen machen! Die Vorschau auf der Webseite funktioniert allerdings nur wenn du den passenden Browser nimmst. Firefox: Safari: Nachdem du einen Farbverlauf erstellt hast, kannst du ihn so als Hintergrundfarbe einstellen. Allerdings solltest du für die nicht- unterstützen Browser eine Hintergrundfarbe einstellen. Diese wird überschrieben sollte der Browser einen Farbverlauf unterstützen (dafür muss die background- color Anweisung aber vor dem Farbverlauf kommen). Alternativ kannst du dir den kompletten Code auch hier generieren lassen: klick. body { background-color: orange; background: -moz-linear-gradient(19% 75% 90deg,#AB0000, #C9BA2E); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff0000), to(#ffdd03)); Falls du dich fragst was das - moz- und das - webkit- bedeuten, kannst du gleich weiter lesen. Browser Präfixe forum.pokefans.net/post html#p /16
12 Viele Browser implementieren die Neuerungen als "private Eigenschaften". Bei diesen muss ein Browser Präfix her. Hier sind die Präfixe: Präfix Browser -moz- Firefox -ms-, mso- Internet Explorer -khtml- Konqueror -o- Opera -webkit- Chrome, Safari Transparents und RGBA Es gibt in CSS mindestens zwei Möglichkeiten etwas Transparent zu machen. Mit RGBA: In CSS kann man Farben auch mit RGB anzeigen lassen. Mit CSS 3 kam auch RGBA dazu, RGBA steht für Rot Grün Blau Alpha(- Kanal), also die Transparenz. Dabei ist die erste Zahl der Rotwert die zweite der Grünwert und die dritte der Rotwert alle von 0-255). Die vierte Zahl ist die Transparenz 0 ist unsichtbar und 1 ist ganz sichtbar. Dies ist ein Beispiel (anzeigen):.box { background-color: rgba(255, 200, 120, 0.75);; width: 80%; padding-left: 10px; padding-top: 100px; position: absolute; left: 20px; transition: all 3s ease-in; Transparenz mit der opacity Anweisung Dies ist die zweite Methode. Man fügt einfach die Anweisung opacity ein. 1 ist wieder komplett sichtbar und 0 ist unsichtbar..box { background-color: green; opacity: 0.5; width: 80%; padding-left: 10px; padding-top: 100px; position: absolute; forum.pokefans.net/post html#p /16
13 left: 20px; transition: all 3s ease-in; anzeigen/bild Animationen Bevor du beginnst: Der freundliche Internet Explorer mit Version 9 oder tiefer unterstützt diese Animationen nicht. Keyframes In CSS definiert man die Animationen bei den Keyframes (Ich empfehle diese am Anfang des CSS Teils/Stylesheets einzufügen). Wir beginnen mit einer Animation welche ein DIV langsam erscheinen lässt (Es braucht immer noch ein Extra- Keyframe für Webkit erste_animation { 0% {opacity: 0; 100% {opacity: erste_animation /* Safari und Chrome */ { 0% {opacity: 0; 100% {opacity: 1; Nun haben wir eine Animation. Ganz am Anfang (bei 0%) ist das DIV (oder jeder andere Selektor wo das angewendet wird) unsichtbar. Bei 100% ist es dann sichtbar. Man kann beliebig viele Schritte einfügen! Die Animation wurde nun erstellt, nun muss man sie aber noch irgendwo nutzen. Animation nutzen Wie geschrieben nutzen wir das obere Beispiel für ein DIV. Dies Funktioniert sehr einfach: div { animation: erste_animation 5s; /* 5s dauert die Animation -webkit-animation: erste_animation 5s; /* Safari und Chrome */ /* zusätzliches welches nicht für die Animation ist kommt jetzt: */ margin: 50px px; padding: 50px; background-color: blue; border: 1px solid black; forum.pokefans.net/post html#p /16
14 Natürlich kann man die Animation immer wiederholen lassen, und das Objekt bewegen. Es ist auch möglich die Hintergrundfarbe zu ändern. Lassen wir die Animation von oben doch immer sichtbar und wieder unsichtbar werden. Das alternate am Ende der Animation bewirkt, dass die Animation die Richtung wechselt (rückwärts läuft), sobald sie wiederholt wird. animation: erste_animation 5s linear 2s infinite alternate; -webkit-animation: erste_animation 5s linear 2s infinite alternate; Zum Schluss gibt es noch ein Beispiel wo das Objekt bewegt und die Hintergrundfarbe verändert wird. Zu beachten ist, dass das DIV position: fixed hat. Denn dann kann man mit "left/right/top/bottom" den Abstand zum Rand ändern. <!DOCTYPE html> <html lang="de"> <head> div { animation: zweite_animation 3s linear 2s infinite alternate; -webkit-animation: zweite_animation 3s linear 2s infinite alternate; position: fixed; /* zusätzliches welches nicht für die Animation ist kommt jetzt: */ margin: 50px px; padding: 50px; width: 50px; Andere Animationen: Transitions Es gibt noch eine andere Möglichkeit für Animationen. Mit dieser Möglichkeit kannst du ganz einfach Animationen erstellen, welche z.b. bei einem Hover- Effekt animiert werden. Dazu schreibst du alle Anweisungen welche animiert werden sollen, mit der jeweiligen Zeitangabe durch ein Komma (",") getrennt auf. Dieser Teil kommt in das normale DIV, nach der Anweisung "transition" bzw. für Chrome und Safari - webkit- transition. Anschliessend kannst du auswählen wo der Effekt kommt, mit den jeweiligen Pseudoklassen. Am besten versteht man es mit einem Beispiel (nur der CSS- Teil). div { width: 100px; height: 50px; -webkit-transition: width 1s, height 2s; transition: width 1s, height 2s; div:hover { /* Während man darüber fährt */ width: 200px; height: 300px; forum.pokefans.net/post html#p /16
15 div:active { /* Während man drauf klickt */ width: 300px; height: 200px; Beispiel Diese Animationen haben noch einige weitere Funktionen. Zwei werde ich euch in diesem Beispiel noch zeigen. Man kann der Anweisung nämlich noch zwei weitere Parameter geben: Selektor { transition: [ANWEISUNG] [METHODE] [VERZÖGERUNG]; ANWEISUNG ist einfach die Anweisung welche Animiert sein soll. In diesem Beispiel "width". Die Verzögerung ist wahrscheinlich klar. Man kann in Sekunden angeben um wie viel die Animation verzögert sein soll (Standard: 0). Bei der METHODE kann man angeben wie die Animation verlaufen soll beim Standard (ease) werden alle Animationen gleichzeitig ausgeführt. Man kann allerdings auch linear nutzen, so werden die Animationen nacheinander abgespielt. Auch dazu gibt es ein Beispiel: div { width: 100px; height: 50px; -webkit-transition: width 1s linear 3s; transition: width 1s linear 3s; div:hover { /* Während man darüber fährt */ width: 200px; Beispiel Border- Radius Oben wurde er bereits erwähnt, trotzdem hat es der border- radius verdient im CSS3 Teil noch einmal erwähnt zu werden. Bei allen aktuellen Browser wird kein Browser- Präfix benötigt. Anwenden kann man den Border- Radius ganz einfach: div { border:2px solid; border-radius:20px; forum.pokefans.net/post html#p /16
16 Ansehen/Bild Mit "border- top- left- radius" oder "border- bottom- right- radius" kann man auch jede Ecke einzeln bearbeiten. Box- und Text- Schatten (shadow) In CSS 3 ist es auch möglich sowohl Text als auch Boxen (DIVs) einen Schatten zu verpassen. Der Syntax dieses Befehls lautet: Für Boxen/Divs: box-shadow: h-shadow v-shadow blur spread color inset; Für Text: text-shadow: h-shadow v-shadow blur color; Dabei ist h- shadow der Horizontale Abstand des Schattens zum Objekt (DIV bzw. Text). V- shadow ist der Vertikale Abstand zum Objekt, sowohl beim vertikalen Abstand als auch beim horizontalen Abstand sind negative Zahlen möglich. "blur" ist die länge wie es unschärfer bzw. undeutlicher wird. "Color" ist die Farbe des Schattens, diese Angabe ist optional. Inset ist nur bei Boxen möglich und macht, dass der Schatten innen ist (Bild). Dieser Parameter ist nur bei Boxen möglich. Beispiel: div { width: 100px; height: 50px; border-radius: 20px; border: 2px solid; box-shadow:10px 10px 50px 20px #C44F44; /Bild Schlusswort Dieser Guide wurde von KingDDD geschrieben. Er darf nicht kopiert aber natürlich verlinkt werden. DerSpieler hat geschrieben: Afaik benötigt man für einen Guide auch eigentlich keine Erlaubnis (es schadet aber natürlich auch nicht XD). Damit du etwas zum zitieren hast: Die Erlaubnis sei dir erteilt! Danke an W3Schools für einige Hilfen forum.pokefans.net/post html#p /16
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...
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
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
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. 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
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 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
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 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 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
FARBEN MIT RGB-WERTEN DEFINIEREN
FARBEN FARBEN MIT RGB-WERTEN DEFINIEREN Farben mit Hexadezimalwerten Bisher sind Sie gewohnt Farben mit Hexadezimalwerten zu formatieren. Zwei Stellen geben dabei jeweils den Wert für Rot, Grün und Blau
Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.
HTML 8 Vorbereitung Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben!
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
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
Ü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
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 & 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
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
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,
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:
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........................
Ü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:
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
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
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
CSS3. Die neuen Features für fortgeschrittene Webdesigner. von Florence Maurice. 2., aktualisierte und erweiterte Auflage. dpunkt.
CSS3 Die neuen Features für fortgeschrittene Webdesigner von Florence Maurice 2., aktualisierte und erweiterte Auflage dpunkt.verlag 2013 Verlag C.H. Beck im Internet: www.beck.de ISBN 978 3 86490 118
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
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
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.
JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober
JavaScript II Bildaustausch mit dem Attribut name und zwei Funktionen function asterix() { document.images1.src="bilder/asterix.jpg"; function obelix() { document.images1.src="bilder/obelix.jpg";
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 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
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
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 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
Ü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
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
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
Kapitel 17: CSS. Inhalt. Was kann CSS? (1) Was kann CSS? (2) 1. Einführung CSS. 2. Farben, Hintergründe, Zeichensätze. 3. Gruppierungen. 4.
17. CSS - Cascading Style Sheets 17-1 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze Kapitel 17: CSS 3. Gruppierungen 4. Box-Modell 5. Validierung
Ü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
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,
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
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
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
Sass. Syntactically Awesome Stylesheets. Christian Kaula christiankaula.com
Sass Syntactically Awesome Stylesheets Christian Kaula christiankaula.com Sass? Sass? Metasprache auf Basis von CSS Sass? Metasprache auf Basis von CSS vereinfacht CSS durch Entfernung redundanter Elemente
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
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
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
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
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
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
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
CSS(3) verstehen und anwenden. Alexej Schneider APEX Connect 2017
CSS(3) verstehen und anwenden Alexej Schneider APEX Connect 2017 Facts & Figures Mittelständischer IT-Dienstleister Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Managing
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
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
Die Funktionalität von Suchportalen
Studiengang Sprache und Kommunikation 1/6 Die Funktionalität von Suchportalen Anweisungen zur Erstellung eines eigenen Suchportals Ziel dieser Übung ist es, ein eigenes kleines Suchportal zu einem spezifischen
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
Ü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:
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
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
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
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
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: 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
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
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
Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2
Duale Hochschule Baden-W ürttemberg Villingen-Schwenningen Fakultät für W IRTSCHAFT Studiengang Wirtschaftsinformatik Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2 Jahrgang: WWI 2009,
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...
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:
Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.
CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen
Beautify your APEX. Alexej Schneider DOAG 2016
Beautify your APEX Alexej Schneider DOAG 2016 Im Überblick Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Ausbildungsbetrieb Inhabergeführte Aktiengesellschaft Gründungsjahr
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
index.html schwerpunkt HTML und Informationssysteme SASS und Compass. Struktur für eure Stylesheets
SASS und Compass Struktur für eure Stylesheets Guten Tag Thomas Moseler Frontend-Developer www.rufzeichen-online.de Warum? .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler
<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
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
Ü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,
SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1
SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der
edoobox.com Für Ihre Kurse, Seminare und Events edoobox.com Kurzanleitung für Experten: Bootstrap 1 von 6
Für Ihre Kurse, Seminare und Events edoobox.com Kurzanleitung für Experten: Bootstrap www.edoobox.com 1 von 6 Bootstrap Jedem neu erstellten Design können Sie einen der 25 vorgegebenen Styles zuordnen,
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
EasyHTML v1.0. Eine vereinfachte Seitenbeschreibungssprache
EasyHTML v1.0 Eine vereinfachte Seitenbeschreibungssprache Stand: August 2002 EasyHTML 1.0 Inhaltsverzeichnis 1. Systemvoraussetzungen a. Server b. Client 2. Struktur der Sprache, Einbindung 3. Funktionen
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,
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
Schwebende DIV-Container erzeugen
Anfasser DIV-Container sind nützliche Helfer beim Layouten. Sie können Texte und Bilder beinhalten und lassen sich mittels ihres Z- Wertes auch übereinander anordnen. MODx stellt dazu ein simples, aber
Fotogalerie. Schwierigkeitsgrad: schwer
Fotogalerie 1 Vor uns haben wir ein wunderbares Layout, das eine Fotogalerie darstellt und das wir nicht mehr lediglich als Screenshot ansehen wollen. Anhand der anstehenden Aufgaben, die uns über horizontale
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
Praktikum im Grundstudium
Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet
Clubsite4Fun Administration:
Clubsite4Fun Administration: Farben und Schriftarten ändern Unser Fansite-Projekt macht Fortschritte: die Site präsentiert sich bereits mit neuer Kopfzeilengraphik und einem eigenen Logo. Irgendwie passt
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 Was die Browser wirklich können
CSS Was die Browser wirklich können Daniel Koch CSS Was die Browser wirklich können schnell+kompakt Daniel Koch CSS Was die Browser wirklich können schnell+kompakt ISBN: 978-3-86802-034-2 2009 entwickler.press
Block für mobile Geräte ausblenden
Block für mobile Geräte ausblenden Öffnen Sie in Ihrem Browser (wir empfehlen Ihnen Google Chrome) die Developer Tools indem Sie auf F12 drücken. Klicken Sie danach auf das Lupen -Symbol (in unserem Beispiel