Für alle Interessierten aus dem Bereich des "CMS Online Designer" findet ab dem 11.10.2021 ein Seminar "HTML & CSS" bei der VHS/BIZ WF Wolfenbüttel statt.

code inspector 800px

In unserem HTML & CSS-Workshop wollen wir uns alle notwendigen Fähigkeiten von den einfachen Webtechnikgrundlagen bis zur ausgebauten Website erarbeiten. Das Seminar orientiert sich dabei an den "Ideen/Roter Faden" des CMSOD-Zertifikats aber natürlich vor Allem auch an den Bedürfnissen und Themenwünschen der Teilnehmer im Seminar.

Hier die Rahmendaten unseres Seminars:

Ort: VHS/BIZ Wolfenbüttel
Zeiten: Mo, 11.10. - Fr, 15.10.2021; jeweils 08.00 - 15.30 Uhr
Prüfung: Do, 18.11.2021 ab 15.45 Uhr - aktuell 4 Interessierte

Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes

Intro

Allgemeine Infos / Intro

  • Orientierungsphase
  • Hinweise zu Corona Regeln
  • Ablaufplanung Seminar:
    Pausenzeiten, Anfangs-/Endzeiten
  • Kurzdarstellung "CMS Online Designer"
    Freiwillige Prüfung möglich in Absprache mit interessierten Teilnehmern

Roter Faden

Diesen Begriff hört man in meinen Seminaren häufiger ;-). Gemeint ist hier: Das grundsätzliche Verständnis der fraglichen IT-Techniken. Am Besten gleich so, dass man auch nach einer Zeit ohne Beschäftigung mit diesen Techniken sehr schnell wieder in Fahrt kommt.

Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann.

Quelle: Wikipedia - Roter Faden

Eine sehr grundsätzliche Erfahrung in der IT ist, dass sich natürlich die IT modernisiert. ABER: keine Entwicklergemeinschaft setzt sich dauernd hin und erfindet das Rad neu. Wir werden uns also erarbeiten, wie Webtechnik tickt und dann profitieren wir einfach mal ein paar Jahrzehnte davon ;-).

Die Themen im Groben: (s.a. SelfHTML Beitrag  )

  • HTML (Webseitengerüst - Inhalte)
    mit modernen HTML5 Tags optimiert für Responsive Design
  • CSS (Design - Präsentation)
    Trennung des Designs (Erscheinungsbild) vom Layout (Seitengerüst)
  • Sites (Statische Website-Projekte)
    mit HTML, CSS und auch ein wenig Javascript

Und natürlich schauen wir vor Allem auch, das wir Ihre Topics im Seminar klären.

Quellen - Infos durch J. Brandes

Wichtig: Lassen Sie sich zu Beginn des Seminars nicht von der Fülle an Infos in diesem Seminarbeitrag erschlagen. Es handelt sich auch um viel Zusatzinfos und Infos zum Thema Online Design, die sich im Laufe des Seminars immer wieder mal nachschlagen/nutzen lassen.

Die Inhalte der Seminarewoche sind auch nicht nur bereits über die Seminartage/Seminarabschnitte aufbereitet, sondern ebenfalls oft mit Zusatzinfos versehen. Und natürlich ergeben sich ja nach Seminarverlauf leichte Abweichungen. Am Ende des Seminars sind dann alle Infos der Seminarwoche für Sie komplett.

Win10

Wir müssen unsere Arbeitsplatzrechner optimal für die Umsetzungen mit Content Management Systemen (oder auch anderen Online-Techniken) vorbereiten.

Windows-Umgebung konfigurieren

Ansicht für den Standard-Dateimanager Window Explorer ( Win + E ) einstellen:

Windows Einstellungen - Dateierweiterungen einblenden

Anzeige der Dateiendungen mit Windows Explorer (Win + E);
Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...

Grund für die Konfiguration: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!

Software für Seminar

(siehe auch Beitrag Toolsammlung auf diesem Portal - aber: Praktische Installationen im Seminar)

  • Browser: Mozilla Firefox  (Mozilla Firefox Link)
    mehrere Browser werden benötigt - separate Browser für Designtests, Code-Analysen oder auch (später) Trennung von CMS Verwaltung (Backend, Dashboard) und Website (Frontend)
    weitere Alternativen: Chrome / Chromium / Ungoogled Chrome, Opera, Vivaldi, Brave, Safari, ...
  • 7-Zip (7-Zip Link)
    Packer / Entpacker für Projektverwaltung, Backup, ...
  • Microsoft Visual Studio Code (MS VS Code Link)
    Profi-Tool aus dem Hause Microsoft für verschiedene Betriebssysteme
    (Anm.: auch ohne Admin-Rechte installierbar)
    Alternative: Notepad++ (NP++ Link) - für die kleine Bearbeitung zwischendurch
    Texteditor (für Skripte, Konfigurationsdateien oder auch HTML/CSS/JS)
    Empfehlung: 32-Bit-Variante installieren für volle Kompatibilität zu allen NP++ Plugins
  • PowerToys (MS PowerToys - Github Link, Dokumentation PowerToys)
    Diverse kleinere/größere Helferlein:
    Bildoptimierungen/Verkleinerungen, Farbwähler, Vorschau auf SVG im Explorer, Dateien umbenennen, Fenstermanager (Fancy Zones), ...
  • Git (Git Link)
    Software Versionierung - über Git kann man sehr einfach komplette Umgebungen und Techniken versionieren / bereitstellen (klonen)
  • Zeal (Zeal Link)
    Offline Dokumentationen (HTML, CSS, Emmet, ...) zum Durchblättern oder gezielter Suche/Info aus unserem Code-Editor heraus

Die Programme sind entweder schon vorinstalliert oder die Software wird von mir fertig lokal zum Installieren verteilt, um Zeit zu sparen.

 

Tag 01

Montag, 05.07.21, 08.30 - 16.00 Uhr

Orientierungsphase, Pausenzeiten, Seminarzeiten/Seminarende,
Teilnehmerthemen, Prüfungsinteresse (freiwillig)

Allgemeines

Ein paar kleine Vorgaben für unsere Übungen:

Ausstattung TN-PCs:

