Webdesign-Multimedia HTML und CSS

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Webdesign-Multimedia HTML und CSS"

Transkript

1 Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. ˆ HTML-Dokumente werden durch HTML-Tags beschrieben. Die meisten Tags müssen in HTML wieder geschlossen werden. <tag>inhalt</tag> Es gibt jedoch Ausnahmen bei Tags ohne Inhalt. Einige Beispiele: * <link> Verknüpfung zu CSS- oder Javascript-Dateien * <meta> Metadaten des HTML-Dokuments * <br> Zeilenumbruch 1

2 Struktur Jedes HTML-Dokument braucht eine passende Struktur, damit euer Browser den Inhalt korrekt darstellen kann. Die Struktur besteht aus den folgenden Elementen: ˆ DOCTYPE An dieser Stelle muss ich meine Aussage aus der Vorlesung korrigieren, dass HTML5- Dokumente dieses Element nicht mehr benötigen. An sich werden HTML5-Dokumente ohne dieses Element durchaus angezeigt, jedoch kann es zu Fehler beim Darstellen der Inhalte kommen. Deshalb empfehle ich euch, dass ihr dieses Element am Anfang des Dokuments einfügt. ˆ <html> Beschreibt das HTML-Dokument. ˆ <head> Beinhaltet Informationen über das HTML-Dokument, wie z.b. den Titel oder den Zeichensatz. ˆ <body> Beschreibt den sichtbaren Inhalt des HTML-Dokuments. Jedes euer HTML-Dokumente sollte demnach die folgende Grundstruktur beinhalten, damit euer Browser den Inhalt korrekt darstellen kann: <! DOCTYPE html > < html > < head > < meta charset= " utf-8 "> < title > Seitentitel </ title > </ head > <b ody > <!-- Inhalt --> </b ody > </ html > 2

3 Elemente Überschriften Es gibt sechs verschiedene Überschriften, die in der Größe absteigend dargestellt werden: <h1>ü berschrift 1</h1> <h2>ü berschrift 2</h2> <h3>ü berschrift 3</h3> <h4>ü berschrift 4</h4> <h5>ü berschrift 5</h5> <h6>ü berschrift 6</h6> Textabschnitte Textabschnitte (engl. paragraphs) ermöglichen es gewisse Teile eures Textes in einen Abschnitt zusammenzufassen. <p> Dies ist ein Textabschnitt. </p> < p > Dies ist ein weiterer Textabschnitt. </ p > Listen Listen können entweder sortiert (<ol>) oder unsortiert (<ul>) sein und jeweils wieder Unterlisten beinhalten. Listen können beliebig viele Listenelemente (<li>) enthalten. <ol> < li > Das erste Element einer sortieren Liste </ li > < li > Das zweite Element einer sortieren Liste </ li > < li > Das dritte Element einer sortieren Liste </ li > </ol> <ul> < li > Das erste Element einer unsortieren Liste </ li > < li > Das zweite Element einer unsortieren Liste </ li > < li > Das dritte Element einer unsortieren Liste </ li > </ul> Links Links ermöglichen euch Über Texte oder Bilder auf eine andere HTML-Seite weitergeleitet zu werden. <a href= " http: // "> Hier geht es zu Google </a> <a href= " picture_02.jpg "><img src= " picture_01.jpg "></a> 3

4 Bilder Bilder ermöglichen euch Bilddateien auf eurem PC oder direkt aus dem Internet auf euer HTML-Seite darstellen zu lassen. Ich empfehle bei Bildern das Attribut alt zu verwenden, dass die Beschreibung des Bildes für die folgenden Anwendungsfälle liefert: ˆ Das Bild konnte nicht geladen werden. ˆ Der Nutzer ist sehbehindert. ˆ Suchmaschinen <img src= " image.jpg " alt= " Beschreibung "> Div Div-Elemente werden genutzt um bestimmte Inhalte eures HTML-Dokuments zu gruppieren. So wollt ihr bspw. in einem Blog jeden Artikel durch eine Überschrift, ein Bild und einen passenden Text erweitern. Wenn ihr nun diese drei Elemente in ein Div- Element packt, könnt ihr diesen Artikel wesentlich leichter positionieren und/oder optisch verändern. < div class= " article "> <h1> Neuer Blog-Artikel </h1> <img src= " article1_picture01.jpg "> <p> Lorem ipsum dolor sit amet </p> </ div > Weitere Elemente Es gibt noch weitaus mehr HTML-Elemente, welche den Rahmen dieser kurzen Einführung sprengen würden. Für weitere Informationen empfehle ich euch die folgenden Internetseiten: ˆ w3schools Element Referenz ˆ selfthtml Übersicht 4

