HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze"

Transkript

1 HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

2 Hilfreiche Links und Bücher (deutsch) bzw. (englisch) 6DnOovY0t3nBg8Zb6aqm_H70mR Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. W3L GmbH, Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press, 2011.

3 Gliederung 1. HTML 2. CSS 3. Responsive Design

4 HTML textbasierte Auszeichnungssprache zur Strukturierung von Dokumenten Inhalt wird in Klartext geschrieben, nicht programmiert

5 HTML Document Object Model interpretiert jedes HTML-Dokument als Baumstruktur gibt hierarchische Struktur des Dokuments wieder

6 HTML ID und Class Universalattribute mit einer ID kann jedes HTML-Element im Dokument eindeutig identifiziert werden o darf nur einmal pro Dokument vorkommen o z.b. header und footer Class gibt an, welche CSS-Klassen auf das HTML- Element angewendet werden o darf beliebig oft verwendet werden o ist eine Art Zuordnung von Elementen zu einer Gruppe o z.b. Infoboxen

7 HTML Tag - Absatz

8 HTML Tag - Überschrift

9 HTML Tag Liste (ungeordnet)

10 HTML Tag Liste (geordnet)

11 HTML Tag - Tabelle

12 HTML Gruppierung von Inhalten

13 HTML Struktur einer Webseite

14 HTML Bilder Pfad zur Bilddatei Titel des Bildes alternativer Text

15 Verweisziel HTML Links

16 HTML Formulare method (Pflichtattribut): o o get Daten werden an die URI angehängt post - überträgt die Daten im Körper (Body) der Nachricht action (nicht zwingend erforderlich):!!!!!skript!!!! Was passiert wenn nicht angegeben????????? o o Wert: URI gibt an, welche Datei die Daten verarbeitet

17 HTML Formularelemente einzeilige Eingaben mittels <input.. > o Attribute: type (Art des Eingabeelements), name, value, size, maxlength

18 HTML Formularelemente mehrzeilige Eingaben mittels < textarea>..</textarea> Auswahllisten mit Tageinträgen mittels <select>..</select> o <option>.. </option> für Elemente in Auswahlliste

19 Übung zu HTML Erstellt eine kleine HTML-Webseite, die folgendes beinhaltet: ein Formular, in dem man o Nutzername und Passwort eingeben o das Geschlecht auswählen o und einen Abschicken Button betätigen soll optional: Überschriften, Paragraphen, Listen, Tabellen, Bilder,

20 Gliederung 1. HTML 2. CSS 3. Responsive Design

21 CSS (Cascading Style Sheets) Gestaltungssprache für HTML-Dokumente verantwortlich für das Design von Inhalten eines HTML-Dokuments jedem HTML-Element können Gestaltungsangaben zugeordnet werden

22 1. Inline: CSS Einbindung in HTML o unmittelbar bei den HTML-Elementen über das style- Attribut

23 CSS Einbindung in HTML 2. Intern (embedded): o Zusammenfassung der CSS-Stilregeln für HTML- Dokument über <style> im Kopfbereich

24 3. Extern: CSS Einbindung in HTML o Zusammenfassung von CSS-Stilregeln in eigenständiger Datei o Einbindung von <link.../> im head:

25 CSS Deklaration: Syntax jede Stilregel besteht aus: 1. Selektor(en) 2. CSS-Eigenschaft(en) innerhalb geschweifter Klammern, definiert durch Eigenschaftsname (Attribut) mit abschließendem Doppelpunkt Eigenschaftswert mit abschließendem Semikolon Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }

26 CSS Selektor leitet eine CSS-Stilregel ein, die damit eindeutig identifiziert wird gibt an, auf welches HTML-Element sich die Stilregel bezieht Selektor { Eigenschaft: Wert; } Selektor1, Selektor2 { Eigenschaft: Wert; }

27 CSS Selektion über HTML-Elemente Selektoren für gleichartige HTML-Elemente erhalten als Wert die Bezeichung des HTML-Elements

