HTML. Hypertext Markup Language

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "HTML. Hypertext Markup Language"

Transkript

1 HTML Hypertext Markup Language

2 Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird <b>fett</b> dargestellt b) \section{überschrift 1} c)

3 Historie William Tunnicliffe stellt 1967 generic coding Konzept vor (Trennung Information von Darstellung.) Buch-Designer Stanley Rice veröffentlicht Idee der editorial structure tags Generalized Markup Language (GML): Konzept eines formal definierten Dokumententyps mit einer verschachtelten Struktur GML wird zu ISO 8879: Standard Generalized Markup Language (SGML) Vater ist Charles Goldschwab, IBM 1989 Tim Berners-Lee (CERN) beschreibt Grundzüge des WWW 1992 Tim Berners-Lee stellt ersten Entwurf zu HTML vor 1993 Alpha-Version des "Mosaic for X"-Browser ( Netscape Browser) 1994 MIT und CERN vereinbaren Gründung der W3 Organisation 1996 Erste Recommendation der Cascading Style Sheets, level Working Draft zur XML, 1998 erste Recommendation 2001 W3C verabschiedet den XML Schema-Standard Quelle:

4 HTML Einführung in HTML und CSS

5 Auszeichnung von Dokumenten (Text-) Dokumente bestehen aus Struktur Kapitel, Abschnitte, Verweise, Fußnoten, Aufzählungen usw. Inhalt/Daten Text, Bilder, Audio, Video Format/Darstellung Schriftarten, -größen, -formate, Farben, Positionen

6 Head Body Tags Attribute

7 HTML: Erlaubte Tags *) Dokument <html>, <head>, <body>, <title>, <meta> Listen <ul>, <ol>, <li> Gliederung <h1>..<h4>, <p>, <br> Bereiche <div>, <span> Links <a href= >, <a href= Auszeichnung <pre>, <code>, <em>, <strong>, <cite> Formatierung <table>, <tr>, <td> Formulare <form action= XY >, <input>, <select>, <option> Bilder <img src= XY.gif > *) Auszug

8 Übung 1: Bewerbungsseite Inhalt (Werte willkürlich) Demographische Angaben: Name, Adresse,.. Lebenslauf (zweite Seite auf die verlinkt ist) Hobbys (Liste) Tabellarischer Notenspiegel (Fach, Note) Sonstiges Engagement, Besonderheiten Zu verwendende HTML Elemente html, head, title, (meta), body, h1, h2, p, a, ul, li, img*), (table, tr, td)

9 HTML: Don t Dos Attribute zur Formatierung font, font-size text-align, valign bgcolor, color padding, margin width, height (Frames) (Tabellen zum Positionieren) Arztbrief? Arztbrief Beispiel csszengarden

10 Trennung: Darstellung und Inhalt Quelle:

11 Cascading Style Sheets CSS Festlegung von Layout/Formatierung Werden im Head definiert (extern/intern) Extern: Option 1 intern <head> <link rel= stylesheet type= text/css href= style.css > </head> Extern: Option 2 <head> <style style.css";</style> </head> <head> <style type= text/css > <!-- HIER_DIE_ANGABEN --> </style> </head>

12 Syntax von CSS-Angaben Syntax selector {css-element:wertangabe;} Beispiele h1 {font:arial; color:green;} p {font-weight:bold;}

13 CSS Selektoren Elemente (p, h1, ul, div, body, table...) Stylesheet: p,li {font:arial; color:green;} HTML <p>dieser Text würde grün erscheinen</p> Klassen Stylesheet:.fett {font-weight:bold;} HTML <p class= fett >Dieser Text würde fett erscheinen</p> IDs Stylesheet: #box1 {top:50px;} HTML <div id= box1 >Dieser Text wäre positioniert (s.u.)</div> Pseudoformate (Links: link visited hover..) Stylesheet: a:visited {text-decoration:none;} HTML <a href= index.html >Home</p>

14 Beispiele für CSS Angaben Schriftfomatierung font-family: Times New Roman, Times, serif font-style:italic font-size:x-small / font-size:12pt font-weight:bold color:red Schriftausrichtung text-align:left line-height:20px / color:#ff0000 (right, center, justify)

15 Positionierung mit CSS Elemente <div>: Erzwingt Zeilenumbruch; für Positionierung und Formatierung <span>: Text ist fortlaufend, zur Formatierung Beispiel HTML <div id= box1 >Dieser Text wäre positioniert </div> Stylesheet: #box1 {position:relative;top:50px; left:9px; width:150px; height:50px; background:red}

