EWS, WS 2016/17, Pfahler

Größe: px
Ab Seite anzeigen:

Download "EWS, WS 2016/17, Pfahler"

Transkript

1 Vorlesung und Übung Universität Paderborn Wintersemester 2016/2017 Dr. Peter Pfahler HTML und CSS F-1 HTML: Ein kurzer Überblick HTML steht für Hypertext Markup Language: eine Auszeichnungssprache, in der man Dokumente durch Hyperlinks (Verweise) miteinander verknüpfen kann. Entwickelt 1990 von Sir Tim Berners-Lee, CERN, Genf. Im Moment ist die Version HTML5 aktuell. Siehe auch Veranstaltung Einführung in die Informatik. Markups sind typografische Anweisungen für die Strukturierung von Texten in Abschnitte, Absätze, Listen, Tabellen die Gestaltung von Zeichen: Schrifttyp, Schriftgrad, Schriftstil, Schriftfarbe die Bildmontage: Platzierung und Größe das Layout des Dokumentes: Tabellen und Frames die Verknüpfung von Dokumenten: Anker, Links, sensitive Bildbereiche die Dialoggestaltung: Formulare, Schaltelemente. F-2

2 Grundstruktur von Dokument und Seite Grundstruktur DOCTYPE, html, head, body Kopfdaten title, meta, link, style, base Seitenstrukturierung body, header, nav, aside, main, section, article, footer, address h1, h2, h3, h4, h5, h6 (Überschriften) F-3 Grundstruktur von Dokument und Seite F-4

3 Textstrukturierung Textstrukturierung h1, h2, h3, h4, h5, h6 (Überschriften) p, pre, blockquote, figure, figcaption ol, ul, dl, li, dt, dd (Listen) hr div F-5 F-6 Textstrukturierung

4 Textstrukturierung F-7 Textauszeichnung Textauszeichnung b, em, i, kbd, mark, s, small, strong, sub, sup, u cite, q (Zitate) dfn, abbr code, var, samp time ruby, rt, rp bdi, bdo br, wbr (Zeilenumbrüche) del, ins (Änderungsmarkierungen) span F-8

5 Tabellen Tabellen table caption col, colgroup thead, tbody, tfoot tr th, td F-9 F-10 Tabellen

6 Tabellen F-11 F-12 Hyperlinks Links (Verweise) a map, area

7 Hyperlinks F-13 Multimedia und Grafiken Multimedia und Grafiken img, picture, map, area, canvas, svg, math iframe, embed, object, param audio, video, source, track F-14

8 Multimedia, Grafiken, Einbettungen F-15 Multimedia, Grafiken, Einbettungen F-16

9 Multimedia, Grafiken, Einbettungen F-17 Formulare Typen der Input-Elemente Formulare form, fieldset, legend, label, datalist input, button, select, optgroup, option, textarea, keygen output, progress, meter type = "text" type = "search" type = "password" type = "tel" type = "url" type = " " type = "number" type = "range" type = "hidden" type = "file" type = "color" type = "date" type = "datetime" type = "datetime-local" type = "week" type = "month" type = "time" type = "radio" type = "checkbox" type = "button" type = "submit" type = "image" type = "reset" F-18

10 Ein einfaches Formular F-19 Ein einfaches Formular action-attribut Ziel, an das die Eingabe geschickt wird; Web-Adresse als URL. Das Ziel ist i.d.r. ein Programm, das die Eingabe verarbeitet, z. B. Ein PHP-Skript. Übermittlung der Daten: Nach Drücken der "submit" Schaltfläche wird das Ziel-Dokument angefordert.die eingegebenen Formulardaten werden dem Server der angegebenen Zieladresse übermittelt und dort verarbeitet. F-20

11 Ein einfaches Formular method-attribut charakterisiert die Art der Übertragung zum Ziel (HTTP-Übertragungsmethode) Mögliche Attribute: get oder post get Formulardaten werden an die Zieladresse angehängt. Parameter sind in der URL sichtbar. post Formulardaten werden dem empfangenden Web-Server auf dem Standard-Eingabe-Kanal zur Verfügung gestellt.. F-21 Auswahllisten Mehrfachauswahl mit Attribut Multiple Mehr Optionen sichtbar machen mit Attribut size Verschachtelte Auswahl mit <optgroup> F-22

