index.html <!DOCTYPE html> <html>

Größe: px
Ab Seite anzeigen:

Download "index.html <!DOCTYPE html> <html>"

Transkript

1 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>schwerpunkt HTML und Informationssysteme</title> <link rel="stylesheet" href="style.css"> <link href=" Roboto" rel="stylesheet"> </head> <body id="startseite"> <nav id="menue_startseite"> <li><a href="index.html"> STARTSEITE </a></li> <li><a href="analyse.html"> ANALYSE </a></li> <li><a href="konzeption.html"> KONZEPTION </a></li> <li><a href="tabellen.html"> TABELLEN</a></li> <li><a href="selects.html"> SELECTS</a></li> </nav> <section id="content_startseite"> <h1>das Entity Relationship-Modell!</h1> <p> Herzlich Willkommen auf meiner Website, auf der ich kurz den Sinn und Zweck meines Entity-Relationship-Modells zum Thema Onlineshop erkläre und anhand einiger Beispiele mein Vorgehen zeige. Ich habe mir überlegt ein Modell zu einem Thema zu erstellen, das mir auch in meinem Alltag begegnet und habe mich dann für einen Onlineshop entschieden. Bevor Ich mit den einzelnen Schritten beginne hier erst einmal eine kurze Übersicht dieser Webseite: <p/> <li><a href="analyse.html"><h2>1. Analyse der Überlegungen</h2></a></li> <li><a href="konzeption.html"><h2>2. Konzeption des ER- Modells und der Kardinalitäten</h2></a></li> <li><a href="tabellen.html"><h2>3. Tabellen erzeugen und einfügen in eine Datenbank</h2></a></li> <li><a href="selects.html"><h2>4. Selects erstellen</ h2></a></li> </section> </body> </html>

2 analyse.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>schwerpunkt HTML und Informationssysteme</title> <link rel="stylesheet" href="style.css"> <link href=" Roboto" rel="stylesheet"> </head> <body id="analyse"> <nav id="menue_analyse"> <li><a href="index.html"> STARTSEITE </a></li> <li><a href="analyse.html"> ANALYSE </a></li> <li><a href="konzeption.html"> KONZEPTION </a></li> <li><a href="tabellen.html"> TABELLEN</a></li> <li><a href="selects.html"> SELECTS</a></li> </nav> <section id="content_analyse"> <h1>analyse der Überlegungen</h1> <span style = "color: #B41010"><h2>Welche Entities brauche Ich?</h2></span> <li><p>1. Shop</p></li> <li><p>2. Kunde</p></li> <li><p>3. Ware</p></li> <li><p>4. Lieferant</p></li> <span style = "color: #B41010"><h2>Wie stehen die Entities in Verbindung zueinander (Relations)?</h2></span> <li><p>a) Der Kunde gibt eine Bestellung bei dem Shop auf (bestellt)</p></li> <li><p>b) Der Shop hat die Ware (hat)</p></li> <li><p>c) Der Shop beauftragt den Lieferanten (beauftragt)</p></li> <li><p>d) Der Lieferant holt die Ware (holt)</p></li> <li><p>e) Der Lieferant liefert die Ware an den Kunden (liefert)</p></li> <span style = "color: #B41010"><h2>Was haben diese Entities/ Relations für Attribute?</h2></span> <span style = "color: #8ce2f2"><p><u>1. Shop</u></p></span> <li><p>- Shop Nummer (primary key)</p></li> <li><p>- URL Adresse</p></li>