Hinweis auf Profile der installierten Windows 10 Trainings-PCs

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)

Trennung von Layout (HTML) und Design (CSS)

siehe: www.csszengarden.com

Die Saubere Trennung für Statische Website besteht aus drei Säulen:

HTML CSS
JS
Hypertext Markup Language Cascading Style Sheets JavaScript
Inhalt (Content) der Website Styling (Presentation) der Website Aktionen und Dynamik
(Client-seitig - also im Browser)

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"

Ordnerstruktur für ein erstes Website-Projekte

Vorgabe: eine Website kommt als ein Webprojekt in einen Hauptordner!

Vorschlage für Seminar: Ordner C:\html-css\projekt-montag  (Basisordner / Projektordner)

Der Ordner enthält 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 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

Ein paar Anmerkungen für die ersten Software- und Programmnutzungen:

Serverumgebung

Eine Serverumgebung ist für HTML/CSS-Seminar nicht zwingend nötig! - ansonsten) Apache Webserver (mit PHP) nach Bauform XAMPP-CMSOD

Editor: Visual Studio Code von Microsoft

Die Auswahl eines Editors für die Erstellung und Bearbeitung ist klassisch auf Notepad++  gefallen.
(Tipp: Erweiterung Emmet für fertige Quellcode-Schnippsel)

Seit geraumer Zeit nutze ich in Seminaren den Visual Studio Code von Microsoft. Ein kleiner Nachteil liegt in der Professionalität also Mächtigkeit des Editors. Aber wir haben ja auch genügend Zeit ihn besser kennen zu lernen und die Vorteile überwiegen deutlich.

Wer keine Lust auf Software direkt von Microsoft hat, kann einfach zur Telemetrie-freien Variante Codium greifen. Denn die Software ist ja grundsätzlich OpenSource und man kann völlig frei über die Codebasis verfügen, was im Projekt Codium eben auch getan wird.

Browser

Wir benötigen aus verschiedenen Gründen mehrere Browser für die Arbeit an und mit Online-Dokumenten.

Mozilla Firefox

Tipps zum Firefox:

  • Quellcode anzeigen lassen mit Strg + U
  • mit Umschalten + Strg + M lassen sich andere Auflösungen testen
  • Code Inspektor aktivieren (ehemals Extension Firebug): Umschalten + Strg + I  

Browser-Alternativen:

  • MS Edge
  • Google Chrome oder alternativ:
    Chromium oder sogar
    Ungoogled-Chrome
  • Opera
  • Vivaldi
  • Brave
  • Safari
  • ...

Die Liste geht on and on...

Emmet

Das "Schweizer Messer" für HTML/CSS-Kodierungen ist bei VS Code bereits integriert (bei Notepad++ bitte als Erweiterung nachrüsten).

Website: www.emmet.io  - alter Name: Zen Coding (entwickelt von/bei Google)

CheatSheet: ausführlichere ZenCoding-Beispiele: Link, Link Emmet Cheat Sheet

Tastenkombination für Emmet "Expand Abbreviation - Abkürzungen ausführen/expandieren" lassen sich konfigurieren (bei VS Code einfach per TAB den Code komplettieren lassen).

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
Anm.: in aktuellen Emmet-Implementierungen nicht mehr verfügbar!
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"

 In VS Code können eingestellte Tastenkombinationen aufgelistet werden und dann über das Schlagwort Emmet gefiltert werden.

HTML Fachbegriffe

DTD

(Dokumenttyp Definitionen - Entwurf/Normen durch das W3C - World Wide Web Consortium)

  • HTML 4.01 (klassischer Standard, Varianten, Link W3C global structure )
  • XHTML 1.0 (als transitional oder strict Variante, Link W3C example )
  • HTML5 (die gesammelten Ideen für aktuelle oder zukunftsorienierte Webseiten

Beachten: nicht alle neuen HTML5-Tags werden immer von allen Browsern gleich unterstützt!

HTML-Entities

Nur bei richtiger 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)

HTML-Tags

(erste Website - z.B.: ./projektordner/test01.html)

Wir lernen den Baukasten für HTML Layouts kennen.

Standardaufbau:

  • html - Gesamtgerüst
    enthält "Kopf" und "Körper" - also head und body
  • head - mit (z.B.) 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)

Tag-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"

Alle Beispiele in praktischen Übungen über das Seminar verteilt.

Bilder

(Images - Bilder werden immer webtauglich benötigt und von Trainer bereitgestellt bzw. mit Trainees erzeugt)

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

Die alt und title natürlich gerne auch mit identischem Text. Hier wurde ein Unter-Ordner bilder für den Pfad zum Bild angegeben!

Analyse der Nutzung von alt-Attribut (als Ersatztext für Bild) und title-Attribut (für Mausinfos/Quickinfos zu Bildern)

Bilder sind als anklickbare Objekte in Kombination mit Links (a-Tag) nutzbar (Übungen folgen).

Bilder für Web verkleinern / optimieren:

  • Tool von den Microsoft PowerToys
  • RIOT - Radical Image Optimization Tools (Link)

Bildmaterial / Quellen: Bitte immer unbedingt auf Lizenzen und Nutzungen achten!

Bilder auf https://unsplash.com/
Alternativen: pexels.de oder auch pixabay.de

Diese Quellen sind sogar in Bildverarbeitungen wie Serifs Affinity Photo als Galerien verlinkt.

Dummy-Images für Entwicklungsphase

Auch Unsplash bietet eine Einbindung für Bilder per Linkstruktur: https://source.unsplash.com/ 

Tipp: Nutzung von Zufallsbildern oder mit Bildcode inklusive Übergabe von Dimensionen: (Anleitungen)
z.B. source.unsplash.com/WLUHO9A_xik/1600x900     

CSS 101

(Cascading Style Sheets - ein Einstieg)

Zuweisung von Design (Aussehen) der Tags mittels CSS - CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)

  • direkt in einem Tag
    manuelle Formatierung: <h1 style="color: red;" ></h1> 
  • zentral im head eines html-Dokuments
    für das gesamte Dokument: siehe style-Tag im head unten
  • extern als eigene CSS-Datei (siehe wieder Grundprinzip auf Website www.csszengarden.com)

