• HTML & CSSHTML & CSS

Aus dem Zertifikat "CMS Online Designer (VHS)" findet ab Montag, 10.04.17 bei der VHS Wolfenbüttel ein Seminar zum Modul I - "HTML & CSS" statt. Wir wollen an Hand praktischer Beispiele die Techniken für die Layouts und Designs von Webseiten kennen lernen. Diese werden wir sauber mit den beiden Techniken HTML und CSS trennen und anwenden.

Für Teilnehmer, die an einer anschließenden (freiwilligen) Prüfung im Modul I des Zertifikats interessiert sind, werden im Seminar der Termin und die notwendigen Vorbereitungen auf die Prüfung abgesprochen!

Hier die Rahmendaten unseres Seminars:

Ort: VHS Wolfenbüttel, Harzstraße 2-5, Raum "MacOS"
Zeiten: Mo, 10.04. bis Do, 13.04.2017 (4 Tage!); jeweils 08.00 - 15.30 Uhr (16.00 Uhr gem. Ausschreibung)
Freiwillige Prüfung: wird im Seminar mit den Interessierten an einer Prüfung abgesprochen/koordiniert

Ich werde unser Seminar an dieser Stellen mit täglichen Informationen begleiten...
Ihr Trainer Joe Brandes

Tag 01

Montag, 10.04.17, 08.00 - 15.30 Uhr

  • Orientierungsphase, Pausenzeiten, Seminarzeiten/Seminarende,
    Teilnehmerthemen, Prüfungsinteresse (freiwillig),
    Hinweis: Software für VHS-Teilnehmer über Cobra-Shop
  • Ausstattung TN-PCs:
    Hinweis auf Sicherungs-Hardware "Reborn Cards" bei VHS Wolfenbüttel
  • Vorgabe für Dateien und Ordner:
    bei Datei- und Ordnernamen keine Leerzeichen und Sonderzeichen (ä, ß) nutzen
    alles klein schreiben (sonst bitte unbedingt später an Groß-/Kleinschreibung bedenken)
    in Projektordnern arbeiten und Unterordner für ./bilder , ./css oder ./js (JavaScript)
  • Ordnerstruktur für ein erstes Website-Projekte
    Vorgabe: eine Website kommt als ein Webprojekt in einen Hauptordner!
    Aktuell im Seminar: Ordner C:\html-css\webprojekte\projekt-montag 
    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 .\html-css\projekt-montag
    Bilder .\html-css\projekt-montag\ bilder
    CSS .\html-css\projekt-montag\ css
    JavaScript .\html-css\projekt-montag\ js
    Selbstverständlich kann man die Ordnernamen und Strukturen eigenen Wünschen anpassen  - man sollte halt einen Plan haben und stringent verfolgen.
    Der Ordner "projekt-montag" 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.
  • Tools / Software für unsere Seminare:
    Serverumgebung (für HTML/CSS-Seminar nicht zwingend nötig! - ansonsten): Apache Webserver (mit PHP)
    Editor: Notepad++  (Tipp: Erweiterung Emmet für fertige Quellcode-Schnippsel s.u.)
    Browser: Mozilla Firefox; Tipps zum Firefox:
    Quellcode anzeigen lassen mit Strg + U (oder beispielhaftes, empfehlenes Add-On Firebug)
    mit Umschalten + Strg + M lassen sich andere Auflösungen testen
    Linksammlung und Auflistung von Werkzeugen/Tools
    siehe http://www.pcsystembetreuer.de/cms-online-designer/toolsammlung.html
  • Rechner konfigurieren:
    Windows Explorer (Win + E) - Organisieren - Ordner- und Suchoptionen... - Register Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren; bei Windows XP mittels Menü Extras - Ordneroptionen...
    in Windows 10 hat der Windows Explorer (bzw. Datei Explorer genannt) ein Kontrollkästchen im Menüband Ansicht
  • Allgemeines
    Trennung von Layout (HTML) und Design (CSS); siehe: www.csszengarden.com
    Hinweise auf semantischen Code (em, strong, cite, ...)
    HTML-Kommentare mit <!-- ..Kommentar.. -->  (sind im Quelltext sichtbar!)
    Leerzeichen und Zeilenumbrüche haben keinen Einfluss auf die Ausgabe im Browser-"Body"
  • Notepad++ Tipps - Standardeditor für das Seminar
    Code-Completion (Codevervollständigung) mit Strg + Leertaste   
    Zoomfaktor/Schriftanzeigengröße mittels Strg + Rollrad-Maus oder Strg + "+" (oder -) auf Nummernblock
    Für sauberes Syntax-Highlighting und Codecompletion benötigt Notepad++ Datei mit gespeichertem Dateiformat oder Vorgabe der "Code-Sprache" (Menü Sprachen) und natürlich Emmet...
  • Emmet (Notepad++ Erweiterung; Website: www.emmet.io  )
    alter Name: Zen Coding (entwickelt von/bei Google)
    die ultimative Unterstützung für das HTML-Editieren, Verfügbar für nahezu alle Editoren, Emmet-Syntax (Link)
    Notepad++: Plugin Emmet - inkl. Python (Erweiterung) installiert und sofort nutzbar (siehe Notepad++ Menü Erweiterungen - Emmet),
    erste Beispiele durchprobiert (ausführlichere ZenCoding-Beispiele: Link, Link Emmet Cheat Sheet)
    Tastenkombination für Emmet "Expand Abbreviation - Abkürzungen ausführen/expandieren" konfiguriert mittels Strg + ,  (Strg in Kombination mit Komma - kann man aber auch anpassen)
    Emmet-Beispiele (hier auch schon spätere Einsätze - z.B. für Tabellen...)
    Emmet Abkürzung Einsatz - Ergebniscode
    html:5
    oder noch kürzer: !
    erzeugt komplettes HTML5-Gerüst
    inklusive richtigen Charactersettings "UTF-8" per meta-Tag
    html:xt erzeugt XHTML 1.0 transitional
    c erzeugt Kommentar
    ul>li*5
    ul>li.stil*5
    ul>li.stil-$$*5
    erzeugt verschiedene unsortierte Listen!
    das funktioniert natürlich auch mit ol-Tags (sortierte Listen)
    table>.row*3>.col*5 erzeugt Tabellengerüst mit 3 Zeilen und 5 Spalten
    inklusive Klasse "row" für tr-Tags und Klasse "col" für td-Tags
    p*4>lorem mal schnell 4 Absätze mit Dummy-Text "Lorem Ipsum"
    Problemlösung für Python-Fehlermeldungen: (Link Sourceforge) PythonScript_1.0.8.0.msi dann manuell nachinstallieren!
  • DTDs (Dokumenttyp Definitionen - Entwurf/Normen durch das W3C - World Wide Web Consortium)
    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!
  • HTML-Entities
    nur bei gleicher Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt
    in Browsern mit abweichender Codierung Umlaute anzeigen lassen verlangt nach Lösungen:
    Einsatz von Meta-Tag für Zeichencode <meta charset="UTF-8"> 
    Einsatz von HTML-Entities am Beispiel Ü (groß U Umlaut): &Uuml; (benanntes Entity) und &#220; (unicode)
    siehe Info-/Übersichtsseiten auf de.selfhtml.org zum Themas (Link1, Link2)
    Übungen mit © und ♠
  • HTML-Tags(erste Websites wie z.B. ./projektordner/test01.html)
    den Baukasten für HTML Layouts kennen gelernt
    Standardaufbau:
    html, (Gesamtgerüst - enthält "Kopf" und "Körper")
    head (mit title-Tag - Titel der Seite für Lesezeichen/Favoriten/Bookmarks),
    body (Browser - Körper/Inhalt)
    Quellen für Recherche und eigene Trainings: wiki.selfhtml.org (früheres Projekt von Stefan Münz - aktuelles HTML-Buch Amazon)
    Beispiele in erster Website test.html:
    p (Paragraph, Absatz), br (Break, Zeilenumbruch);
    Anm.: bitte keine Texte ohne Absatz-Tags!,
    pre (vorformatierter Text - preformated - für einfache Liste)
    hr (Horizontallinie - als optische Trennlinie oder techn. Texttrenner genutzt)
    ol / ul (sortierte / unsortierte Listen; li - List items);
    Wichtig: ul-Listen werden später unsere Navigationen (verschachtelte Listen)
    h1 bis h6 (Headings, Überschriften der Ebenen 1 bis 6)
    dl, dt, dd (Definitionslisten - Übungen zu Copy & Paste aus Wikiprojekt Selfhtml)
    a (Anchor, Link/Hyperlink); benötigt als Attribut href="/..." die URL für Verlinkung;
    Tipp: target="_blank" öffnet in neuem Fenster/Registerkarte
    Links zu Mailadressen mit URL "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"
    Tipp: Übergabe von Betreff mittels "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff"
  • Bilder (images - Tipp kostenlose, freie Bilder: unsplash.com)
    img-Tag mit Zuweisung von Quelle per Attribut src="/..." und bitte immer mit alt- und title-Attributen
    Beispiel:
    <img src="/bilder/bild.jpg" alt="Alt-Text" title="Title-Text">
    alt und title natürlich gerne auch mit identischem Text; hier zusätzlicher Ordner bilder als Pfad angegeben
    Analyse der Nutzung von alt-Attribut (als Ersatztext für Bild) und title-Attribut (für Mausinfos/Quickinfos zu Bildern)
  • CSS (Cascading Style Sheets)
    Zuweisung von Design (Aussehen) der Tags mittels CSS
    CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)
    1. direkt in einem Tag
    manuelle Formatierung: <h1 style="color: red;" ></h1> 
    2. zentral im head eines html-Dokuments
    für das gesamte Dokument: siehe style-Tag im head unten
    3. extern als eigene CSS-Datei (siehe wieder Grundprinzip auf Website www.csszengarden.com)
    View source
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     
    7.     <!-- Externe CSS Datei verlinken -->
    8.     <link rel="stylesheet" href="montag.css">    
    9.     <!-- Zentrales Styling für dieses Dok -->
    10.     <style>
    11.         h2 {color: blue;"}
    12.     </style>
    13.     
    14. </head>
    15. <body>
    16.     <!-- manuelle Styling für einen einzigen Tag -->
    17.     <h1 style="color: red;" ></h1>
    18. </body>
    19. </html>
    Erste Zuweisungen und Tests bei kombinierten Anweisung für Headings h1 und h2, p, img, ...
  • Anm.: die Inhalte des heutigen Tages werden morgen früh ausführlich rekapituliert

 

  • ProjektordnerProjektordner
  • wiki.selfhtml.orgwiki.selfhtml.org
  • Entities / UTF-8Entities / UTF-8
  • Notepad++Notepad++
  • BrowserBrowser
  • csszengarden.comcsszengarden.com

 

Tag 02

Dienstag, 11.04.17, 08.00 - 15.30 Uhr

  • Rekapitulation (an Tag 02 ausführlich), TN-Fragen
  • Tabellen
    Tags: table, caption, thead, tbody, tfoot, tr, th, td 
    Aufbau einer Standardtabelle mit 3 Spalten und 3 Zeilen nach Anleitung und Beispiel Selfhtml (Link)
    wieder Emmet-Tipp: table#tabid>tr.zeilenformat*3>td.spalte$$*4   (einfach mal ausprobieren!)
    Anm.: da fehlen jetzt eigentlich nur noch summary im table-Tag, caption und ggf. th (statt td) in erster Zeile
    hier gleich mit Klassen für Tabellenreihen tr und Tabellendaten td 
    Hinweis: nur als Darstellung von Daten nutzen (nicht mehr als Layout-"Krücke"),
    Tipp: 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; , damit die Rahmenlinien "kollabieren" und nicht mehr doppelt vorkommen
    Übungen zu einfachen Styles (CSS) und HTML-Tabellen-Layouts
    Beispielhafte Tabelle inklusive "aller" Table-Tags und Styling: Beispieltabelle "Browserstatistik"
    Auch die Mozilla Developer bieten schöne Infos zu Tabellen an: Table Examples  
    oder direkte Erläuterungen bei der W3C (World Wide Web Consortium) zu den Tabellentechniken
  • 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!
  • Firefox Browser zur HTML/CSS/JS - Analyse
    (Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in Firefox)
    Info: Add-on Firebug wurde nicht mehr installiert, da aktuell seine Entwicklung zugunsten der Firefox Developer Tools bei Mozilla - s.u. Code-Inspektor - eingestellt wurde: Merke also: aus FireBug "wurde" Page-Inspector
    Beispielhaftes Add-on für Firefox:
    colorPicker - Farben direkt mit Maus wählen/zuweisen, oder alternativ: ColorZilla
    Alternative Code-Analysen mit anderen Browsern:
    MS Internet Explorer - Entwicklertools (Funktionstaste F12)
    Google Chrome mit Erweiterung Web-Developer (Chris Pederick) oder eigenen Entwicklertools (Umschalten + Strg + I siehe: Code-Inspektor; das geht ja beim Firefox genauso!)
    Viele Erweiterungen für Firebug (z.B. Farbenhandling) wurden ebenfalls in die Firefox Developer Tools integriert! (Link FF Dev Tools)
    Übungen und Einsatz des Firefox-Add-on Firebug beim Entwickeln der eigenen Seiten oder Analysieren "fremder" Websites
    Tipp: Firebug/Code-Inspektor berechnet die Dimensionen (Stichwort: Boxmodell) von Webseiten-Elementen!
  • Farben
    Übung / Darstellung mit colorPicker (Firefox Add-on)
    Blau aus Website der KVHS Peine analysiert: rgb(74,105,173) bzw. #4A69AD
    Beispielrechnung für Grünwert: 105 = 6*16 + 9*1
    Definieren von Farben in RGB:
    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" (Durchscheinen):
    mit Definitionen mittels rgba bzw. hsla, wobei a für Alpha-Wert von 0.0 bis 1.0 steht
    Einfacher Farbmischer: http://www.colorpicker.com/  , http://html-color-codes.info/ 
    oder einfach mal "Farbwähler" googeln (Google Search Link)
    Farbdesignsystem: http://www.paletton.com  (früher: colorschemedesigner.com)
    oder natürlich für Adobe Photoshop Profis der "Kuler" direkt eingebaut in Photoshop
  • Klassen (manuelles CSS-Styling)
    Klassen definieren und nutzen: <p class="besondererstil"> ... </p>  
    in CSS: .besondererstil { ... }   (Punkt beachten - hier allgemeine Klasse / Pseudoklasse)
    in CSS nur für Absätze (Paragraphs):  p.besondererstil { ... }   (Klasse wird nur bei Zuweisung in Absätzen genutzt)
    Nutzung von span-Tag zum "Markieren" von Textbereichen in Absätzen (Inline-Styling)
    Beispiel für span-Tag:
    <p>Lorem ipsum <span class="formatklasse">dolor</span> sit amet, ... </p> 
    Vererbung von Eigenschaften von Elternelementen an Kinderelemente
    Beispiel: Styling von body (z.B. font-family) wird vererbt an h1, h2, p, ...
  • Schriften für das Webdesign (Praxis: Google Fonts)
    Es gibt verschieden Wege, Schriften für ein Webprojekt bereitzustellen und verschiedene Anbieter:
    Google Webfonts, Fonts Squirrel oder natürlich Adobe (Typekit)
    Für eine beispielhafte Einbindung mittels CSS-Anweisung @font-face für die Einbindung von Schriftartendateien (z.B. eot Embedded Open Type, woff Web Open Font Format, ttf True Type Font, otf Open Type Font oder gar svg Scalable Vector Graphics siehe: Wiki Selfhtml Schriftformatierung Artikel
    Empfehlung (siehe Browser-Kompatibilität): otf/ttf oder woff, oder natürlich mehrere Formate bereitstellen!
    Praxis mit Google Fonts (kostenlos und Schriften über Google bereitgestellt)
    View source
    1. @import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700');
    2.  
    3. body {
    4.     font-family: 'Ubuntu', sans-serif;
    5. }
    Beispielhafte Einbindung per CSS-Datei: hier Schriftart "Ubuntu" mit Schriften Normal (400), Normal Kursiv (400i) und Fett (700)
  • 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:
    View source
    1. /* Klasse für besondere Absatz-Formate */
    2. p.besondererstil {
    3.     color: #00FF00;
    4.     background: #000000;
    5.     padding: 10px 20px 30px 40px;
    6.     /*
    7.     padding-top: 10px;
    8.     padding-right: 20px;
    9.     padding-bottom: 30px;
    10.     padding-left: 40px;
    11.     */
    12.     border: 5px solid red;
    13.     /*
    14.     border-width: 5px;
    15.     border-style: solid;
    16.     border-color: red;
    17.     */
    18.     margin: 40px;
    19. }
    Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)
    Die Browser der aktuelleren Generationen haben auch keinerlei Probleme mit abgerundeten "Ecken" oder anderen aufwendigeren Styles.
  • Listen verschachteln
    am Beispiel unsortierter Listen eine Aufzählung mit 2. Ebene erstellen und stylen
    Wichtig: die 2. Listenebene muss sauber in einem li (Listitem) der 1. Ebene verschachtelt werden!
    Umso wichtiger, wenn wir danach aus dieser Liste eine Navigation erstellen wollen!
    View source
    1. /* nur a in Navis ohne underline: */
    2. ul > li > a {
    3.     text-decoration: none;
    4. }
    5. /* keine Aufzählungszeichen mehr: */
    6. ul {
    7.     list-style-type: none;
    8.     margin: 0;
    9.     padding: 0;
    10. }
    11. /* zweite Navi-Ebene links einrücken: */
    12. ul > li > ul {
    13.     padding-left: 20px;
    14. }
    In den nächsten Übungen werden dann komplett gestylte horizontale und vertikale Navigationen entstehen.

 

  • Farben in RGBFarben in RGB
  • Google FontsGoogle Fonts
  • padding border marginpadding border margin
  • Firefox Developer ToolsFirefox Developer Tools
  • Listen (verschachtelt)Listen (verschachtelt)
  • CSS Selektor KindelementCSS Selektor Kindelement

 

Tag 03

Mittwoch, 12.04.17, 08.00 - 15.30 Uhr

  • Rekapitulation , TN-Fragen
  • Maße / Maßeinheiten für das CSS-Styling
    Absolute Längenmaße:
    Pixel (px - relativ), physischen Einheiten: Zoll (in), Pica (pc), Punkt (pt), Zentimeter (cm) und Millimeter (mm)
    Relative Längenmaße:
    em - Ein em entspricht der Schriftgröße des Elements, auf das eine Eigenschaft mit einem em-Wert angewendet wird. Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements!
    neu: ex, rem (Erläuterungen auf Wiki Selfhtml)
    Prozentangaben:
    % - unterschiedliche Proportionen für resultierende Styles mit width ("der Klassiker") oder bei line-height oder font-size
  • id (die etwas andere "Klasse")
    Mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (also: 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")
    Anm.: so macht die Dummy-Href-Zuweisung ...href="#"... auch Sinn: Quasi eine leere Sprungmarke (zur Seite selbst!)
  • div und span  
    mit div-Tags lassen sich "Blöcke" mit HTML-Code zusammenfassen;
    in HTML5 heute neue Tags: footer, header, ...
    span der "kleine Bruder" von div: Inline-Elemente Erzeugen; z.B. zum manuellen Styling von Textstellen in Absätzen p-Tag
  • 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)!
    hier wurde die Website aus Blöcken (div-Tags) zusammenbauen → später dann gerne die aktuellen HTML5-Tags (header, article, aside, nav, footer)
    immense Vorteile bei Schnelligkeit, Flexibilität und Barrierefreiheit (gegenüber Tabellen oder gar Frames)
    Als Trainer stelle ich die alte (XHTML) und eine überarbeitetete HTML5-Version für diese schöne grundlegende Technikdarstellung zu tabellenlosem Layout und Barrieretechniken bereit!
  • 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  - Ordner-Vorgaben durch Ersteller)
    Die Dateien (von 01 bis 10) wurden ausgiebig erläutert, diskutiert und getestet.
    Hier ein paar technische Anmerkungen:
    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 nav 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" verlinkt, so lässt sich alternatives, 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 per clear:left oder clear:right)
  • Ausführliche Übungen und Praxisbeispiele
    1) Diverse Farb- und Style-Änderungen per CSS
    2) Praxistipp: Page/Seite in einen Div-Block packen:
    <div id="container"> ... Page-Blöcke ... </div> 
    damit man dann (z.B.) mittels CSS
    #container { width: 980px; margin: 0 auto; }
    die Seite "zentrieren" kann!
    3) Pseudo-Klassen für a (anchor - Hyperlinks)
    :hover, :active, :link, :focus, :visited   (Link Selfhtml)
    auch für andere Elemente verfügbar: #kopf:hover { background-color: silver; }   
    4) spezielle Rahmen- (border) und Box-Styles (box-shadow) recherchiert und angwendet
  • HTML5 - neue Tags braucht das "Land" (beispielhafter Cheat-Sheet Fundus)
    eine kurze Übersicht über die neuen Tags, die dann auch in Template-Beispiel "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 zusätzliches role="main" für ARIA Barrierefreiheit Unterstützung (Link) ist freiwillig, kann aber nicht schaden
    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
  • Startseite index.html
    Webserver (Apache) wird mit einer Konfiguration (httpd.conf) ausgeliefert - auch für automatische Ausliefern von Index-Seiten:
    d.h. dass bei Aufruf einer Adresse (URL) nur mit Ordner/Hauptordner (Root-Directory) 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 sollte auf jeder Seite mit nur einem Klick direkt erreichbar sein
  • HTML-Kurzanalyse von "Design01" - dem freien Template des Selfhtml-Wiki
    im Kopfbereich erkennt man folgende Techniken:
    View source
    1. <!doctype HTML>
    2. <html lang="de">
    3. <head>
    4.     <meta charset="utf-8">
    5. <!--[if lte IE 8]>
    6.          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    7.     <![endif]-->
    8.     <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    9.     <meta name="description" content="Beispiel-Design Nr.01 von SelfHTML.org">    
    10.     <link href="css/style.css" rel="stylesheet">
    11.     <title>SelfHTML Design Nr.01</title>
    12. </head>
    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)
    Morgen dann Umsetzung einer kompletten Website auf Basis dieses HTML5/CSS3-Templates

 

  • BeispieltabelleBeispieltabelle
  • CSS GrößenangabenCSS Größenangaben
  • FloatingFloating
  • Font-FormateFont-Formate
  • Bilder integrierenBilder integrieren
  • CSS background-imageCSS background-image

 

Tag 04

Donnerstag, 13.04.17, 08.00 - 15.30 Uhr

  • Rekapitulation , TN-Fragen
    Anm.: so viel zu tun - so wenig Zeit ;-) schauen wir mal, was wir so schaffen...
  • Diagnose zu "Design01" fortsetzen...
    Tipp: verschachtelte Tags mit Floating (float:left;) für die horizontale Navigation
  • "Bibliothek"
    Vorlage von aktuellen Büchern zum Thema "HTML & CSS"
    Digitale Übersicht auf einer "HTML & CSS - Bibliothek" auf diesem Portal
    Wer an einem aktuellen Nachschlagewerk zu den Themen "HTML, CSS und JS" interessiert ist, kann nach unseren Kursen immer zur "Handbuch-Reihe" aus dem Rheinwerk-Verlag greifen.
    Tipp: Online-Beispiele aus Buch "HTML5 und CSS3 Meisterkurs" (Link)
    und natürlich: wiki.selfhtml.org (das Wiki-Projekt SelfHtml - ehemals S. Münz)
  • CSS-Kurzanalyse von "Design01" - einem freien Template des Selfhtml-Wiki
    im CSS-Code erkennt man folgende Techniken:
    View source
    1. /* == css/style.css == Auszüge == */
    2. @font-face {
    3. font-family: 'Tauri';
    4. font-style: normal;
    5. font-weight: 400;
    6. src: local('Tauri Regular'), local('Tauri-Regular'), url(http://themes.googleusercontent.com/static/fonts/tauri/v2/33NkxyDp8MBgQpwno_A-zw.woff) format('woff');
    7. }
    8.  
    9. * {
    10. margin: 0;
    11. padding: 0;
    12. }
    13.  
    14.  
    15. /* ... */
    16.  
    17.  
    18. a.more:after {
    19. content: " >";
    20. display: inline-block;
    21. height: 1em;
    22. padding: 0 .5em 0.5em 0.5em;
    23. border-radius: 1em;
    24. background: #ffa323;
    25. margin-left: 10px;
    26. }
    27.  
    28.  
    29. /* ... */
    30.  
    31.  
    32. header {
    33. width: 100%;
    34. height: 240px;
    35. background: url('../img/header.png') no-repeat center bottom #e7e8ee;
    36. background-size: contain; border: 1px solid #E5E7EB;
    37. }
    38.  
    39.  
    40. /* ... */
    41.  
    42.  
    43. main    {
    44. display: block;
    45. position: relative;
    46. width: 100%
    47. }
    48.  
    49.  
    50. /* ... */
    51.  
    52.  
    53. nav ul li:first-child {
    54. margin-left: 2%;
    55. }
    56.  
    57.  
    58. /* ... */
    59.  
    60.  
    61. /* 2-Spaltenlayout mit breiterem aside */
    62. @media screen and (max-width: 950px) {
    63. body {width:100%}
    64. section {width:58%;}
    65. section.spalte,
    66. aside {width:29%;}
    67. }
    68.  
    69.  
    70. /* 1-Spaltenlayout mit Navigation unten*/
    71. @media screen and (max-width: 620px) {
    72. section,
    73. section.spalte,
    74. aside {
    75. float: none;
    76. width: 96%;
    77. }
    78. /* ... */
    79. }
    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

  • 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 gerne wieder auch mit einem Firefox-Add-on: Farben für unser Styling aus einem Bild entnehmen und Codes in Textdatei dokumentieren
    Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
    Tipp: Google-Fonts (Thema Schriften/Fonts und Schriftschnitt: font-weight: 700; bzw. 400, ...)
    Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" zeigen
    Darstellung zu Thema //wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face" target="_blank" title="Selfhtml @font-face" data-mce-href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face">Fonts/@font-face auf Selfhtml
    Navigations-Struktur:
    Hautpseite index.html mit
    Unterseiten hobby.html, job.html, impressum.html und kontakt.html    (4 Unterseiten)
    website entwurf 800px
    Für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren und effizient mit Kopien der HTML-Pages und HTML-Bereiche arbeiten.
  • Praxis Website - Projekt (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:
    ./webprojekte/design01    (mit Unterordnern: ./css und ./img  - Vorgaben durch Ersteller)
    nach Vorgabe eine eigene Websitestruktur schaffen und verlinken
  • Spezielle Übungen zu
    1) background-image und background-repeat Techniken
    Wichtig: relative Pfade in der Url() Anweisung beim CSS:  background-image: url('../img/hintergrund.jpg) 
    Erläuterung: Ordner ./css und ./img liegen "nebeneinander", also muss man aus CSS heraus erst einen Ordner "zurück" (siehe ..) und dann in den parallelen Bilderordner (hier: ./img)
    Tipp zu Background-Images als Hintergründe ("Muster"):
    Link: http://www.stripegenerator.com/  für Background-Images
    Link: http://www.colorzilla.com/gradient-editor/  Backgrounds mit CSS Gradiententen (Verläufen)
    2) verschiedene CSS-Stylings; z.B.:
    h2.img  - Heading 2 mit Klasse img - hier also Klasse img!)
    .img.group  - Styling für Elemente mit class="img group" - also 2 Klassen in HTML-Tag zugewiesen!
  • Horizontale Navigationsleiste (horizontal list)
    beispielhafte Navigation nach Vorlage Buch C. Wyke-Smith durchgespielt; Alternative: Bruce Hysloop "Meisterkurs - Link - Online-Beispiele)
    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;)
  • JavaScript (ein kleines Bildergalerie Beispiel - Lightbox2 von Lokesh Dhakar)
    Anm.: bitte JS nicht mit Java (Programme dann z.B. als Java Applet - Java "Progrämmchen") verwechseln;
    für JS ist keine Extra-Software nötig - die Browser haben eine JavaScritp-Engine eingebaut
    Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2
    aktuelle Version von Lokesh Dhakar - Link - Kurzanleitung aus Webseite bzw. aus Übung mit TN:
    1. herunterladen und auspacken
    Anm.: Dateienordner ./dist  
    2. CSS Datei für Lightbox2 in Webprojekt kopieren und  verlinken (link-Tag im head-Element)
    3. JS Datei(en) für Lightbox2 in Webprojektordner ./js kopieren und am Ende des Body-Elements per script-Tag einbinden
    Anm./Empfehlung: hier kombinierte JavaScript-Datei aus Lightbox-JS und JS-Framewerk JQuery nutzen (lightbox-plus-jquery.js)
    4. Links (a) gemäß Lightbox2-Dokumentation für die Lightbox2 einbauen
    View source
    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4.      <meta charset="utf-8">
    5.      <title>Lightbox Beispiel</title>
    6.      <link rel="stylesheet" href="css/lightbox.css">
    7. </head>
    8. <body>
    9. <h3>2 Bilder als Galerie (data-lightbox gleich)</h3>
    10. <a href="img/big/DSC_0040.jpg"
    11.         data-lightbox="gallery"
    12.         data-title="Erste Bildunterschrift">
    13.         <img src="img/small/DSC_0040.jpg" alt="Bild 1">
    14. </a>
    15. <a href="img/big/DSC_0041.jpg"
    16.         data-lightbox="gallery"
    17.         data-title="Zweite Bildunterschrift">
    18.         <img src="img/small/DSC_0041.jpg" alt="Bild 2">
    19. </a>
    20. <script src="js/lightbox-plus-jquery.min.js"></script>
    21. </body>
    22. </html>
    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).
  • Bilder für Web verkleinern / optimieren: siehe auch Toolsammlung auf diesem Portal
    Tipp: RIOT - Radical Image Optimization Tools (Link)
    Tipp: kostenlose "wirklich" freie Bilder auf https://unsplash.com/
  • Frameworks / Templates (HTML5 / CSS3 / JavaScript - Vorlagensysteme)
    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: (eine unvollständige Übersicht ;-)
    Bootstrap (früher Twitter Bootstrap - Link),
    YAML (Anm.: nicht mehr aktuell gepflegt - 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
  • Kurz-Einführung:
    Client-/ Server- Technologie
    (eine "Kopiermaschine")
    Web-Server: z.B. Software Apache, hält alle Ihre Webdokumente und Ordnerstrukturen bereit,
    kann bei einem Hoster inklusive weltweiter "Adresse" gemietet werden:
    Domain → domainname.TopLevelDomain → Bsp.: firmenname.de
    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 - also einen Webhoster:
    Bereitstellung Webserver und die Registrierung einer gewünschten "Adresse" (Domain) im Internet
    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! (Technik: whois Recherche)
    Software zum "Kopieren" unserer Projektordner auf den Webserver des Hosting: FTP (File Transfer Protocol)
    Empfehlung: Filezilla (Link) und bitte als Protokoll immer nur SFTP (Secure FTP - eigentlich SSH-Technik) nutzen!
    Beispielhafte Anleitungen zur Einrichtung von FTP-Zugängen bei Hostern und/oder die Einrichtung/Nutzen des FTP-Programms findet man leicht per Google (Suchlink)
  • Themen, die dem "zeitlichen Rotstift" zum Opfer fielen
    Ausführlichere Übungen (allgemein und im Besonderen) für Tabellen, Listen, Bilder / Hintergrundbilder, Floating, ...
    Alternative HTML-Editoren → Wiederholung Webprojektplanungen
    Optimierung head-Tag: insbesondere Meta-Tags
    Formulare mit HTML5/CSS3: Selfhtml-Wiki
    Beispielseite mit unterschiedlichsten modernen Formularstylings: freefrontend.com/css-forms/
    Audio/Video - HTML5-Special
    mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Audio-/Video-Dateien vorausgesetzt - diese Medien direkt in den aktuellen Browsern abspielen; als Beispiel kann eine Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp durchgespielt werden:
    siehe Webseite http://introducinghtml5.com/ und die "Downloadseite" http://introducinghtml5.com/examples/ch04/ für Kapitel 4 "Video und Audio" des Buchs
  • TN-Bescheinigungen, letzte TN-Fragen, Feedback

 

  • Tags dl, dt, ddTags dl, dt, dd
  • Grids - SpaltenlayoutsGrids - Spaltenlayouts
  • Horizontale NavigationenHorizontale Navigationen
  • Bildergalerie vorbereitenBildergalerie vorbereiten
  • Lightbox2 einbauenLightbox2 einbauen
  • ohne Floatingohne Floating

 

 

Vielen Dank für Ihre rege Teilnahme und Ihr persönliches positives Feedback nach Seminarende.
Ihr Trainer Joe Brandes