28 CSS Selektion über ID ID identifiziert Elemente mit eindeutiger Bezeichnung einmaliges Vorkommen

29 CSS Selektion über Class mehreren HTML-Elementen werden gemeinsame Eigenschaften zugewiesen

30 CSS Kombinatoren Nachfahren- Selektor p b { color: red; } <p><b>beispiel</b> für den <b>nachfahren</b>selektor</p> Kind -Selektor p > b { color: red; } <p><b>beispiel</b> für den <b>kind</b>selektor</p> Nachbar -Selektor Geschwister- Selektor h1 + p { fontweight: bold } h1 ~ p { fontweight: bold } <h1>nachbarselektor</h1> <p>erster Absatz.</p> <p>zweiter Absatz.</p> <h1>geschwisterselektor</h1> <p>zweiter Absatz.</p> <hr> <p>dritter Absatz.</p>

31 CSS Block-Elemente Elemente, die jeweils eine neue Zeile erzeugen Blockelemente stehen untereinander Bsp: h1 steht über h2, nicht daneben

32 CSS Inline-Elemente Elemente, die keine neue Zeile erzeugen Stehen nebeneinander Bsp: <a>, <img>, <sub>, <sup>, etc.

33 CSS Inline-Block-Elemente Mischung aus Block-& Inline-Element Mit p {display: inline-block; } wird eine Box erzeugt o Nach innen hin Eigenschaften eines Blockelements o Nach außen hin Eigenschaft eines Inlineelements Ermöglicht Elemente mit Blockeigenschaften nebeneinander anzuordnen

34 CSS Box-Modell CSS-Layout aus rechteckigen Boxen zusammengesetzt Box besteht aus: Inhaltsbereich padding border margin

35 padding CSS Innenabstand Befindet sich innerhalb des Elements Übernimmt Hintergrundfarben &-grafiken

36 border CSS Rahmen Umschließt Inhaltsbereich eines Elements sowie den Innenabstand

37 margin CSS Außenabstand Abstand zu umliegenden Elementen befindet sich außerhalb des Elements

38 CSS Positionierung Ohne individuelle Ausrichtung befindet sich ein Element im Datenfluss Positionierung kann relativ oder absolut erfolgen

39 CSS Relative Positionierung Verschiebung erfolgt durch position: relative; Richtungsangabe mit relativen Maßangaben

40 CSS Absolute Positionierung Element aus Dokumentenfluss entnommen Änderung der Ordnung/Reihenfolge durch position: absolute; Richtungsangaben mit absoluter Maßangabe

41 CSS Fixe Positionierung position: fixed; Gleiche Eigenschaften wie absolute, jedoch kein Mitscrollen

42 CSS Floating Verschiebung eines Elements an die Innenkante seiner Box Element hat weiterhin Einfluss auf das Layout Mit clear wird Floating beendet

43 CSS Vererbung Wenn ein Wert nicht festgelegt wird Standardwert Anstelle des Standardwerts wird Eigenschaft des Elternelements übernommen

44 CSS Cascading Kaskade = besondere Eigenschaft von CSS Zu lösendes Problem: Eigenschaften für ein Element können mehrfach & widersprüchlich festgelegt werden Lösung: Kaskade errechnet Gewichtung für Regeln und Eigenschaften

45 CSS Cascading Reihenfolge ausschlaggebend bei mehrfacher Deklaration Zuletzt deklarierte Eigenschaft wird verwendet!important: o Kennzeichnet einen Wert als wichtig o Verwendung: falls unabsichtlich mehrere Eigenschaften deklariert werden

46 CSS Ablauf der Kaskade Ablauf in mehreren Schritten o Anwendung der einzelnen Kriterien o Aussortierung von Deklarationen 1. Auf Element angewendete Deklarationen suchen 2. Nach Herkunft & Wichtigkeit sortieren 3. Übrige Regelsätze nach Spezifität ordnen 4. ggf. noch widersprüchliche Deklarationen der Reihenfolge entsprechend ausführen