Wichtig: je näher die Styles am eigentlichen HTML-Tag kodiert sind, desto eher gelten sie.

Beispielcode:

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

 

Screenshots aus Seminar:

  • Emmet AbkürzungenEmmet Abkürzungen
  • settings.jsonsettings.json
  • Inline StylingInline Styling
  • Code InspektorCode Inspektor
  • VerschachtelungenVerschachtelungen
  • RIOTRIOT

Screenshots aus Vorseminar 2021:

  • Visual Studio CodeVisual Studio Code
  • Live ServerLive Server
  • HTML5 GerüstHTML5 Gerüst
  • wiki.selfhtml.orgwiki.selfhtml.org
  • Drei Mal CSSDrei Mal CSS
  • CSS BeispieleCSS Beispiele

Screenshots aus Vorseminar 2017:

  • Emmet - ShortcutEmmet - Shortcut
  • ArbeitsumgebungArbeitsumgebung
  • EntitiesEntities
  • csszengarden.comcsszengarden.com
  • CSS - DateiCSS - Datei
  • CSS - BeispieleCSS - Beispiele

 

Tag 02

Dienstag, 06.07.21, 08.30 - 16.00 Uhr

Ausführliche Rekapitulation zu Tag 01, TN-Fragen

Inbetriebnahme der "Entwicklungsumgebung"

Versionierung / Backup: gerne einfach Projektordner für Arbeit kopieren / versionieren / archivieren
Hinweis: ordentlichen Packer/Entpacker (siehe 7-Zip) für diese wiederkehrenden Arbeiten nutzen.

Tipp/Erinnerung: alle fraglichen Dateien immer mit geeignetem Code-Editor öffnen, damit die Zeichen der Dateien sauber abgelegt/gespeichert werden.
(Empfehlung: Visual Studio Code)

Links mit HTML-Tag a

(Anchor / Anker)

Einfachster Link - siehe auch Dummy-Link in HTML-Templates/Vorlagen:

<a href="#">Klicktext</a>   - die # steht kurz für eine unbekannte/unbenannte Stelle im Quellcode mit einer ID
<a href="#top">Klicktext</a>   - das #top steht für die benannte Stelle im Quellcode mit einer ID namens top (z.B. also <div id="top"> ... </div> )

Website-Adressen verlinken:

<a href="http://www.bahn.de">Klicktext</a>   - der Link führt zur entsprechenden Adresse
<a href="http://www.bahn.de" target="_blank">Klicktext</a>   - der Link führt zur entsprechenden Adresse in einem neuen Fenster/Tab

E-Mail-Adressen verlinken: (hier inklusive Betreff)

<a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff">klickbarer Text (oder  Grafik)</a>   - Beispiel mit Betreff

Übungen...

Browser zur Webanalyse

(Beispiel: Firefox - Code Inspector)

Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in Firefox
Beispielhaftes Add-on für Firefox: colorPicker - Farben direkt mit Maus wählen/zuweisen
Tipp/Alternative: Farbwähler der Microsoft PowerToys

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; siehe Firefox!)

Stichwort: Firefox Developer Tools (Link)

Übungen und Einsatz des Firefox beim Entwickeln der eigenen Seiten oder Analysieren "fremder" Websites

Hinweis: Code Inspector Tool berechnet die Dimensionen (Stichwort: Boxmodell) von Webseiten-Elementen!

Farben

Übung / Darstellung mit colorPicker (Firefox Add-on) oder den Microsoft PowerToys

Dunkelgrün aus Website VHS Braunschweig analysiert: rgb(175, 200, 14) bzw. #AFC80E

Beispiel: Blau aus Website: rgb(74,105,173) bzw. #4A69AD
Beispielrechnung für Grünwert: (dezimal) 105 = (hexadezimal) 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

Farben mit Erweiterungen von Browsern "picken" oder die PowerToys von Microsoft installieren:

powertoys color picker 800px

Der Color Picker der PowerToys in Action: Aufnehmen des Orange-Tons von selfHTML.

Empfehlung: benannte Farben möglichst vermeiden!
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:

oder einfach mal "Farbwähler" googeln (Google Search Link)

Farbdesignsysteme:

Video zur Nutzung von MyColor.Space: How to choose a color palette (3 easy Steps)  

Tabellen

(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)

Emmet nutzen: 
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
Im Emmet-Beispiel werden gleich die Klassen für Tabellenreihen tr und Tabellendaten td erzeugt.

Wichtig: Tabellen werden nur als Darstellung von Daten genutzt (nicht mehr als Layout-"Krücke")!

Tipp: in table-Tag ein summary="..." hinterlegen für Barrierefreiheit

Tabellen mittels CSS stylen:

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

Tabellenbeispiele:

oder direkte Erläuterungen bei der W3C (World Wide Web Consortium) zu den Tabellentechniken

CSS Boxmodell

Das CSS Boxmodell kann man seit ca. 2016 mit den aktuellen Browsern etwas entspannter sehen als früher - insbesondere der Internet Explorer hatte da sein "eigenes Süppchen gekocht".

Boxmodell (Bordermodell):

  • Erläuterungen zum Boxmodell (Link) auf css4you
  • oder bei Selfhtml (Link)

Tipp: Dimensionen mit Firefox Code Inspector analysieren!

Klassen

Klassen definieren und nutzen: <p class="besondererstil"> ... </p>

in CSS: .besondererstil { ... }   (Punkt beachten - hier allgemeine Klasse)

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

id

(die etwas andere "Klasse": es kann nur eine geben...)

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")

Rahmen, Abstände, Innenabstände

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.

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

 

Zwischen-/Abschluss-Übungen:
geschützte Leerzeichen: &nbsp; 
HTML-Tags:
pre (Vorformatierter Text),
hr (Horizontale Linie)

 

Screenshots aus Seminar:

  • emmet.ioemmet.io
  • UnminifyUnminify
  • BrowserstandardsBrowserstandards
  • Relative MaßeRelative Maße
  • background-colorbackground-color
  • background-imagebackground-image

