Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}"

Transkript

1 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 der Formatierung vom Inhalt. erleichtern das Erstellen von Webseiten mit einheitlichem Layout und die Wartung solcher Seiten. erweitern die Fähigkeiten von HTML (z.b. Formatierung von Webseiten für verschiedene Ausgabemedien). Stylesheet-Formatdefinitionen Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} z. B. Definition: h1 {color:red;}.farbe {color:white;} Typ-Selektor ungebundener Klassen-Selektor Verwendung der Definitionen im HTML-Code (in <body>): <h1>rote Überschrift</h1> <p class= farbe >weißer Absatz</p> Den Namen einer Klasse hinter dem Punkt können Sie frei vergeben, sie dürfen jedoch keine Leerzeichen und Umlaute enthalten, nicht mit einer Ziffer oder einem Bindestrich beginnen, sollten keinen Unterstrich enthalten und nicht zu lang sein. CSS einbinden Stylesheets kann man auf drei Ebenen einbinden: - als Definition in einer externen Datei (eine Textdatei mit der Endung.css) - als Definition im Kopfbereich des HTML-Dokuments - inline-definition (als Attribut eines HTML-Tags) Stylesheet-Formatdefinitionen im Kopfbereich <head> <title>beschreibung der Seite</title> <style type="text/css"> /*... Hier werden die Formate definiert... */ </style> </head> <head> <title>beschreibung der Seite</title> <style type= text/css > h1 {color: green; font-family: Verdana;}.abstand {margin-left: 50px;} </style> 1

2 </head> Stylesheet-Formatdefinitionen in einer externen Datei <head> <title>titel der Datei</title> <link type="text/css" rel= stylesheet href= dateiname.css /> </head> Inline Stylesheet-Formatdefinitionen Bei einer direkten Formatierung im body-bereich gibt man die Stylesheet-Deklarationen als Attribut des Elements an. z. B.: <p style= font-size:14pt; color:blue; background-color:gray; > Absatz-Text </p> Bei widersprüchlichen Format-Definitionen gilt Folgendes: - CSS-Format-Definitionen direkt im style-attribut eines HTML-Elements wirken am stärksten. - Die zuletzt angegebene Formatierung im <head> überschreibt die vorherige Definition. Schrifteigenschaften Eigenschaft Beispiel für CSS-Definition* Verwendung im HTML-Code (in body) fett (bold).fett {font-weight:bold;} <p class= fett >Hier steht ein fetter Absatz</p> kursiv (italic) h2 { font-style:italic; } <h2>hier steht eine kursive Überschrift h2</h2> unterstrichen.ustr { text-decoration:underline;} <div class= ustr >Alles was hier steht, ist unterstrichen</div> Ausrichtung.zentriert {text-align: center;} <h1 class= zentriert >Zentrierte Überschrift</h1> Schriftart.std {font-family: arial;}.lc {font-family: lucida console ;} <p>hier steht <span class= std >der Text in Arial</span> und <span class= lc >dieser Text ist in Lucida Console</span></p> Schriftgröße.gross {font-size: 20pt;} <h1 class= gross >h1-überschrift 20pt groß</h1> Schriftfarbe.rot{color:red;} <p>schwarzer Text <span class= rot >rote Schrift</span> schwarzer Text</p> * Die Klassennamen sind frei wählbar Bei der kompakten Schreibweise ist die Reihenfolge font-style, font-variant, font-weight, font-size, line-height und font-family einzuhalten:.schrift1 {font:italic bold 13pt Times; text-align: center;} Attribute gesammelt zuweisen.ue1{font-family:arial, verdana; color:blue; font-size:14pt; text-align:center; font-weight:bold;} Formatieren Sie folgenden Text mit Hilfe von CSS: 2