47 CSS Spezifität Regelsätze werden nach Spezifität gewichtet Je allgemeiner, desto geringer die Gewichtung Für jeden Selektor werden 3 Zähler festgelegt: o B wird durch jedes Vorkommen von ID-Selektoren um 1 erhöht o C wird durch jedes Vorkommen eines Attribut-/Klassenselektors um 1 erhöht o D wird durch jedes Vorkommen eines Typselektors um 1 erhöht Universalselektoren werden ignoriert

48 CSS Spezifität des style-attributs Wenn Eigenschaften im style-attribut festgelegt sind, dann sind sie spezifischer als jeder Regelsatz in einem Stylesheet höchste Gewichtung

49 Übung zu CSS Gestaltet nun eure HTML-Webseite mit CSS nach eurem Belieben (Farbe, Schriftgröße, Position, ). Folgende Befehle könnten dafür besonders von Interesse sein: font-family (Schriftart) font-size (Schriftgröße) color (Schriftfarbe) background-color (Hintergrundfarbe) Weitere Befehle findet ihr hier:

50 Gliederung 1. HTML 2. CSS 3. Responsive Design

51 Responsive Design Definition Layout der Seite für das Ausgabemedium angepasst Antwortet durch Medienanalyse & Darstellungsanpassung Layout an bestimmten Breakpoints mittels Media Queries an andere Viewports anzupassen

52 Viewport Für die Darstellung der Inhalte zur Verfügung stehender Bereich des Browserfensters

53 Breakpoints Punkt, an dem das Layout umbricht Orientierung am Layout o Wenn viewport zu schmal wird, dann werden Elemente nicht mehr nebeneinander, sondern untereinander angezeigt Realisierung über Media Queries

54 Media Queries Liste von Kriterien, die ein Ausgabemedium zur Einbindung eines Stylesheets erfüllen muss Bestehen aus o Medientyp o Medienmerkmal o Kombination Verwendung an allen Stellen möglich, wo Stylesheet eingebunden werden

55 Media Queries

56 Desktop First reguläre Webseiten auf mobile Größe verkleinert Probleme: o Schwierig zu sehen o Code funktioniert nicht auf allen mobilen Geräten Lösung: Separate Seiten für mobile Geräte

57 Prozess umdrehen Mobile First Arbeitet mit Progressive Enhancement Relevante & präzise Inhalte Kein Selbstzweck, sondern Ausrichtung an Usability- Grundsätze

58 Bootstrap CSS-Framework zur Erstellung von Responsive Design Auf CSS & HTML basierende Stylesheets Elemente werden vorgefertigten Klassen hinzugefügt

59 Bootstrap Einbindung Download auf eigenen Server & Einbindung in <head> der HTML-Datei Einbindung von Bootstrap CDN getbootstrap.com

60 Bootstrap Grid 12 Spalten, die sich der Displaybreite anpassen Row & column 4 Varianten: xs sm md lg

61 Übung zu Bootstrap & Responsive Design Erstellt eine HTML-Datei, in die ihr Bootstrap CND korrekt einbindet. Eure Seite soll sowohl Header und Footer als auch min. 3 Textbereiche enthalten. Die Webseite muss sich im Sinne vom Responsive Design an mindestens 3 unterschiedliche Displaygrößen anpassen. Die Elemente müssen sich in Größe und Position so anpassen, dass der Inhalt immer gut sichtbar und das Layout ansprechend gestaltet ist (Schriftgestaltung, Farben, etc.). Fügt gegebenenfalls individuelle CSS-Regeln ein.

62 noch Fragen?

63 Vielen Dank für die Aufmerksamkeit!