3 <li><p>- Zahlungsart (also z.b. mit Kreditkarte, PayPal, auf Rechnung usw.)</p></li> <li><p>- Kontakt</p></li> <span style = "color: #8ce2f2"><p><u>2. Kunde</u></p></span> <li><p>- Kunden Nummer (primary key)</p></li> <li><p>- Jahrgang</p></li> <li><p>- Name</p></li> <li><p>- Adresse</p></li> <li><p>- Ort</p></li> <li><p>- Telefon</p></li> <span style = "color: #8ce2f2"><p><u>3. Ware</u></p></span> <li><p>- Artikel Nummer (primary key)</p></li> <li><p>- Artikel</p></li> <li><p>- Hersteller</p></li> <li><p>- Preis</p></li> <li><p>- Kategorie</p></li> <li><p>- Shop Nummer (primary key)</p></li> <span style = "color: #8ce2f2"><p><u>4. Lieferant</u></p></ span> <li><p>- Lieferanten Nummer (primary key)</p></li> <li><p>- Lieferservice</p></li> <li><p>- Lieferzeit</p></li> <p>damit ich später die Tabellen <i>kunde Shop</i>, <i>shop Lieferant</i> und <i>lieferant Kunde</i> einfacher miteinander verbinden kann, habe ich zusätzlich zu den 4 Entity Tabellen noch 3 Tabellen aus den Relationen erstellt und jeweils ein Attribut angehängt, das sich in einer der beiden Tabellen befindet (also z.b habe ich die Attribute KDNr und SNr an die Verbindung <i> bestellt </i> gehängt, da die KDNr in der Kunden Tabelle enthalten ist und die SNr in der Tabelle Shop).</p> <p>die Tabelle <i> bestellt </i> und die Tabelle <i> beauftragt </i> habe ich außerdem noch aus einem anderen Grund erstellt, dazu später mehr.</p> <span style = "color: #8ce2f2"><p><u>bestellt</u></p></span> <li><p>- Kunden Nummer</p></li> <li><p>- Shop Nummer</p></li> <span style = "color: #8ce2f2"><p><u>beauftragt</u></p></ span> <li><p>- Shop Nummer</p></li> <li><p>- Lieferanten Nummer</p></li>

4 <span style = "color: #8ce2f2"><p><u>liefert</u></p></span> <li><p>- Kunden Nummer</p></li> <li><p>- Artikel Nummer</p></li> <li><p>- Lieferanten Nummer</p></li> </section> </body> </html> konzeption.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>schwerpunkt HTML und Informationssysteme</title> <link rel="stylesheet" href="style.css"> <link href=" Roboto" rel="stylesheet"> </head> <body id="konzeption"> <nav id="menue_konzeption"> <li><a href="index.html"> STARTSEITE </a></li> <li><a href="analyse.html"> ANALYSE </a></li> <li><a href="konzeption.html"> KONZEPTION </a></li> <li><a href="tabellen.html"> TABELLEN</a></li> <li><a href="selects.html"> SELECTS</a></li> </nav> <section id="content_konzeption"> <h1>konzeption des ER-Modells</h1> <span style = "color: #B41010"><h2>Konzept</h2></span> <p> Nachdem ich mir alle Einzelteile überlegt habe, kann ich nun das eigentliche ER-Modell konzipieren: </p> <img src="img/bild1.png" width= "100%" /> <span style = "color: #B41010"><h2>Kardinalitäten</h2></span>

5 <p> Wie vorhin schon angesprochen, habe ich zwei Tabellen aus einem weiteren Grund erstellt und zwar deshalb, da beide Entities eine N:M Beziehung haben, was das bedeutet wird im folgenden erklärt:</p> <p>1. Der Kunde und der Shop haben eine <span style = "color: #FC2424"><b>N:M</b></span> Beziehung</p> <li><p>-> ein Kunde kann in mehreren Shops bestellen</ p></li> <li><p>-> ein Shop hat mehrere Kunden</p></li> <img src="img/bild2.png" width= "50%" /> <p>2. Der Shop und der Lieferant haben eine <span style = "color: #FC2424"><b>N:M</b></span> Beziehung </p> <li><p>-> ein Shop hat mehrere Lieferanten</p></li> <li><p>-> ein Lieferant wird von mehreren Shops beauftragt</p></li> <img src="img/bild3.png" width= "50%" /> <p>3. Der Shop und die Ware haben eine <span style = "color: #FC2424"><b>1:N</b></span> Beziehung</p> <li><p>-> ein Shop kann mehrere Waren haben</p></li> <li><p>-> eine Ware kann nur einen Shop haben</p></li> <img src="img/bild4.png" width= "50%" /> <p>4. Der Lieferant und der Kunde haben eine <span style = "color: #FC2424"><b>1:N</b></span> Beziehung</p> <li><p>-> der Lieferant liefert an mehrere Kunden aus</ p></li> <li><p>-> der Kunde kann nur von einem Lieferanten beliefert werden</p></li> <img src="img/bild5.png" width= "50%" /> <p>5. Der Lieferant und die Ware haben eine <span style = "color: #FC2424"><b>1:N</b></span> Beziehung</p> <li><p>-> Der Lieferant holt mehrere Waren ab</p></li> <li><p>-> die Ware kann nur von einem Lieferanten geholt werden</p></li> <img src="img/bild6.png" width= "50%" />