Screenshots aus Vorseminar 2021:

  • Icon FontsIcon Fonts
  • IMG TagIMG Tag
  • FarbschemaFarbschema
  • BildoptimierungBildoptimierung
  • PowerToys BildgrößenPowerToys Bildgrößen
  • BildervergleichBildervergleich

Screenshots aus Vorseminar 2017:

  • KlassenKlassen
  • Firefox Add-onsFirefox Add-ons
  • ProjektversionenProjektversionen
  • FarbenFarben
  • TabellenTabellen
  • MarginsMargins

 

 

Tag 03

Mittwoch, 07.07.21, 08.30 - 16.00 Uhr

Rekapitulation, TN-Fragen

Tabellen (Wiederholung / Übung)

mit der guten Beispieltabelle (siehe alle wichtigen Table-Tags und ordentliche Barrierefreiheit und Design)
aus dem Wiki von Selfhtml: Beispieltabelle "Browserstatistik":

Quellcode kopieren / analysieren; Wissen über Tabellenstyling verbessern

div und span 

Mit div-Tags lassen sich "Blöcke" mit HTML-Code zusammenfassen (Anm.: Outline-Element).

Der span-Tag ist der "kleine Bruder" von div: Inline-Elemente erzeugen; z.B. zum manuellen Styling von Textstellen in Absätzen (p - Paragraph)

...tbc...

Tabellenloses Layout für Webseiten (Floats)

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)! Ich habe die Grundgedanken trotz des offensichtlichen "Alters" im Beitrag gelassen, da die Basics (der "Rote Faden") immer noch passt und das Layout von mir auf HTML5 aufgemotzt wurde ;-)!

Websites werden klassisch aus Blöcken (div-Tags) zusammengebaut.
Später werden wir dann gerne die semantischen HTML5-Tags nutzen:  header, article, aside, nav, footer

Begründung/Vorzüge für Einsatz von HTML5:

  • immense Vorteile bei Schnelligkeit
  • Flexibilität
  • Barrierefreiheit

Das sind entscheidende Vorzüge gegenüber  Layouts per Tabellen oder gar Frames!

Analyse und Praxis

... mit den Beispielseiten zum tabellenlosen Layout bereitgestellt durch Trainer

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) ausgiebig erläutern, diskutieren und testen.

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

  • Diverse Farb- und Style-Änderungen per CSS
  • 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!
  • 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; }   

Übungen: spezielle Rahmen- (border) und Box-Styles (box-shadow) recherchieren und anwenden

Floats, Flexbox, Grids

Im Grunde geht es um die unterschiedlichen Möglichkeiten unsere Layout-Blöcke nach unseren Wünschen anzeigen zu lassen - und das am Besten auch noch für alle Viewports (Auflösungen) passend!

Aufgrund der unzähligen Umsetzungsmöglichkeiten und teils auch komplexen theoretischen Hintergründe sollte man sich hier wirklich einmal gute Beispiele (Templates) organisieren und dann intensiv analysieren.

Für eine Übersicht und Einführung hier ein Youtube Video von Kevin Powell zum Thema Floats, Flexbox oder Grids.

Conclusio: im Grunde geht es of gar nicht um eine Einzelentscheidung für ein Layoutsystem, sondern oft um eine Kombination der Techniken. Gute Frameworks kombinieren dann die Techniken und bieten diese über die zugehörigen HTML-Layouts und CSS-Stylings an.

HTML-Frameworks

Am Ende der Übung steht folgende Erkenntnis:

Die kombinierten Techniken führen zu entsprechenden Darstellungen und müssen/müssten jeweils wieder auf neue Projekte aktualisiert angewendet werden. Man hätte das Gefühl, das "Rad immer wieder neu erfinden" zu müssen. Das führte in der Online-Technik zur Enwicklung von HTML/CSS-Frameworks: bekanntestes Beispiel Bootstrap (getbootstrap.com). Bootstrap ist auch besonders durch die sehr gute Dokumentation attraktiv.

HTML5

... neue Tags braucht das "Land" (beispielhafter Cheat-Sheet Fundus - SelfHTML Link Seitenstrukturierung )

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

Spezielle Pages

Startseite index.html

Der Webserver (Apache) wird mit einer Konfiguration (httpd.conf) ausgeliefert.

Dies Konfiguration regelt auch das 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, ..) automatisch 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

 

Zwischen-/Abschluss-Übungen: HTML-Kurzanalyse von "Design01"
Bereitstellung eines freien HTML5-Templates aus dem Selfhtml-Wiki
Morgen dann Umsetzung einer kompletten Website auf Basis dieses HTML5/CSS3-Templates

Screenshots aus Seminar:

  • CSS GridCSS Grid
  • csszengarden.com CSS 01csszengarden.com CSS 01
  • csszengarden.com CSS 02csszengarden.com CSS 02
  • SVGSVG
  • CSS backgroundCSS background
  • Attribut aria-currentAttribut aria-current

Screenshots aus Vorseminar 2021:

  • FloatsFloats
  • HTML5 BlöckeHTML5 Blöcke
  • Page zentriertPage zentriert
  • FaviconFavicon
  • CSS VariablenCSS Variablen
  • Experiment mit VariablenExperiment mit Variablen

Screenshots aus Vorseminar 2017:

  • Tabelle - gestyltTabelle - gestylt
  • Scribble / EntwurfScribble / Entwurf
  • HTML5 TagsHTML5 Tags
  • RTL - Right-to-LeftRTL - Right-to-Left
  • box-shadowbox-shadow
  • Design01Design01

 

 

Tag 04

Donnerstag, 08.07.21, 08.30 - 16.00 Uhr

Rekapitulation, TN-Fragen, ... der "Website-Projekt-Tag"

Bibliothek

Bücher 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)

HTML-Kurzanalyse

... von Design01 - einem freien CSS-Template des Selfhtml-Wiki (Link Design01 Wiki SelfHTML)

Im Kopfbereich erkennt man folgende Techniken - hier ein paar Erläuterungen (Version Design01 Jahrgang 2021)

View source
  1. <head>
  2. <meta charset="utf-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <meta name="description" content="Beispiel-Design von selfhtml.org">
  5. <link rel="stylesheet" href="css/style.css">
  6.     <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
  7. <script src="js/dark-mode-toggle.js">    </script>
  8. <title>SelfHTML Design Nr.01</title>
  9. </head>