64 Quellen cuteminions%2f&h=321&w=236&tbnid=p86alk17edjq8m%3a&zoom=1&docid=4zgjptcgfiggpm&ei=kqy9vdanejxtanx5gzgc&tbm=isch&iact=rc&uact=3&dur= 925&page=1&start=0&ndsp=7&ved=0CD8QrQMwAw Ertel, Andrea/Laborenz, Kai: Responsive Webdesign. Anpassungsfähige Websites programmieren und gestalten. 2. aktualisierte und erweiterte Auflage. Bonn: Galileo Press, Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. Herdecke: W3L GmbH, Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press,

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

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

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

Modernes Webdesign mit CSS

Modernes Webdesign mit CSS Heiko Stiegert Modernes Webdesign mit CSS Schritt für Schritt zur perfekten Website Galileo Press Inhalt rt TEIL I Grundlagen 1 Einleitung 1.1 Was ist Webdesign? 1.1.1 Accessibility 15 1.1.2 Usability

Mehr

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

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

Mehr

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

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

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

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

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

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

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

CAS Webdesign und Webpublishing

CAS Webdesign und Webpublishing CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite

Mehr

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug.

Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer. Thema Inhalte/Umsetzung Programme Lehrplanbezug. Fachcurriculum ITG Albert-Schweitzer-Gemeinschaftsschule Klassenstufe 9/10 H. Bauer Thema Grundlagen der Erstellung von Webseiten Maximalplan 1 Was man wissen sollten 2 Die erste Webseite mit HTML erstellen

Mehr

Webdesign mit (X)HTML und CSS

Webdesign mit (X)HTML und CSS Webdesign mit (X)HTML und CSS Das Praxisbuch zum Einsteigen, Auffrischen und Vertiefen Deutsche Ausgabe der 3. englischen Auflage Jennifer Niederst Robbins Übersetzung von Kathrin Lichtenberg O'REILLY*

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

44 2CSS* Basistext. 2.1 Was ist CSS? *

44 2CSS* Basistext. 2.1 Was ist CSS? * 44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?

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

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

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

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

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

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq

qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui

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

1 Was sind Cascading Stylesheets?

1 Was sind Cascading Stylesheets? Im ersten Kapitel erkläre ich Ihnen, was sich hinter dem Begriff»Cascading Stylesheets«verbirgt und welche Vorteile Sie davon haben, mit Stylesheets zu arbeiten. Außerdem sehen Sie das erste Stylesheet

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.

Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet. Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die

Mehr

HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte

HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte HTML / CSS Übersicht der Schulungsinhalte Grundlagen Einleitung HTML-Historie Java Script, XML, PHP, Flash Webstandards und Browser Werkzeuge und Tools UltraEdit und Dreamweaver TopStyle, Web Developer

Mehr

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: 11.04.2005. CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de DYNAMISCHE SEITEN Warum Scriptsprachen? Stand: 11.04.2005 CF Carola Fichtner Web-Consulting http://www.carola-fichtner.de I N H A L T 1 Warum dynamische Seiten?... 3 1.1 Einführung... 3 1.2 HTML Seiten...

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

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

Erstellung von dynamischen Webseiten mit Cascading StyleSheets

Erstellung von dynamischen Webseiten mit Cascading StyleSheets Planerische Informationssysteme Erstellung von dynamischen Webseiten mit Cascading StyleSheets Rolf Sonderegger FS 2014 Erstellung von Webseiten mit Cascading Style Sheets Institut für Raum- und Landschaftsentwicklung

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

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27

Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27 Inhaltsübersicht readme.txt zur zweiten Auflage 21 I Die Einleitung 25 1 Das Web st nicht aus Papier 27 il HTML-Kästchen erstellen 39 2 So funktioniert HTML 41 3 Wichtige HTML-Elemente (1) 57 4 Wichtige

Mehr

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

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

Mehr

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf...... oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax:

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

http://www.video2brain.com/de/products-582.htm

http://www.video2brain.com/de/products-582.htm André Reinegger führt Sie grundlegend in Dreamweaver CS5 ein und macht vor fortgeschrittenen Themen nicht halt. Lernen Sie die Struktur von XHTML-Seiten kennen genauso wie die Vorzüge vom Gestalten mit