16 Optional: Übung 2: CSS-Dateien 1. Gehen auf die Seite 2. Lade dort den HTML Quelltext ( Download the sample html file ) 3. Betrachte die HTML-Datei im Browser (ohne CSS) 4. Lade zwei CSS-Dateien auf die Festplatte 5. Öffnen die HTML-Datei im Texteditor und setzen den Stylesheet-Pfad auf die erste CSS- Datei. Öffnen die HTML-Datei im Browser 6. Wiederholen Schritt 5. für zweite CSS-Datei

17 Übung 3: Formatieren mit CSS Bewerbung formatieren In HTML auf neue CSS-Datei verweisen Schriftart für gesamtes Dokument: Arial Farbe der Überschriften: blau Optional: Hintergrund der Liste: hellgrau Optional: Hobbys mit <span> kursiv formatieren Optional: Elemente in Bewerbung positionieren Demographische und restliche Daten in ein <div>- Element einbetten Elemente positionieren: Demographische Daten links, Rest rechts Name: XY Geb: 1923 Ort: Freiburg Browser Ausbildung Schule: XXXX HTWG: YYYY Hobbys xxx

18 Limitierung von HTML Keine Überprüfung der Struktur Bsp.: Das Dokument hat vier Überschriften <h1>. Jeder Überschrift folgt ein oder mehre Absätze Keine Trennung von Struktur und Semantik Bsp.: <p> kann Laborwerte oder Anamnese enthalten Keine Erweiterbarkeit der Tags Bsp.: Tag <patient> gibt es nicht Keine Überprüfung der Semantik (folgt) Bsp.: Beschreibt Dokument genau einen Patienten? Kein Ersatz für Austauschformate Bsp.: *.doc (Nicht Alles lässt sich in HTML darstellen) Unvollständige Trennung von Daten Darstellung

19 Trennung: Daten und Darstellung Tabelle Balkendiagramm Kreisdiagramm