Erläuterungen im Seminar zu:

  • Favicon (siehe auch Favicon Generatoren)
  • 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
  • meta-Tag mit name (siehe folgende Erläuterungen zu Meta-Tags)

meta

(Meta-Tags)

Infos für die Suchmaschinen-Bots - also Suchmaschinen Google, Bing (Microsoft - Bing is not Google), Altavista, DuckDuckGo oder das Metager-Projekt des RRZN Hannover (metager.de - Link)

Automatisch auswertbare Infos mittels
<meta name="author" content="J. Brandes">  und z.B.
auch name="keywords",
und name="description", ...

Weiterführende Infos:  Link Selfhtml

CSS-Kurzanalyse

... von "Design01" - einem freien Template des Selfhtml-Wiki

Im Seminar werden mehr Erläuterungen zum CSS inklusive Tests durchgeführt.

Einstieg in den CSS-Code:

View source
  1. /* Stylesheet für Selfhtml Design 01
  2.  responsives Layout mit Flexbox ab Z. 247 */
  3.  
  4. /* ============== GLOBAL DEFINITION =================== */
  5.  
  6. /* alternatives Boxmodell */
  7. *, ::before, ::after {
  8. box-sizing: border-box;
  9. }
  10.  
  11. /* Farbfestlegungen nur als Fallback für IE9-11
  12.  custom properties für alle anderen! */
  13. body {
  14. max-width: 65em;
  15. margin: 0 auto;
  16. padding: 0 1em;
  17. font: normal 1em Arial, sans-serif;
  18. color: darkRed; /* wird als currentColor für die Akzentfarbe verwendet. */
  19.     color: var(--accent1-color);
  20. background-color: #ffffff;
  21.     background-color: var(--background-color);
  22. }
  23.  
  24. p, ol, ul, dl {
  25.     color: #333;
  26. color: var(--font-color);
  27. }
  28.  
  29. :root {
  30. --background-color: #fff;
  31. --background2-color: #ccc;    
  32. --background3-color: #ccc;        
  33. --accent1-color: darkred;
  34. --accent2-color: orange;
  35. --accent3-color: #fede9e;
  36.     --font-color: #333;
  37. --font2-color: #666;
  38.     --link-color: darkred;        
  39.  
  40. }
  41.  
  42. :root.dark {
  43. --background-color: #666;
  44. --background2-color: #666;    
  45. --background3-color: #ccc;        
  46. --accent1-color: darkred;
  47. --accent2-color: orange;    
  48. --accent3-color: #fede9e;    
  49. --font-color: #fff;
  50. --font2-color: orange;        
  51.     --link-color: orange;        
  52.  
  53. }
Selbstverständlich sind hier nur Auszüge in meinem Beitrag präsentiert.

Hier ein paar kurze Erklärungen:

Variablen mit CSS: Erläuterungen und Beispiele auf SelfHTML Wiki 

 

...tbc...

 

 

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:

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;)
Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" zeigen
Darstellung zu Thema 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

Tafelbild aus Vor-vor-vor-Seminar ;-)

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.

Projekt

(mehr Design / komplettere Vorlage)

Beispiel: (z.B.) Design01 aus den HTML/CSS Vorlagen des Selfhtml-Wiki (Link) in HTML5
Prüfen, ob die Designs lassen sich für private und kommerzielle Projekte anpassen/nutzen lassen.

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

 

 

Youtube Portale zu HTML & CSS

 

 

 

Spezielle Übungen:

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" und dann in den parallelen Bilderordner (hier: ./img)
Link: http://www.stripegenerator.com/  für Background-Images
Link: http://www.colorzilla.com/gradient-editor/  Backgrounds mit CSS Gradiententen (Verläufen)

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 zugewiesen!

 

Screenshots aus Seminar:

  • HTML EntitiesHTML Entities
  • MobilansichtMobilansicht
  • FontFont
  • rgba()rgba()
  • Live ServerLive Server
  • FormularFormular

Screenshots aus Vorseminar 2021:

  • SVG PreviewsSVG Previews
  • TabellenTabellen
  • HTML5UPHTML5UP
  • Online vs. TemplateOnline vs. Template
  • Bilder optimiertBilder optimiert
  • Dropdown MenüDropdown Menü

Screenshots aus Vorseminar 2017:

  • min-height CanIUse?min-height CanIUse?
  • Blöcke in DemositeBlöcke in Demosite
  • Font einbindenFont einbinden
  • background-imagebackground-image
  • Firebug AnalyseFirebug Analyse
  • background-repeatbackground-repeat

 

 

Tag 05

Freitag, 09.07.21, 08.30 - 16.00 Uhr

Rekapitulation (Webprojekt Do-Nachmittag!), TN-Frage ... Plan für Freitag:

Navigationen

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

Horizontale Navigationsleiste

(horizontal list) beispielhafte Navigation nach Vorlage Buch C. Wyke-Smith
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;)

Client/Server 101

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" (Domain → domainname.topleveldomain → Bsp.: firmenname.de ) 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 unser 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, Datenbanken, FTP-Zugangstechnik, ...) bietet ein Hoster an.
Bekannte "Massen"-Hoster: 1und1, Strato, Hosteurope, Domainfactory, ...

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!

JavaScript 101

(ein kleines Bildergalerie Beispiel)

Anm.: bitte JS nicht mit Java (Programme dann z.B. als Java Applet - Java "Progrämmchen") verwechseln-1

für JS ist keine Extra-Software nötig - die Browser haben eine JavaScript-Engine eingebaut.

Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2 
aktuelle Version von Lokesh Dhakar - Link - Kurzanleitung aus Webseite bzw. aus Übung mit TN:

  • herunterladen und auspacken
    Anm.: Dateienordner ./dist  
  • CSS Datei für Lightbox2 in Webprojekt kopieren und  verlinken (link-Tag im head-Element)
  • JS Datei(en) für Lightbox2 in Webprojektordner ./js kopieren und am Ende des Body-Elements per script-Tag einbinden
    Anm./Empfehlung: falls man im Webprojekt noch kein jQuery eingefügt hat, dann kann man eine kombinierte JavaScript-Datei aus Lightbox-JS und JS-Framewerk JQuery nutzen (lightbox-plus-jquery.js)
  • Links (a-Tags) gemäß Lightbox2-Dokumentation für die Lightbox2 einbauen

