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:

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:

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

 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): Ü (benanntes Entity) und Ü (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

• Beispielhafte Recherche (z.B.):
  https://www.google.com/search?client=firefox-b-d&q=bilder+platzhalter+html  
• Einsatzbeispiel mit Portal Dummy Image: 
  https://dummyimage.com/368x256/000/aaa    (.../ breitexhoehe / bgcolor / fontcolor )

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:{code lang:html5 showtitle:false lines:true hidden:false}<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <!-- Externe CSS Datei verlinken -->
    <link rel="stylesheet" href="/montag.css">    
    <!-- Zentrales Styling für dieses Dok -->
    <style>
        h2 {color: blue;"}
    </style>
    
</head>
<body>
    <!-- manuelle Styling für einen einzigen Tag -->
    <h1 style="color: red;" ></h1>
</body>
</html>{/code}Erste Zuweisungen und Tests bei kombinierten Anweisung für Headings h1 und h2, p, img, ...

Screenshots aus Seminar:

• Emmet Abkürzungen
• settings.json
• Inline Styling
• Code Inspektor
• Verschachtelungen
• RIOT

Screenshots aus Vorseminar 2021:

• Visual Studio Code
• Live Server
• HTML5 Gerüst
• wiki.selfhtml.org
• Drei Mal CSS
• CSS Beispiele

Screenshots aus Vorseminar 2017:

• Emmet - Shortcut
• Arbeitsumgebung
• Entities
• csszengarden.com
• CSS - Datei
• CSS - 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:

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:

• http://www.colorpicker.com/  
• http://html-color-codes.info/ 

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

Farbdesignsysteme:

• Paletton - http://www.paletton.com  (früher: colorschemedesigner.com)
• Kuler bzw. Online Tool Adobe - http://color.adobe.com
• Colormind - http://colormind.io   
• MyColor Space - http://mycolor.space     

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:

• Beispielhafte Tabelle inklusive "aller" Table-Tags und Styling: Beispieltabelle "Browserstatistik"
• Auch die Mozilla Developer bieten schöne Infos zu Tabellen an: Table Examples  

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

CSS Boxmodell

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:
{code lang:css showtitle:false lines:true hidden:false}/* Klasse für besondere Absatz-Formate */
p.besondererstil {
    color: #00FF00;
    background: #000000;
    padding: 10px 20px 30px 40px;
    /*
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
    */
    border: 5px solid red;
    /*
    border-width: 5px;
    border-style: solid;
    border-color: red;
    */
    margin: 40px;
} {/code}Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)

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:   
HTML-Tags:
pre (Vorformatierter Text),
hr (Horizontale Linie)

Screenshots aus Seminar:

• emmet.io
• Unminify
• Browserstandards
• Relative Maße
• background-color
• background-image

Screenshots aus Vorseminar 2021:

• Icon Fonts
• IMG Tag
• Farbschema
• Bildoptimierung
• PowerToys Bildgrößen
• Bildervergleich

Screenshots aus Vorseminar 2017:

• Klassen
• Firefox Add-ons
• Projektversionen
• Farben
• Tabellen
• Margins

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 Grid
• csszengarden.com CSS 01
• csszengarden.com CSS 02
• SVG
• CSS background
• Attribut aria-current

Screenshots aus Vorseminar 2021:

• Floats
• HTML5 Blöcke
• Page zentriert
• Favicon
• CSS Variablen
• Experiment mit Variablen

Screenshots aus Vorseminar 2017:

• Tabelle - gestylt
• Scribble / Entwurf
• HTML5 Tags
• RTL - Right-to-Left
• box-shadow
• Design01

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){code lang:html5 showtitle:false lines:true hidden:false}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beispiel-Design von selfhtml.org">
<link rel="stylesheet" href="/css/style.css">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
<script src="/js/dark-mode-toggle.js">    </script>
<title>SelfHTML Design Nr.01</title>
</head>{/code}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:{code lang:css showtitle:false lines:true hidden:false}/* Stylesheet für Selfhtml Design 01
responsives Layout mit Flexbox ab Z. 247 */

/* ============== GLOBAL DEFINITION =================== */

/* alternatives Boxmodell */
*, ::before, ::after {
box-sizing: border-box;
}