5 CSS Definition ˆ CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die bspw. den Inhalt eines HTML-Dokuments verschieden darstellen kann. ˆ Es gibt drei verschieden Möglichkeiten HTML-Elemente durch CSS optisch zu verändern: Ihr könnt einzelnen Elementen direkt CSS-Style Optionen zuweisen. <b ody style= " background-color:blue "> Ihr könnt ein einzelnes HTML-Dokument durch CSS optisch verändern: < head > <s tyle > body { </s tyle > </ head > background- color: blue; Ihr könnt mehrere HTML-Dokumente durch CSS-Dateien optisch verändern: < head > <li nk rel= " stylesheet " href= " main.css "> </ head > 5

6 Selektoren Es gibt drei verschienden Arten von Selektoren: ˆ Element-Selektor p { font- size: 10 px; Element Selektoren verändern die Optik eines HTML-Elements. Dies ist hilfreich, falls ihr alle Textabschnitte in eurem Dokument in der Größe von 10 Pixeln (oder anderen Größeneinheiten) darstellen möchtet. ˆ Klassen-Selektor. blau { color: blue; Klassen-Selektoren sind hilfereich, wenn ihr mehreren Objekten eures HTML- Dokuments die gleiche Optik verpassen möchtet. HTML-Elemente könnt ihr wie folgt Klassen zuordnen: <p class= " blau "> Blauer Text </p> ˆ ID-Selektor # besondere Ü berschrift { font- size: 300%; text- decoration: underline; ID-Selektoren sollten ihr nur dann verwenden, wenn ihr einem einzigen Element eine bestimmte Optik verpassen möchtet. <h1 id= " besondere Ü berschrift "> Ich bin ganz wichtig </h1> 6

7 Zudem ist es möglich Selektoren zu verschachteln. So könnt ihr bspw. Listenelementen, die Teil einer ungeordneten Liste in einer ungeordneten Liste sind eine bestimmte Optik verpassen. Somit werden alle anderen Listenelemente von diesem Selektor nicht beeinflusst. ul > ul > li { color: red; Auch CSS hat zahlreiche Attribute, die den Rahmen sprengen würden, deshalb verweise ich auf die folgenden Seiten: ˆ selfhtml CSS Übersicht ˆ w3schools CSS Tutorial 7

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

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

HTML5. Wie funktioniert HTML5? Tags: Attribute:

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

Mehr

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital

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

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

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

HTML Teil 2. So kann man HTML-Seiten mit

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

Mehr

Meine erste Homepage - Beispiele

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

Mehr

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

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

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

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

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

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

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

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

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

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

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

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

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

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Ü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

Crashkurs Webseitenerstellung mit HTML

Crashkurs Webseitenerstellung mit HTML Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,

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

WEBSEITEN ENTWICKELN MIT ASP.NET

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

Mehr

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

Web Technologien HTML & CSS

Web Technologien HTML & CSS Web Technologien HTML & CSS Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Wednesdays, 8:00 10:00 a.m. Room HS 021, B4 1 Themen

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

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

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

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

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

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5 HTML5 Linda York, Tina Wegener 2. Ausgabe, 3. Aktualisierung, Januar 2013 Grundlagen der Erstellung von Webseiten HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen

Mehr

4 Aufzählungen und Listen erstellen

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

Mehr

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7 HTML Kurs Dominic Dietiker Aktualisierung: February 13, 2009 Inhaltsverzeichnis 1 Das HTML-Dokument 2 2 Einige Tags 7 3 Erarbeiten weiterer Tags 11 4 Tabellen 11 A Lösungen 16 1 1 Das HTML-Dokument Tags

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

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10

Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10 HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH DOZENTENTEAM FÜR JEDES THEMA EIN SPEZIALIST ANDI KELLER andi@4eyes.ch Mitgründer von 4eyes

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

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

HTML für Anfänger. Version 0.1

HTML für Anfänger. Version 0.1 HTML für Anfänger Version 0.1 Inhaltsverzeichnis HTML für Anfänger...1 Version 0.1...1 Inhaltsverzeichnis...2 Warum schreibe ich dieses Tutorial?...3 An wen ist das Tutorial gerichtet?...4 Was wird benötigt?...5

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

Kapitel 3. Wichtige HTML-Elemente (1)

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

Mehr

Proseminar: Website-Management-Systeme

Proseminar: Website-Management-Systeme Proseminar: Website-Management-Systeme Thema: Web: Apache/Roxen von Oliver Roeschke email: o_roesch@informatik.uni-kl.de Gliederung: 1.) kurze Einleitung 2.) Begriffsklärung 3.) Was ist ein Web? 4.) das

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

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

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

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

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

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