20 Zusammenfassung HTML Geht auf Tim Berner-Lee (CERN) zurück ( 92) Ist eine (nicht erweiterbare) Markup-Sprache Beschreibt die Struktur (nicht Semantik) von Dokumenten Sollte CSS zur Formatierung/Layouten nutzen Kann mit dem Tutorial von Stefan Münz ( erlernt werden

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ü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

Seminar Document Engineering

Seminar Document Engineering Das OpenDocument-Format als Austauschformat 12.12.2006 Gliederung Problemstellung Gliederung Einstieg Gliederung Problemstellung Sie bewerben sich mit diesem Schreiben... Gliederung Problemstellung...

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

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

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

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

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

Ü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

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

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

Ü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

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

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

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

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

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

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

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

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

Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language

Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik Hypertext Markup Language About Daniel Mies Computervisualisitik, Diplom E-Mail: ugotit@uni-koblenz.de Folien & more: http://uni.ugotit.de

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

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

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

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

http://www.therealgang.de/

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

Mehr

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

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

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

XHTML. Lernfragen zu XHTML. Was ist HTML? Überblick

XHTML. Lernfragen zu XHTML. Was ist HTML? Überblick Lernfragen zu XHTML XHTML Ist XHTML eine Erweiterung von HTML? Wie hängt XHTML mit XML zusammen? Wie ist ein XHTML-Dokument strukturiert? Wo sind die klassischen Einsatzgebiete von XHTML? Referat von Peter

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

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

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

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

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

Mehr

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

Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S.

Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S. 128 5XHTML&CSS* Wissensbaustein»CSS: ID-Attribut«(S. 180) Wissensbaustein»CSS: Umrandungen«(S. 182) Wissensbaustein»CSS: Füllungen & Abstände«(S. 185) Wissensbaustein»CSS: Pseudo-Klassen & -Elemente«(S.

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

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

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

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

HTML. HyperText Markup Language. von Nico Merzbach

HTML. HyperText Markup Language. von Nico Merzbach HTML HyperText Markup Language von Nico Merzbach Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text,

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

XML-Einführung. Entwicklung Begriffe Vorteile/Möglichkeiten von XML Adressen Beispiele. Fachhochschule Nordwestschweiz FHNW Martin Hüsler

XML-Einführung. Entwicklung Begriffe Vorteile/Möglichkeiten von XML Adressen Beispiele. Fachhochschule Nordwestschweiz FHNW Martin Hüsler XML-Einführung Entwicklung Begriffe Vorteile/Möglichkeiten von XML Adressen Beispiele 1 Entwicklung Aus einem IBM-Projekt entstand die Sprache GML (Generalized Markup Language) Aus GML wurde im Jahr 1986

Mehr

XSLT 2015/2016 S Seite 1 h_da W

XSLT 2015/2016 S Seite 1 h_da W XSLT Seite 1 XSL / XSLT xsltransformation ::= stylesheet stylesheet ::= template* template pattern ::= pattern, content_constructor ::= patternpath Content_constructor ::= literal_result_element instruction

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

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

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

Kennen, können, beherrschen lernen was gebraucht wird

Kennen, können, beherrschen lernen was gebraucht wird Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch

Mehr

HTML Cascading Style Sheets

HTML Cascading Style Sheets Informatik 1 für Nebenfachstudierende Grundmodul HTML Cascading Style Sheets Kai-Steffen Hielscher Folienversion: 12. Dezember 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht

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

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

HTML-Grundlagen (X)HTML:

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

Mehr

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd> HTML Theoriefragen 1. Wofür steht die Abkürzung HTML? 2. Warum ist HTML keine Programmier sprache? 3. Wofür steht die Abkürzung DTD? 4. Beantworten Sie die Fragen zur folgenden DTD:

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

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

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

Information und ihre Darstellung: XHTML & CSS

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

Mehr

Clubsite4Fun Administration:

Clubsite4Fun Administration: Clubsite4Fun Administration: Farben und Schriftarten ändern Unser Fansite-Projekt macht Fortschritte: die Site präsentiert sich bereits mit neuer Kopfzeilengraphik und einem eigenen Logo. Irgendwie passt

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

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

Angewandte Informatik

Angewandte Informatik Angewandte Informatik Teil 9.1 Web Seiten V1.3 12.03.2011 1 von 37 Inhaltsverzeichnis 3... Welche Browser werden verwendet? 4... Mit welchen Browser surft die Welt? 5... Wie kommt der Browser zur Seite?

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

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

1.5 XHTML und CSS aus Sicht eines (In)Designers

1.5 XHTML und CSS aus Sicht eines (In)Designers D3kjd3Di38lk323nnm 1 Einleitung 1.5 XHTML und CSS aus Sicht eines (In)Designers Wenn Sie als (In)Designer bisher noch nicht mit XHTML und CSS in Berührung gekommen sind, sollten Sie dieses Kapitel durchlesen.

Mehr

EWS, WS 2016/17, Pfahler

EWS, WS 2016/17, Pfahler 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

Mehr

Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei

Nachbau der Website  1.)Hintergrundbild einfügen eigene CSS-Datei Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.

Mehr

Kapitel 17: CSS. Inhalt. Was kann CSS? (1) Was kann CSS? (2) 1. Einführung CSS. 2. Farben, Hintergründe, Zeichensätze. 3. Gruppierungen. 4.

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

Mehr

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus

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

Mehr

Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.

Kommentare <! Dies ist ein Kommentar > Zum Kommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt. HTML Grundgerüst titel der Seite Inhalt der Datei Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt

Mehr

Ä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

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

HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016

HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel

Mehr

Webseite in XML Kurzeinführung

Webseite in XML Kurzeinführung Webseite in XML Kurzeinführung 1. Entwicklung... 1 2. Erste Webpage in XML... 2 2.1 Erstes Beispiel... 2 2.2 Tags definieren... 4 2.3 Kommentare in XML... 5 2.4 XML mittels CSS im Browser ansehen... 5

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

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

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

11 Publizieren im Web

11 Publizieren im Web 11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten

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

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

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

Allgemeines. TU Dresden, 24.05.2006 Einführung in HTML Folie 2

Allgemeines. TU Dresden, 24.05.2006 Einführung in HTML Folie 2 Fakultät Elektrotechnik und Informationstechnik Einführung in HTML Dresden, 24.05.2006 Allgemeines HTML = Hypertext Markup Language 1991 am CERN in Genf entwickelt ( Tim Berners-Lee ) Ziel: wissenschaftliche

Mehr

Schiller-Gymnasium Hof 20.12.2004

Schiller-Gymnasium Hof 20.12.2004 Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

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

Mehr

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