Beispielcode:

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 - Lösung / Toolbeispiel: CSS Minifier (als Online Tool).

Formulare

Die Erstellung von qualitativen (siehe Aussehen, Technik, Validität) Formularen stellt häufig allein schon eine Hürde bei der Umsetzung mit Online-Technik dar.

Hinzu kommt bei der Verwendung von Formularen, dass wir uns mit bestimmten technischen und gesetzlichen Rahmen beschäftigen müssen.

  • Austausch mit Formularen (der Website) bitte immer mit HTTPS (HTTP Secure - also verschlüsselt) statt lediglich mit HTTP.
    Anm.: hierfür benötigen Sie ein SSL-Zertifikat bei Ihrem Hoster oder eine entsprechende alternative eigene Lösung (siehe Lets Encrypt)
  • Wegen des Austausches mit Daten müssen alle entsprechenden (und jeweils aktuellen) Auflagen gemäß Datenschutz (siehe DSGVO bzw. GDPR) und Privatsphäre beachtet werden.
  • Für die Nutzung eines Formulars ist letztlich noch auf SPAM-Schutz zu achten - also müssen wir noch Captcha-Technik einbauen.

Diese Auflagen führen bei vielen Betreibern von Websites dazu, dass mandie Interaktionen mit Website-Besuchern auf die klassischen Techniken wie E-Mail reduziert.

Kommen wir zu Formular-Beispielen und Quellen rund um das Thema "Formulare mit HTML/CSS":

On Design - Formulare Step-by-Step (DLs bereitgestellt durch mich/Trainer)

Die Variante Step 2c wird in Seminaren meist in unsere Übungswebsite integriert/eingebaut.

form tests 800px

Bild: in den Formular Beispielcode wurde ein "Datum"-Eingabe-Element nach Beispiel aus dem SelfHTML-Wiki eingebaut. Das CSS-Styling des Beispiels wurde leicht angepasst.

SelfHTML Infosites:

Viele Beispielcodes lassen sich mit Online-Test-Umgebung (frickl PHP Umgebung) austesten.

W3-Schools Beispiele:

Anm.: das ist ein Webportal, das auch kostenpflichtige Angebote beinhaltet / beinhalten kann.

Diverse Links zum  Thema Formulare mit HTML und CSS:

Diese Listen ließen sich beliebig erweitern und ergänzen. Genug Stoff also, um sich mit der modernen Umsetzung von Formularen zu beschäftigen.

Und natürlich sollten hier auch wieder HTML-CSS-Frameworks erwähnt werden. Mit deren Hilfe lassen sich die meisten Formularumsetzungen per Copy & Paste aus den entsprechenden Dokumentationen entleihen.

Frameworks / Templates

(HTML5 / CSS3 / JavaScript - Vorlagensysteme)

Verfügbare, freie Vorlagen für unsere neuen Sites-Entwürfe ckecken - bitte unbedingt die jeweiligen Lizenzen beachten und einhalten!

Hinweis auf HTML/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)
  • Foundation (Link)
  • Materialize CSS (Link)
  • Tailwind CSS (Link)
  • ...

Große Übersicht (inkl. Beschreibungen, Links und Einschätzungen):
https://www.designerinaction.de/tipps-tricks/web-development/css-frameworks/ 

html css frameworks 800px 

Im Einzelnen ist immer zu beachten:

  • freie und/oder eingeschränkte Lizenzen
  • Responsive Designs
  • Dokumentation
  • Umfang der digitalen Unterlagen (Bilddokumente, SASS, Entwicklungsumgebungen)

Eine Entscheidung bedeutet immer auch eine gewisse zeitliche Bindung für unsere Projekte.

Templatesites (mit Downloads - und wieder auf die Lizenzen achten):

  • html5up.net (Creative Common Attribution 3.0 License)
    Vorlagen in Seminaren:
  • oder andere ;-) ...

 

Diverses

Themen, die (oft) dem zeitlichen Rotstift zum Opfer fallen:

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 siehe Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp:
Webseite http://introducinghtml5.com/ und die
Beispiel-Seite https://introducinghtml5.com/links/ch04.html für Kapitel 4 "Video und Audio" des Buchs

 

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)

Freiwillige Prüfung - Koordination nach dem Seminar

Falls Sie nach dem Seminar an der Prüfung im Modul "HTML & CSS" interessiert sind, dann bitte zeitnah per E-Mail an mich wenden.

Prüfungsvorbereitung:

  • Seminarwoche nachbereiten
  • Musteraufgabe nacharbeiten (siehe z.B.: Formulare)

 

 

TN-Bescheinigungen, letzte TN-Fragen, Feedback

 

Screenshots aus Seminar:

  • input type dateinput type date
  • Lightbox2Lightbox2
  • Lightbox2 CodeLightbox2 Code
  • BildproportionBildproportion
  • Bootstrap 5 DownloadBootstrap 5 Download
  • Bootstrap 5 TestsBootstrap 5 Tests

Screenshots aus Vorseminar 2021:

  • CSS minifiedCSS minified
  • Lightbox2Lightbox2
  • MDN HTML FormsMDN HTML Forms
  • Formular mit CSSFormular mit CSS
  • Einbau Formular-TagEinbau Formular-Tag
  • BootswatchBootswatch

Screenshots aus Vorseminar 2017:

  • Navigation horizontalNavigation horizontal
  • CSS3 GradientsCSS3 Gradients
  • RIOT BildtoolRIOT Bildtool
  • Lightbox2Lightbox2
  • HTML-Code für Lightbox2HTML-Code für Lightbox2
  • FTP-Client FilezillaFTP-Client Filezilla

 

 

WAMP + SW

Für Seminare zu HTML & CSS benötitgt man (eigentlich) keinen echten Webservice.