12 Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) ist eine Sprache zur Definition von Formateigenschaften für HTML-Auszeichnungen. CSS wird verwendet, um Formatierungsangaben von den Auszeichnungen der Struktur und der Zweck-bezogenen Hervorhebungen zu trennen: HTML-Datei: Struktur und Rolle der Elemente CSS-Datei: im Dokument benutzt zur Formatierung Formatierung der markierten Elemente <h1>unsere Uni</h1> <p>eine der 5 Fakultäten ist die <span class="eim"> Fakultät EIM</span>.</p> h1 {font size:24;}.eim {color:blue;} Ziele: konsistente Formatierung im ganzen Dokument konsistente Formatierung in vielen Dokumenten (Corporate Identity) einfache Änderung der Formatierung in der CSS-Datei - HTML-Dateien bleiben unverändert F-23 Stylesheets in HTML einbinden 3 Arten: Externe Datei Im <head>-abschnitt der HTML-Datei wird ein Link auf die CSS-Datei eingetragen: <link rel="stylesheet" href="formate.css"> Intern im Dokument Im <head>-abschnitt der HTML-Datei <style>td {border: 1px solid gray;}</style> Lokal als Attribut von HTML-Elementen <h1 style="text align: center; text decoration: underline;"> Interne und lokale Definitionen sind an das Dokument gebunden. Sie sind also nicht zentral definiert und wiederverwendbar für viele Dokumente eingesetzt. F-24

13 Syntax von CSS Ein Stylesheet besteht aus Regelsätzen. Ein Regelsatz besteht aus Selektoren (Komma-getrennt) gefolgt von Deklarationen in geschweiften Klammern. Eine Deklaration besteht aus Eigenschaft und Werten, durch Doppelpunkt getrennt, durch Semikolon abgeschlossen. Werte sind ein oder mehrere Wertangaben. (Beispiel einer verbalen Syntaxbeschreibung) h1, h2 {text-align: center; color: red;} em {font-weight: bold;} strong {font-weight: bold; color:red;} table {border: 1px solid gray;} F-25 CSS-Selektortypen Universal-Selektor betrifft alle HTML-Tags * {margin: 0px;} Typselektor spricht ausgewähle HTML-Tags an h1, h2 {font-style:italic;} ID-Selektor spricht ausgewähle Elemente des Dokuments an #bigbox {border: 3px;} Klassenselektor spricht ausgewähle Klassen von Elementen des Dokuments an Nachfahren-Selektor spricht Elementen in Unterstrukturen an.wichtig {color: red;} ul.oops {font-weight:bold;} Im HTML <div id="bigbox"> <p class="wichtig"> <ul class="oops">... F-26

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

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

Über den Autor 7 Über den Übersetzer 7

Über den Autor 7 Über den Übersetzer 7 Inhaltsverzeichnis Über den Autor 7 Über den Übersetzer 7 Einführung 15 Über dieses Buch 15 In diesem Buch verwendete Symbole 15 Eine Anmerkung zum Begriff HTML5 16 Begleitressourcen im Web 16 Kapitel

Mehr

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur

Mehr

Vorwort. Tag 1 Von der Idee zum eigenen Web. Tag 2 Am Anfang war... HTML

Vorwort. Tag 1 Von der Idee zum eigenen Web. Tag 2 Am Anfang war... HTML Vorwort Tag 1 Von der Idee zum eigenen Web 1.1 Idee und Design 1.2 Aufsetzen des Codes - der HTML-Editor 1.3 Webseiten im Browser testen 1.4 Testen auf einem lokalen Webserver 1.5 Der Schritt in die Öffentlichkeit

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

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

Inhaltsverzeichnis. jetzt lerne ich. Willkommen 13

Inhaltsverzeichnis. jetzt lerne ich. Willkommen 13 Inhaltsverzeichnis jetzt lerne ich Willkommen 13 1 Einstieg Nützliche Hintergründe zum Einlesen 15 1.1 Warum eigentlich noch HTML lernen? 16 1.1.1 Eigene Webdokumente per Hand schreiben 16 1.1.2 HTML-Code

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

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

1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? Hintergrundwissen zu HTML 17

1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? Hintergrundwissen zu HTML 17 Inhaltsverzeichnis 1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? 13 1.2 Hintergrundwissen zu HTML 17 1.2.1 Die Entwicklung von HTML 17 1.2.2 Der Umstieg von HTML4 zu HTML5

Mehr

PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge

PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge Zentrum für Informationsdienste und Hochleistungsrechnen (ZIH) PHP & HTML Kurzeinstieg HTML Zellescher Weg 12 Willers-Bau A109 Tel. +49 351-463 - 32424 Michael Kluge (michael.kluge@tu-dresden.de) HTML

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

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

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

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

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

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