6 </section> </body> </html> tabellen.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>schwerpunkt HTML und Informationssysteme</title> <link rel="stylesheet" href="style.css"> <link href=" Roboto" rel="stylesheet"> </head> <body id="tabellen"> <nav id="menue_tabellen"> <li><a href="index.html"> STARTSEITE </a></li> <li><a href="analyse.html"> ANALYSE </a></li> <li><a href="konzeption.html"> KONZEPTION </a></li> <li><a href="tabellen.html"> TABELLEN</a></li> <li><a href="selects.html"> SELECTS</a></li> </nav> <section id="content_tabellen"> <h1>tabellen erzeugen</h1> <p> Nun werde Ich die Tabellen zu den einzelnen Entities und deren Attributen erstellen, befüllen und in das Datenbanksystem mithilfe der Software MySQL einfügen. Diese Vorgehen werde ich im folgenden beschreiben: </p> <p> Die folgenden SQL Befehle finden Sie in meinem Portfolio bei meinem Schwerpunkt unter dem Punkt "Informationssysteme". Hier sind nun die Beispiele zu den einzelnen Befehlen: </p> <li><p>1. Zuerst erstelle ich eine neue Datenbank mit dem SQL-Befehl <span style = "color: #FC2424"><b>create database</b></span> und nenne diese "Schwerpunkt" </p></li> <img src="img/bild7.png" width= "60%" />

7 <li><p>2. Danach erstelle ich mit dem Befehl <span style = "color: #FC2424"><b>create table</b></span> die Tabellen Kunde, Ware, Shop, Lieferant, bestellt, beauftragt und liefert:</p></li> <img src="img/bild8.png" width= "110%" /> <li><p>3. Jetzt geht es an die Befüllung der Tabellen der Datenbank mit den vorhandenen Daten. Mit dem Befehl <span style = "color: #FC2424"><b>insert into</b></span> (einfügen in) kann ich nun meine Attributwerte (<span style = "color: #FC2424"><b>values</b></span>) in die einzelnen Tabellen einfügen.</p></li> <span style = "color: #8ce2f2"><p><u>Tabelle Kunde</u></ p></span> <img src="img/bild9.png" width= "80%" /> <span style = "color: #8ce2f2"><p><u>Tabelle Shop</u></p></ span> <img src="img/bild10.0.png" width= "80%" /> <span style = "color: #8ce2f2"><p><u>Tabelle Ware</u></p></ span> <img src="img/bild10.1.png" width= "80%" /> <span style = "color: #8ce2f2"><p><u>Tabelle Lieferant</u></ p></span> <img src="img/bild10.2.png" width= "40%" /> <span style = "color: #8ce2f2"><p><u>Tabelle bestellt</u></ p></span> <img src="img/bild10.3.png" width= "20%" /> <span style = "color: #8ce2f2"><p><u>Tabelle beauftragt</u></ p></span> <img src="img/bild10.4.png" width= "20%" /> <span style = "color: #8ce2f2"><p><u>Tabelle liefert</u></ p></span> <img src="img/bild10.5.png" width= "25%" /> </section> </body> </html>

8 selects.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>schwerpunkt HTML und Informationssysteme</title> <link rel="stylesheet" href="style.css"> <link href=" Roboto" rel="stylesheet"> </head> <body id="selects"> <nav id="menue_selects"> <li><a href="index.html"> STARTSEITE </a></li> <li><a href="analyse.html"> ANALYSE </a></li> <li><a href="konzeption.html"> KONZEPTION </a></li> <li><a href="tabellen.html"> TABELLEN</a></li> <li><a href="selects.html"> SELECTS</a></li> </nav> <section id="content_selects"> <h1>selects erstellen</h1> <p> Bei diesem Schritt werde ich nun <b>select</b> Befehle anwenden, um verschiedenste Verbindungen zwischen den einzelnen Tabellen herzustellen. </p> <p><u>beispiele für Verbindungen (Selects):</u></p> <li><span style = "color: #8ce2f2"><p>1. Mit welchem Lieferservice und in welchem Zeitraum erhalten Kunden folgende Artikel:</ p></span> <p><i>kopfhörer</i></p> <img src="img/bild11.png" width= "80%" /> <img src="img/bild12.png" width= "70%" /> <p><i>tasche</i></p> <img src="img/bild13.png" width= "80%" /> <img src="img/bild14.png" width= "70%" /> </li>

