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

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

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

Transkript

1 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 bilden Sie einfach mit CASCADING STYLE SHEETS Seiten gestalten mit Mit dem Einsatz von Cascading Style Sheets () beim Aufbau Ihrer Homepage machen Sie die Trennung von Layout und Inhalt der Webseite perfekt und ersparen sich das Layouten mit HTML-Tabellen. CHIP zeigt Ihnen anhand unserer Beispielseiten, wie Sie optimal vorgehen. Die wichtigsten HTML-Elemente haben Sie im vorigen Beitrag kennen gelernt. Wie Sie diesen Elementen ein attraktives Aussehen geben und damit quasi als Nebeneffekt Ihre Homepage barrierefrei machen, erfahren Sie auf den folgenden fünf Seiten. Das ist Cascading Style Sheets () sind eine Sprache zur Gestaltung von HTML-Ele- Alle hier vorgestellten -Programme finden Sie auf der Heft-CD in der Oberrubrik hhtml. menten. Die Gestaltungsmöglichkeiten von lassen sich ganz grob in zwei Gruppen aufteilen: k Schriften und Farben definieren k HTML-Elemente richtig positionieren (layouten) Das Gestalten von Schriften und Farben per macht HTML-Elemente wie <font> überflüssig und durch das Positionieren erübrigt sich das Layouten mit HTML-Tabellen. HTML und Am effektivsten bei der Arbeit mit ist es, die Cascading Style Sheets getrennt vom HTML in eine eigene Datei zu schreiben: k Legen Sie mit Ihrem Lieblingseditor eine neue Datei an. k Speichern Sie die Datei als chip.css im selben Ordner wie die Beispielseiten. In diese Datei schreiben Sie die im Artikel vorgestellten -Befehle. Aber zunächst müssen Sie den HTML-Seiten noch mitteilen, dass es die -Datei gibt. Dazu ergänzen Sie beide Seiten um die fett gedruckte Zeile: <head> <meta http-equiv="contenttype" content="text/html; charset=iso " /> Illustration: V.Hildebrand 40 CHIP SOFTWARE HOMEPAGE

2 <title>startseite - CHIP "Homepage bauen"</title> <link href="chip.css" rel="stylesheet" type="text/css" /> </head> Und das bewirken diese Zeilen: k href gibt den Pfad zur Datei an. k rel ist kurz für Relation (Beziehung). rel="stylesheet" heißt nichts anderes als Das ist ein StyleSheet. k type teilt dem Browser mit, dass chip.css eine in geschriebene Textdatei ist, etwa in der Art: Typ Textdatei, genauer gesagt Cascading Style Sheet. Die -Regeln in chip.css gelten grundsätzlich für alle HTML-Dateien, die damit verknüpft sind. Einstellungen für die Seite Alles zwischen <body> und </body> erscheint im Browserfenster. Die Einstellungen für das HTML-Element body gelten also für die gesamte sichtbare Webseite. Um die Hintergrundfarbe und die Schrifteinstellungen zu definieren, geben Sie die folgenden Zeilen in die noch leere Datei chip.css ein: body { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; Speichern Sie die Datei und betrachten Sie dann die Webseiten index.html und kontakt.html im Browser. Sie sehen nun sofort, dass sich beide Seiten geändert haben. Die Syntax einer -Regel Schauen Sie sich nun die -Regel etwas genauer an: k Jede -Regel beginnt mit einem Selektor, in diesem Fall body. Der Selektor legt fest, welcher Teil einer Webseite gestaltet werden soll, und ist im einfachsten Fall der Name des zu gestaltenden HTML-Elements. k Danach folgen zwischen geschweiften Klammern die gewünschten Formatierungen nach dem Schema -Eigen- schaft Doppelpunkt gewünschter Wert Semikolon. Die Zeilenumbrüche vor und nach den Klammern sind nicht zwingend erforderlich, machen die ganze Angelegenheit aber übersichtlicher. In unserem Beispiel gestalten Sie vier Eigenschaften von body : k color definiert die Textfarbe und background-color die Hintergrundfarbe. Die sollten Sie grundsätzlich zusammen definieren, damit sich nicht durch seltsame Zufälle problematische Kombinationen wie weiße Schrift auf weißem Grund ergeben. k font-family ist die Schriftart. Da Sie als Autor des Style Sheets nicht wissen können, welche Schriftarten der Browser des Betrachters zur Verfügung hat, äußern Sie an dieser Stelle mehrere Wünsche, jeweils durch Komma getrennt. k font-size gibt die Schriftgröße an. Über die beste Methode zur Definition der Schriftgröße gibt es im Web intensive Diskussionen; für den Anfang ist small eine gute Ausgangsposition. Die Einrückungen, Zeilenumbrüche und die Leerstellen nach dem Doppelpunkt zwischen -Eigenschaft und Wert sind optional und dienen lediglich der Übersichtlichkeit. Größe der Überschriften In gilt das Vererbungsprinzip: Alle in body enthaltenen HTML-Elemente erben die Formatierungen von body, sofern nichts anderes definiert wurde. So verändern sich alle Elemente auf beiden Beispielseiten, mit Ausnahme der Schriftgröße für die Überschriften. Viele Browser stellen Überschriften grundsätzlich größer dar als normalen Text und da wir bis jetzt für die Überschriften nichts festgelegt haben, entscheidet der Browser. Die folgenden beiden -Regeln ändern die Schriftgröße für die Überschriften: h1 { font-size: 150%; h2 { font-size: 130%; 150% bedeutet: Die Headline wird 1,5-mal so groß wie die normale Schriftgröße. Die Angabe in Prozent bewirkt, dass die Relationen zwischen Text und Überschriften erhalten bleiben, wenn Sie einmal die grundlegende Schriftgröße für body ändern. Vorsicht: Fügen Sie in der -Datei vor der Maßeinheit keine Leerstelle ein. Denn beim Schreiben von -Regeln ist das Einfügen einer Leerstelle zwischen einer Zahl und einer Maßeinheit bei Anfängern ein häufiger Fehler. Grundsätzlich gilt: Die Einheit steht direkt hinter der Zahl ohne Leerstelle: Es heißt also 130% und nicht 130 %. Die Adresse gestalten Um die Adresse unten auf der Seite zu gestalten, nehmen Sie als Selektor address und geben die gewünschten Formatierungen an, zum Beispiel so: address { font-size: 80%; /* kleiner als in body definiert */ font-style: normal; /* normale Schrift, nicht kursiv */ letter-spacing: 2px; /* Abstände zwischen den Buchstaben */ padding-top: 10px; border-top: 1px solid #003399; margin-top: 20px; Das sieht nun schon ganz anders aus. Die drei letzten Zeilen regeln übrigens k Verschachtelte Boxen: So sehen die HTML- Elemente im Kopfbereich der Beispielseite schematisch dargestellt aus. CHIP SOFTWARE HOMEPAGE 41

3 die Abstände der address-kiste nach oben (siehe Kasten Das Box-Modell unten): k padding-top ist der Abstand zwischen dem Text und der Rahmenlinie. k border-top erzeugt eine Rahmenlinie oben: 1 Pixel dick, durchgezogen (solid) und dunkelblau. k margin-top regelt den Abstand oberhalb der Linie bis zum Text darüber. Tipp: Beim Erlernen von fremden Sprachen ist der Mangel an Vokabeln anfänglich das größte Problem. Gut, dass es im Web ein sehr empfehlenswertes Nachschlagewerk für gibt. 4You ist Wörterbuch, Grammatikreferenz und Sprachkurs in einem. Sie finden es unter der Adresse Farben für den Kopfbereich Die HTML-Elemente im Kopfbereich haben wir schematisch als verschachtelte Kisten in der Abbildung auf s41 dargestellt. Diese Abbildung hilft beim Verstehen der folgenden -Regeln, insbesondere der verschachtelten Selektoren. Kopfbereich auswählen und dunkelblau einfärben: Der Kopfbereich der Websei- KNOW-HOW ten besteht aus allem zwischen <div id="kopf "> und </div>. Dieser Bereich soll den dunklen Blauton aus dem CHIP-Logo bekommen: #kopf { /* Schriftfarbe background-color: #003399; /* Hintergrundfarbe dunkelblau */ Der Selektor #kopf bedeutet ganz einfach: Gestalte das HTML-Element <div id="kopf ">. Nur die Elemente im Kopfbereich verschachteln: Als Nächstes soll der Absatz Prall gefüllt fett gedruckt werden. Um nur diesen Absatz zu gestalten, müssen Sie zwei Selektoren verschachteln, denn der Selektor p allein würde für alle Absätze auf den Webseiten gelten: #kopf p { font-weight: bold; /* Absatz in #kopf fett (bold) darstellen */ Der Selektor #kopf Leerstelle p bedeutet so viel wie alle p-kisten im Bereich #kopf. Die Absätze im Inhaltsbereich bleiben unverändert. Das Box-Modell: HTML und verstehen Jedes HTML-Element lässt sich als rechteckige Kiste interpretieren als Box und alle Boxen haben den gleichen Aufbau: width, padding, border und margin. Der Inhaltsbereich (width): Jedes Element hat eine Breite (width). Wenn width nicht definiert wurde, ist die Box bei Block-Elementen so breit, wie es geht, und bei Inline- Elementen nur so breit, wie sie sein muss, also wie der Inhalt des Elementes. Der Innenabstand (padding): Zwischen Inhalt und Rahmen liegt der Innenabstand (padding). padding übernimmt die Hintergrundfarbe des Inhaltsbereichs. Der Rahmen (border): Um das padding legt sich der Rahmen (border), der für alle vier Seiten eine unterschiedliche Breite (width), Farbe (color) und Styling (durchgezogen, gestrichelt, gepunktet etc.) haben kann. Der Außenabstand (margin): Jeder Kasten hat noch einen Außenabstand (margin), der die Hintergrundfarbe des umgebenden Elements übernimmt. Das Box-Modell dient zur Gestaltung der Abstände in und zwischen den rechteckigen Kästchen einer Webseite und ist extrem vielseitig. Je besser Sie dieses Modell verstehen, desto größer sind Ihre Chancen, ein gewünschtes -Layout zu verwirklichen. Wer genau hinschaut, entdeckt auf der Beispielseite einen blauen (oder lila) Rahmen um das Logo. Das kommt daher, dass die Logo-Grafik ein Link ist und Links unterstreicht der Browser blau oder lila. Mit der folgenden -Regel entfernen Sie den Rahmen: a img { border: 0; /* kein Rahmen, wenn ein Bild ein Hyperlink ist */ a img bedeutet so viel wie alle img- Kisten, die in einer a-kiste sitzen oder, anders ausgedrückt, alle Grafiken, die ein Hyperlink sind. Falls Ihnen das nicht einleuchtet, sehen Sie sich noch einmal die schematische Darstellung der HTML- Elemente im Kopfbereich an (siehe Abbildung auf s41). Die Navigation einrichten Mit der -Regel #navi gestalten Sie die Navigation auf Ihrer Homepage. Dabei handelt es sich um eine ungeordnete Liste ul mit dem Attribut id="navi". Auf unserer Beispielseite enthält diese ungeordnete Liste zwei Listenpunkte, in denen jeweils ein Hyperlink sitzt. Die folgende -Regel gestaltet diese Liste farbig und blendet die Aufzählungszeichen ( list-style ) aus: /* Schriftfarbe background-color: #004477; /* dunkelblau von chip.de */ list-style: none; /* Aufzählungszeichen ausstellen */ Die Abbildung auf s43 oben zeigt das aktuelle Aussehen der Startseite (links im Internet Explorer, rechts in Firefox): Dabei fallen drei Probleme ins Auge: 1. Internet Explorer und Firefox rücken die Navigation unterschiedlich ein. 2. Der Text in der Navigationsleiste ist nicht weiß und kaum lesbar. 3. Zwischen Kopfbereich und Navigation befindet sich ein unerwünschter Abstand. Navigation angleichen über padding und margin : Die Browser interpretieren padding und margin recht unterschiedlich, besonders bei Listen. Um die Navigation in allen Browsern gleich aussehen zu lassen, definieren Sie padding 42 CHIP SOFTWARE HOMEPAGE

4 und margin selbst und überstimmen damit die Browser: background-color: #004477; list-style: none; padding: 20px; Die Textfarbe der Navigation ändern: Dass der Text in der Navigationsleiste kaum lesbar ist, liegt daran, dass er zwischen <a> und </a> steht und deshalb als Link blau oder lila koloriert ist. Um die Links in der Navigation weiß zu machen, benutzen Sie wieder verschachtelte Selektoren. Die folgende -Regel färbt die Links weiß, entfernt die Unterstreichung ( text-decoration ) und gibt den a-kisten vier Pixel Innenabstand: #navi a { text-decoration: none; /* Unterstreichung entfernen */ padding: 4px; Den Abstand nach oben entfernen: Der unerwünschte Abstand zwischen Kopfbereich und Navigation könnte verschiedene Ursachen haben, ist aber letztendlich auf das p im Kopfbereich zurückzuführen. Denn HTML-Absätze bekommen vom Browser einen Abstand davor und danach verpasst. Diesen Abstand können Sie mit leicht verändern. Ergänzen Sie den bereits definierten Selektor #kopf p (siehe s42) so: #kopf p { font-weight: bold; float und margin Weiter geht es mit der Positionierung des Kopf- und des Navigationsbereichs. Der HTML-Befehl <font> zur Schriftgestaltung wird durch überflüssig, aber wie sieht es mit den Tabellen zum Layouten aus? Zur Positionierung verschiedener Bereiche mithilfe von nutzen Sie float und margin. Text im Kopfbereich neben das Logo setzen: Die folgende Regel platziert den Text im Kopfbereich neben das Logo: Noch nicht perfekt: Zwei Browser, zwei Darstellungen Internet Explorer (links) und Firefox (rechts) rücken die Navigation unterschiedlich ein. #kopf img { float: left; /* schwebe nach width: 206px; /* float immer mit Angabe von width */ margin-right: 20px; /* Abstand zum Text daneben */ Durch float wird die Grafik bildlich gesprochen minimal hochgehoben, so dass sie über der Seite schwebt. Der Inhaltsbereich der nachfolgenden Elemente kann dadurch nach oben und neben die Grafik rutschen. Allerdings gilt das auch für die Navigation, die nun zum Teil neben dem Logo sitzt. Eine einfache Lösung dieses Problems besteht darin, dem Kopfbereich eine feste Höhe zuzuweisen. Ergänzen Sie dazu den Selektor #kopf folgendermaßen: #kopf { /* Schriftfarbe background-color: #003399; /* Hintergrundfarbe dunkelblau */ height: 100px; /* feste Höhe 100px, wie das CHIP Logo */ Nun sitzt die Navigation wieder unterhalb des Kopfbereichs. Navigation an den linken Rand setzen: Die Navigation positionieren Sie ebenfalls mit float. Ergänzen Sie dazu den bereits definierten Selektor #navi (links oben auf dieser Seite) wie folgt: float: left; /* schwebe unter den Kopfbereich und nach links */ width: 145px; /* Feste Breite von 145 Pixeln */ height: 100%; /* Navigationsleiste bis ganz nach unten */ background-color: #004477; list-style: none; padding: 20px; Die Gesamtbreite eines Elements ist übrigens nicht identisch mit width (siehe Kasten Box-Modell auf s42): k #navi hat eine width von 145px, aber für die Gesamtbreite müssen Sie padding, border und margin addieren. k #navi hat links und rechts jeweils 20 Pixel padding, ergibt also eine Gesamtbreite von 185px. Man muss manchmal wirklich rechnen, bis alles passt. Falls Sie das Procedere verwirrend finden, trösten Sie sich: Der Internet Explorer kriegt das auch nicht immer richtig hin. Nebenbei bemerkt: Die Angabe von height:100% hat nicht funktioniert, denn die Navigationsleiste reicht noch nicht bis an den unteren Rand des Browserfensters. Navigation und Inhalt nebeneinander setzen: Bei der Positionierung der Navigation müssen Sie nun noch zwei Änderungen vornehmen: k Der Inhaltsbereich muss rechts neben der Navigation stehen. k Die Navigationsleiste soll bis an das Ende des Browserfensters reichen. Um den Inhalt rechts neben der Navigation zu platzieren, definieren Sie für #inhalt einfach einen großen linken Außenabstand ( margin-left ): #inhalt { margin-left: 200px; /* Gesamtbreite #navi: 185px */ Nun korrigieren Sie noch die Höhe der Navigationsleiste und dann sieht das Ganze schon beinahe aus wie eine richtige Webseite. Höhe der Navigationsleiste festlegen: Die Höhe von #navi ist definiert mit k CHIP SOFTWARE HOMEPAGE 43

5 height: 100%. In bedeutet das so viel wie Genauso groß wie das umgebende Element und das ist body. Die Browser berechnen die Navigationsleiste daraufhin folgendermaßen: k Die Höhe von body ist noch nicht definiert worden. k Also ist die Höhe der Navigationsleiste 100% von nicht definiert und das ergibt zu 100% nicht definiert. Um das Problem zu lösen, geben Sie body und dem Stammelement html, das zwar unsichtbar, aber doch vorhanden ist, ebenfalls eine Höhe von 100%: html, body { height: 100%; Nun reicht die Navigationsleiste bis an das untere Ende des Browserfensters. Mehrere Selektoren durch Kommas trennen: Beachten Sie das Komma zwischen html und body. Wenn es gesetzt ist, bezieht der Browser diese Regel auf beide Selektoren. Rollover-Effekte einbauen Im nächsten Schritt gestalten Sie die Navigationsliste und die Links darin. Zunächst verschaffen Sie den Listenpunkten ein wenig Luft: #navi li { padding: 2px; margin: 2px; Und jetzt kommt der Rollover-Effekt: Wenn der Mauszeiger über einem Link schwebt heißt bei a:hover (ohne Leerstellen beim Doppelpunkt): #navi a:hover { color: black; #de0029; /* rote Rahmenlinie Das sieht schon gut aus, ist aber noch nicht perfekt. Denn erstens verrutschen die Links beim Hovern und zweitens sind sie alle unterschiedlich lang: k Die Links verrutschen, weil links die 5px breite rote Rahmenlinie erst beim Hovern eingefügt wird. Wenn die normalen Hyperlinks ebenfalls diese 5px bekommen, ist das Problem gelöst. k Die unterschiedliche Länge der Links Endergebnis: So sehen die beiden Beispielseiten nach ihrer Gestaltung mit Cascading Style Sheets () aus in guter Optik und nicht zuletzt barrierefrei. liegt daran, dass a ein Inline-Element ist und daher nur so breit wird wie der Text, der darin enthalten ist. Sie lösen das Problem, indem Sie a zum Block-Element befördern, so dass es so breit wird wie das umgebende li -Element. Fügen Sie dem bereits vorhandenen Selektor #navi a die beiden fett gedruckten Zeilen hinzu: #navi a { display: block; /* mache Link zum Block-Element */ text-decoration: none; padding: 4px; #004477; /* dunkelblauer Rahmen Nun funktioniert der Rollover-Effekt auch ohne optische Störungen. Navigationspunkt zeigen Zum Abschluss bauen Sie ein kleines optisches Highlight in Ihre Homepage ein: Mit einem kleinen -Trick heben Sie den aktuellen Navigationspunkt hervor, so dass jedem Besucher sofort klar ist, in welchem Bereich Ihrer Website er sich gerade befindet. Dazu ändern Sie den HTML-Quelltext ein wenig und fügen zwei verschachtelte Selektoren hinzu. Vorbereitungen im HTML: Im Quelltext geben Sie zunächst dem <body> -Tag auf den beiden Beispielseiten eine zusätzliche ID: <body id="startseite"> bzw. <body id="kontakt">. Nun weisen Sie den Navigationslinks ebenfalls eine eindeutige ID zu: <ul id="navi"> <li><a id="nav-startseite" href="index.html">startseite</a> </li> <li><a id="nav-kontakt" href="kontakt.html">kontakt</a>< /li> </ul> Diese Änderungen müssen Sie auf beiden Webseiten vornehmen. Zwei -Selektoren hinzufügen: Suchen Sie im den Selektor #navi a:hover und fügen Sie die beiden fett gedruckten Selektoren hinzu: #startseite #nav-startseite, #kontakt #nav-kontakt, #navi a:hover { color: black; #de0029; Der Trick dabei: Den ersten Selektor gibt es nur auf der Startseite, den zweiten nur auf der Kontaktseite. Die beiden Abbildungen oben zeigen Ihnen, wie die Beispielseiten nun aussehen. Peter Müller Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und schrieb im Laufe der Jahre einige erfolgreiche Bücher rund um das Thema Webpublishing. Voraussichtlich im April 2006 erscheint Little Boxes Webseiten gestalten mit. Grundlagen. Darin vertieft Müller die Themen seiner in diesem Heft erschienenen Artikel und vermittelt das notwendige Wissen zur Gestaltung von modernen, standardkonformen Webseiten mit lebendig und klar. Im Internet finden Sie Peter Müller unter der Adresse tekten.de. 44 CHIP SOFTWARE HOMEPAGE

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

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

Grundlagen-Beispiel CSS

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:

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

Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10

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

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

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

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

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

Kapitel 3. Wichtige HTML-Elemente (1)

Kapitel 3. Wichtige HTML-Elemente (1) Kapitel 3 Wichtige HTML-Elemente (1) Worin Sie die wichtigsten HTML-Elemente kennenlernen. Sie teilen die Webseite zunächst in Bereiche ein und beginnen dann mit der Erstellung eines sinnvoll strukturierten

Mehr

Umsetzen einer skalierbaren horizontalen Navigation:

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

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-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte

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

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

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

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

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

Übung: Bootstrap - Navbar

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

Mehr

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index. Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches

Mehr

HTML Programmierung. Aufgaben

HTML Programmierung. Aufgaben HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite

Mehr

ANWENDUNGSSOFTWARE CSS

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 ,

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

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

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

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

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

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27 Inhaltsübersicht readme.txt zur zweiten Auflage 21 I Die Einleitung 25 1 Das Web st nicht aus Papier 27 il HTML-Kästchen erstellen 39 2 So funktioniert HTML 41 3 Wichtige HTML-Elemente (1) 57 4 Wichtige

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

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

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

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

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

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

Dokumentation Kapitel 1. Dokumentation Kapitel 2

Dokumentation Kapitel 1. Dokumentation Kapitel 2 Dokumentation Kapitel 1 Das Web ist nicht aus Papier. Wenn man eine Webseite gestalten will an man das Papierdenken anwendet kommt man nicht weit oder es wird nicht so wie man es sich Vorgestellt hatte.

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

WEBSEITEN ENTWICKELN MIT ASP.NET

WEBSEITEN ENTWICKELN MIT ASP.NET jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm

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

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

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

Ü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

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor.

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor. Homepage bearbeiten mit dem ezillo.com Online Editor Bei ezillo.com können Sie für Ihre kostenlose Erotik Homepage eigene Unterseiten erstellen und bearbeiten. Dazu steht Ihnen mit dem Online Editor ein

Mehr

Wert. { color: blue; }

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

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

Inhaltsverzeichnis. readme.txt

Inhaltsverzeichnis. readme.txt LihtlE bdxbs Inhaltsverzeichnis - V : - - - ; - :;.;: :'..;:; readme.txt ig Teil I Die Einleitung 23 1 Das Web ist nicht aus Papier 25 1.1 Papierdenken, Webseiten und enttäuschte Erwartungen 25 Unterschied

Mehr

Tabellenfreies Layout in HTML

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

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

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

Mehr

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen,

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

Praktikum 8: CSS-Layout

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

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

Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T

Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T Inhaltsverzeichnis Technische Grundlagen S. 2 Grundsätzliches S. 2 Typographie und Farbgebung S. 3-4 Das Logo S. 5 Text S. 5 Die

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

http://www.therealgang.de/

http://www.therealgang.de/ http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:

Mehr

Erzherzog Johann Jahr 2009

Erzherzog Johann Jahr 2009 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein

Mehr

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing.

Leseprobe. »HTML und CSS im SchnelldurchlaufDas Box-ModellMedia Queries« Inhaltsverzeichnis. Index. Der Autor. www.galileocomputing. Know-how Wissen, wie s für geht. Kreative. Leseprobe Erfahren Sie zu Beginn in Kürze das Zusammenspiel von HTML und CSS. Anschließend lernen Sie das Box-Modell von CSS kennen, und wie Sie Media Queries

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

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

Kapitel 3 Frames Seite 1

Kapitel 3 Frames Seite 1 Kapitel 3 Frames Seite 1 3 Frames 3.1 Allgemeines Mit Frames teilt man eine HTML-Seite in mehrere Bereiche ein. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den

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

4.8 Das Box Modell, Block- vs Inline-Elemente

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

Mehr

Der Website-Generator

Der Website-Generator Der Website-Generator Der Website-Generator im Privatbereich gibt Ihnen die Möglichkeit, schnell eine eigene Website in einheitlichem Layout zu erstellen. In Klassen, Gruppen und Institutionen können auch

Mehr

Bedienungsanleitung. Content-Management-System GORILLA

Bedienungsanleitung. Content-Management-System GORILLA Bedienungsanleitung Content-Management-System GORILLA Einloggen Öffnen Sie die Seite http://login.rasch-network.com Es öffnet sich folgendes Fenster. Zum Anmelden verwenden Sie die Benutzerdaten, die wir

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Eine HTML-Seite mit blinden Tabellen strukturieren In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Legen Sie in ihrem

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

Frames oder Rahmen im Browserfenster

Frames oder Rahmen im Browserfenster In dieser Ausbildungseinheit zeigen wir Ihnen, wie Frames oder auch Rahmen im Browserfenster erstellt werden. Dabei möchten wir anmerken, dass zu Frames bereits sehr viel Gegensätzliches geschrieben wurde.

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

Mehr

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org Layoutmodelle HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung

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

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

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

Wir lernen PowerPoint - Grundkurs Grußkarten erstellen

Wir lernen PowerPoint - Grundkurs Grußkarten erstellen Wir lernen PowerPoint - Grundkurs Grußkarten erstellen Inhalt der Anleitung Seite 1. Geburtstagskarte erstellen 2 6 2. Einladung erstellen 7 1 1. Geburtstagskarte erstellen a) Wir öffnen PowerPoint und

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren

Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Sie möchten die Positionierung Ihrer Internetseiten verbessern? Dann sollten Sie

Mehr

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,

Mehr

Inhalt: 1)Das Box-Modell

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

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

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

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

Mehr

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist

Mehr

Navigation für Internetpräsenzen

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

Mehr

Homepage mit HTML und CSS

Homepage mit HTML und CSS Homepage mit HTML und CSS Ein schneller und zielgerichteter Einstieg zur Erstellung einer Homepage Erstellungsdatum: November 2010 Autor: Thomas von Glahn Seite 1 Inhaltsverzeichnis 1. Vorbereitende Tätigkeiten

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

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

Dreamweaver 8 Homepage erstellen Teil 2

Dreamweaver 8 Homepage erstellen Teil 2 Dreamweaver 8 Homepage erstellen Teil 2 Voraussetzungen Das vorliegende Skriptum knüpft an folgende Skripten an und setzt voraus, dass du diese bereits durchgearbeitet hast. Dreamweaver_Einführung.pdf

Mehr

4 Aufzählungen und Listen erstellen

4 Aufzählungen und Listen erstellen 4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

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

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe?

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? Inhalt: 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? 1.Installation Um das Electronics Theme zu installieren, gehen Sie in der Rubrik Design zum Template Store. Hier sehen Sie

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

STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT. Arbeiten mit Word Erstellung einer Formatvorlage

STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT. Arbeiten mit Word Erstellung einer Formatvorlage STANDORT SOEST FACHBEREICH AGRARWIRTSCHAFT Arbeiten mit Word Erstellung einer Formatvorlage Datum: März 2015 Betreuer/in: B. Sc. Lena Reisner Dipl.-Ing agr. Sibylle Henter Inhalt Einleitung... 1 Anlegen

Mehr

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung...

Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung... Inhaltsverzeichnis Die fehlenden Danksagungen........................................... Einleitung................................................................... XI XV Teil 1: CSS-Grundlagen Kapitel

Mehr

CAS Webdesign und Webpublishing

CAS Webdesign und Webpublishing CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet. Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die

Mehr

ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003

ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003 ANLEITUNG ZUR TEXTGESTALTUNG IN WORD 2003 Word ist zunächst ein reines Textverarbeitungsprogramm. Allerdings lassen sich hier Vorträge genauso mit Gliederung und Querverweisen sowie Textquellen, Clips

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

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