2. HTML. Vorlesung und Übung Dr. Peter Pfahler Institut für Informatik Universität Paderborn. Das Umfeld dynamischer Web-Anwendungen 2-2

2. HTML. Vorlesung und Übung Dr. Peter Pfahler Institut für Informatik Universität Paderborn. Das Umfeld dynamischer Web-Anwendungen 2-2 Vorlesung und Übung Dr. Peter Pfahler Institut für Informatik Universität Paderborn 2 2. HTML Das Umfeld dynamischer Web-Anwendungen 2-2 Geschichte Tim Berners Lee Erfinder des World Wide Web 1989 Jetzt

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

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

<form name= test action= test.php method= get autocomplete= on > </form> <form name= test action= test.php method= post autocomplete= on > </form>

<form name= test action= test.php method= get autocomplete= on > </form> <form name= test action= test.php method= post autocomplete= on > </form> WEBFORMULARE Nutzung von Formularen Suchbegriffe eingeben Benutzerdaten übertragen (Anschrift, Bankverbindung) Waren in Webshop bestellen Kommunikation über Gästebücher, Blogs, Chats Was wird benötigt?

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

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

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

HTML = Hyper Text Markup Language

HTML = Hyper Text Markup Language HTML Was ist das? Allgemeines Kopf HTML = Hyper Text Markup Language - ist eine Auszeichnungssprache, also KEINE Programmiersprache Navigation Inhalt - erstellbar mit jedem beliebigen Texteditor - dient

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

1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2

1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2 HTML GRUNDLAGEN 1 Einführung.. 1 2 Die Sprachen HTML und XHTML. 1 3 Struktur einer HTML Seite 1 4 Webseiten speichern.. 2 5 Elemente für die Seitenstruktur 2 6 Seiten und Inhalte verlinken. 4 7 Sonderzeichen

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

Informatik und Programmiersprachen

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

Mehr

2. Webapplikationen. Webzugang. Präsentation. Geschäftslogik. Browser. Datenhaltung. JSP, Servlets, ASP, PHP. HTML + JavaScript? +Java Applets?

2. Webapplikationen. Webzugang. Präsentation. Geschäftslogik. Browser. Datenhaltung. JSP, Servlets, ASP, PHP. HTML + JavaScript? +Java Applets? 1 2. Webapplikationen Web Client Präsentation HTML + JavaScript? +Java Applets? Browser Cookies HTTP mit HTML+Cookies HTTP mit Formularinhalt und Cookie Server Webzugang JSP, Servlets, ASP, PHP Geschäftslogik

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

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

LEHRGANG HTML / CSS. Inhaltsverzeichnis A) LEISTUNGSZIEL FÜR MEDIAMATIKER B) LEHRMITTEL

LEHRGANG HTML / CSS. Inhaltsverzeichnis A) LEISTUNGSZIEL FÜR MEDIAMATIKER B) LEHRMITTEL LEHRGANG HTML / CSS Inhaltsverzeichnis A) Leistungsziel für Mediamatiker... 1 B) Lehrmittel... 1 C) Lernkontrollen... 3 D) Zeitplan... 4 E) Wochenplan (Jg 2015)... 6 F) Lerninhalte OnlineKurs und Buch...

Mehr

HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.

HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b. HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm

Mehr

Start ohne Vorwissen CHRISTOPH PREVEZANOS

Start ohne Vorwissen CHRISTOPH PREVEZANOS jetzt lerne ich Start ohne Vorwissen CHRISTOPH PREVEZANOS Jetzt lerne ich HTML5 - PDF Inhaltsverzeichnis Jetzt lerne ich HTML5 - Start ohne Vorwissen Übersicht Inhaltsverzeichnis Willkommen 1 Einstieg

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

Workshop HTML5 & CSS3

Workshop HTML5 & CSS3 Workshop HTML5 & CSS3 Weblayouts professionell umsetzen - ein Einstieg in die Frontendentwicklung Bearbeitet von Stephan Heller 1. Auflage 2012. Taschenbuch. XIV, 302 S. Paperback ISBN 978 3 89864 807

Mehr

Frontend- technologien HTML. B04 Einführung in Softwaretechnologien