Mehr

33 CSS in HTML einbinden

33 CSS in HTML einbinden D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben

Mehr

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks.

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Gliederung Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Präsentationsplattform Vorstellung der Präsentationsplattform Setzkasten. 1 / 14 Responsive

Mehr

Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6

Inhaltsverzeichnis. Einleitung 1. Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design. 1 So geht der Workshop vor 6 ix Einleitung 1 Teil I Workshop Schritt für Schritt zum professionellen HTML-CSS-Design 1 So geht der Workshop vor 6 2 Vorbereitungen 8 2.1 Anlegen einer sinnvollen Ordnerstruktur... 9 2.2 Das brauchen

Mehr

Zusammenfassung der letzten Vorlesungen. - Ergänzungen zu Menüs /Sprachumschaltung. - indexed search

Zusammenfassung der letzten Vorlesungen. - Ergänzungen zu Menüs /Sprachumschaltung. - indexed search Websiteentwicklung auf Basis vontypo3 Extensions -10- Zusammenfassung der letzten Vorlesungen - Ergänzungen zu Menüs /Sprachumschaltung - Extensions - indexed search 1 TYPO3 Entwicklung Footernavigation

Mehr

Innovator 11. Design der Dokumentation ändern. Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen. HowTo. www.mid.

Innovator 11. Design der Dokumentation ändern. Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen. HowTo. www.mid. Innovator 11 Design der Dokumentation ändern Wie Sie die Dokumentation von Innovator Ihrer Corporate Identity anpassen www.mid.de HowTo Übersicht zum Layout der Dokumentation Das Layout der Innovator-Dokumentationen

Mehr

Inhalt: 1)Das Box-Modell

Inhalt: 1)Das Box-Modell Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

App-Entwicklung für Android

App-Entwicklung für Android App-Entwicklung für Android XML / Layouts Hochschule Darmstadt WS15/16 1 Inhalt XML Layouts Layouttypen Dimensions View Element Designs Farben Strings 2 XML XML ist eine Meta-Sprache zur Festlegung der

Mehr

3. Briefing zur Übung IT-Systeme

3. Briefing zur Übung IT-Systeme 3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,

Mehr

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

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

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.

Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index. Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches

Mehr

<>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- ->

<>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- -> Mini HTML-Kurs Dieser Mini HTML-Kurs soll Ihnen genau soviel HTML-Wissen vermitteln, wie Sie brauchen, um meine Homepage-Vorlagen nach Ihren Wünschen anpassen zu können. Ich werde Ihnen also genau

Mehr

Advanced CMS. Copyright 2015 silbersaiten.de Service&Support: https://addons.prestashop.com/en/write-to-developper?

Advanced CMS. Copyright 2015 silbersaiten.de Service&Support: https://addons.prestashop.com/en/write-to-developper? Advanced CMS Copyright 2015 silbersaiten.de Service&Support: https://addons.prestashop.com/en/write-to-developper?id_product=19835 1. Installation Nachdem Sie das Modul Advanced CMS heruntergeladen und

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

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

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

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016 TYPO3 LTS7 1 Projekt TYPO3 LTS 7 responsiv Stand: Juni 2016 Die gibt es seit 2000. Im September 2014 haben wir sie auf TYPO3 LTS 6 eingerichtet. Juni 2016 erfolgte ein update auf die Version LTS 7 von

Mehr

XML 1. Einführung, oxygen. Ulrike Henny. ulrike.henny@uni-koeln.de. IDE Summer School 2013, Chemnitz

XML 1. Einführung, oxygen. Ulrike Henny. ulrike.henny@uni-koeln.de. IDE Summer School 2013, Chemnitz XML 1 Einführung, oxygen Ulrike Henny ulrike.henny@uni-koeln.de XML extensible Markup Language Was ist XML? XML-Grundlagen XML-Editoren, oxygen HTML + CSS XPath Übungen Literatur Folie 2 Was ist XML? extensible