3 Dieser Absatz ist in Arial, zentriert und 16pt groß. Wir lernen das ABC der Seitengestaltung. Diese h2-überschrift ist rot, unterstrichen und in Book Antiqua CSS erweitert dir Möglichkeiten von HTML. Hintergrundfarbe Die Hintergrundfarbe einer Seite in der CSS-Definition: body {background-color: blue;} Mit CSS kann man jedem Element eine Hintergrundfarbe zuweisen. Bsp.: CSS-Definition:.grau {background-color: gray;} Verwendung: <p>das Wort <span class= grau >GRAU</span> hat die Hintergrundfarbe grau.</p> Farben können durch die Angabe eines Farbnamens, durch die Angabe einer hexadezimalen Zahl oder aber mit dem Schlüsselwort rgb durch Dezimal- oder Prozentwerte definiert werden (rgb(0-255,0-255,0-255) oder rgb(0-100%,0-100%,0-100%)) Die bunten Buchstaben aus der vorherigen Aufgabe sollten mit unterschiedlichen Hintergrundfarben versehen werden. (Bearbeiten Sie dafür nur die CSS-Definitionen.) Schreiben Sie eine neue Seite mit Blockelementen wie Überschrift, Absatz, Bereich usw. und weisen Sie diesen verschiedene Schrift- und Hintergrundeigenschaften zu. Rahmen in CSS Mit Hilfe von CSS kann man um alle Elemente Zwischenräume und Rahmen setzen als Kasten: oben, rechts, unten, links. Folgende Eigenschaften sind möglich: margin, border-color, border-width, border-style, padding. Wenn der Abstand an allen Seiten gleich ist, gibt man einen Wert an, z. B. margin:10px, ansonsten gibt man die Seite an (top, right, bottom, left). Bsp.: CSS-Definition für einen Rand unten, mit Innenabstand 10px und Element um 5px eingerückt:.durchgehend {margin-left:5px; border-bottom-style:solid; border-bottom-color:magenta; border-bottom-width:3px; padding:10px;} 3

4 Kompakte Schreibweise:.durchgehend {margin-left:5px; border-bottom:3px solid red; padding:10px;} Verwendung: <p class= durchgehend >Absatz mit Rand unten</p> Mit Hilfe von margin-left kann man Text einrücken. Schreiben Sie eine Seite, die um 20 Bildpunkte von links eingerückt und in Schriftart Calibri geschrieben ist. Die Seite beinhaltet eine h1-überschrift in pink und unterstrichen, einen kurzen Absatz sowie einen Bereich für wichtige Hinweise, die durch Einrückung, Umrahmung und Hintergrundfarbe auffällig sein müssen. Listenformatierung Die Bestimmung des Darstellungstyps einer Liste: list-style-type: disc circle square none list-style-type: decimal lower-roman upper-roman lower-alpha upper-alpha... für ul-listen für ol-listen Die Verwendung eigener Bullet-Grafiken ist auch möglich. List-style-image: url (Pfad/Grafikdatei) Z.B. ul {list-style-image: url(grafiken/kugel.png)} Schreiben Sie eine Seite, die eine nummerierte Liste mit Kleinbuchstaben sowie eine Auflistung mit Kreis als Aufzählungszeichen beinhaltet. Grafiken Höhe und Breite gibt man mit height und width an: CSS:.foto {margin: 3cm 2cm; width:160px; height:192px;} Verwendung: <img class= foto src= XY-2012.gif alt= Porträt von XY /> Tabellenformatierung Einige Eigenschaften beziehen sich auf die ganze Tabelle (wie border-collapse oder border-spacing), andere gibt man bei den Zellen an (wie border-style für die Gitternetzlinien oder padding für den Innenabstand). Die Rahmenformatierung (border) des table-selektors bestimmt den äußeren Rahmen der Tabelle. Mit border-collapse kann man bestimmen, ob die Rahmen der Tabellenzellen zusammenfallen oder nicht. Beim nicht Zusammenfallen kann man den Abstand zwischen den Zellenrahmen bestimmen: table {border-collapse:separate; border:thin solid red; border-spacing:10px;empty-cells:show} td {border:medium dashed blue; padding:10px;} Mit der Eigenschaft empty-cells legt man fest, ob die leeren Zellen einen Rahmen bekommen. 4

5 Die Beschriftung der Tabelle kann man auch mit CSS gestalten, wobei die Position der Tabellenüberschrift durch caption-side angegeben wird. caption {caption-side:bottom;font-weight:bold;margin-top:10px;} Erstellen Sie eine Seite bestehend aus einer h1-überschrift und einer Tabelle wie unten angegeben. Alle Formatierungen sollen über CSS-Eigenschaften realisiert werden (Tabellen- und h1-überschriftbreite 70%, Zellinnenabstand 15 px, Tabellenrahmen, Gitternetzlinien, Hintergrundfarben, Schriftfarbe). Element umfließen in CSS In CSS hat man die Möglichkeit, ein beliebiges Element um ein anderes beliebiges Element fließen zu lassen. Mit float kann man bestimmen, wo das Element steht, das von den nachfolgenden Elementen umflossen wird. Mit clear wird das Umfließen unterbrochen. CSS:.absatz1{border:1px solid green; padding 5px; float:right} - das Element steht rechts CSS:.absatz2{clear:both; float:left} Erstellen Sie den Code für folgende Ausgabe: Text links Text links Text links Text links Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text rechts Text rechts Text rechts Text rechts Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte Text in der Mitte 5

