Tag 02

Dienstag, 21.06.16, 08.00 - 15.30 Uhr

• Rekapitulation (ausführlich zu Tag 01 - Montag),
  TN-Fragen
• DTDs (Dokumenttyp Definitionen)
  HTML 4.01 (klassischer Standard, Varianten)
  XHTML 1.0 (als transitional oder strict Variante)
  HTML5 (die gesammelten Ideen für aktuelle oder zukunftsorienierte Webseiten,
  Beachten: nicht alle neuesten HTML5-Tags werden von allen Browsern gleich unterstützt!,
  attraktive neue Multimedia-Tags wie video, audio verlangen aktuelleste Browser und entsprechend vorbereitete Video-/Audio-Dateien - Stichwort Codecs: OGG, WebM oder H.264;
  neue HTML5-Tags: nav (Navigationen), footer, header, article, aside,  ...
  Übersicht zu HTML5 Technik Unterstützung: Link
• Ordnerstruktur für unsere Website-Projekte
  Vorschlag: eine Website / ein Webprojekt in einen Hauptordner
  Aktuell im Seminar: Ordner .\htdocs\htmlcss\uebungen 
  der Ordner enthälte unsere HTML-Dokumente der Website - also die sogenannten Webpages (einzelne "Seiten")
  für eine bessere Organisation werden für die zusätzlichen Dokumente geeignete Unterordner erstellt und genutzt:
  

  Ordner	Nutzung / Struktur
  Projektordner	.\htdocs\htmlcss\uebungen
  Bilder	.\htdocs\htmlcss\uebungen\ bilder
  CSS	.\htdocs\htmlcss\uebungen\ css
  JavaScript	.\htdocs\htmlcss\uebungen\ js

  Selbstverstänglich kann man die Ordnernamen und Strukturen eigenen Wünschen anpassen  - man sollte halt einen Plan haben und verfolgen.
  Der Ordner "uebungen" enhält also unsere Website (unser Webprojekt) und müsste später nur 1-zu-1 auf unseren Hosting-Anbieter kopiert werden und als Ordner einer Internetadresse (Domain; z.B. www.ihrname-xyz.de) zugewiesen werden.
• Übungen zu den CSS-Einfüge-Techniken (3 Versionen/Stellen im Code - Schwerpunkt: Externe CSS-Datei)
  Hinweise auf Ordnertruktur für Bilder und CSS (später auch JavaScript)
  Externe Datei ./css/dienstag.css  per link-Tag verknüpft
  Prinzip "CSSZenGarden": eine zweite Datei ./css/dienstag2.css erstellt und link-Tag angepasst:
  Ergebnis: Erscheinungsbild geändert
  Weitere CSS-Eigenschaften kennen gelernt:
  color, border, font-family, ...
  Nutzung von font-family ergibt Erkenntnis, dass nicht auf allen Rechnern (Betriebssystemen) dieselben Schriften verfügbar sind;
  Browser besitzen Grundeinstellungen für die zu nutzenden Standardschriften
  Kommentare in CSS: mit /* ... */ 
• Medienabfrage per CSS
  Optimierung der Ausgaben für Bildschirm oder Druck per CSS-Styles:
  <link rel="stylesheet" href="/bildschirm.css" media="screen">   (Bildschirmausgabe)
  <link rel="stylesheet" href="/druck.css" media="print">   (Druckausgabe)
  Es können sogar Styles nach Bildschirmauflösungen und Dimensionen gezielt ausgeliefert werden: Smartphones, Tablets.
• Farben
  Definieren in RGB und mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF bzw. rgb (0, 0, 0) und rgb (255, 255, 255)
  Erläuterungen auf selfhtml.org (Link); Umrechnungen zwischen dezimalen und hexadezimalen Werten möglich mit Boardmittel "Taschenrechner - calc" unter Windows
  Empfehlung: benannte Farben möglichst vermeiden!
  Aktuelle Darstellung der CSS Farbdefinitionen auf Portal Webmasterpro (Link)
  seit CSS3 inklusive "Deckkraft / Opazität" mit Definitionen mittels rgba bzw. hsla, wobei a für Alpha-Wert von 0.0 bis 1.0 steht
• Google-Fonts (Thema Schriften/Fonts und Schriftschnitt: font-weight: 700;)
  Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" gezeigt
• Firefox (Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in Firefox)
  Add-on Firebug installiert (perfekte Live-Analyse von html und css!)
  Beispielhaftes Add-on für Firebug: Firepicker - Farben direkt mit Maus wählen/zuweisen
  Alternative Code-Analysen mit anderen Browsern:
  MS Internet Explorer - Entwicklertools (Funktionstaste F12)
  Google Chrome mit Erweiterung WebDeveloper oder eigenen Entwicklertools (Umschalten + Strg + I wie Inspektor; das geht auch beim Firefox!)
• Tabellen
  Tags: table, caption, thead, tbody, tr, th, td 
  Aufbau einer Standardtabelle mit 3 Spalten und 3 Zeilen nach Anleitung und Beispiel Selfhtml (Link)
  oder mittels Emmet: table>.row*3>.col*5 
  hier gleich mit Klassen für Tabellenreihen tr und Tabellendaten td
  Hinweis: nur als Darstellung von Daten nutzen (nicht mehr als Layout-"Krücke"),
  in table-Tag ein summary="..." hinterlegen für Barrierefreiheit
  Tabellen mittels CSS gestylt:
  border: 1px solid #000000; (also Rahmenstärke, Rahmentyp und Farbe in einer Anweisung)
  und spezielles Tabellenstyling mittels border-collapse: collapse;  

• Google Fonts
• Farbcodierungen
• Tabelle
• Bild verlinken
• Medientypen
• Firebug

Tag 03

Mittwoch, 22.06.16, 08.00 - 15.30 Uhr

• Rekapitulation, TN-Fragen
  Übungsumgebung in Betrieb nehmen,
  Übung mit Firefox Add-on Firebug - Installation von Firebug Erweiterung Firepicker (Farbwähler für Firebug),
  Übungsdokument mittwoch.html erstellt - Forts. von Thema Tabellen
• Tabellen (Forts.)
  weitere Tests für das Styling (siehe hierzu auch die Darstellungen am gestrigen Seminartag
  {code lang:css showtitle:false lines:true hidden:false}table {
      width: 90%;
      border: 1px solid #000000;
      border-collapse: collapse;
  }
  
  th, td {
      border: 1px solid #000000;
  } {/code}Link zu einer Darstellungsseite mit diversen Tabellen-Layouts beim Mozilla Develper Network (MDN)
  oder direkte Erläuterungen bei der W3C (World Wide Web Consortium) zu den Tabellentechniken
  wieder Emmet-Tipp: table#tabid>tr.zeilenformat*3>td.spalte$$*4   (einfach mal ausprobieren!)
  Anm.: da fehlen jetzt eigentlich nur noch summary im table, caption und ggf. th (statt td) in erster Zeile
• Klassen
  Klassen definieren und nutzen: <p class="besondererstil"> ... </p>
  in CSS: .besondererstil { ... }   (Punkt beachten - hier allegemeine Klasse
  in CSS nur für Absätze (Paragraphs):  p.besondererstil { ... }   (Klasse wird bei Zuweisung in Absätzen genutzt)
  Nutzung von span-Tag zum "Markieren" von Textbereichen in Absätzen (Inline-Styling)
  Beispiel:
  <p>Lorem ipsum <span class="formatklasse">dolor</span> sit amet, ... </p> 
  Vererbung von Eigenschaften von Elternelementen an Kinderelemente
  Beispiel: Styling von body wird vererbt an h1, h2, p, ...
• CSS Boxmodell
  kann man heute (2016) mit den aktuellen Browsern etwas entspannter sehen als früher - insbesondere der Internet Explorer hat da sein "eigenes Süppchen gekocht"
  Boxmodell (Bordermodell): Erläuterungen zum Boxmodell (Link) auf css4you oder bei Selfhtml (Link)
  Tipp: Dimensionen mit Firebug analysieren!
• border (Rahmen), margin (Außenabstände), padding (Innenabstände)
  Anwendung der unterschiedlichen Eigenschaften und Details zum Stylen
  Vergleich der kompakten Darstellung ("Einzeiler") mit den jeweiligen langen und detaillierten CSS-Styles
  Beispiele:
  {code lang:css showtitle:false lines:true hidden:false}/* Klasse für besondere Absatz-Formate */
  p.besondererstil {
      color: #00FF00;
      background: #000000;
      padding: 10px 20px 30px 40px;
      /*
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
      */
      border: 5px solid red;
      /*
      border-width: 5px;
      border-style: solid;
      border-color: red;
      */
      margin: 40px;
  } {/code}Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)
• CSS Hilfen
  Wir lernen immer mehr CSS-Deklarationen (Stilanweisungen) kennen!
  Übersicht zu CSS auf Selfhtml-Wiki (Link)
  Cheat-Sheets ("Schummelzettel" CSS und HTML5) auf Smashing Magazine (Link)
  Gesamtübersicht (Index CSS3) auf meiert.com (Link)
• id (die etwas andere "Klasse")
  mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (id="test" statt class="test") nur dass wir im CSS die id durch die Kennzeichnung #test ansprechen (statt .test bei Klassen).
  Das Besondere: eine id gibt es im Dokument nur ein einziges Mal!
  Tags werden mit den id dann quasi benannt und können als "Sprungadressen" im Dokument genutzt werden:
  <a href="#top">nach oben</a>   (per Klick auf diesen Link kommt man zum Tag mit id="top")
• Tabellenloses Layout für Webseiten
  Fachartikel von Stephan Heller (www.daik.de), Internet Professional, März 2007
  
  

  Wichtig: der Beitrag stellt nur eine Grundtechnik dar und wird von uns in den nächsten Tagen natürlich modern interpretiert (HTML5 statt XHTML)!

  Website aus Blöcken (div-Tags) zusammenbauen
  immense Vorteile bei Schnelligkeit, Flexibilität und Barrierefreiheit (gegenüber Tabellen oder gar Frames)
• Analyse und Praxis mit den Beispielseiten zum tabellenlosen Layout
  Ein neues Websiteprojekt erfordert einen neuen Ordner:
  .\htdocs\htmlcss\tabellenloses-layout    (mit Unterordnern: ./css und ./img  - Vorgaben durch Ersteller)
  Die Dateien (von 01 bis 10) wurden ausgiebig erläutert, diskutiert und getestet.
  Hier ein paar technische Anmerkungen:
  min-height gestylt mit * html #kopf in CSS als Überzeugungsarbeit für den IE (IE Hack)
  siehe Kompatibilität des IE zum CSS Style min-height
  Nutzung von Relativen Längenmaß: em  (oder ex, rem, % ) - Link Selfhtml-Wiki 
  Floating div-Blöcke mittels float:left; für Block #navigation gestylt (die Grundidee hinter dem tabellenlosen Layout!)
  mittels #navigation ul li a gezielt eine professionelle Linkstruktur aus unsortierter Liste erstellt,
  die Links werden zu "Schaltflächen/Buttons" indem die Anker/Links a-Tags mittels display: block; gestylt werden
  versteckte Zusatz-Headings (h6 mit Klasse .unsichtbar) für die barrierearme Nutzung der Seite
  CSS-Datei mittels Angabe von media="screen, projection" verlinkt, so lässt sich spezielles Ausdrucksformat mittels media="print" erstellen; Übersicht über die Ausgabemedientypen auf selfhtml.org (Link)
  Dummy-Links mit href="#" verlinkt (Anker ohne Namen für dieselbe Seite)
  Pseudo-Klassen für a (anchor - Hyperlinks) :hover, :active, :link, :focus, :visited   (Link Selfhtml)
  Aufheben des Floating mittels Styling clear:both; (oder auch gezielt left oder right)

• Navigationen
• Externe CSS Dateien
• Allgemeine Klasse
• Firebug
• Klasse für p-Tag
• Floating

Tag 04

Donnerstag, 23.06.16, 08.00 - 15.30 Uhr

• Rekapitulation, TN-Fragen
• Wiederholungs-Highlights
  im Beitrag eingepflegte Links checken und recherchieren
  Dateihandling: mal schnell Code ersetzen im Editor mit Strg + H  
  Cheat-Sheets ("Schummelzettel", Referenzkarten) - am Freitag als Auswahl vom Trainer bzw. als laminierte Karten bei terrashop.de 
• "Bibliothek"
  Vorlage von aktuellen Büchern zum Thema "HTML & CSS"
  Digitale Übersicht auf einer "HTML & CSS - Bibliothek" auf diesem Portal
• Praxis Website - Planung (Buchtipp: benutzerfreun.de)
  Layout: 2- oder mehr-spaltiges Layout mit variabler Anordnung der Navigation
  Anm.: Breite von 960px; orientiert sich an klassischen 960er Grid-Raster (siehe 960.gs - ein Framework für HTML/CSS der ersten Stunde)
  Farben: möglich Auswahl mit paletton.com (siehe gleichlautende Website und/oder Ausdruck)
  Farbauswahl mit Colorzilla - einem Add-on für den Firefox: Farben für unser Styling aus einem Bild entnommen und Codes in Textdatei dokumentiert
  Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
  Navigations-Struktur:
  Hautpseite index.html mit
  Unterseiten hobby.html, job.html, impressum.html und kontakt.html    (4 Unterseiten)
  
  für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren
• Praxis Website - Projekt (Phase I - einfaches tabellenloses Layout)
  basierend auf den Vorarbeiten eine komplette Website mit fünf HTML-Dokumenten und gemeinsamer CSS-Style-Datei erstellt
  Hinweis: die "alten" Beispieldateien aus den gestrigen Übungen "Tabellenloses Layout" wurden neu mit "UTF-8" kodiert, gespeichert und an die Teilnehmer verteilt, damit die neue HTML5 Codierung inklusive meta-Tag zur UTF-8 Zeichencodierung (charset="UTF-8") sauber genutzt wird.
  Kurzanleitung:
  Hauptseite der Webpräsenz index.html  mit allen persönlichen Infos, Links, Bildern ausstatten
  benötigte Seitenkopien gemäß Planung (z.B. hobby.html) erstellen und individuelle Anpassungen der Inhalte vornehmen
  Beispiele für veränderliche Bestandteile der Seiten:
  Titel (also title-Tag), Aktive Seite im Navi-Menü, Inhalt der Seite in div#inhalt
  Tests der Verlinkungen im Browser
  mit nächster Seite fortfahren (z.B. impressum.html)
• Startseite index.html
  Unser Webserver (Apache) wird mit einer Konfiguration (httpd.conf) ausgeliefert - auch für Index-Seiten:
  d.h. dass bei Aufruf einer Adresse (URL) nur mit Ordner/Hauptordner wird ein im Ordner befindliches Standarddokument (index.html, index.htm, index.php, index.pl, index.asp, ..) automatische auf die Browseranfrage (Request) ausgeliefert!
• Impressum
  mindestens Angabe von Name, Telefonnummer, E-Mail-Adresse (wichtig: reale und funktionstüchtige Infos)
  Das Impressum muss auf jeder Seite oder mit nur einem Klick von jeder Seite direkt erreichbar sein
• Copyright und Co
  Bilder und Texte nur aus eigener Produktion oder nach Absprache mit der Quelle
  Quellen wie Wikipedia sind nich automatisch "frei" - aber attraktive moderne Lizenzen wie z.B. "Creative Commons Attribution-Share Alike 3.0 Unported" mit der Möglichkeit der Nutzung von Materialien mit geringen Einschränkungen und Aufwand (Anleitung deutsch)
  Bilderempfehlung: unsplash.com  (absolut frei und kommerziell einsetzbare Bilder)
• Praxis Website - Projekt (Phase II - mehr Design / komplettere Vorlage)
  Beispiel: Design01 aus den HTML/CSS Vorlagen des Selfhtml-Wiki (Link) in HTML5
  die Designs lassen sich für private und kommerzielle Projekte anpassen/nutzen
  Allgemeine Erinnerung: wieder bekommt unser neues Projekt einen Ordner auf unserem Entwicklungssystem/Ordnersystem:
  .\htdocs\htmlcss\design01    (mit Unterordnern: ./css und ./img  - Vorgaben durch Ersteller)
  nach Vorgabe aus "Phase I" (s.o.) eine eigene Websitestruktur schaffen und verlinken
• HTML5 - neue Tags braucht das "Land"
  eine kurze Übersicht über die neuen Tags, die dann auch in unserer Website "Design01" zum Einsatz kommen:
  header  - Kopfbereich der HTML5-Seite
  main  - Hauptbereich (Anm.: bitte per CSS mit display: block;  stylen, damit IE8 - IE11 keinen Stress machen); ein role="main" für ARIA Unterstützung (Link) ist freiwillig
  footer  - Fußbereich der Webpage
  article  - Beitrags-/Inhaltsbereich
  section  - Bereich/Abschnitt (z.B. in einem article-Tag)
  aside  - Beigeordneter Block (Seitenbereich)
  nav  - maßgeblicher Navigationsbereich
• HTML-Kurzanalyse von "Design01" - dem freien Template des Selfhtml-Wiki
  im Kopfbereich erkennt man folgende Techniken:
  {code lang:html5 showtitle:false lines:true hidden:false}<!doctype HTML>
  <html lang="de">
  <head>
      <meta charset="utf-8">
  <!--[if lte IE 8]>
           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <meta name="viewport" content="width=device-width; initial-scale=1.0;">
      <meta name="description" content="Beispiel-Design Nr.01 von SelfHTML.org">    
      <link href="/css/style.css" rel="stylesheet">
      <title>SelfHTML Design Nr.01</title>
  </head>{/code}Hier jetzt die Erläuterungen:
  Zeile 2: Sprache des HTML5-Dokument auf "Deutsch - de" eingestellt
  Zeile 5-7: HTML5Shiv für IE (Erkl. zu HTML5Shiv) mit Nummer 8 oder kleiner (lte - lighter or equal)
  Anm.: Pfad zum CDN müsste aktualisiert werden - z.B.
  https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js  (Content Delivery Network)
  Zeile 8: meta-Tag mit viewport - Erl. Selfhtml-Wiki (Link): Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man mit folgender Einstellung erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht
  Zeile 9: meta-Tag mit name (siehe folgende Erläuterungen)
• meta (Meta-Tags)
  Infos für die Suchmaschinen-Bots - automatisch auswertbare Infos mittels
  <meta name="author" content="S. Heller">  und z.B.
  auch name="keywords", name="description", ...  Link Selfhtml
• CSS-Kurzanalyse von "Design01" - dem freien Template des Selfhtml-Wiki
  im CSS-Code erkennt man folgende Techniken:
  {code lang:css showtitle:false lines:true hidden:false}/* == css/style.css == Auszüge == */
  @font-face {
  font-family: 'Tauri';
  font-style: normal;
  font-weight: 400;
  src: local('Tauri Regular'), local('Tauri-Regular'), url(http://themes.googleusercontent.com/static/fonts/tauri/v2/33NkxyDp8MBgQpwno_A-zw.woff) format('woff');
  }
  
  * {
  margin: 0;
  padding: 0;
  }
  
  /* ... */
  
  a.more:after {
  content: " >";
  display: inline-block;
  height: 1em;
  padding: 0 .5em 0.5em 0.5em;
  border-radius: 1em;
  background: #ffa323;
  margin-left: 10px;
  }
  
  /* ... */
  
  header {
  width: 100%;
  height: 240px;
  background: url('../img/header.png') no-repeat center bottom #e7e8ee;
  background-size: contain; border: 1px solid #E5E7EB;
  }
  
  /* ... */
  
  main    {
  display: block;
  position: relative;
  width: 100%
  }
  
  /* ... */
  
  nav ul li:first-child {
  margin-left: 2%;
  }
  
  /* ... */
  
  /* 2-Spaltenlayout mit breiterem aside */
  @media screen and (max-width: 950px) {
  body {width:100%}
  section {width:58%;}
  section.spalte,
  aside {width:29%;}
  }
  
  /* 1-Spaltenlayout mit Navigation unten*/
  @media screen and (max-width: 620px) {
  section,
  section.spalte,
  aside {
  float: none;
  width: 96%;
  }
  /* ... */
  }{/code}Selbstverständlich sind hier nur Auszüge in meinem Beitrag präsentiert.
  Hier ein paar kurze Erklärungen:
  Zeile 2: @font-face  - eine Möglichkeit zum Einbinden/Bereitstellen von Schriften/Fonts per woff-Dateien
  Zeile 9: mit *  kann man für alle möglichen Tags stylen
  Zeile 16: Pseudo-Klasse :after  mit Styling für eine Kreis mit Zeichen >
  Zeile 33: mit background  ein Hintergrundbild im header  hinterlegt;
  Beachten: Relative Pfadangabe für die url des Bildes:  ../img/header.png 
  Zeile 37: HTML5-Tag main  (wegen der IE8 bis 11) bitte mit display: block;  stylen
  Zeile 45: Pseudo-Klasse :first-child  stylt gezielt das erste "Kindelement" in einer ul-Liste
  ab Zeile 52: mit @media  Anweisungen spezielle Styles für Auflösungen/Viewports

• Boxmodell
• Firefox Add-ons
• Farbschema erstellen
• Hex vs. Dec
• HTML5
• HTML5 Template

Tag 05

Freitag, 24.06.16, 08.00 - 15.30 Uhr

• Rekapitulation, TN-Fragen
• Listen verschacteln
  am Beispiel unsortierter Listen wurde eine Aufzählung mit 2. Ebene erstellt und gestylt
  Wichtig: die 2. Listenebe muss sauber in einem li (Listitem) der 1. Ebene verschachtelt werden!
  umso wichtiger wenn wir danach aus dieser Liste eine Navigation erstellen wollen
• Horizontale Navigationsleiste (horizontal list)
  beispielhafte Navigation nach Vorlage Buch C. Wyke-Smith durchgespielt;
  Lösung mittels div-Block für Navigation (in Lösung mit HTML dann bitte nav  Block nutzen und den CSS-Stil entsprechend kodieren) und natürlich wieder unsere richtig verschachtelten ul/li-Listen;
  Styling mit intelligentem Floating (float: left;)
• Einführung: Client-/ Server- Technologie (eine "Kopiermaschine")
  Web-Server: z.B. Software Apache, hält alle Ihre Webdokumente und Ordnerstrukturen bereit,
  muss bei einem Hoster inklusive weltweiter "Adresse" (Domain) gemietet werden
  Web-Client: Browser, Software z.B. Firefox, Chrome, Opera, Internet Explorer, stellt Anfrage (Request - http://www.bahn.de an den Server) und erhält die entsprechenden Dateien herüberkopiert
  Wichtig: "Startdokumente" für Ihre Projekte richtig benennen für die automatische Auslieferung durch Server: index.php, index.html, ...
• Hosting
  für Ihr Website-Projekt (den Projektordner) benötigt man jetzt einen Anbieter für den nötigen Webserver und die Registrierung einer gewünschten "Adresse" (Domain) im Internet
  Beides (und auch E-Mail-Service, ...) bietet ein Hoster an.
  Bekannte "Massen"-Hoster: 1und1, Strato, Hosteurope
  Hoster mit spezielleren und maßgeschneiderten Angeboten (hier TYPO3): jweiland.net, mittwald.de
  Tipp: bei den Hostern kann man die Verfügbarkeit einer Domain checken lassen!
  Software zum "Kopieren" unserer Projektordner auf den Webserver des Hosting: FTP (File Transfer Protocol)
  Empfehlung: Filezilla (Link) - auch in den Tools der XAMPP-CMSOD Umgebung eingebaut
• JavaScript (ein kleines Bildergalerie Beispiel)
  Anm.: bitte JS nicht mit Java (Java Applet - Java "Progrämmchen") verwechseln; für JS ist keine Extra-Software nötig - die Browser haben eine JS-Engine eingebaut
  Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2
  aktuelle Version 2.8.2 von Lokesh Dhakar - Link - Kurzanleitung aus Webseite bzw. aus Übung mit TN:
  1. herunterladen und auspacken
  2. CSS Datei für Lightbox2 verlinken
  3. JS Datei(en) für Lightbox2 verlinken
  4. Links (a) für die Lightbox2 einbauen (Texte oder kleine Bilder)
  {code lang:html5 showtitle:false lines:true hidden:false}<!DOCTYPE html>
  <html lang="de">
  <head>
  <meta charset="utf-8">
  <title>Lightbox Beispiel</title>
  <link rel="stylesheet" href="/css/lightbox.css">
  </head>
  <body>
  <section>
  <h3>2 Bilder als Galerie (data-lightbox gleich) - Anm.: dasselbe Bild!</h3>
  <div>
  <a class="example-image-link"
          href="img/big/DSC_0040.jpg"
          data-lightbox="example-1" data-title="Erste Bildunterschrift">
          <img class="example-image"
               src="/img/small/DSC_0040.jpg" alt="Bild 1">
       </a>
       <a class="example-image-link"
          href="img/big/DSC_0040.jpg"
          data-lightbox="example-1" data-title="Zweite Bildunterschrift">
          <img class="example-image"
               src="/img/small/DSC_0040.jpg" alt="Bild 2">
       </a>
      </div>
      
      <p>Das Bild als
      <a href="/img/big/DSC_0040.jpg" target="_blank">Link zum Downloaden (per Rechtsklick</a>
      oder
      <a class="example-image-link" href="/img/big/DSC_0040.jpg" target="_blank"
          data-lightbox="example-2" data-title="Einzelbild">
      mit LightBox Effekt</a>.
      </p>
  </section>
  
  <section>
  <p>
  Für weitere Informationen, besuchen Sie
       <a href="http://lokeshdhakar.com/projects/lightbox2/" target="_blank">http://lokeshdhakar.com/projects/lightbox2/</a>.
  </p>
  </section>
  
  <script src="/js/lightbox-plus-jquery.min.js"></script>
  
  </body>
  </html>{/code}Anm.: CSS und JS Dateien gibt es oft auch in einer "minified" (komprimierten) Version (lightbox.min.css), um kB beim Seitenaufruf einzusparen - Bearbeiten lassen sich diese "geschrumpften" Dateien kaum; Toolbeispiel: CSS Minifier (als Online-Tool)
• Frameworks / Templates (HTML/CSS/JS-Vorlagen)
  verfügbare, freie Vorlagen für unsere neuen Sites-Entwürfe vorgestellt; bitte unbedingt die jeweiligen Lizenzen beachten und einhalten
  Hinweis auf CSS-Frameworks, die gleich komplett Techniken für Navigationen, Bilddarstellungen (Galerien, Karussel, ...) und sogar Responsive Design (Darstellung optimal auch auf eingeschränkten "Viewports/Auflösungen" wie Smartphones, Tabletts und Co.) mitbringen
  Frameworks:
  Bootstrap (früher Twitter Bootstrap - Link),
  YAML (Yet Another Markup Language - Dirk Jesse - Link),
  Foundation (Link)
  Spezialitäten: freie und eingeschränkte Lizenzen, Responsive Designs
  Templatesites (mit Downloads - nur zwei Beispiele - und wieder auf die Lizenzen achten): html5up.net  oder  html5templatesdreamweaver.com - Free Templates 
• Themen, die dem zeitlichen Rotstift zum Opfer fielen
  Formulare mit HTML5/CSS3: Selfhtml-Wiki 
  Audio/Video - HTML5-Special
  mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Files vorausgesetzt - die Medien direkt in den aktuellen Browsern abspielen; als Beispiel wurde eine Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp durch gespielt: siehe Webseite http://introducinghtml5.com/ und die "Downloadseite" http://introducinghtml5.com/examples/ch04/ für Kapitel 4 "Video und Audio" des Buchs
  Bilder für Web verkleinern / optimieren: siehe Toolsammlung auf diesem Portal
  Tipp: RIOT - Radical Image Optimization Tools (Link)
• Musteraufgabe
  Beispielhafte Fragen und Antworten in Theorie und Praxis rund um HTML & CSS
  Die Musterprüfung und Musterlösung finden Sie auch unter den Downloads zum Modul I;
  dort gibt es auch den Lernzielkatalog/Bewertungsraster (LZK/BWR) zum Modul (quasi den "Roten Faden" oder Checkliste zum Modul I)
  Es gibt Versionen für alten CMSOD und neuen CMSOD 2.0 - eine Verlinkung am Ende des Beitrags folgt!
• TN-Bescheinigungen, letzte TN-Fragen, Feedback,
  TN-Unterlagen/Downloads bereitgestellt

• rgba für box-shadow
• saubere Listen
• Navigation mit CSS
• Navi-Links deaktivieren
• Hosting
• JS LightBox2

XAMPP

XAMPP Entwicklungsumgebung (Server) für CMSOD Seminare

• Serverumgebung XAMPP (BU-Version: XAMPP 1.8.3-4 mit PHP 5.5.11)
  X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
  AMP - A - Apache (Webserver), M - MySQL (Datenbankserver), P - PHP (serverseitige Skriptsprache)
  P - Projekt;
  bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL - PHP)
• Vorgehensweise im Seminar:
  1) XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe oder von bereitgestellter Trainer-CD
  2) Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
  3) Zielordner: C:\xampp-cmsod angebeben
  Anm.: Entpacken nach lokal  C:\xampp-cmsod  ist wichtig!
  Grund: weil alle eingebauten CMSOD-Techniken und Tools auf dieses Verzeichnis optimiert wurden.
  Tipp: eigene XAMPPs kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
  4) Starten der xampp-control.exe (Kontrollcenter) und
  5) Starten von Apache Webserver
  (und in Modulen II PHP & MySQL, IIIa Joomla und IIIb TYPO3 den MySQL Datenbankserver)
  Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können abgebrochen werden, da wir keine Zugriffe auf unsere lokalen Testinstallationen über das Netzwerk wünschen.
  Die Dienste für Webservice und Datenbanken müssen wir täglich (bei Bedarf) starten - von einer automatischen Bereitstellung der XAMPP-Services rate ich ab!
  6) Starten des für Webentwicklung CMSOD optimierten Firefox über Schaltfläche "Admin" im Kontrollcenter bei Webserver Apache
  Hinweis: dieser portable Firefox hat bereits Standard-AddOns installiert und nutzt z.B. auch keinen Browser-Cache; Sie können einen installierten und diesen mobilen FF nicht gleichzeitig nutzen!
  Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich
  unter (URL) http://localhost/cmsod-overview>  eine Website
  mit Infos rund um den CMSOD und die genutzten Techniken und Konfigurationen.

• Übersicht: Pfade vs. URL des XAMPP
  Die Pfade sind unsere lokalen Bezeichner auf unseren XAMPP-Ordnerstrukturen.
  Die URLs (Uniform Resource Locator) bezeichnen die Adressen für die Aufrufe der Dokumente über einen Browser.

  Technik	Info	Bemerkung
  Lokal	C:\xampp-cmsod\htdocs\htmlcss\uebungen C:\xampp-cmsod\htdocs\joomla\joomla-bu	htdocs: Hauptverzeichnis des Webservers hier mit Unterordnerstruktur
  Web	http://localhost/htmlcss/uebungen http://localhost/joomla/joomla-bu	Webseiten immer über htdocs also nicht über Laufwerkspfad C:\... aufrufen
  Datenbank	joomla_bu	Unterstrich in DB-Name; DB erlaubt keine Bindestriche/Minus

  Anm.: In Modul I - "HTML & CSS" wird keine Datenbank genutzt. In Modul I könnte man auch ohne Webserver entwickeln.