Frontend- technologien HTML. B04 Einführung in Softwaretechnologien Frontend- technologien HTML B04 Einführung in Softwaretechnologien Ihre Erwartungen an die Vorlesung Verknüpfung von Wirtschaft und digitaler Technologie Grundlagen, um mit Programmierern, Informatikern

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

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche

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

Internet-Technologien

Internet-Technologien Internet-Technologien PHP Workshop Bau eines Gästebuches Bisher: Heute: Clientseitiges Skripting (Bsp.: JavaScript) Ausführung von Programm-Code auf dem Client-Rechner Entlastung des Server-Rechners ++

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

Auszeichnungssprachen

Auszeichnungssprachen Auszeichnungssprachen HTML Was ist HTML? HTML - HyperText Markup Landguage (Dt. Hypertext Auszeichnungssprache). HTML ist die Sprache, mit der WWW-Seiten definiert werden und die die Struktur, den Inhalt

Mehr

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

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie

Mehr

1. Seminar Multimediale Werkzeuge Sommersemester 2011

1. Seminar Multimediale Werkzeuge Sommersemester 2011 1. Seminar Multimediale Werkzeuge Sommersemester 2011 Marco Niehaus marco.niehaus@tu-ilmenau.de 12.04.2011 Page 1 Organisatorisches Terminplanung? Übungs- & Hausaufgaben Gehen zu 30 % in die Endnote ein

Mehr

Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML

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

Mehr

Crashkurs HTML und CSS

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

Mehr

Ergänzungen zum HTML - Grundkurs

Ergänzungen zum HTML - Grundkurs Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,

Mehr

Digitale Medien. Übung

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

Mehr

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

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

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

GRUNDKURS INFORMATIK. Marcel Götze

GRUNDKURS INFORMATIK. Marcel Götze GRUNDKURS INFORMATIK 4 BESCHREIBUNG VON DATEN MARKUP Marcel Götze Vergangenes Thema Informations-/Datenverarbeitung Was passiert mit den Daten, wie werden Sie Verarbeitet? Algorithmen Definition Eigenschaften

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

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

Webseiten-Bericht für crimenetwork.biz

Webseiten-Bericht für crimenetwork.biz Webseiten-Bericht für crimenetwork.biz Generiert am 19 Mai 2019 17:43 PM mögliche Punkte: 52 von 100 Seitentitel Just a moment... Länge : 16 Perfekt, denn Ihr Seitentitel enthält zwischen 10 und 70 Anzahl

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

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

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen

Mehr

314

314 Index 313 314 Index #PCDATA und Textknoten 31 :before und: after 277 :link und Link-Pseudoklassen 166 a 297 abbr 80 Abkürzung 80 Absatz 51 Abschneiden 288 absolute Positionierung 221 Absolute und relative

Mehr

INP (2) Prof. Dr.-Ing. S. Gössner. University of Applied Sciences Lippe & Höxter

INP (2) Prof. Dr.-Ing. S. Gössner. University of Applied Sciences Lippe & Höxter INP (2) 1 of 23 INP (2) Prof. Dr.-Ing. S. Gössner University of Applied Sciences Lippe & Höxter INP (2) 2 of 23 Inhalt INP (2) Inhalt HTML - Einführung Textauszeichnung Syntax Grundgerüst Beispiel Sonderzeichen

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

Webdesign im Tourismus

Webdesign im Tourismus Übung Prof. Dr. Markus Landvogt Zur Vorlesung 2.3. Feinheiten in Jimdo 2.4. HTML in Jimdo 03 HTML - GRUNDLAGEN DER ERSTELLUNG VON WEBSEITEN 3.1 Aufbau einer Seite in HTML 3.2 HTML in Jimdo WEB 03 1 2.3.

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

"Die HTML-PHP-Schnittstelle -- Ein- und Ausgabe der Daten"

Die HTML-PHP-Schnittstelle -- Ein- und Ausgabe der Daten Mini-Workshop "Die HTML-PHP-Schnittstelle -- Ein- und Ausgabe der Daten" Dirk Wiebel 28.07.03 1. HTML-Grundlagen SGML-basierte Formatiersprache (HyperText Markup Language) Basiert auf Tags und Attributen

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

HTML5 Die neue Silver Bullet für die Verteilung technischer Information?

HTML5 Die neue Silver Bullet für die Verteilung technischer Information? TANNER AG 2012 TANNER AG Kemptener Straße 99 D-88131 Lindau (B) Telefon +49 8382 272-0 Fax +49 8382 272-900 www.tanner.de info@tanner.de HTML5 Die neue Silver Bullet für die Verteilung technischer Information?