6 Anhang CSS-Definitionsbeispiele Dateiweite Einstellungen body { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px; background-image:url(background.jpg);... } Schriftformatierung font-family: arial font-size: 12 pt font-style: italic oblique normal font-weight: normal bold text-decoration: none underline blink capitalize text-align: left right center justify vertical-align: top middle bottom super sub color: blue #0000ff rgb(255,0,127) rgb(100%,0%,50%) background-color: black # rgb(200,0,64) rgb(80%,10%,25%) Hintergrundfarbe background-color: black # rgb(200,0,64) rgb(80%,10%,25%) Ränder und Rahmen margin-top: 50px margin-bottom:10px margin-left:20mm margin-right:0.2in border-color:transparent red #RRGGBB rgb(...) border-width:thin medium thick 3px border-style: none solid double dotted usw. padding:12px oder border-top-color usw. oder border-top-width usw. oder border-top-style usw. Breiten- und Höhenangaben width: 50% 6

7 height: 100px Listen list-style-type: disc circle square none für ul-listen list-style-type: decimal lower-roman upper-roman lower-alpha upper-alpha... für ol-listen list-style-image:url(url-angabe) für eigene Bullet-Grafik list-style-position: inside outside Tabellen caption-side:top bottom border-collapse:separate collapse border-spacing:5px empty-cells:hide show border-style: none solid double dotted... border-width:thin medium thick 1px border-color:transparent red #RRGGBB rgb(...) padding:12px caption table table table table, th, td table, th, td table, th, td th, td Element umfließen float:left right none clear:left right both none 7

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Ü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:

Mehr

jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP

jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute

Mehr

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

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...

Mehr

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy

HTML- und CSS-Einführung Rusalka Offer Isabella Nagy Grundelemente der Hypertext Markup Language (HTML) und Cascading StyleSheets (CSS) Allgemeines: HTML steht für Hypertext Markup Language aktueller Standard ist HTML 4.1 bzw. XHTML 1.0 (s.a. unter http://www.w3c.org)

Mehr

Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend.

  • 'Arial','Helvetica','Tahoma','Verdana'
  • Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana' Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,

    Mehr

    Aufbau einer HTML Seite:

    Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

    Mehr

    Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

    Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

    Mehr

    CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

    CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

    Mehr

    CSS. Cascading Stylesheets

    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

    Mehr

    Erstellung von dynamischen Webseiten mit Cascading StyleSheets

    Erstellung von dynamischen Webseiten mit Cascading StyleSheets Planerische Informationssysteme Erstellung von dynamischen Webseiten mit Cascading StyleSheets Rolf Sonderegger FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung

    Mehr

    Seminar DWMX 2004. DW Session 004

    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

    Mehr

    1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel

    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

    Mehr

    IT- und Medientechnik

    IT- und Medientechnik IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,

    Mehr

    4. Briefing zur Übung IT-Systeme

    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

    Mehr

    Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

    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-,

    Mehr

    Online-Publishing mit HTML und CSS für Einsteigerinnen

    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

    Mehr

    Allgemeine Technologien II Sommersemester Mai 2011 CSS

    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

    Mehr

    CSS-Tutorial. Grundlegende CSS-Kenntnisse

    CSS-Tutorial. Grundlegende CSS-Kenntnisse 2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich

    Mehr

    CSS Cascading Style Sheets

    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,

    Mehr

    Farb-, Text- und Schriftgestaltung mit CSS3

    Farb-, Text- und Schriftgestaltung mit CSS3 CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite

    Mehr

    Einführungskurs HTML-CSS mit Buch

    Einführungskurs HTML-CSS mit Buch Einführungskurs HTML-CSS mit Buch Von Stand: 01.11.2013 Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige

    Mehr

    Die wichtigsten HyperTextMarkupLanguage tags 1(6)

    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

    Mehr

    Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte

    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

    Mehr

    Aufgabenbereich 3: Layoutgestaltung mit CSS

    Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

    Mehr

    HTML und CSS. Eine kurze Einführung

    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

    Mehr

    Webbasierte Programmierung

    Webbasierte Programmierung Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert Inhalt Kapitel 4: CSS (Cascading Style Sheets) Einbindung von CSS CSS-Grammatik Boxmodell

    Mehr

    Publizieren im Internet

    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

    Mehr

    Eine Schnelleinführung in CSS

    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:

    Mehr

    Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

    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

    Mehr

    Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid

    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

    Mehr

    Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

    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

    Mehr

    Tutorial zum erstellen einer Webseite

    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,

    Mehr

    Praktikum im Grundstudium

    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

    Mehr

    E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.

    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

    Mehr

    Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013

    Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 Ü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

    Mehr

    CSS Cascading Stylesheets

    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

    Mehr

    Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008

    Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008 Veranstaltung 10033013 Systementwicklung HTML und CSS Uwe H. Suhl und Chris Bizer SS 2008 HTML - Hypertext Markup Language HTML ist eine Auszeichnungssprache für Web-Dokumente Auszeichnungssprachen Auszeichnen

    Mehr

    Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model

    Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,

    Mehr

    Cascading Style Sheets II (CSS)

    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,

    Mehr

    HTML: Text und Textstruktur mit CSS gestalten

    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

    Mehr

    Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015

    Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015 Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8

    Mehr

    HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

    HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

    Mehr

    CSS - Cascading Style Sheets

    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,

    Mehr

    HTML & CSS. Beispiele aus der Praxis

    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

    Mehr

    Kapitel 3 Strukturierte Daten mit Listen und Tabellen

    Kapitel 3 Strukturierte Daten mit Listen und Tabellen Kapitel 3 Strukturierte Daten mit Listen und Tabellen Daten spielen auf einer Website eine wichtige Rolle. Egal ob Terminliste, ein Kochrezept oder herunterladbare Dateien: Eine Fülle von Informationen

    Mehr

    Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger

    Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default

    Mehr

    Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

    Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

    Mehr

    HTML-Kurzübersicht 1. Die wichtigsten Elemente. HTML-Kurz-Übersicht

    HTML-Kurzübersicht 1. Die wichtigsten Elemente. HTML-Kurz-Übersicht HTML-Kurzübersicht 1 Alle HTML-Elemente können wie Kästen (little boxes) gedacht werden. Sie werden mit einem Etikett (tag) aufgemacht und mit einem Etikett desselben Namens geschlossen. Der

    Mehr

    Cascading Style Sheets

    Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

    Mehr

    1 Vorbemerkungen CSS in HTML einbinden... 3

    1 Vorbemerkungen CSS in HTML einbinden... 3 CSS Kurs 1 Vorbemerkungen... 1 2 CSS in HTML einbinden... 3 2.1 Formate zentral für eine HTML-Datei definieren... 3 2.2 Formate zentral in separater CSS - Datei definieren... 3 2.3 Formate innerhalb eines

    Mehr

    Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.

    Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation. Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile

    Mehr

    Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.

    Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten. CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009 TEIL A: ALLGEMEINE EINFÜHRUNG IN

    Mehr

    Internet und Webseiten-Gestaltung

    Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

    Mehr

    3 XML, HTML und XSL die Ausgabe

    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

    Mehr

    Kommentare Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.

    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

    Mehr

    Format- oder Stilvorlagen

    Format- oder Stilvorlagen Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen

    Mehr

    CSS zur Gestaltung von HTML-Seiten nutzen

    CSS zur Gestaltung von HTML-Seiten nutzen CSS zur Gestaltung von HTML-Seiten nutzen Handbuch und Literatur Handbuch des RRZNs: CSS Cascading Style Sheet; Level 2 Charles Wyke-Smith: Stylin with CSS; Addison-Wesley Tommy Olsson & Paul O'Brien:

    Mehr

    CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes

    CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf...... oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax:

    Mehr

    3. Briefing zur Übung IT-Systeme

    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

    Mehr

    Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

    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:

    Mehr

    Digitale Medien. Übung

    Digitale Medien. Übung Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift

    Mehr

    Cascading Stylesheets (CSS)

    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

    Mehr

    Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?

    Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt? Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen

    Mehr

    Introduction to Technologies for Interaction Design. Stylesheets

    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

    Mehr

    1 HTML-Grundlagen. 1.1 Grundstruktur eines HTML-Dokuments. 1.2 Dokumenttyp-Deklaration. 1.3 HTML-Elemente

    1 HTML-Grundlagen. 1.1 Grundstruktur eines HTML-Dokuments. 1.2 Dokumenttyp-Deklaration. 1.3 HTML-Elemente Seite 1 / 22 1 -Grundlagen Das World Wide Web (WWW) besteht aus einer gewaltigen Menge von Dokumenten, die durch Querverweise (Hyperlink bzw. Link) miteinander verknüpft sind. Stößt ein Leser in einem

    Mehr

    Webshop Tutorial. E-Commerce ECM ERP SFA EDI. Backup. Aussehen des Webshops anpassen Vorlagen verwenden und ändern. www.comarch-cloud.

    Webshop Tutorial. E-Commerce ECM ERP SFA EDI. Backup. Aussehen des Webshops anpassen Vorlagen verwenden und ändern. www.comarch-cloud. Webshop SFA ECM Backup E-Commerce ERP EDI Aussehen des Webshops anpassen Vorlagen verwenden und ändern www.comarch-cloud.de Inhaltsverzeichnis 1 EINLEITUNG 3 1.1 EINFÜHRUNG 3 1.2 BEISPIELE FÜR DESIGNVORLAGEN

    Mehr

    Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

    Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]

    Mehr

    Innovator 11. Design der Dokumentation ändern. Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen. HowTo. www.mid.

    Innovator 11. Design der Dokumentation ändern. Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen. HowTo. www.mid. Innovator 11 Design der Dokumentation ändern Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen www.mid.de HowTo Übersicht zum Layout der Dokumentation Das Layout der Innovator-Dokumentationen

    Mehr

    <body> <header> <nav> <div> <article> <section> <footer> <aside> <a> <!DOCTYPE html> <header>logo</header> <body><main>... </body> logo ... beliebige Inhalte >Menu ...

    Mehr

    Information und ihre Darstellung: XHTML & CSS

    Information und ihre Darstellung: XHTML & CSS Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache

    Mehr

    Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

    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

    Mehr

    CSS - Cascading Stylesheets

    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

    Mehr

    HTML - CSS. Übungen Informatik I. http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/tutorial. http://de.selfhtml.org

    HTML - CSS. Übungen Informatik I. http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/tutorial. http://de.selfhtml.org Übungen Informatik I HTML - CSS http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/tutorial http://de.selfhtml.org Folie 1 Inhalt 1. Einführung 2. Grundgerüst 3. Links / Verweise 4. Attribute 5. Farben 6. Bilder

    Mehr

    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. 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

    Mehr

    ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?

    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

    Mehr

    Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise

    Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt

    Mehr

    Introduction to Technologies. Stylesheets mit CSS

    Introduction to Technologies. Stylesheets mit CSS Introduction to Technologies Stylesheets mit CSS HTML-CSS enthält den Inhalt HTML- Datei *.html CSS- Datei *.css enthält die Layoutangaben ist austauschbar Darstellung des Seiteninhaltes im erstellten

    Mehr

    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.

    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

    Mehr

    HTML-Grundlagen (X)HTML:

    HTML-Grundlagen (X)HTML: HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein

    Mehr

    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 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

    Mehr

    Cascading Style Sheets

    Cascading Style Sheets Jan-Hendrik Terstegge Ernst-Barlach-Gymnasium Unna Jahrgangsstufe 12.2 2001/2002 Cascading Style Sheets Grundlagen und Implementation sowie praktische Anwendung am Beispiel des Informatikbereichs der PGU-Homepage

    Mehr

    3. Briefing zur Übung IT-Systeme

    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,

    Mehr

    Webdesign-Multimedia HTML und CSS

    Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

    Mehr

    Grundlegende Webtechnologien

    Grundlegende Webtechnologien Stefan Rothe 5. April 2011 Dieses Werk steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License (CC BY-NC-SA). Inhaltsverzeichnis 1 Grundlagen 1 1.1 Webtechnologien... 1 1.1.1 Einleitung... 1

    Mehr

    Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel

    Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie

    Mehr

    Das TYPOlight CSS-Framework

    Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

    Mehr

    Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

    Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

    Mehr

    HTML Teil 2. So kann man HTML-Seiten mit

    HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:

    Mehr

    HTML. Hypertext Markup Language

    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

    Mehr

    Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker

    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

    Mehr

    Crashkurs HTML und CSS

    Crashkurs HTML und CSS Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise

    Mehr

    Web-basierte Anwendungssysteme XHTML- CSS

    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

    Mehr

    1 Was sind Cascading Stylesheets?

    1 Was sind Cascading Stylesheets? Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff»Cascading Stylesheets«verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet

    Mehr

    Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

    Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,

    Mehr

    <>Mini HTML-Kurs<>

    <>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- -> Mini HTML-Kurs Dieser Mini HTML-Kurs soll Ihnen genau soviel HTML-Wissen vermitteln, wie Sie brauchen, um meine Homepage-Vorlagen nach Ihren Wünschen anpassen zu können. Ich werde Ihnen also genau

    Mehr

    44 2CSS* Basistext. 2.1 Was ist CSS? *

    44 2CSS* Basistext. 2.1 Was ist CSS? * 44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?

    Mehr

    HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

    HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr-

    Mehr

    Informatik und Programmiersprachen

    Informatik und Programmiersprachen Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.

    Mehr