Mehr

Praktikum 8: CSS-Layout

Praktikum 8: CSS-Layout WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die

Mehr

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39

Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39 Inhaltsverzeichnis Einführung....................................... 1 HTML und CSS im Überblick............................ 2 Browser........................................ 3 Webstandards und Webspezifikationen......................

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

Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T

Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T Homepage Design und Styleguide Gestaltungsrichtlinien für die Web-Seite T Inhaltsverzeichnis Technische Grundlagen S. 2 Grundsätzliches S. 2 Typographie und Farbgebung S. 3-4 Das Logo S. 5 Text S. 5 Die

Mehr

2.FormMail 1.6 dt (modifiziert)

2.FormMail 1.6 dt (modifiziert) 2.FormMail 1.6 dt (modifiziert) 2.1 Was ist FormMail? FormMail ist ein einfaches CGI-Programm, das in einem Formular bestimmte Informationen erfaßt und diese an eine bestimmte email-adresse sendet. FormMail

Mehr

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13

Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13 D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................

Mehr

Backend 1.5. http://joomla.aps.it-betreuung.salzburg.at

Backend 1.5. http://joomla.aps.it-betreuung.salzburg.at Backend 1.5 http://joomla.aps.it-betreuung.salzburg.at Aktualisiert von Jörg Hanusch und Willi Koller Februar 2012 CMS Joomla Joomla! ist ein datenbankbasiertes Content Management System (CMS). Es bezieht

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

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

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

Arbeiten mit UMLed und Delphi