Mehr

Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02

Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02 Einfach mehr können. HTML/CSS Einstieg für Anspruchsvolle Bonusmaterial Praxisbeispiel 01:18 Webformulare 07:39 Flexibles zweispaltiges Layout 05:24 Image-Replacement-Techniken 04:02 Inhaltsverzeichnis

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

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

Erste Schritte mit XHTML

Erste Schritte mit XHTML Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701

Mehr

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

Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Wintersemester 2015/16 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält

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 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines

Mehr

Anwendersoftware. Thema 7 Dialoggestaltung mit HTML-Formularen. Sommersemester Dr. Henry Herper

Anwendersoftware. Thema 7 Dialoggestaltung mit HTML-Formularen. Sommersemester Dr. Henry Herper Anwendersoftware Thema 7 Dialoggestaltung mit HTML-Formularen Sommersemester 2016 - Dr. Henry Herper HTML - Formulare Formulare bieten die Möglichkeit, innerhalb einer HTML-Seite Daten zu erfassen und

Mehr

Daniel Koch. Praxisbuch XHTML. An imprint of Pearson Education

Daniel Koch. Praxisbuch XHTML. An imprint of Pearson Education Daniel Koch Praxisbuch XHTML An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City Madrid Amsterdam Die Deutsche Bibliothek - CIP-Einheitsaufnahme

Mehr

1 Anforderungsliste 2.3.1, I, II A, AAA

1 Anforderungsliste 2.3.1, I, II A, AAA 1 Anforderungsliste Die vollständigen Anforderungen können der BITV 2.0 [1], die zusätzlichen Anforderungen von [2] entnommen werden. Die Tabelle gibt die Anforderungsnummer (BITV 2.0), die Priorität und

Mehr

Arbeiten mit Drupal. Teil 3: Erweiterte Kenntnisse

Arbeiten mit Drupal. Teil 3: Erweiterte Kenntnisse Arbeiten mit Drupal Teil 3: Erweiterte Kenntnisse Arbeiten mit Drupal Teil 3: Erweiterte Kenntnisse AGENDA Gruppen-Administration Mehrsprachigkeit Vertiefende Funktionen HTML & CSS Crashkurs Ausblick in

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

Title-Tag. Titel des HTML-Dokuments. Keywordhäufigkeit im Titel. Keyworddichte im Titel. Position des Keywords im Titel 1/9

Title-Tag. Titel des HTML-Dokuments. Keywordhäufigkeit im Titel. Keyworddichte im Titel. Position des Keywords im Titel 1/9 URL: http://www.schmela-angelshop.de/...line-fliegenruten/ Primäres Keyword/Phrase: Fliegenruten Keywords: Fliegenruten, Fliegenrute, Flyrod, Fliegenfischen Title-Tag Titel des HTML-Dokuments Gibt es einen

Mehr

XML light. XML bearbeiten. Jörn Clausen

XML light. XML bearbeiten. Jörn Clausen XML light XML bearbeiten Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Formen von XML Nutzen von Grammatiken XML-Mode des Emacs Beispiel-Sprache: XHTML XML light XML bearbeiten 2/25 Daten Daten?

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

Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen

Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen Staatliche Fachschule für Mechatronik- und Elektrotechnik Entwicklung einer Webseite zur Verwaltung von Prüfungsterminen von Voit Alexander 3. Januar 2018 Entwicklungsarbeit Staatliche Fachschule für Mechatronik-

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

Wir studieren HTML-Tags

Wir studieren HTML-Tags Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des

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

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

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

Die wichtigsten HyperTextMarkupLanguage tags 1(6) Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser

Mehr

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

Dr. Thomas Meinike

Dr. Thomas Meinike Dr. Thomas Meinike thomas.meinike@et.fh-merseburg.de Fachhochschule Merseburg Fachbereich Elektrotechnik Studiengang Kommunikation und Technische Dokumentation Überblick Streifzug durch 10 Jahre Web Was

Mehr

Frank Bongers. XHTML, HTML und CSS. Handbuch und Referenz. Galileo Press

Frank Bongers. XHTML, HTML und CSS. Handbuch und Referenz. Galileo Press Frank Bongers XHTML, HTML und CSS Handbuch und Referenz Galileo Press Vo rwort 17 mmmme 1.1 Am Anfang war HTML 21 1.1.1 Eine sehr liberale Grammatik und ihre Vorteile 22 1.1.2 Verarbeitung und Ergänzung

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

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

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

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