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

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

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

Transkript

1 JavaScript II

2 Bildaustausch mit dem Attribut name und zwei Funktionen <script language="javascript"> function asterix() { document.images1.src="bilder/asterix.jpg"; function obelix() { document.images1.src="bilder/obelix.jpg"; Funktion um das Bild von Asterix einzusetzen. Funktion um das Bild von Obelix einzusetzen. </script> <body> Ereignis mit Funktionsaufruf Ereignis mit Funktionsaufruf <a href="inhalt.htm" onmouseover="obelix()" onmouseout="asterix()"> <img src="bilder/asterix.jpg" name="images1" width="166" height="294" border=0></a> </body>

3 Bildaustausch mit dem Attribut name, einer Funktion und Variablenübergabe Funktion um das an die Variable Bild übergebene Bild einzusetzen. <script language="javascript"> function Bildtausch(Bild) { document.images1.src = Bild; </script> Ereignis mit Funktionsaufruf und der Übergabe des Bildnamens. <body> <a href=" onmouseover="bildtausch('bilder/obelix.jpg')" onmouseout="bildtausch('bilder/asterix.jpg')"> <img src="bilder/asterix.jpg" name="images1" width="166" height="294" border=0></a> </body>

4 Flächen ein-/ausblenden Funktion um die rote Fläche sichtbar/unsichtba r zu machen. Zugriff auf das Objekt per getelementbyid. Funktion um die blaue Fläche sichtbar/unsichtbar zu machen. Vergabe der id. function RoteFlaeche() { if (document.getelementbyid("rot").style.visibility == "hidden") { document.getelementbyid("rot").style.visibility = "visible"; else { document.getelementbyid("rot").style.visibility = "hidden"; function BlaueFlaeche() { if (document.getelementbyid("blau").style.visibility == "hidden") { document.getelementbyid("blau").style.visibility = "visible"; else { document.getelementbyid("blau").style.visibility = "hidden"; </script> <body> <div class="div1" id="rot">raum für den Inhalt von class "div1" id "cont1"</div> <div class="div2" id="blau">raum für den Inhalt von class "div2" id "cont2"</div> <p><a href="#" onclick="roteflaeche()">rote Fläche sichtbar/unsichtbar</a></p> <p><a href="#" onclick="blaueflaeche()">blaue Fläche sichtbar/unsichtbar </a></p> Textlink mit dem Ereignis onclick, um die entsprechende Funktion zu starten, die die Sichtbarkeit einstellt.

5 Aufgabe: Ersatzteilkennzeichnung durch mouseover

6 1. Div-Tag in der HTML-Datei setzen und mit Link umschließen <body> <a href="#" onmouseover="grafik_rahmen('rotor_t')" onmouseout="grafik_rahmen('rotor_t')"><div class="div1" id="rotor_b"></div> </a> <a href="#" onmouseover="text_rahmen('rotor_b')" onmouseout="text_rahmen('rotor_b')"><div class="div2" id="rotor_t"></div> </a> </body>

7 2. Rahmen in der CSS-Datei setzen.div1 { position: absolute; float: left; height: 20px; width: 127px; top: 601px; left: 23px; border-style: solid; border-color: #FF0000; border: none;.div2 { position: absolute; height: 116px; width: 170px; left: 409px; top: 419px; border-style: solid; border-color: #FF0000; border: none;

8 3. Javascript-Funktionen erstellen function Grafik_Rahmen(grafik) { if (document.getelementbyid(grafik).style.border == "") { document.getelementbyid(grafik).style.border = "solid"; else { document.getelementbyid(grafik).style.border = ""; function Text_Rahmen(text) { if (document.getelementbyid(text).style.border == "") { document.getelementbyid(text).style.border = "solid"; else { document.getelementbyid(text).style.border = "";

9 Mit Transparenz arbeiten Tabelle mit Browserspezifikationen Die folgende Tabelle soll die jeweiligen CSS-Codes der Browser für Transparenz zeigen: allgemeine Eigenschaft Internet Explorer Webkit (z.b. Safari) Mozilla Opera opacity: 0.7 filter:alpha(opacity=70) -webkit-opacity: 0.7 -moz-opacity: 0.7 -opera-opacity: 0.7 Hierbei fällt die bereits oben beschriebene Angabe des Wertes von 1 und in 0.1er Schritten weiter runter auf. Deutlich sticht der Internet Explorer heraus, der mit dem filter:alpha und (opacity) arbeitet. Hierbei wird der Prozentwert angeben also zum Beispiel 100, 70, 50, 10, etc. Der Wert 0.7 bzw. 70 in der Tabelle ist nur exemplarisch und kann den eigenen Wünschen entsprechend von 0 bzw. 0.1 bis 1 bzw. 0 (10) bis 100 eingesetzt werden.

Scripting für Kommunikationswissenschaftler Gruppe C

Scripting für Kommunikationswissenschaftler Gruppe C Professur E-Learning und Neue Medien Institut für Medienforschung Philosophische Fakultät Scripting für Kommunikationswissenschaftler Gruppe C https://s-media-cache-ak0.pinimg.com/736x/9e/46/b5/9e46b5c98ae65d0880f37a30989781bb.jpg

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

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

JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten

JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten Einführung in JavaScript anhand von Beispielen JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten Grundbedingungen die Einbindung erfolgt über ein Objektmodell (Objekte mit

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

VideoPlus. Shopware Video-Plugin. Handbuch

VideoPlus. Shopware Video-Plugin. Handbuch VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.

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

Muss Werbung immer stören?

Muss Werbung immer stören? ITMAGAZINE Muss Werbung immer stören? von Urs Binder 17. Juni 2002 - Bannerwerbung ist öde; Superstitials sind beim User verpönt. Unser Workshop präsentiert zwei attraktive DHTML-Schnäppchen für angenehme

Mehr

Beautify your APEX. Alexej Schneider DOAG 2016

Beautify your APEX. Alexej Schneider DOAG 2016 Beautify your APEX Alexej Schneider DOAG 2016 Im Überblick Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Ausbildungsbetrieb Inhabergeführte Aktiengesellschaft Gründungsjahr

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

Ereignisse Auf Benutzereingaben reagieren

Ereignisse Auf Benutzereingaben reagieren Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren,

Mehr

tacho 3d vege Fotolia.com Kai Greinke

tacho 3d vege Fotolia.com Kai Greinke tacho 3d vege Fotolia.com Kai Greinke URL eingeben ENTER Warten Was passiert in der Zeit Werkzeuge für die Analyse Analysieren der Inhalte Möglichkeiten beim CSS JavaScript Komprimieren Weitere Optimierung

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

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

AdOps Technische Spezifikationen

AdOps Technische Spezifikationen AdOps Technische Spezifikationen HTML5-Werbemittel (Desktop) Bei der Verwendung von Redirects müssen diese Spezifikationen nicht beachtet werden. Physische Anlieferung von HTML5-Werbemitteln + Trackings.

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

jquery Einstieg 2 CSS manipulieren; toggle, hide und show

jquery Einstieg 2 CSS manipulieren; toggle, hide und show jquery Einstieg 2 CSS manipulieren; toggle, hide und show Inhalt: 1. CSS-Eigenschaften manipulieren 2. Beispiel 2: Elemente ein- oder ausblenden - Animationen 3. Theorie - Methode.toggle() bzw. hide()

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

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

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

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

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

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg. Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung

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

Stand und Ausblick

Stand und Ausblick Stand und Ausblick Einführung: 26.04.2017, 16.00 Uhr (c.t.), PC Pool Übung: 03.05.2017, 16.00 Uhr, PC Pool Übung: 10.05.2017, 16.00 Uhr, HS 020 Übung:, 16.00 Uhr, HS 020 Übung: 21.06.2017, 16.00 Uhr, HS

Mehr

Interaktion Java und JavaScript

Interaktion Java und JavaScript Interaktion Java und JavaScript Eliane Müller Inhalt JavaScript LiveConnect Aufruf von Java aus JavaScript via client-side LiveConnect Aufruf von JavaScript aus Java via client-side LiveConnect Anwendung:

Mehr

Fakultät für Informatik & Wirtschaftsinformatik DB & IS II SS 2015 PHP MVC. Dr. Christian Senger. PHP MVC 1 von 21

Fakultät für Informatik & Wirtschaftsinformatik DB & IS II SS 2015 PHP MVC. Dr. Christian Senger. PHP MVC 1 von 21 PHP MVC PHP MVC 1 von 21 Model View Control Views Controlers Business logic GUI OO-application logic Object-relational-Mapping Relational DBMS PHP MVC 2 von 21 Webbasierte Informationssysteme WWW-Browser

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

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

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

Ereignisse Auf Benutzereingaben reagieren

Ereignisse Auf Benutzereingaben reagieren Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren,

Mehr

HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH

HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH Seite / 68 COMSOLIT GmbH Fullservice Agentur die erfolgreich professionelle Gesamtlösungen umsetzt. Zu den Kernkompetenzen zählen:

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

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch FULLSCREEN ShoPWArE VollBIlD-PluGIn handbuch FULLSCREEN ShoPWArE PluGIn Inhaltsverzeichnis Bildgröße für Vollbildansicht konfigurieren 04 Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen

Mehr

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1 1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der

Mehr

Dynamisches Anzeigen von Informationen in APEX mit jquery UI Dialogs und Tabs

Dynamisches Anzeigen von Informationen in APEX mit jquery UI Dialogs und Tabs Dynamisches Anzeigen von Informationen in APEX mit jquery UI Dialogs und Tabs Dr. Gudrun Pabst Trivadis GmbH München Schlüsselworte: APEX, jquery UI, Dialogs, Tabs Einleitung Die von Apex erstellten HTML-Seiten

Mehr

50 Fragen zu HTML und JavaScript - mit Antworten

50 Fragen zu HTML und JavaScript - mit Antworten 50 Fragen zu HTML und JavaScript - mit Antworten http://worgtsone.scienceontheweb.net/worgtsone/ - mailto: worgtsone @ hush.com Nov 21 2010 13. Oktober 2011 Inhaltsverzeichnis 1 50 Fragen 2 js bedeutet:

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

Social Data Mining. Albert Weichselbraun. May 2009

Social Data Mining. Albert Weichselbraun. May 2009 Social Data Mining Albert Weichselbraun Vienna University of Economics and Business Administration Department of Information Systems and Operations Augasse 2-6, 1090 Vienna albert.weichselbraun@wu.ac.at

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

Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an.

Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an. Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an. 1 API - Formulare Autor: pe/sl Version: 3.0, 2017-05-22 DESITE MD: 2.0.11 2 1 Formulare DESITE MD bietet vielfältige Möglichkeiten, um die Daten

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

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

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

4. Februar 2008 Klausur EWA

4. Februar 2008 Klausur EWA Hochschule Darmstadt fbi Fachbereich Informatik Klausur Entwicklung webbasierter Anwendungen (EWA), WS 07/08 4. Februar 2008 Klausur EWA Name Vorname Matrikelnummer Note Aufgabe max. Punkte erreichte Punkte

Mehr

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax 5.11.2015 bis 21.01.2016 Carolin Schneider (Matrikelnummer: 40127) Inhaltsverzeichnis Ziel des Projekts... 3 Projektverlauf...

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

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

3 Ein bisschen JavaScript

3 Ein bisschen JavaScript 3 Ein bisschen JavaScript Das Internet hat sich in den vergangen Jahren stark gewandelt. Vom reinen Informationsaustausch zwischen Wissenschaftlern ist das Internet zur multimedialen Spielwiese vieler

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

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

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

Funktionen nur wenn dann

Funktionen nur wenn dann Funktionen nur wenn dann Funktionen können auch nur in bestimmten Fällen angewendet werden. Code wird nur in einem bestimmten Fall ausgeführt Code Ja Code Block wahr if wahr? Nein else Code Block Alternative

Mehr

Erweiterte Interaktion mit Trees und Charts in APEX

Erweiterte Interaktion mit Trees und Charts in APEX Erweiterte Interaktion mit Trees und Charts in APEX Dr. Gudrun Pabst Trivadis Gmbh Lehrer-Wirth-Straße 4 81829 München gudrun.pabst@trivadis.com BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG

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

Ü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

Browserweichen mit JavaScript

Browserweichen mit JavaScript Browserseitiges Skripting: JavaScript Seite 1 von 12 JA WEI mit JavaScript Der Sinn und Zweck von Seite 1 Browser am Objektmodell erkennen Seite 3 Browsername, -version und Betriebssystem ermitteln Seite

Mehr

2. Briefing zur Übung IT-Systeme

2. Briefing zur Übung IT-Systeme 2. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 06.11.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

PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite

PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite PDF Einstellungen zur PDF-Generierung. PDF-Generierung aktivieren Aktiviert die PDF-Generierung für diesen Mandanten. Der Link - über welchen auf der Website das PDF erzeugt wird - muss manuell ins Template

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

Firefox Add-ons. Präsentation in WAP WS09/10 von Christoph ASCHBERGER, Andreas BERTOLIN, Robert MUTTER und Yunzhou XU

Firefox Add-ons. Präsentation in WAP WS09/10 von Christoph ASCHBERGER, Andreas BERTOLIN, Robert MUTTER und Yunzhou XU Firefox Add-ons Präsentation in WAP WS09/10 von Christoph ASCHBERGER, Andreas BERTOLIN, Robert MUTTER und Yunzhou XU Agenda Technisches Überblick XUL JavaScript CSS XPI-Pakete Einreichen bei Mozilla Sicherheitsüberlegungen

Mehr

Funktionen nur wenn dann

Funktionen nur wenn dann Funktionen nur wenn dann Funktionen können auch nur in bestimmten Fällen angewendet werden. Code wird nur in einem bestimmten Fall ausgeführt Code Ja Code Block wahr if wahr? Nein else Code Block Alternative

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

Vorteil. Einfach zu realisieren performant. Übersichtlich performant. "Vererbung" von Änderungen an vererbender Tabelle

Vorteil. Einfach zu realisieren performant. Übersichtlich performant. Vererbung von Änderungen an vererbender Tabelle O/R Mapping: Abbildung von Vererbungsbeziehungen Strategie Vorteil Nachteil 1- Tabelle Einfach zu realisieren performant Leere Felder kein not-null Beschränkungen Identifikation der Klasse über eignes

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Jetzt wollen wir uns dies zunutze machen, und unsere Wordpress-Seite mit eigenen PHP-Codes um ein paar Funktionalitäten ergänzen.

Jetzt wollen wir uns dies zunutze machen, und unsere Wordpress-Seite mit eigenen PHP-Codes um ein paar Funktionalitäten ergänzen. PHP in Wordpress Einführung Sie haben ja bereits einige Einblicke in PHP sowie Wordpress erhalten. Kurz zusammengefasst könnte man sagen, dass jede Wordpress-Einzelseite durch PHP-Code aus vordefinierten

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

Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut

Digitale Medien Vergangene Vorlesungen. Style-/Formatangaben. Style Angabe für jedes HTML-Element einfachster Fall: style-attribut Vergangene Vorlesungen Digitale Medien HTML Grundlagen Wichtige HTML Elemente 4. STYLESHEETS, CSS Heute: Anwendung Beispiele Trennung von Inhalt und Layout Oder: Woher weiß der Browser wie eine Seite darzustellen

Mehr

DOKUMENTATION. CaptchaAd als Werbevariante. Einbindung in Ihrer Webseite. Die Schritte zur Integration des CaptchaAds im Einzelnen

DOKUMENTATION. CaptchaAd als Werbevariante. Einbindung in Ihrer Webseite. Die Schritte zur Integration des CaptchaAds im Einzelnen CaptchaAd als Werbevariante Stand: 21. November 2016 Damit die Integration von CaptchaAd Ihnen noch leichter fällt, haben wir die notwendigen Schritte in diesem Leitfaden zusammen gefasst. Mit etwas Programmierkenntnissen

Mehr

Der Inhalt dieses Foliensatzes ist nicht klausurrelevent!!! - aber trotzdem interessant ;-)

Der Inhalt dieses Foliensatzes ist nicht klausurrelevent!!! - aber trotzdem interessant ;-) Model-View-Controler Paradigma Der Inhalt dieses Foliensatzes ist nicht klausurrelevent!!! - aber trotzdem interessant ;-) Andreas Schmidt PHP (MVC) 1/22 Model-View-Controler paradigma (1) Views Controlers

Mehr

Clickjacking und UI-Redressing

Clickjacking und UI-Redressing Marcus Niemietz marcus.niemietz@rub.de Ruhr-Universität Bochum Horst Görtz Institut für IT-Sicherheit 25.05.2012 Über meine Person Lehrstuhl für Netz- und Datensicherheit, RUB IT-Sicherheit/Informationstechnik

Mehr

Best Practices für HTML & CSS. Johannes Eschrig

Best Practices für HTML & CSS. Johannes Eschrig Best Practices für HTML & CSS. Johannes Eschrig Gliederung. 2 1. Best Practices i. Standards ii. Standardfreundlichkeit iii. Grundlegende Regeln 2. Best Practices für HTML i. class & id ii. HTML & CSS

Mehr

«Integration in WebSite» HTML-/Javascript-Code-Beispiele

«Integration in WebSite» HTML-/Javascript-Code-Beispiele QuickInfo «Integration in WebSite» HTML-/Javascript-Code-Beispiele Fragen? Ihre Umfrage soll direkt in resp. auf Ihrer WebSite erscheinen? Die Möglichkeiten für eine technische Integration an exakten Stellen

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

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente

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

Funktionen. - sind kleine, meist ausgelagerte Programme bzw. Programmfragmente. - können Werte zurückgeben, z.b. Berechnungen

Funktionen. - sind kleine, meist ausgelagerte Programme bzw. Programmfragmente. - können Werte zurückgeben, z.b. Berechnungen Funktionen - sind kleine, meist ausgelagerte Programme bzw. Programmfragmente - können Werte zurückgeben, z.b. Berechnungen - Wert kann alles sein, was man so in Variablen speichern kann Praktisches Beispiel:

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

Going Crazy mit JavaScript: Grafik im Browser. Martin Marinschek, Stefan Schuster IRIAN.at

Going Crazy mit JavaScript: Grafik im Browser. Martin Marinschek, Stefan Schuster IRIAN.at Going Crazy mit JavaScript: Grafik im Browser Martin Marinschek, Stefan Schuster IRIAN.at 2 Agenda Grafik im Browser Möglichkeiten Hilfsmittel Grafik-Applikationen Umsetzung Beispiele 3 Grafik im Browser?

Mehr

Multimedia im Netz. Übung zur Vorlesung. Ludwig-Maximilians-Universität Wintersemester 2010/2011

Multimedia im Netz. Übung zur Vorlesung. Ludwig-Maximilians-Universität Wintersemester 2010/2011 Übung zur Vorlesung Multimedia im Netz Ludwig-Maximilians-Universität Wintersemester 2010/2011 Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-1 Übungsblatt - 3 Thema: JavaScript

Mehr

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab

FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3

Mehr

Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an.

Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an. Managen Sie Ihr 3D-Gebäudemodell interaktiv. Von Anfang an. 1 QuickInfo, Tooltips Autor: pe/sl Version: 1.0, 2017-04-05 DESITE MD: 2.0.11 2 1 QuickInfo 3 1 QuickInfo Die QuickInfo ermöglicht einen schnellen

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

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

Cross-Platform Mobile Apps

Cross-Platform Mobile Apps Cross-Platform Mobile Apps 05. Juni 2013 Martin Wittemann Master of Science (2009) Arbeitet bei 1&1 Internet AG Head of Frameworks & Tooling Tech Lead von qooxdoo Plattformen Java ME 12 % Rest 7 % Android

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

DOM Document Object Model

DOM Document Object Model DOM Document Object Model J. Schneeberger Das Document Object Model (DOM) W3C Spezifikation Benutzt die Baumstruktur des (XML/HTML) Dokuments Programmierschnittstelle (API) für HTML- und XML-Dokumente

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

Web Data Mining. Albert Weichselbraun

Web Data Mining. Albert Weichselbraun Web Data Mining Albert Weichselbraun Vienna University of Economics and Business Department of Information Systems and Operations Augasse 2-6, 1090 Vienna albert.weichselbraun@wu.ac.at May 2011 Agenda

Mehr

Überblick. Klassen Optionale Typen DOM. Optionale Parameter Klassen. Einführung. 2 Motivation 3 Werkzeuge 4 Demonstration 5 Dart

Überblick. Klassen Optionale Typen DOM. Optionale Parameter Klassen. Einführung. 2 Motivation 3 Werkzeuge 4 Demonstration 5 Dart Eine kurze Lehrstuhl für Datenmanagement und -exploration RWTH Aachen Proseminar SS 2012 1 / 17 Überblick 1 2 3 4 5 6 7 8 2 / 17 1 -basierte Programmiersprache für Webanwendungen Entwickelt von Google

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

Dokumentation BKU-Erkennung

Dokumentation BKU-Erkennung www.egiz.gv.at E-Mail: post@egiz.gv.at Telefon: ++43 (316) 873 5514 Fax: ++43 (316) 873 5520 Inffeldgasse 16a / 8010 Graz / Austria Dokumentation BKU-Erkennung Version 1.1.1, 06.11.2006 DI Peter Danner

Mehr

XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1

XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1 XML Eine Einführung XML-Dokumente Im Internet Darstellen XML (C) J.M.Joller 1 XML Eine Einführung XML-Dokumente Im Internet Darstellen XML-Dokumente Mithilfe Der Datenbindung Anzeigen XML (C) J.M.Joller

Mehr

PHP JavaScript Kapitel 9. Java-Script-Objekte und das Event-Modell

PHP JavaScript Kapitel 9. Java-Script-Objekte und das Event-Modell Java-Script-Objekte und das Event-Modell 1 Interaktions-Methoden des Window-Objekts

Mehr

ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx)

ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx) ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx) Oliver Spritzendorfer Thomas Fekete ActiveX Technologie für ausführbaren Programmcode auf Web-Seiten wiederverwendbare Softwarekompononente

Mehr

Themen. JavaScript. Datentypen, Kontrollstrukturen, Besonderheiten. Document Object Model - Übersicht

Themen. JavaScript. Datentypen, Kontrollstrukturen, Besonderheiten. Document Object Model - Übersicht Themen JavaScript Datentypen, Kontrollstrukturen, Besonderheiten Document Object Model - Übersicht Einleitung Bereits gesehen: Folgend: Strukturierung von Inhalten mittels HTML CSS zur Formatierung von

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