• (X)HTML & CSS(X)HTML & CSS

Aus dem Zertifikat "CMS Online Designer (VHS)" findet ab Montag, 20.06.16 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 "Linux"
Zeiten: Mo, 20.06.. bis Fr, 24.06.2016; 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, 20.06.16, 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 und alles klein schreiben
  • Tools / Software für unsere Seminare: (Empfehlungen)

    Ich stelle als Trainer ein fertiges und selbstentpackendes XAMPP-Archiv (7-Zip) bereit, das bereits für die CMSOD-Seminare vorkonfiguriert ist! Siehe hierzu Register "XAMPP" ...
    Aktuelles Archiv: xampp-cmsod-TEILNEHMER-20160618.exe

    MD5-Prüfusumme:  6f4cff5d80b3884cde1bc2a917065fd6  
    Serverumgebung (mindestens Webserver): Apache
    Editor: Notepad++  (Tipp: Erweiterung Emmet für fertige Quellcode-Schnippsel)
    Browser: Mozilla Firefox (Tipp: Quellcode anzeigen lassen mit Strg + U oder das vorinstallierte Add-On Firebug)
    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...
  • Allgemeines
    Trennung von Layout (HTML) und Design (CSS); siehe: www.csszengarden.com
    Beachten von semantischem Code (em, strong, cite, ...)
    html-Kommentare mit <!-- ..Kommentar.. -->  
  • Notepad++ Tipps - Standardeditor für das Seminar (in XAMPP-CMSOD PortableApps eingebaut)
    Hilfe PHP: Cursor in PHP-Technikwort und Online-Hilfe mit Alt + F1 aufrufen
    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 (Menü Sprachen)
    Tipp: Über Kontextmenü auf PHP-Datei den portablen Editor Notepad++ als Standardprogramm zum Öffnen einstellen
    Pfad: C:\xampp-cmsod\_tools\_portable\PortableApps\Notepad++Portable\Notepad++Portable.exe 
  • Emmet (Notepad++ Erweiterung; Website: www.emmet.io  ;
    alter Name: Zen Coding - in XAMPP-CMSOD PortableApp Notepad++ eingebaut)
    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) bereits installiert und sofort nutzbar (siehe Menü Erweiterungen - Emmet),
    erste Beispiele (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 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"
  • HTML-Entities
    nur bei gleicher Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt
    in Browsern mit abweichender Codierung Umlaute anzeigen lassen
    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)
  • HTML-Tags(erste Website ./uebungen/test.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
    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)
    img-Tag mit Zuweisung von Quelle per Attribut src="/..." und bitte immer mit alt- und title-Attributen
    Beispiel:
    <img src="/pics/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)
    Bilder als anklickbares Objekt in Kombination mit Links (a-Tag) nutzbar (Übung Dienstag)
  • 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:
    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

 

  • ListenListen
  • Bild gestyltBild gestylt
  • CSS externCSS extern
  • DTDDTD
  • CSS ZengardenCSS Zengarden
  • HTML EntitiesHTML Entities

 

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 FontsGoogle Fonts
  • FarbcodierungenFarbcodierungen
  • TabelleTabelle
  • Bild verlinkenBild verlinken
  • MedientypenMedientypen
  • FirebugFirebug

 

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
    View source
    1. table {
    2.     width: 90%;
    3.     border: 1px solid #000000;
    4.     border-collapse: collapse;
    5. }
    6.  
    7. th, td {
    8.     border: 1px solid #000000;
    9. }
    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:
    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)
  • 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)

 

  • NavigationenNavigationen
  • Externe CSS DateienExterne CSS Dateien
  • Allgemeine KlasseAllgemeine Klasse
  • FirebugFirebug
  • Klasse für p-TagKlasse für p-Tag
  • FloatingFloating

 

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)
    website entwurf 800px
    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:
    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)
  • 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:
    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. a.more:after {
    17. content: " >";
    18. display: inline-block;
    19. height: 1em;
    20. padding: 0 .5em 0.5em 0.5em;
    21. border-radius: 1em;
    22. background: #ffa323;
    23. margin-left: 10px;
    24. }
    25.  
    26. /* ... */
    27.  
    28. header {
    29. width: 100%;
    30. height: 240px;
    31. background: url('../img/header.png') no-repeat center bottom #e7e8ee;
    32. background-size: contain; border: 1px solid #E5E7EB;
    33. }
    34.  
    35. /* ... */
    36.  
    37. main    {
    38. display: block;
    39. position: relative;
    40. width: 100%
    41. }
    42.  
    43. /* ... */
    44.  
    45. nav ul li:first-child {
    46. margin-left: 2%;
    47. }
    48.  
    49. /* ... */
    50.  
    51. /* 2-Spaltenlayout mit breiterem aside */
    52. @media screen and (max-width: 950px) {
    53. body {width:100%}
    54. section {width:58%;}
    55. section.spalte,
    56. aside {width:29%;}
    57. }
    58.  
    59. /* 1-Spaltenlayout mit Navigation unten*/
    60. @media screen and (max-width: 620px) {
    61. section,
    62. section.spalte,
    63. aside {
    64. float: none;
    65. width: 96%;
    66. }
    67. /* ... */
    68. }
    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

 

  • BoxmodellBoxmodell
  • Firefox Add-onsFirefox Add-ons
  • Farbschema erstellenFarbschema erstellen
  • Hex vs. DecHex vs. Dec
  • HTML5HTML5
  • HTML5 TemplateHTML5 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)
    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. <section>
    10. <h3>2 Bilder als Galerie (data-lightbox gleich) - Anm.: dasselbe Bild!</h3>
    11. <div>
    12. <a class="example-image-link"
    13.         href="img/big/DSC_0040.jpg"
    14.         data-lightbox="example-1" data-title="Erste Bildunterschrift">
    15.         <img class="example-image"
    16.              src="img/small/DSC_0040.jpg" alt="Bild 1">
    17.      </a>
    18.      <a class="example-image-link"
    19.         href="img/big/DSC_0040.jpg"
    20.         data-lightbox="example-1" data-title="Zweite Bildunterschrift">
    21.         <img class="example-image"
    22.              src="img/small/DSC_0040.jpg" alt="Bild 2">
    23.      </a>
    24.     </div>
    25.     
    26.     <p>Das Bild als
    27.     <a href="img/big/DSC_0040.jpg" target="_blank">Link zum Downloaden (per Rechtsklick</a>
    28.     oder
    29.     <a class="example-image-link" href="img/big/DSC_0040.jpg" target="_blank"
    30.         data-lightbox="example-2" data-title="Einzelbild">
    31.     mit LightBox Effekt</a>.
    32.     </p>
    33. </section>
    34.  
    35. <section>
    36. <p>
    37. Für weitere Informationen, besuchen Sie
    38.      <a href="http://lokeshdhakar.com/projects/lightbox2/" target="_blank">http://lokeshdhakar.com/projects/lightbox2/</a>.
    39. </p>
    40. </section>
    41.  
    42. <script src="js/lightbox-plus-jquery.min.js"></script>
    43.  
    44. </body>
    45. </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)
  • 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-shadowrgba für box-shadow
  • saubere Listensaubere Listen
  • Navigation mit CSSNavigation mit CSS
  • Navi-Links deaktivierenNavi-Links deaktivieren
  • HostingHosting
  • JS LightBox2JS 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!
    xampp cmsod darstellungFü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.

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

 

 

 

 

Vielen Dank für Ihre tolle Mitarbeit im Laufe der Woche und Ihre überaus positiven Rückmeldungen im und am Ende des Seminars.
Viel Spaß weiterhin mit "HTML & CSS" wünscht Ihnen
Ihr Trainer Joe Brandes

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum
Nach oben