/* Farbfestlegungen nur als Fallback für IE9-11
custom properties für alle anderen! */
body {
max-width: 65em;
margin: 0 auto;
padding: 0 1em;
font: normal 1em Arial, sans-serif;
color: darkRed; /* wird als currentColor für die Akzentfarbe verwendet. */
    color: var(--accent1-color);
background-color: #ffffff;
    background-color: var(--background-color);
}

p, ol, ul, dl {
    color: #333;
color: var(--font-color);
}

:root {
--background-color: #fff;
--background2-color: #ccc;    
--background3-color: #ccc;        
--accent1-color: darkred;
--accent2-color: orange;
--accent3-color: #fede9e;
    --font-color: #333;
--font2-color: #666;
    --link-color: darkred;        

}

:root.dark {
--background-color: #666;
--background2-color: #666;    
--background3-color: #ccc;        
--accent1-color: darkred;
--accent2-color: orange;    
--accent3-color: #fede9e;    
--font-color: #fff;
--font2-color: orange;        
    --link-color: orange;        

}{/code}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)

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

• Kevin Powell: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw 
• Fireship.io: https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA  
• ...

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 Entities
• Mobilansicht
• Font
• rgba()
• Live Server
• Formular

Screenshots aus Vorseminar 2021:

• SVG Previews
• Tabellen
• HTML5UP
• Online vs. Template
• Bilder optimiert
• Dropdown Menü

Screenshots aus Vorseminar 2017:

• min-height CanIUse?
• Blöcke in Demosite
• Font einbinden
• background-image
• Firebug Analyse
• background-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: {code lang:html5 showtitle:false lines:true hidden:false}<!DOCTYPE html>
<html lang="de">
<head>
     <meta charset="utf-8">
     <title>Lightbox Beispiel</title>
     <link rel="stylesheet" href="/css/lightbox.css">
</head>
<body>
<h3>2 Bilder als Galerie (data-lightbox gleich)</h3>
<a href="/img/big/DSC_0040.jpg"
        data-lightbox="gallery"
        data-title="Erste Bildunterschrift">
        <img src="/img/small/DSC_0040.jpg" alt="Bild 1">
</a>
<a href="/img/big/DSC_0041.jpg"
        data-lightbox="gallery"
        data-title="Zweite Bildunterschrift">
        <img src="/img/small/DSC_0041.jpg" alt="Bild 2">
</a>
<script src="/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>{/code}Anm.: CSS und JS Dateien gibt es oft auch in einer "minified" (komprimierten) Version (lightbox.min.css), um kB beim Seitenaufruf einzusparen.

Bearbeiten lassen sich diese "geschrumpften" Dateien kaum - 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)

• Beispiel 1 - On Design de - Step 1a - Step 1b - Step 1c 
• Beispiel 2 - On Design de - Step 2a - Step 2b - Step 2c

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

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:

• HTML / Tutorials / Formulare  
• HTML / Formulare / Gestaltung mit CSS 
• HTML / Formulare / Suchformulare  
• HTML / Formulare / Beschriftungen 
• HTML / Formulare / Kontaktformulare  
• HTML / Elemente / Form   

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

W3-Schools Beispiele:

• W3 School - Contact Form 
• W3 School - Multiple Step Form 
• W3 School - Social Login Form  
• W3 School - CSS Forms (inkl. Media Query)

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

Diverse Links zum  Thema Formulare mit HTML und CSS:

• Forms erklärt (engl.) https://gerireid.com/forms.html   
• HTML-Seminar https://www.html-seminar.de/formular-design.htm
• Generator Kontaktformular http://kontaktformular-generator.ewpm.eu/ 
• Dr Web diverse Codeschnippsel für Formulare https://www.drweb.de/kontaktformular-html-css/  
• Mozilla Developer Portal https://developer.mozilla.org/de/docs/Learn/Forms  

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/ 

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 date
• Lightbox2
• Lightbox2 Code
• Bildproportion
• Bootstrap 5 Download
• Bootstrap 5 Tests

Screenshots aus Vorseminar 2021:

• CSS minified
• Lightbox2
• MDN HTML Forms
• Formular mit CSS
• Einbau Formular-Tag
• Bootswatch

Screenshots aus Vorseminar 2017:

• Navigation horizontal
• CSS3 Gradients
• RIOT Bildtool
• Lightbox2
• HTML-Code für Lightbox2
• FTP-Client Filezilla