9 <li><span style = "color: #8ce2f2"><p>2. Welche Kunden bezahlen Ihre Artikel mit PayPal?</p></span> <img src="img/bild15.png" width= "80%" /> <img src="img/bild16.png" width= "70%" /> </li> <li><span style = "color: #8ce2f2"><p>3. Welche Artikel bietet der Buchshop an, wer ist der Hersteller und wie viel kosten diese Artikel?</p></span> <img src="img/bild17.png" width= "80%" /> <img src="img/bild18.png" width= "70%" /> </li> <li><span style = "color: #8ce2f2"><p>4. Wie heißen die Kunden und wie lautet deren Adresse, die Artikel von Lieferant 400 ausgeliefert bekommen?</p></span> <img src="img/bild19.png" width= "80%" /> <img src="img/bild20.png" width= "70%" /> </li> <li><span style = "color: #8ce2f2"><p>5. Welche Artikel werden von welchen Kunden bestellt und aus welchen Kategorien sind diese? </p></span> <img src="img/bild21.png" width= "70%" /> <img src="img/bild22.png" width= "70%" /> </li> <li><span style = "color: #8ce2f2"><p> 6. Welchen Artikel bestellt der Kunde mit der Kundennummer 2706 und wie heißt dieser?</p></ span> <img src="img/bild23.png" width= "60%" />

10 <img src="img/bild24.png" width= "70%" /> </li> <li><span style = "color: #8ce2f2"><p>7. Wer bestellt, welche Artikel?</p></span> <img src="img/bild25.png" width= "90%" /></li> </section> </body> </html> style.css #startseite { background: #8ce2f2; #analyse { #konzeption { #tabellen { #selects { #menue_startseite { font-family: 'Roboto', Helvetica, Arial, sans-serif; padding: 30px; height: 120px; top: 0px; left: 0px; right: 0px; position: fixed; z-index: 1;