Arbeiten mit UMLed und Delphi Arbeiten mit UMLed und Delphi Diese Anleitung soll zeigen, wie man Klassen mit dem UML ( Unified Modeling Language ) Editor UMLed erstellt, in Delphi exportiert und dort so einbindet, dass diese (bis auf

Mehr

Handbuch für Redakteure

Handbuch für Redakteure Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Trennen der Druck- und der Online-Version.. 4 Grunddaten ändern... 5 Weitere Artikel-eigenschaften...

Mehr

Responsive Webdesign

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

Mehr

Arbeiten mit Text. Textfelder. PowerPoint 2003. Arbeiten mit Text

Arbeiten mit Text. Textfelder. PowerPoint 2003. Arbeiten mit Text In diesem Kapitel erarbeiten Sie den Umgang mit Text in PowerPoint Folien. Sie können nach Durcharbeit dieses Kapitels Texte erstellen, löschen, formatieren und gliedern. Was erfahren Sie in diesem Kapitel?

Mehr

Referenz Frontend: Responsive Webdesign

Referenz Frontend: Responsive Webdesign Stand: Dezember 2014 Diese Referenzliste bezieht sich auf eine Webseite, von der es zwei Versionen gibt. Diese Version ist mit Hilfe des Twitter Bootstrap Frameworks für mobile Endgeräte optimiert. - Startseite

Mehr

Introduction to Technologies for Interaction Design. Stylesheets

Introduction to Technologies for Interaction Design. Stylesheets Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen

Mehr

Responsive Web Design

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

Mehr

Erweiterungen Gantry Framework -

Erweiterungen Gantry Framework - Gantry Framework Gantry Framework ist eine Art Tabelle (Grid), in der man in den Zellen die jeweiligen Beiträge und sonstigen Bereiche positionieren kann. Gantry Framework downloaden Über Google nach Gantry

Mehr

HTML Formulare. Benutzerschnittstelle für interaktive Webseiten

HTML Formulare. Benutzerschnittstelle für interaktive Webseiten 1 HTML Formulare Benutzerschnittstelle für interaktive Webseiten Literatur und Links 2 Literatur: Coar, Ken; Bowen, Rich: Apache-Kochbuch. 2004 HTML: kein Buch oder irgend eins für Einsteiger, z. B. Münz,

Mehr

Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS

Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS Inhalt Vorwort 13 Teil I CSS kennenlernen: Einstieg in XHTML und CSS 1 Auf die Plätze 17 1.1 Wozu CSS lernen? 18 1.2 Wem nützt dieses Buch? 19 1.3 Wie funktioniert dieses Buch? 19 2 Was Sie wissen sollten

Mehr

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

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

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

Artisteer 2 Installation

Artisteer 2 Installation Möchte man keine fertigen Templates für sein Webprojekt verwenden, hat jedoch nicht die nötigen Kenntnisse sich sein Eigenes zu erstellen, dann ist man bei Artisteer 2 genau richtig! Mit diesem Web Design

Mehr

Übung: Überschriften per CSS gestalten

Übung: Überschriften per CSS gestalten Übung: Überschriften per CSS gestalten Teil 1: Umsetzung eines Layouts mit zwei Überschriften mit zwei verschiedenen Hierarchieebenen, ergänzt durch einen beschreibenden Textabsatz. Teil 2: Wie Teil 1,

Mehr

Einführung 17. Teil I (X)HTML kennen lernen 23. Kapitel 1 Was Sie mindestens über HTML und das Web wissen müssen 25

Einführung 17. Teil I (X)HTML kennen lernen 23. Kapitel 1 Was Sie mindestens über HTML und das Web wissen müssen 25 Inhaltsverzeichnis Inhaltsverzeichnis Einführung 17 Über dieses Buch 17 Wie Sie dieses Buch nutzen 18 Törichte Annahmen über den Leser 19 Wie dieses Buch aufgebaut ist 19 Teil I: (X)HTML kennen lernen

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Inf11 HTML 18.12.2005/ pl

Inf11 HTML 18.12.2005/ pl Inf11 HTML 18.12.2005/ pl Grundstruktur Grundformatierung Jede HTML SEITE hat mindestens folgendes Grundgerüst: Dies ist der einleitende HTML Tag, der auf eine folgende Html Seite hinweist.

Mehr

4.8 Das Box Modell, Block- vs Inline-Elemente

4.8 Das Box Modell, Block- vs Inline-Elemente 4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente

Mehr

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

Modernes Webdesign mit HTML und CSS

Modernes Webdesign mit HTML und CSS Modernes Webdesign mit HTML und CSS Webseiten sind nicht aus Papier! Das klassische Printmedium baut auf bekannten Größen auf, z. B. dem Seitenverhältnis und den Abmessungen definierter Blattformate. Auch

Mehr

Dokumentation Admintool

Dokumentation Admintool Dokumentation Admintool 1. Das Menü Artikel: Im Bereich Artikel sehen Sie zunächst die Artikelzentrale eine Übersicht aller auf der Website veröffentlichen Artikel. Diese werden innerhalb der Struktur

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

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation. Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile

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

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

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

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

Datenbanken für Online Untersuchungen

Datenbanken für Online Untersuchungen Datenbanken für Online Untersuchungen Im vorliegenden Text wird die Verwendung einer MySQL Datenbank für Online Untersuchungen beschrieben. Es wird davon ausgegangen, dass die Untersuchung aus mehreren

Mehr

Die aktuelle Version des SPIEGEL-Bestseller-Widgets können Sie auf unserer Website unter Entwicklertools herunterladen.

Die aktuelle Version des SPIEGEL-Bestseller-Widgets können Sie auf unserer Website unter Entwicklertools herunterladen. Technische Dokumentation Hier finden Sie die technische Dokumentation für die Einbindung des Bestseller-Widgets. Die Dokumentation soll als Hilfestellung dienen und kann keinen Anspruch auf Vollständigkeit

Mehr

Handbuch für Redakteure

Handbuch für Redakteure Handbuch für Redakteure Erste Schritte...2 Artikel erstellen... 3 Artikelinhalt bearbeiten... 4 Trennen der Druck- und Online-Version...5 Budget-Anzeige...5 Artikel bearbeiten... 6 Artikel kopieren...6

Mehr