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.
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): Ü (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 bodyhead
- mit (z.B.)title
-Tag - Titel der Seite für Lesezeichen/Favoriten/Bookmarksbody
- 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
bish6
(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:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
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:
- 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:
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):
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:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
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
(oderex
,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 mittelsdisplay: 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 perclear:left
oderclear: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-Seitemain
- Hauptbereich
Anm.: bitte per CSS mitdisplay: block;
stylen, damit IE8 - IE11 keinen Stress machen;
ein zusätzlichesrole="main"
für ARIA Barrierefreiheit Unterstützung (Link) ist freiwillig, kann aber nicht schadenfooter
- Fußbereich der Webpagearticle
- Beitrags-/Inhaltsbereichsection
- Bereich/Abschnitt (z.B. in einemarticle
-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:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
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:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
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:
Screenshots aus Vorseminar 2021:
Screenshots aus Vorseminar 2017:
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:{code lang:bash showtitle:false lines:false hidden:false}# 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{/code}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 {code lang:html5 showtitle:false lines:false hidden:false}<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>{/code}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
Prinzipbild zur Client-/Server-Technik für Web-Client (Browser) und Web-Server:
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.
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:
- XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe (oder von bereitgestellter Trainer-CD)
- Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
- Zielordner:
C:\xampp-cmsod
angebeben
Anm.: Entpacken in ZielpfadC:\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 StandardpfadC:\xampp
unterbringen. - Starten / Doppelklicken
xampp-control.exe
(Kontrollcenter) - 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! - Browser / Webclient - Starten eines Browsers Ihrer Wahl mit Adresse
localhost
Hinweis 1: manche Browser verlangen bei solchen URLs die komplette Angabe inklusivehttp://
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":
Die vorbereitete Umgebung in einer kleinen Übersicht:
Technik | Info | Bemerkung |
---|---|---|
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.
{code lang:powershell showtitle:false lines:false hidden:false}# 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{/code}
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