Abgabetermin: , 23:59 Uhr

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

Mehr

CSS. Cascading Style Sheets

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

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

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

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

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

Kurzeinführung in HTML

Kurzeinführung in HTML Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1

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

HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: 978-3-86249-404-0 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: 978-3-86249-404-0 HTML5 HTML5 Marc Haunschild, Linda York, Tina Wegener 3. Ausgabe, Januar 2015 Grundlagen der Erstellung von Webseiten ISBN: 978-3-86249-404-0 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste

Mehr

EPUB. InDesign. E-Book. E-Books aus InDesign CC XHTML CSS. Reflowable. Fixed Layout. 11. September 2013 swiss publishing days

EPUB. InDesign. E-Book. E-Books aus InDesign CC XHTML CSS. Reflowable. Fixed Layout. 11. September 2013 swiss publishing days E-Book InDesign EPUB XHTML CSS Fixed Layout Reflowable E-Books aus InDesign CC 11. September 2013 swiss publishing days Kontakt: Folien: gregor.fellenz@publishingx.de http://www.publishingx.de/dokumente

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

Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben...

Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... 1 Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... Möglichst in Zweierteams! 1. Aufgabe: Notepad++ als Editor einrichten (für Windows) 2 Notepad++ für zuhause: Download von

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

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel

Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie

Mehr

Erste Schritte in NVU

Erste Schritte in NVU NVU (http://www.nvu-composer.de/) ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 28. April 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

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

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

Barrierefreie Webseiten erstellen mit TYPO3

Barrierefreie Webseiten erstellen mit TYPO3 Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute

Mehr

Webdesign mit HTML und CSS Einführungsabend

Webdesign mit HTML und CSS Einführungsabend Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung Das HTML Grundgerüst HTML ist ein Kompromiss

Mehr

Informatik I: Einführung in die Programmierung

Informatik I: Einführung in die Programmierung Informatik I: Einführung in die Programmierung 21. Das WWW befragen Albert-Ludwigs-Universität Freiburg Bernhard Nebel 13.01.2015 1 13.01.2015 B. Nebel Info I 3 / 17 Oft braucht ein Programm Informationen,

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

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

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

Frames oder Rahmen im Browserfenster

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

Mehr

... MathML XHTML RDF

... MathML XHTML RDF RDF in wissenschaftlichen Bibliotheken (LQI KUXQJLQ;0/ Die extensible Markup Language [XML] ist eine Metasprache für die Definition von Markup Sprachen. Sie unterscheidet sich durch ihre Fähigkeit, Markup

Mehr

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes)

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

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes)

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

GRUNDLAGEN HTML + CSS

GRUNDLAGEN HTML + CSS GRUNDLAGEN HTML + CSS Bitte beachten Sie mein Urheberrecht. Keine Veröffentlichung auch nicht in Auszügen - oder Weitergabe an Dritte ohne mein Einverständnis. alle Rechte vorbehalten: BüroSmart, Michaela

Mehr

Design anpassen eine kurze Einführung

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

Mehr

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

Mehr

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

Format- oder Stilvorlagen

Format- oder Stilvorlagen Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen

Mehr

HTML Tutorial Part I - Einführung und erste Texte schreiben

HTML Tutorial Part I - Einführung und erste Texte schreiben HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten

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

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015 Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8

Mehr

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

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

Mehr

HTML & Co. Ein kurzer Einblick

HTML & Co. Ein kurzer Einblick HTML & Co Ein kurzer Einblick 1 Was ist HTML? HTTP= Datenübertragungsprotokoll HTML (Hypertext Markup Language) = Formatiersystem für Textdokumente Entwickelt in Genf (CH) am CERN Befehle zur Formatierung,

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

This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de

This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de Visit the official website vorlagenstudio.de of this Joomla template and other thematic and high quality

Mehr

Suchmaschinen-Optimierung

Suchmaschinen-Optimierung Suchmaschinen, Google & Co. Suchroboter der Suchmaschinen suchen das Web ab von Link zu Link Inhalte der Seiten werden registriert bzw. indexiert riesengrosse Datenbanken 11.10.2016 2 Search Engine Optimization,

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