Aber man weiß ja nie wo uns die Entwicklungen in einem Seminar hinbringen. Also vervollständige ich für alle Interessierten hier die Infos zum AMP (Apache - MySQL/MariaDB - PHP) Server, den ich in meinen Online-Seminare einsetze.

Serverumgebung: WAMP - Windows AMP

Im Falle einer vollständigen Nutzung der Serverumgebung über unseren Client (das Windows-Betriebssystem) wollen wir letzlich auch mit vollständig professionellen VirtualHosts arbeiten. Wir wollen also unsere Projekte im Test- und Entwicklungsstadium über richtige URLs wie (z.B.) relaunch.pcs.local ansprechen können.

Client-/Server-Umgebung

Wir erarbeiten unsere Projekte lokal an unserem Windows-System. Die nötigen Services laufen ebenfalls hier:

  • XAMPP für Windows (Xampp Apachefriends.org Link - bitte nicht manuell von apachefriendes.org downloaden!)
    Unser XAMPP für das Seminar wird maßgeschneidert von Trainer J. Brandes als XAMPP-CMSOD bereitgestellt

Die gesamte Serverumgebung ist also bereits fix & fertig vorbereitet.

Client: (OPTIONAL) Windows hosts Datei  

Anm.: der Einsatz von hosts-Technik(en) ist normalerweise nur in den CMSOD TYPO3-Seminaren zwingend von Nöten.

Aber vielleicht möchten wir diese Technik (Anm.: sehr nah am späteren Hosting) auch mit anderen Online-Projekten umsetzen.

Es fehlen hierzu auf der Client-Seite noch wenige Zusatzkonfigurationen, damit wir unsere Projekte auch mit sauberen URLs nutzen können.

WICHTIG: Die folgenden Konfigurationen bitte mit Adminrechten umsetzen (Windows - Als Administrator ausführen / Benutzerkontensteuerung/UAC)

Hinweis: beispielhafte hosts-Datei wird von Trainer verteilt - bzw. hier als abgespecktes Beispiel für eigene Erweiterungen!
Pfad für etc-Hosts Datei auf Windows Systemen:  C:\Windows\System32\drivers\etc\hosts  

Einträge für die gewünschten VHosts erstellen:

View source
# den lokalen CMSOD-XAMPP per Domainname ansprechen können:
127.0.0.1 cmsod.local www.cmsod.local
 
# Konfigurationen - hier: 
# Beispiele für wordpress Site
# -------------------------------------------------
# Domain: wordpress-demo.local
# Alias: www.wordpress-demo.local
# Webserver: C:\xampp-cmsod\htdocs\typo3\www.wordpress-demo.local
# Datenbank: wordpress_demo
# Einsatz: eine Umsetzung wie für das TYPO3-Seminar bzw. beim Hoster hier auch für WordPress
127.0.0.1 wordpress-demo.local www.wordpress-demo.local
# am Besten auch gleich für weitere Seminarseite den VHost eintragen:
127.0.0.1 wordpress-seminar.local www.wordpress-seminar.local
Diese virtuellen Hosts (VHosts) müssen dann noch auf Serverseite (Apache Webserver) entsprechend passend konfiguriert sein! Siehe C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf

Server: (OPTIONAL) VHosts (zwingend notwendig für TYPO3-Installation)

Hinweis: beispielhafte httpd-vhosts-Datei ist bereits in dem vorbereitetem XAMPP-CMSOD vorhanden!

VHost-Konfigurationsdatei für den Apache: C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf  

Jetzt noch einen nötigen Eintrag für die gewünschte VHost-Domain  www.wordpress-demo.local  bereitstellen:
Tipp: Vorlage des VHost-Abschnitts für www.wordpress-demo.local kopieren und anpassen für eigene Projekte

View source
<VirtualHost *:80>
 ServerAdmin webmaster @ cmsod.local
 DocumentRoot "C:/xampp-cmsod/htdocs/typo3/www.wordpress-demo.local"
 ServerName wordpress-demo.local
 ServerAlias www.wordpress-demo.local
     ...
</VirtualHost>
Anm.: hier nicht alle Zeilen dargestellt; die Kommentarzeilen wurden weggelassen.

 Kommen wir jetzt zu den nötigen Schritten und Anleitungen für die Inbetriebnahme unserer Serverumgebung XAMPP-CMSOD.

Server: XAMPP für Windows

  • LAMPPLAMPP

maßgeschneiderte Seminar-Version basierend auf XAMPP 7.4.14 mit PHP 7.4.14

  • X - Betriebssysteme Linux (L), Windows (W), MacOS (M)
  • A - Apache (Webserver)
  • M - MariaDB / MySQL (Datenbankserver)
  • P - PHP (serverseitige Skriptsprache)
  • P - Projekt

Bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)

Alternative Windows: als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver

XAMPP-CMSOD installieren / entpacken

Vorgehensweise im "Windows-basierten" Seminar mit XAMPP-CMSOD-Server  für Windows:

Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv (exe-Datei) bereit, das bereits für die CMS Joomla, WordPress, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.

Infos zum (aktuellen) XAMPP-CMSOD für meine Seminare:

Archivname: xampp-cmsod-40-7.4.14-TEILNEHMER-20210124-1454.exe
SHA256-Prüfsumme: 3EFADF0076BBC0F2700335D6FBEE56AFE8DFBF8A8B2AE9BE419DE82B267BFBD0

Die Prüfsummen können in der PowerShell evaluiert werden.
Tipp: Umschalten-Taste und Rechte Maus im Ordner zeigt PowerShell im Kontextmenü - Aufruf im Ordner des Archivs:

$a = Get-FileHash -Path .\xampp-cmsod-40-7.4.14-TEILNEHMER-20210124-1454.exe -Algorithm SHA256
$a.Hash

Das Trainer-XAMPP-Archiv wird nur bei Notwendigkeit (siehe PHP-Version 7.4 zuletzt notwendig für TYPO3 v11) aktualisiert.
Die eingebauten Techniken (s.u. Grafiktools, ...) könnten auch selber aktualisiert werden.

"Frisches Windows"