11 background: -webkit-gradient(linear, center top, center bottom, color-stop(30%, #8ce2f2),to(rgba(255,255,255,0))); background: -webkit-linear-gradient(top,#8ce2f2 30%,rgba(255,255,255,0) ); background: linear-gradient(to bottom,#8ce2f2 30%,rgba(255,255,255,0) ); #menue_analyse { font-family: 'Roboto', Helvetica, Arial, sans-serif; padding: 30px; height: 120px; top: 0px; left: 0px; right: 0px; position: fixed; z-index: 1; background: -webkit-gradient(linear, center top, center bottom, color-stop(30%, #fff),to(rgba(255,255,255,0))); background: -webkit-linear-gradient(top,#fff 30%,rgba(255,255,255,0) ); background: linear-gradient(to bottom,#fff 30%,rgba(255,255,255,0) ); #menue_konzeption { font-family: 'Roboto', Helvetica, Arial, sans-serif; padding: 30px; height: 120px; top: 0px; left: 0px; right: 0px; position: fixed; z-index: 1; background: -webkit-gradient(linear, center top, center bottom, color-stop(30%, #fff),to(rgba(255,255,255,0))); background: -webkit-linear-gradient(top,#fff 30%,rgba(255,255,255,0) ); background: linear-gradient(to bottom,#fff 30%,rgba(255,255,255,0) ); #menue_tabellen { font-family: 'Roboto', Helvetica, Arial, sans-serif; padding: 30px; height: 120px; top: 0px; left: 0px; right: 0px; position: fixed; z-index: 1; background: -webkit-gradient(linear, center top, center bottom, color-stop(30%, #fff),to(rgba(255,255,255,0))); background: -webkit-linear-gradient(top,#fff 30%,rgba(255,255,255,0) );

12 background: linear-gradient(to bottom,#fff 30%,rgba(255,255,255,0) ); #menue_selects { font-family: 'Roboto', Helvetica, Arial, sans-serif; padding: 30px; height: 120px; top: 0px; left: 0px; right: 0px; position: fixed; z-index: 1; background: -webkit-gradient(linear, center top, center bottom, color-stop(30%, #fff),to(rgba(255,255,255,0))); background: -webkit-linear-gradient(top,#fff 30%,rgba(255,255,255,0) ); background: linear-gradient(to bottom,#fff 30%,rgba(255,255,255,0) ); #startseite a { text-decoration: none; letter-spacing: 0.1em; color: #ffffff; margin: 20px; #startseite a:hover { color: #63a4b1; #startseite a:active { color: #4f848e; a { text-decoration: none; letter-spacing: 0.1em; color: #000000; margin: 20px; a:hover { color: #8ce2f2; a:active { color: #81c9d6; ul { list-style-type: none; margin: 0; padding: 0;

13 li { display: inline; h1{ font-family: 'Merriweather', Times, serif; font-size: 60px; color: #3a7a9b; letter-spacing: 0.1em; line-height: 1.0em; #content_startseite { font-family: 'Merriweather', Times, serif; padding-left: 120px; padding-right: 120px; margin-left: auto; margin-right: auto; width:auto; max-width: 960px; top: 160px; color: #3a7a9b; position: relative; line-height: 1.5em; #content_analyse { font-family: 'Merriweather', Times, serif; padding-left: 120px; padding-right: 120px; margin-left: auto; margin-right: auto; width:auto; max-width: 960px; top: 160px; color: #3a7a9b; position: relative; line-height: 1.5em; #content_konzeption { font-family: 'Merriweather', Times, serif; padding-left: 120px; padding-right: 120px; margin-left: auto; margin-right: auto; width:auto; max-width: 960px; top: 160px; color: #3a7a9b; position: relative; line-height: 1.5em; #content_tabellen {

14 font-family: 'Merriweather', Times, serif; padding-left: 120px; padding-right: 120px; margin-left: auto; margin-right: auto; width:auto; max-width: 960px; top: 160px; color: #3a7a9b; position: relative; line-height: 1.5em; #content_selects { font-family: 'Merriweather', Times, serif; padding-left: 120px; padding-right: 120px; margin-left: auto; margin-right: auto; width:auto; max-width: 960px; top: 160px; color: #3a7a9b; position: relative; line-height: 1.5em; #bild1 { position: relative; max-width: 100%;

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

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

Abgabetermin: , 23:59 Uhr

Abgabetermin: , 23:59 Uhr HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo

Mehr

CSS. Cascading Style Sheets

CSS. Cascading Style Sheets CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln

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

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

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

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

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, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15

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

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

Die Funktionalität von Suchportalen

Die Funktionalität von Suchportalen Studiengang Sprache und Kommunikation 1/6 Die Funktionalität von Suchportalen Anweisungen zur Erstellung eines eigenen Suchportals Ziel dieser Übung ist es, ein eigenes kleines Suchportal zu einem spezifischen

Mehr

Ändern der Schriftgröße für den Monitorexport

Ändern der Schriftgröße für den Monitorexport Ändern der Schriftgröße für den Monitorexport (Stand: 12/2017) In der Datei SUBST_ MO NITOR sind einige wenige Einträge zu ändern. Die Datei finden Sie im Programmverzeichnis von Untis: Wenn Sie diese

Mehr

Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei

Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche

Mehr

Fließlayout. »World of Fish«

Fließlayout. »World of Fish« Fließlayout 4»World of FishWorld of Fish«stellt ein kleines Informationsangebot zu einem begehbaren Aquarium dar, und dieses Angebot soll von uns umgesetzt werden. Im Vorfeld haben wir wie immer ein Konzept

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

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

Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.

Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen

Mehr

CSS Einführung & CSS Frameworks

CSS Einführung & CSS Frameworks CSS Einführung & CSS Frameworks Leif Singer leif.singer@inf.uni-hannover.de Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web 14.04.2010 Frage Anfragen von Kommilitonen: mit reinsetzen

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

HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick

HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der

Mehr

CSS in HTML-Elementen. Syntax und Grammatik von CSS

CSS in HTML-Elementen. Syntax und Grammatik von CSS CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element

Mehr

SASS und Compass. Struktur für eure Stylesheets

SASS und Compass. Struktur für eure Stylesheets SASS und Compass Struktur für eure Stylesheets Guten Tag Thomas Moseler Frontend-Developer www.rufzeichen-online.de Warum? .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler

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

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

Hinweise zum digitalen Schulbuch

Hinweise zum digitalen Schulbuch Weiterbildungslehrgang. Darstellung von Information Oliver Schneider, oliver.schneider@sickingengymnasium.de Inhaltsverzeichnis Hinweise zum digitalen Schulbuch. Informationsdarstellung im Internet.-.

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

Information und ihre Darstellung: XHTML & CSS

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

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

MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX

MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND FLEXBOX ich bin Dr. Eva Broermann gebürtige Nürnbergerin seit 20 Jahren in Wien vienneva.com seit 2002 Contao Partnerin CSS-begeistert Hobby-Jazz-Sängerin

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

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

17. CSS - Cascading Style Sheets Kapitel 17: CSS

17. CSS - Cascading Style Sheets Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung

Mehr

Unterschied zwischen HTML & XHTML?

Unterschied zwischen HTML & XHTML? Tutorium Webdesign von Maria Lechner Unterschied zwischen HTML & XHTML? HTML HyperText Markup Language (Hypertext-Auszeichnungssprache) SGML-basierte HTML XHTML Extensible HyperText Markup Language (erweiterbare

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

Computergrundlagen HTML Hypertext Markup Language

Computergrundlagen HTML Hypertext Markup Language Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße

Mehr

[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort

[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort [Guide] CSS (+ CSS 3!) Vorwort CSS in HTML einbinden HTML mit CSS ansprechen Farben Jetzt geht es los: Normales Stylen Boxen (DIVs) mit dem Boxmodel Fliessende Boxen Links formatieren & Pseudoklassen/Elemente

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

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

Navigationsmenü im Stil von Registern

Navigationsmenü im Stil von Registern Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben

Mehr

Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:

Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum: 1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel

Mehr

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080

Mehr

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt - Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

Modul 8: Browser-Processing- Pipeline

Modul 8: Browser-Processing- Pipeline Modul 8: Browser-Processing- Pipeline 10.06.2018 16:20:17 M. Leischner Internetkommunikation Folie 1 Grundmodell: Webbrowser Copyright 2013 Ilya Grigorik. Published by O'Reilly Media, Inc. Licensed under

Mehr

HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen

HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis

Mehr

Formatierung eines Text Ads in CSS

Formatierung eines Text Ads in CSS Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.

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

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

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

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. Ludwig-Maximilians-Universität München Wintersemester 2010/2011

Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011 Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten

Mehr

Mobiles Internet. Hermann Schwarz, Omar Youssef 5.Mai 2010

Mobiles Internet. Hermann Schwarz, Omar Youssef 5.Mai 2010 Mobiles Internet Hermann Schwarz, Omar Youssef 5.Mai 2010 Mobiles Internet Vier von fünf Handy-Besitzern können mit ihrem Gerät ins Internet gehen (Quelle: BITKOM 2007) 2008 gab es in Deutschland 107,4

Mehr

Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch

Joomla! Templates. Professionelle Vorlagen mit CSS. Daniel Koch Joomla! Templates Professionelle Vorlagen mit CSS Daniel Koch Daniel Koch Joomla!-Templates Professionelle Vorlagen mit CSS Daniel Koch Joomla!-Templates. Professionelle Vorlagen mit CSS ISBN: 978-3-86802-325-1

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

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

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

CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr -

CSS Befehle. Geschrieben von: Administrator Sonntag, den 24. April 2011 um 15:30 Uhr - // = 3) version = "n3"; if (browsername == "Netscape" && browserver >= 4) version = "n4"; if (browsername == "Microsoft Internet Explorer" && browserver >= 3.01 && browsermac!= -1) version = "ie3m"; if

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head> Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes

Mehr

Literatur. Webtechnologien WS 2018/19 - Teil 4/CSS I

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

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang=de> <head> Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes

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

Ü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

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

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

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

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

DML Befehl: UPDATE II

DML Befehl: UPDATE II HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit

Mehr

HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.

HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body. HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ

Mehr

XSL-FO XSL Formatting Objects

XSL-FO XSL Formatting Objects XML-Praxis XSL-FO XSL Formatting Objects Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Funktionsweise von XSL-FO Seitendefinitionen Areas block- und inline-elemente Fonts XSLT und XSL-FO XML-Praxis

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

Vorkasseassistent. Handbuch. 1 Vorkasseassistent. Data Development. Stand: Modulversion: Bearbeiter: SK

Vorkasseassistent. Handbuch. 1 Vorkasseassistent. Data Development. Stand: Modulversion: Bearbeiter: SK 1 Vorkasseassistent Data Development Vorkasseassistent Handbuch Stand: 23.06.2015 Modulversion: 3.1.1.0 Bearbeiter: SK D³ Data Development, Inh.: Thomas Dartsch, Stollberger Straße 23, 09380 Thalheim /

Mehr

Fotogalerie. Schwierigkeitsgrad: schwer

Fotogalerie. Schwierigkeitsgrad: schwer Fotogalerie 1 Vor uns haben wir ein wunderbares Layout, das eine Fotogalerie darstellt und das wir nicht mehr lediglich als Screenshot ansehen wollen. Anhand der anstehenden Aufgaben, die uns über horizontale

Mehr

HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt

HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer

Mehr

Eine kurze Einführung in die wichtigsten Grundlagen der Cascading Style Sheets (CSS)

Eine kurze Einführung in die wichtigsten Grundlagen der Cascading Style Sheets (CSS) Eine kurze Einführung in die wichtigsten Grundlagen der Cascading Style Sheets (CSS) Martin Vollenweider Inhaltsverzeichnis Inhaltsverzeichnis Verknüpfung von HTML und CSS... 3 Einsatz... 3 Drei Verknüpfungen

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

XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß

XHTML und CSS. Marco Skulschus Daniel Winter Alexander Muß XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß 1 2 XHTML und CSS Marco Skulschus Daniel Winter Alexander Muß Webseite zum Buch: www.comelio-medien.com/dedi3_568.php 2008 Comelio Medien 3 Alle

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

12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-

12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!- 12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(

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

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer 15.04.2014 Was ist HTML? Tim Berners-Lee Die erste Webseite: info.cern.ch, 13. November 1990 Webseiten waren ursprünglich einfache Textseiten mit Links. HTML = Textzusätze zur Formatierung & Erweiterung

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

INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+

INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ INDEXHIBIT 1 Download: www.bgames.ch/hibit.zip Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ Datenbank einrichten: Anleitung zum einrichten einer Datenbank sollten sich auf

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

Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente.

Hintergrundbilder. background-image. Werte: URL (Standort des Bildes) none inherit. Standard: none. Gilt für: alle Elemente. HTML 8 Vorbereitung Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben!

Mehr

IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery

IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery Für unser Miniredaktionssystem, das wir im Laufe der nächsten Wochen / Monate entwickeln werden, verwenden wir eine der Website

Mehr

CSS(3) verstehen und anwenden. Alexej Schneider APEX Connect 2017

CSS(3) verstehen und anwenden. Alexej Schneider APEX Connect 2017 CSS(3) verstehen und anwenden Alexej Schneider APEX Connect 2017 Facts & Figures Mittelständischer IT-Dienstleister Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Managing

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

JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober

JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober JavaScript II Bildaustausch mit dem Attribut name und zwei Funktionen function asterix() { document.images1.src="bilder/asterix.jpg"; function obelix() { document.images1.src="bilder/obelix.jpg";

Mehr

1 Ein erster Überblick 3

1 Ein erster Überblick 3 xiii I Grundlagen 1 Ein erster Überblick 3 1.1 CSS im Zusammenhang........................................3 1.2 Der eigentliche Zweck von CSS.................................4 1.3 Warum die meisten Tabellen

Mehr

Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II

Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II 26.04.18 1 Überblick Farben Text Box-Modell Rahmen Hintergrund Tabellen Layer mit div Verschiedene Effekte 2 Farben I Farben werden nach dem

Mehr

Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II

Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II Webtechnologien Teil 5: Cascading Style Sheets (CSS) - Teil II 02.10.18 1 Überblick Farben Text Box-Modell Rahmen Hintergrund Tabellen Layer mit div Verschiedene Effekte 2 Farben I Farben werden nach dem

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