HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze
Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr- 6DnOovY0t3nBg8Zb6aqm_H70mR http://wiki.selfhtml.org/ Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. W3L GmbH, 2011. Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press, 2011.
Gliederung 1. HTML 2. CSS 3. Responsive Design
HTML textbasierte Auszeichnungssprache zur Strukturierung von Dokumenten Inhalt wird in Klartext geschrieben, nicht programmiert
HTML Document Object Model interpretiert jedes HTML-Dokument als Baumstruktur gibt hierarchische Struktur des Dokuments wieder
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 http://little-boxes.de/lb1/6.4-eigene-namen-vergeben-id-und-class.html
HTML Tag - Absatz
HTML Tag - Überschrift
HTML Tag Liste (ungeordnet)
HTML Tag Liste (geordnet)
HTML Tag - Tabelle
HTML Gruppierung von Inhalten
HTML Struktur einer Webseite
HTML Bilder Pfad zur Bilddatei Titel des Bildes alternativer Text
Verweisziel HTML Links
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
HTML Formularelemente einzeilige Eingaben mittels <input.. > o Attribute: type (Art des Eingabeelements), name, value, size, maxlength
HTML Formularelemente mehrzeilige Eingaben mittels < textarea>..</textarea> Auswahllisten mit Tageinträgen mittels <select>..</select> o <option>.. </option> für Elemente in Auswahlliste
Ü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,
Gliederung 1. HTML 2. CSS 3. Responsive Design
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
1. Inline: CSS Einbindung in HTML o unmittelbar bei den HTML-Elementen über das style- Attribut
CSS Einbindung in HTML 2. Intern (embedded): o Zusammenfassung der CSS-Stilregeln für HTML- Dokument über <style> im Kopfbereich
3. Extern: CSS Einbindung in HTML o Zusammenfassung von CSS-Stilregeln in eigenständiger Datei o Einbindung von <link.../> im head:
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; }
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; }
CSS Selektion über HTML-Elemente Selektoren für gleichartige HTML-Elemente erhalten als Wert die Bezeichung des HTML-Elements
CSS Selektion über ID ID identifiziert Elemente mit eindeutiger Bezeichnung einmaliges Vorkommen
CSS Selektion über Class mehreren HTML-Elementen werden gemeinsame Eigenschaften zugewiesen
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> http://wiki.selfhtml.org/wiki/css/selektoren
CSS Block-Elemente Elemente, die jeweils eine neue Zeile erzeugen Blockelemente stehen untereinander Bsp: h1 steht über h2, nicht daneben
CSS Inline-Elemente Elemente, die keine neue Zeile erzeugen Stehen nebeneinander Bsp: <a>, <img>, <sub>, <sup>, etc.
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
CSS Box-Modell CSS-Layout aus rechteckigen Boxen zusammengesetzt Box besteht aus: Inhaltsbereich padding border margin
padding CSS Innenabstand Befindet sich innerhalb des Elements Übernimmt Hintergrundfarben &-grafiken
border CSS Rahmen Umschließt Inhaltsbereich eines Elements sowie den Innenabstand
margin CSS Außenabstand Abstand zu umliegenden Elementen befindet sich außerhalb des Elements
CSS Positionierung Ohne individuelle Ausrichtung befindet sich ein Element im Datenfluss Positionierung kann relativ oder absolut erfolgen
CSS Relative Positionierung Verschiebung erfolgt durch position: relative; Richtungsangabe mit relativen Maßangaben
CSS Absolute Positionierung Element aus Dokumentenfluss entnommen Änderung der Ordnung/Reihenfolge durch position: absolute; Richtungsangaben mit absoluter Maßangabe
CSS Fixe Positionierung position: fixed; Gleiche Eigenschaften wie absolute, jedoch kein Mitscrollen
CSS Floating Verschiebung eines Elements an die Innenkante seiner Box Element hat weiterhin Einfluss auf das Layout Mit clear wird Floating beendet
CSS Vererbung Wenn ein Wert nicht festgelegt wird Standardwert Anstelle des Standardwerts wird Eigenschaft des Elternelements übernommen
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
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
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
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
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
Ü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: http://www.html-seminar.de/css-definitionen-uebersicht.htm
Gliederung 1. HTML 2. CSS 3. Responsive Design
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
Viewport Für die Darstellung der Inhalte zur Verfügung stehender Bereich des Browserfensters
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
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
Media Queries
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
Prozess umdrehen Mobile First Arbeitet mit Progressive Enhancement Relevante & präzise Inhalte Kein Selbstzweck, sondern Ausrichtung an Usability- Grundsätze
Bootstrap CSS-Framework zur Erstellung von Responsive Design Auf CSS & HTML basierende Stylesheets Elemente werden vorgefertigten Klassen hinzugefügt
Bootstrap Einbindung Download auf eigenen Server & Einbindung in <head> der HTML-Datei Einbindung von Bootstrap CDN getbootstrap.com
Bootstrap Grid 12 Spalten, die sich der Displaybreite anpassen Row & column 4 Varianten: xs sm md lg
Ü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.
noch Fragen?
Vielen Dank für die Aufmerksamkeit!
Quellen http://blog.kulturbanause.de/2013/08/mobile-first-progressive-enhancement/ http://de.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design http://media.kulturbanause.de/blog/2012/11/responsive-webdesign/index.html#/61 http://blog.kulturbanause.de/2012/11/responsive-webdesign-grundlagen-technik-workflow-inhalte/ http://wiki.selfhtml.org/wiki/css/media_queries#einbindung http://www.mediaevent.de/xhtml/html-section-header.html http://de.wikipedia.org/wiki/cascading_style_sheets http://falkidesign.ch/wp-content/uploads/2013/05/css-cascading-style-sheets.jpg http://holdirbootstrap.de/examples/grid/ http://getbootstrap.com/getting-started/ https://www.youtube.com/playlist?list=pl41lfr-6dnoovy0t3nbg8zb6aqm_h70mr https://mdn.mozillademos.org/files/3215/relative-positioning.png http://wiki.selfhtml.org/images/7/7a/boxmodell-detail.png http://www.bananarush.de/wp-content/uploads/minion-wallpaper-1.jpg http://www.google.de/imgres?imgurl=https%3a%2f%2fs-media-cacheak0.pinimg.com%2f236x%2f7f%2f75%2f6b%2f7f756bcb3481db56650768cc5fc0cf50.jpg&imgrefurl=https%3a%2f%2fwww.pinterest.com%2fjiachenghong%2f 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 https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcr4uabbfjkttfkds039k1zzhkwenfpfx6esnp3-ztnebh4rff6v http://www.zastavki.com/pictures/originals/2013/cartoons_minions_the_minion_carl_051606_.jpg http://minionslovebananas.com/images/gallery/preview/chiquita-dm2-minion-banana-3.jpg?w=300&h=429 http://designshack.net/wp-content/uploads/inlineblock-0.jpg http://hurm-it.de/blog/wp-content/uploads/2012/04/floatinglayout.png https://mdn.mozillademos.org/files/3216/absolute-positioning.png Ertel, Andrea/Laborenz, Kai: Responsive Webdesign. Anpassungsfähige Websites programmieren und gestalten. 2. aktualisierte und erweiterte Auflage. Bonn: Galileo Press, 2015. Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. Herdecke: W3L GmbH, 2011. http://ecx.images-amazon.com/images/i/414lo5cqdfl._sy344_bo1,204,203,200_.jpg Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press, 2011. http://little-boxes.de/lb1/6.4-eigene-namen-vergeben-id-und-class.html