Bei Tests auf frischen Windows 10 Installationen (1909 bzw.19H2, 2004/20H1, 20H2, 21H1) wird ggf. ein Fehler beim Starten des XAMPP Controlcenter (xampp-control.exe) angezeigt:
"httpd.exe - Systemfehler (...Code kann nicht fortgesetzt werden, da VCRUNTIME140.dll nicht gefunden ...)" 
Die nervigen Fehler-Popups müssen dann mit mehrfachen ESC weggeklickt werden.

vcruntime fehler xampp 800px

Es muss die "Microsoft Visual C++ Redistributable für Visual Studio 2015, 2017 und 2019" Laufzeitumgebung installiert werden. Die nötige Installationsdatei (aktuell: VC_redist.x64.exe in Version 14.29.30037.0) kann leicht mit Suche nach "vc_redist.x64 2019" gefunden werden und muss mit Adminrechten installiert werden (Neustart empfohlen).

Installation XAMPP-CMSOD

Hier folgt die Kurzanleitung für die Bereitstellung (Installation bedeutet hier ja einfaches Entpacken in Zielordner) und Nutzung unserer XAMPP-CMSOD Serverumgebung.

Schritte für die Inbetriebnahme de XAMPP-CMSOD:

  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 in Zielpfad  C:\xampp-cmsod  ist wichtig!
    Grund: alle eingebauten CMSOD-Techniken und Tools wurden auf dieses lokale Verzeichnis optimiert.
    Tipp: eigene XAMPP-Testumgebungen kann man dann einfach in anderen Verzeichnissen wie Standardpfad C:\xampp unterbringen.
  4. Starten / Doppelklicken  xampp-control.exe (Kontrollcenter)
  5. Starten der nötigen Server mit Hilfe des Kontrollcenters:
    Apache Webserver und
    MySQL Datenbankserver per Schaltflächen "Starten" im Kontrollcenter
    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 Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) sollten wir täglich (also jeweils bei Bedarf) durchführen.
    Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich dringlichst ab!
  6. Browser / Webclient - Starten eines Browsers Ihrer Wahl mit Adresse localhost  
    Hinweis 1: manche Browser verlangen bei solchen URLs die komplette Angabe inklusive http:// in der Adresseneingabezeile.
    Hinweis 2: portable Programme wie Firefox (s. PortableApps.com Portal) nutzen keinen Browser-Cache! 
    Mann kann einen installierten und einen portablen Firefox nicht gleichzeitig nutzen!

Hier mal eine Übersicht nach dem "Auspacken/Installieren":

xampp cmsod darstellung 2021

Die vorbereitete Umgebung in einer kleinen Übersicht:

TechnikInfoBemerkung
XAMPP C:\xampp-cmsod\ Basispfad des XAMPP-CMSOD
Web-Dokumente C:\xampp-cmsod\htdocs\wordpress\... mit Unterordnerstrukturen
Apache C:\xampp-cmsod\apache\conf\httpd.conf Konfigurationsdatei Webserver
PHP C:\xampp-cmsod\php\php.ini Konfigurationsdatei PHP

Die Tabelle hier natürlich beispielhaft für diverse Online-Projekte.

Infos zum CMSOD XAMPP

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.

Und schon kann es losgehen...

 

Chocolatey

Bei häufigeren Einrichtungen von Entwicklungsumgebungen möchte man das gerne noch effizienter gestalten.
Das führt uns zum Paketmanagement mit Chocolatey unter Windows - einem der Lieblingstools von Windows Administratoren/Profis.

Profitipp: Chocolatey zur Installation der gewünschten Tools

Hier: Schnellanleitung Softwareinstallationen mit Chocolatey Paketmanagement
Anm.: wir entscheiden uns für die systemweite Nutzung der Installationen!
Das bedeutet, dass wir die PowerShell (Konsole) für Chocolatey Befehle immer mit Adminrechten nutzen.

View source
# PowerShell vorbereiten: (ggf. schon auf Trainingssystemen konfiguriert)
# ======================================================================
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser  
Get-ExecutionPolicy # ergibt RemoteSigned
 
# Chocolatey bereitstellen: (ggf. schon auf Trainingssystemen installiert)
# ======================================================================
# in Admin-PowerShell Copy&Paste von Chocolatey Seite
# https://chocolatey.org/install 
# einfach die Copy&Paste Zeile mit Maus anklicken und in der
# PowerShell Konsole mit rechter Maus wieder einfügen
# ======================================================================
# hier die fragliche Installzeile für die Admin-PowerShell
# Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
# die Chocolatey Install Seite zeigt auch, wie man die install.ps1 einfach 
# manuell herunterladen kann, um diese vorher zu inspizieren!
# ======================================================================
# Chocolatey nutzen/testen
# ======================================================================
choco version
choco list --local-only       # oder kurz: choco list -l
# Alle Packages für Chocolatey online recherchieren:
# https://community.chocolatey.org/packages 
# ======================================================================
# Chocolatey CMSOD Installationen:
# Wichtig: Admin-PowerShell nutzen
# ======================================================================
# Browser (mindestens 2 Browser für Entwicklungsumgebungen nötig)
# ======================================================================
choco install -y firefox
choco install -y chromium
# choco install -y opera  # hat aktuell leichte Fehlermeldungen
# ======================================================================
# Tools: Editor, Zipper, Windows Werkzeuge, Git
# ======================================================================
choco install -y notepadplusplus --x86
choco install -y vscode
choco install -y 7zip
choco install -y powertoys
choco install -y git
choco install -y riot  
# ======================================================================
# Experten-Tools für Websiteentwicklungen (siehe SASS und Co)
# ======================================================================
choco install -y nodejs
choco install -y python3

Der Clou: die gesamte gewünschte Software ließe sich auch mit einem Einzeiler installieren (oder natürlich per Skript).

Und natürlich installiert man sich nur die wirklich benötigte Software.
Für die Softwareverwaltung reichen dann einfache Befehle  
choco /? | choco list | choco list -l | choco install | install /? | choco outdated | choco upgrade all -y , ... mit der Windows PowerShell.

 


Vielen Dank für das "Klopfen" und die Rückmeldungen zum Seminar.
Ich freue mich auf die Folgeseminare im Rahmen der Weiterbildungen IUK/BIZ WF.
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 25 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"

© 2021 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben