(X)HTML & CSS
Aus dem Zertifikat "CMS Online Designer (VHS)" findet ab Montag, 06.02.17 bei der KVHS Peine ein Seminar zum Modul "HTML & CSS" statt.
Wir wollen anhand praktischer Beispiele die Techniken für die Inhalte und Layouts/Designs von Webseiten kennen lernen. Diese werden wir sauber mit den beiden Techniken HTML und CSS trennen und anwenden.
Für Teilnehmer, die an einer anschließenden (freiwilligen) Prüfung im Modul I des Zertifikats interessiert sind, werden im Seminar der Termin und die notwendigen Vorbereitungen auf die Prüfung abgesprochen!
Hier die Rahmendaten unseres Seminars:
Ort: KVHS Peine, Werkforum Herner Platz, Stahlwerkstr. 2 , EDV-Raum 124
Zeiten: Mo, 06.02. - Fr, 10.02.2017; jeweils 08.30 - 16.00 Uhr (gem. Absprache)
freiwillige Prüfung: Interesse wird ggf. im Seminar mit den Teilnehmern angesprochen
Anm.: siehe Tag 05 - Seminarende
Ich werde unser Seminar an dieser Stellen mit täglichen Informationen begleiten...
Ihr Trainer Joe Brandes
Tag 01
Montag, 06.02.17, 08.30 - 16.00 Uhr
- Orientierungsphase, Pausenzeiten, Seminarzeiten/Seminarende,
Teilnehmerthemen, Prüfungsinteresse (freiwillig),
Hinweis: Software für VHS-Teilnehmer über Cobra-Shop - Ausstattung TN-PCs:
Hinweis auf Sicherungs-Hardware "Reborn Cards" bei KVHS Peine - 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,./cssoder./js(JavaScript) - Ordnerstruktur für ein erstes Website-Projekte
Vorgabe: eine Website kommt als ein Webprojekt in einen Hauptordner!
Aktuell im Seminar: Ordner C:\html-css\projekt-montag
der Ordner enthälte unsere HTML-Dokumente der Website - also die sogenannten Webpages (einzelne "Seiten")
für eine bessere Organisation werden für die zusätzlichen Dokumente geeignete Unterordner erstellt und genutzt:
Selbstverstänglich kann man die Ordnernamen und Strukturen eigenen Wünschen anpassen - man sollte halt einen Plan haben und stringent verfolgen.Ordner Nutzung / Struktur Projektordner .\html-css\ projekt-montagBilder .\html-css\ projekt-montag\ bilderCSS .\html-css\ projekt-montag\ cssJavaScript .\html-css\ projekt-montag\ js
Der Ordner "projekt-montag" enhält also unsere Website (unser Webprojekt) und müsste später nur 1-zu-1 auf unseren Hosting-Anbieter kopiert werden und als Ordner einer Internetadresse (Domain; z.B. www.ihrname-xyz.de) zugewiesen werden. - Tools / Software für unsere Seminare:
Serverumgebung (für HTML/CSS-Seminar nicht zwingend nötig! - ansonsten): Apache Webserver (mit PHP)
Editor: Notepad++ (Tipp: Erweiterung Emmet für fertige Quellcode-Schnippsel)
Browser: Mozilla Firefox; Tipps zum Firefox:
Quellcode anzeigen lassen mit Strg + U (oder beispielhaftes, empfehlenes Add-On Firebug)
mit Umschalten + Strg + M lassen sich andere Auflösungen testen
Linksammlung und Auflistung von Werkzeugen/Tools
siehe http://www.pcsystembetreuer.de/cms-online-designer/toolsammlung.html - Rechner konfigurieren:
Windows Explorer (Win + E) - Organisieren - Ordner- und Suchoptionen... - Register Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren; bei Windows XP mittels Menü Extras - Ordneroptionen...
in Windows 10 hat der Windows Explorer (bzw. Datei Explorer genannt) ein Kontrollkästchen im Menüband Ansicht - Allgemeines
Trennung von Layout (HTML) und Design (CSS); siehe: www.csszengarden.com
Hinweise auf semantischen Code (em,strong,cite, ...)
HTML-Kommentare mit<!-- ..Kommentar.. -->(sind im Quelltext sichtbar!)
Leerzeichen und Zeilenumbrüche haben keinen Einfluss auf die Ausgabe im Browser-"Body" - Notepad++ Tipps - Standardeditor für das Seminar
Code-Completion (Codevervollständigung) mitStrg + Leertaste
Zoomfaktor/Schriftanzeigengröße mittelsStrg + Rollrad-Maus oder Strg + "+" (oder -) auf Nummernblock
Für sauberes Syntax-Highlighting und Codecompletion benötigt Notepad++ Datei mit gespeichertem Dateiformat (Menü Sprachen)
Tipp: Über Kontextmenü auf HTML-/CSS-/PHP-Dateien den portablen Editor Notepad++ als Standardprogramm zum Öffnen einstellen - Emmet (Notepad++ Erweiterung; Website: www.emmet.io )
alter Name: Zen Coding (entwickelt von/bei Google)
die ultimative Unterstützung für das HTML-Editieren, Verfügbar für nahezu alle Editoren, Emmet-Syntax (Link)
Notepad++: Plugin Emmet - inkl. Python (Erweiterung) installiert und sofort nutzbar (siehe Notepad++ Menü Erweiterungen - Emmet),
erste Beispiele durchprobiert (ausführlichere ZenCoding-Beispiele: Link, Link Emmet Cheat Sheet)
Tastenkombination für Emmet "Expand Abbreviation - Abkürzungen ausführen/expandieren" konfiguriert mittelsStrg + ,(Strg in Kombination mit Komma - kann man aber auch anpassen)
Emmet-Beispiele (hier auch schon spätere Einsätze - z.B. für Tabellen...)
Problemlösung für Python-Fehlermeldungen: (Link Sourceforge) PythonScript_1.0.8.0.msi manuell nachinstalliert!Emmet Abkürzung Einsatz - Ergebniscode html:5
oder noch kürzer: !erzeugt komplettes HTML5-Gerüst
inklusive richtigen Charactersettings "UTF-8" per meta-Taghtml:xt erzeugt XHTML 1.0 transitional c erzeugt Kommentar ul>li*5
ul>li.stil*5
ul>li.stil-$$*5erzeugt 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-Tagsp*4>lorem mal schnell 4 Absätze mit Dummy-Text "Lorem Ipsum" - DTDs (Dokumenttyp Definitionen - Entwurf/Normen durch das W3C - World Wide Web Consortium)
HTML 4.01 (klassischer Standard, Varianten)
XHTML 1.0 (als transitional oder strict Variante)
HTML5 (die gesammelten Ideen für aktuelle oder zukunftsorienierte Webseiten,
Beachten: nicht alle neuesten HTML5-Tags werden von allen Browsern gleich unterstützt! - HTML-Entities
nur bei gleicher Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt
in Browsern mit abweichender Codierung Umlaute anzeigen lassen verlangt nach Lösungen:
Einsatz von Meta-Tag für Zeichencode<meta charset="UTF-8">
Einsatz von HTML-Entities am Beispiel Ü (groß U Umlaut): Ü (benanntes Entity) und Ü (unicode)
siehe Info-/Übersichtsseiten auf de.selfhtml.org zum Themas (Link1, Link2) - HTML-Tags(erste Website ./projektordner/test01.html)
den Baukasten für HTML Layouts kennen gelernt
Standardaufbau:
html, (Gesamtgerüst - enthält "Kopf" und "Körper")head(mittitle-Tag - Titel der Seite für Lesezeichen/Favoriten/Bookmarks),
body(Browser - Körper/Inhalt)
Quellen für Recherche und eigene Trainings: wiki.selfhtml.org (früheres Projekt von Stefan Münz - aktuelles HTML-Buch Amazon)
Beispiele in erster Website test.html:
p(Paragraph, Absatz), br (Break, Zeilenumbruch);
Anm.: bitte keine Texte ohne Absatz-Tags!,
pre(vorformatierter Text - preformated - für einfache Liste)hr(Horizontallinie - als optische Trennlinie oder techn. Texttrenner genutzt)
ol/ul(sortierte / unsortierte Listen;li- List items);
Wichtig: ul-Listen werden später unsere Navigationen (verschachtelte Listen)
h1bish6(Headings, Überschriften der Ebenen 1 bis 6)
dl,dt,dd(Definitionslisten - Übungen zu Copy & Paste aus Wikiprojekt Selfhtml)
a(Anchor, Link/Hyperlink); benötigt als Attribut href="/..." die URL für Verlinkung;
Tipp: target="_blank" öffnet in neuem Fenster/Registerkarte
Links zu Mailadressen mit URL "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"
Tipp: Übergabe von Betreff mittels "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff" - Bilder (images)
img-Tag mit Zuweisung von Quelle per Attribut src="/..." und bitte immer mit alt- und title-Attributen
Beispiel:<img src="/bilder/bild.jpg" alt="Alt-Text" title="Title-Text">
alt und title natürlich gerne auch mit identischem Text; hier zusätzlicher Ordner bilder als Pfad angegeben
Analyse der Nutzung von alt-Attribut (als Ersatztext für Bild) und title-Attribut (für Mausinfos/Quickinfos zu Bildern)
Bilder als anklickbares Objekt in Kombination mit Links (a-Tag) nutzbar (Übung folgt Dienstag) - CSS (Cascading Style Sheets)
Zuweisung von Design (Aussehen) der Tags mittels CSS
CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)
1. direkt in einem Tag
manuelle Formatierung:<h1 style="color: red;" ></h1>
2. zentral im head eines html-Dokuments
für das gesamte Dokument: siehe style-Tag im head unten
3. extern als eigene CSS-Datei (siehe wieder Grundprinzip auf Website www.csszengarden.com)
{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, ... - Anm.: die Inhalte des heutigen Tages werden morgen früh ausführlich rekapituliert
Emmet - Shortcut
Arbeitsumgebung
Entities
csszengarden.com
CSS - Datei
CSS - Beispiele
Tag 02
Dienstag, 07.02.17, 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
Tipp: CSS-Dateien immer mit Notepad++ öffnen - Übungen zu Links (Anchor / Anker) mit HTML-Tag a
E-Mail-Adressen verlinken:<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) - Firefox (Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in Firefox)
Add-on Firebug installiert (perfekte Live-Analyse von html und css!)
Beispielhaftes Add-on für Firefox: colorPicker - Farben direkt mit Maus wählen/zuweisen
Alternative Code-Analysen mit anderen Browsern:
MS Internet Explorer - Entwicklertools (Funktionstaste F12)
Google Chrome mit Erweiterung WebDeveloper oder eigenen Entwicklertools (Umschalten + Strg + I wie Inspektor; das geht auch beim Firefox!)
Anm.: aktuell wachen Firefox und Firebug zusammen!
Viele Erweiterungen für Firebug (z.B. Farbenhandling) wurden ebenfalls mittlerweile integriert!
Stichwort: Firefox Developer Tools (Link)
Übungen und Einsatz des Firefox-Add-on Firebug beim Entwickeln der eigenen Seiten oder Analysieren "fremder" Websites
Tipp: Firebug berechnet die Dimensionen (Stichwort: Boxmodell) von Webseiten-Elementen! - Farben
Übung / Darstellung mit colorPicker (Firefox Add-on)
Blau aus Website der KVHS Peine analysiert: rgb(74,105,173) bzw. #4A69AD
Beispielrechnung für Grünwert: 105 = 6*16 + 9*1
Definieren von Farben in RGB:
mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF
bzw. rgb (0, 0, 0) und rgb (255, 255, 255)
Erläuterungen auf selfhtml.org (Link);
Umrechnungen zwischen dezimalen und hexadezimalen Werten möglich mit Boardmittel "Taschenrechner - calc" unter Windows
Empfehlung: benannte Farben möglichst vermeiden!
Aktuelle Darstellung der CSS Farbdefinitionen auf Portal Webmasterpro (Link)
seit CSS3 inklusive "Deckkraft / Opazität" (Durchscheinen):
mit Definitionen mittels rgba bzw. hsla, wobei a für Alpha-Wert von 0.0 bis 1.0 steht
Einfacher Farbmischer: http://www.colorpicker.com/ , http://html-color-codes.info/ oder einfach mal "Farbwähler" googeln (Google Search Link)
Farbdesignsystem: http://www.paletton.com (früher: colorschemedesigner.com)
oder natürlich für Adobe Photoshop Profis der "Kuler" - Tabellen
Tags:table,caption,thead,tbody,tfoot,tr,th,td
Aufbau einer Standardtabelle mit 3 Spalten und 3 Zeilen nach Anleitung und Beispiel Selfhtml (Link)
wieder Emmet-Tipp:table#tabid>tr.zeilenformat*3>td.spalte$$*4(einfach mal ausprobieren!)
Anm.: da fehlen jetzt eigentlich nur nochsummaryim table,captionund ggf.th(statt td) in erster Zeile
hier gleich mit Klassen für Tabellenreihen tr und Tabellendaten td
Hinweis: nur als Darstellung von Daten nutzen (nicht mehr als Layout-"Krücke"),
Tipp: in table-Tag ein summary="..." hinterlegen für Barrierefreiheit
Tabellen mittels CSS gestylt:border: 1px solid #000000;(also Rahmenstärke, Rahmentyp und Farbe in einer Anweisung)
und spezielles Tabellenstyling mittelsborder-collapse: collapse;, damit die Rahmenlinien "kollabieren" und nicht mehr doppelt vorkommen
Übungen zu einfachen Styles (CSS) und HTML-Tabellen-Layouts
Beispielhafte Tabelle inklusive "aller" Table-Tags und Styling: Beispieltabelle "Browserstatistik"
Auch die Mozilla Developer bieten schöne Infos zu Tabellen an: Table Examples
oder direkte Erläuterungen bei der W3C (World Wide Web Consortium) zu den Tabellentechniken - CSS Boxmodell
kann man heute (2016) mit den aktuellen Browsern etwas entspannter sehen als früher - insbesondere der Internet Explorer hat da sein "eigenes Süppchen gekocht"
Boxmodell (Bordermodell): Erläuterungen zum Boxmodell (Link) auf css4you oder bei Selfhtml (Link)
Tipp: Dimensionen mit Firebug analysieren! - 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 vonbodywird vererbt anh1,h2,p, ... - id (die etwas andere "Klasse")
mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (id="test" statt class="test") nur dass wir im CSS die id durch die Kennzeichnung #test ansprechen (statt .test bei Klassen).
Das Besondere: eine id gibt es im Dokument nur ein einziges Mal!
Tags werden mit den id dann quasi benannt und können als "Sprungadressen" im Dokument genutzt werden:<a href="#top">nach oben</a>(per Klick auf diesen Link kommt man zum Tag mit id="top") - 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!
neu: ex, rem (Erläuterungen auf Wiki Selfhtml)
Prozentangaben:
% - unterschiedliche Proportionen für resultierende Styles mit width ("der Klassiker") oder bei line-height oder font-size - Abschlussübungen:
geschützte Leerzeichen:
HTML-Tags:pre(Vorformatierter Text),hr(Horizontale Linie)
Klassen
Firefox Add-ons
Projektversionen
Farben
Tabellen
Margins
Tag 03
Mittwoch, 08.02.17, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- Tabellen (Wiederholung / Übung)
mit der sehr guten Beispieltabelle (alle wichtigen Table-Tags und ordentliche Barrierefreiheit und Design)
aus dem Wiki von Selfhtml: Beispieltabelle "Browserstatistik":
Quellcode kopiert und analysiert; Wissen über Tabellenstyling verbessert divundspan
mit div-Tags lassen sich "Blöcke" mit HTML-Code zusammenfassen
der "kleine Bruder" von div: Inline-Elemente Erzeugen; z.B. zum manuellen Styling von Textstellen in Absätzen (p - Paragraph()- Tabellenloses Layout für Webseiten
Fachartikel von Stephan Heller (www.daik.de), Internet Professional, März 2007Wichtig: der Beitrag stellt nur eine Grundtechnik dar und wird von uns in den nächsten Tagen natürlich modern interpretiert (HTML5 statt XHTML)!
Website aus Blöcken (div-Tags) zusammenbauen → später dann gerne die aktuellen HTML5-Tags (header, article, aside, nav, footer)
immense Vorteile bei Schnelligkeit, Flexibilität und Barrierefreiheit (gegenüber Tabellen oder gar Frames) - Analyse und Praxis mit den Beispielseiten zum tabellenlosen Layout
Ein neues Websiteprojekt erfordert einen neuen Ordner:
.\htdocs\htmlcss\tabellenloses-layout(mit Unterordnern:./cssund./img- Ordner-Vorgaben durch Ersteller)
Die Dateien (von 01 bis 10) wurden ausgiebig erläutert, diskutiert und getestet.
Hier ein paar technische Anmerkungen:min-heightgestylt mit* html #kopfin 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 mittelsfloat:left;für Block #navigation gestylt (die Grundidee hinter dem tabellenlosen Layout!)
mittels#navigation ul li agezielt 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 mithref="#"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 Stylingclear:both;(oder auch gezielt perclear:leftoderclear:right) - Ausführliche Übungen und Praxisbeispiele
1) Diverse Farb- und Style-Änderungen per CSS
2) Praxistipp: Page/Seite in einen Div-Block packen:<div id="container"> ... Page-Blöcke ... </div>
damit man dann (z.B.) mittels CSS#container { width: 980px; margin: 0 auto; }
die Seite "zentrieren" kann!
3) Pseudo-Klassen füra(anchor - Hyperlinks):hover,:active,:link,:focus,:visited(Link Selfhtml)
auch für andere Elemente verfügbar:#kopf:hover { background-color: silver; }
4) spezielle Rahmen- (border) und Box-Styles (box-shadow) recherchiert und angwendet - HTML5 - neue Tags braucht das "Land" (beispielhafter Cheat-Sheet Fundus)
eine kurze Übersicht über die neuen Tags, die dann auch in 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 - Startseite
index.html
Webserver (Apache) wird mit einer Konfiguration (httpd.conf) ausgeliefert - auch für automatische Ausliefern von Index-Seiten:
d.h. dass bei Aufruf einer Adresse (URL) nur mit Ordner/Hauptordner (Root-Directory) wird ein im Ordner befindliches Standarddokument (index.html, index.htm, index.php, index.pl, index.asp, ..) automatische auf die Browseranfrage (Request) ausgeliefert! - Impressum
mindestens Angabe von Name, Telefonnummer, E-Mail-Adresse (wichtig: reale und funktionstüchtige Infos)
Das Impressum sollte auf jeder Seite mit nur einem Klick direkt erreichbar sein - HTML-Kurzanalyse von "Design01"
Bereitstellung eines freien HTML5-Templates aus dem Selfhtml-Wiki
Morgen dann Umsetzung einer kompletten Website auf Basis dieses HTML5/CSS3-Templates
Tabelle - gestylt
Scribble / Entwurf
HTML5 Tags
RTL - Right-to-Left
box-shadow
Design01
Tag 04
Donnerstag, 09.02.17, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
... der "Website-Projekt-Tag" ! - "Bibliothek"
Vorlage von aktuellen Büchern zum Thema "HTML & CSS"
Digitale Übersicht auf einer "HTML & CSS - Bibliothek" auf diesem Portal
Wer an einem aktuellen Nachschlagewerk zu den Themen "HTML, CSS und JS" interessiert ist, kann nach unseren Kursen immer zur "Handbuch-Reihe" aus dem Rheinwerk-Verlag greifen.
Tipp: Online-Beispiele aus Buch "HTML5 und CSS3 Meisterkurs" (Link) - HTML-Kurzanalyse von "Design01" - dem freien Template des Selfhtml-Wiki
im Kopfbereich erkennt man folgende Techniken:
{code lang:html5 showtitle:false lines:true hidden:false}<!doctype HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<meta name="description" content="Beispiel-Design Nr.01 von SelfHTML.org">
<link href="/css/style.css" rel="stylesheet">
<title>SelfHTML Design Nr.01</title>
</head>{/code}Hier jetzt die Erläuterungen:
Zeile 2: Sprache des HTML5-Dokument auf "Deutsch - de" eingestellt
Zeile 5-7: HTML5Shiv für IE (Erkl. zu HTML5Shiv) mit Nummer 8 oder kleiner (lte - lighter or equal)
Anm.: Pfad zum CDN müsste aktualisiert werden - z.B.
https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js (Content Delivery Network)
Zeile 8: meta-Tag mit viewport - Erl. Selfhtml-Wiki (Link): Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man mit folgender Einstellung erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht
Zeile 9: meta-Tag mit name (siehe folgende Erläuterungen) - meta (Meta-Tags)
Infos für die Suchmaschinen-Bots - also Suchmaschinen Google, Bing (Microsoft - Bing is not Google), Altavista oder das Metager-Projekt des RRZN Hannover (metager.de - Link)
automatisch auswertbare Infos mittels<meta name="author" content="J. Brandes">und z.B.
auchname="keywords",
undname="description", ... Link Selfhtml - CSS-Kurzanalyse von "Design01" - einem freien Template des Selfhtml-Wiki
im CSS-Code erkennt man folgende Techniken:
{code lang:css showtitle:false lines:true hidden:false}/* == css/style.css == Auszüge == */
@font-face {
font-family: 'Tauri';
font-style: normal;
font-weight: 400;
src: local('Tauri Regular'), local('Tauri-Regular'), url(http://themes.googleusercontent.com/static/fonts/tauri/v2/33NkxyDp8MBgQpwno_A-zw.woff) format('woff');
}* {
margin: 0;
padding: 0;
}/* ... */
a.more:after {
content: " >";
display: inline-block;
height: 1em;
padding: 0 .5em 0.5em 0.5em;
border-radius: 1em;
background: #ffa323;
margin-left: 10px;
}/* ... */
header {
width: 100%;
height: 240px;
background: url('../img/header.png') no-repeat center bottom #e7e8ee;
background-size: contain; border: 1px solid #E5E7EB;
}/* ... */
main {
display: block;
position: relative;
width: 100%
}/* ... */
nav ul li:first-child {
margin-left: 2%;
}/* ... */
/* 2-Spaltenlayout mit breiterem aside */
@media screen and (max-width: 950px) {
body {width:100%}
section {width:58%;}
section.spalte,
aside {width:29%;}
}/* 1-Spaltenlayout mit Navigation unten*/
@media screen and (max-width: 620px) {
section,
section.spalte,
aside {
float: none;
width: 96%;
}
/* ... */
}{/code}Selbstverständlich sind hier nur Auszüge in meinem Beitrag präsentiert.
Hier ein paar kurze Erklärungen:
Zeile 2:@font-face- eine Möglichkeit zum Einbinden/Bereitstellen von Schriften/Fonts per woff-Dateien
Zeile 9: mit*kann man für alle möglichen Tags stylen
Zeile 16: Pseudo-Klasse:aftermit Styling für eine Kreis mit Zeichen >
Zeile 33: mitbackgroundein Hintergrundbild imheaderhinterlegt;
Beachten: Relative Pfadangabe für die url des Bildes:../img/header.png
Zeile 37: HTML5-Tagmain(wegen der IE8 bis 11) bitte mitdisplay: block;stylen
Zeile 45: Pseudo-Klasse:first-childstylt gezielt das erste "Kindelement" in einer ul-Liste
ab Zeile 52: mit@mediaAnweisungen spezielle Styles für Auflösungen/Viewports - Praxis Website - Planung (Buchtipp: benutzerfreun.de)
Layout: 2- oder mehr-spaltiges Layout mit variabler Anordnung der Navigation
Anm.: Breite von 960px; orientiert sich an klassischen 960er Grid-Raster (siehe 960.gs - ein Framework für HTML/CSS der ersten Stunde)
Farben: möglich Auswahl mit paletton.com (siehe gleichlautende Website und/oder Ausdruck)
Farbauswahl gerne wieder auch mit einem Firefox-Add-on: Farben für unser Styling aus einem Bild entnehmen und Codes in Textdatei dokumentieren
Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
Tipp: Google-Fonts (Thema Schriften/Fonts und Schriftschnitt: font-weight: 700;)
Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" zeigen
Darstellung zu Thema Fonts/@font-face auf Selfhtml
Navigations-Struktur:
Hautpseiteindex.htmlmit
Unterseitenhobby.html,job.html,impressum.htmlundkontakt.html(4 Unterseiten)
Für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren und effizient mit Kopien der HTML-Pages und HTML-Bereiche arbeiten. - Praxis Website - Projekt (mehr Design / komplettere Vorlage)
Beispiel: Design01 aus den HTML/CSS Vorlagen des Selfhtml-Wiki (Link) in HTML5
die Designs lassen sich für private und kommerzielle Projekte anpassen/nutzen
Allgemeine Erinnerung: wieder bekommt unser neues Projekt einen Ordner auf unserem Entwicklungssystem/Ordnersystem:
.\htdocs\htmlcss\design01(mit Unterordnern:./cssund./img- Vorgaben durch Ersteller)
nach Vorgabe aus "Phase I" (s.o.) eine eigene Websitestruktur schaffen und verlinken - Spezielle Übungen zu
1) background-image und background-repeat Techniken
Wichtig: relative Pfade in der Url() Anweisung beim CSS:background-image: url('../img/hintergrund.jpg)
Erläuterung: Ordner ./css und ./img liegen "nebeneinander", also muss man aus CSS heraus erst einen Ordner "zurück" 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)
2) verschiedene CSS-Stylings; z.B.:h2.img- Heading 2 mit Klasse img - hier also Klasse img!).img.group- Styling für Elemente mit class="img group" - also 2 Klassen zugewiesen!
min-height CanIUse?
Blöcke in Demosite
Font einbinden
background-image
Firebug Analyse
background-repeat
Tag 05
Freitag, 10.02.17, 08.30 - 16.00 Uhr
- Rekapitulation (Webprojekt Do-Nachmittag!), TN-Fragen
.. Plan für Freitag: - HTML-Editor
siehe auch Toolsammlung auf diesem Portal
hier neben unserem Notepad++ aus dem Seminar:
Brackets.io (Link) - eine sehr moderne Editortechnik aus dem Hause Adobe (aber hier kostenlos und frei!); wichtig: die Live-Vorschau dieses Editors benötigt Browser Chrome als Vorschau-Webclient!
Umfangreiche Tools oder gar Toolsammlungen (kostenlos):
Visual Studio bzw. früher Microsoft Web Platform Tools (Link ProToolserie Visuals Studio 2017 RC): Anwendung für HTML/CSS/JS ist dort Expression Web (war Teil des Visual Studio Express for Web) - diese Techniken seit Versionen 4 kostenlos und heute im Visual Studio als Universal-Entwicklungsumgebung aus dem Hause Microsoft aufgegangen!
→ Free Developer Tools (Link): Visual Studio Code (freier Open Source Editor für verschiedene OS - Link)
Aptana Studio (Link): ein kostenloser Profieditor auf Basis von Eclipse für alle Online- oder Scripttechniken
leider mittlerweile veraltet: Phase 5 (Link), Kompozer (alter Name NVU - Link)
Profi-Editor: Adobe Dreamweaver (Teil der "kostenintensiven" Adobe Creative Cloud - Link) - Listen verschachteln
am Beispiel unsortierter Listen eine Aufzählung mit 2. Ebene erstellen und stylen
Wichtig: die 2. Listenebene muss sauber in einemli(Listitem) der 1. Ebene verschachtelt werden!
umso wichtiger wenn wir danach aus dieser Liste eine Navigation erstellen wollen - Horizontale Navigationsleiste (horizontal list)
beispielhafte Navigation nach Vorlage Buch C. Wyke-Smith durchgespielt; Alternative: Bruce Hysloop "Meisterkurs - Link - Online-Beispiele)
Lösung mittelsdiv-Block für Navigation (in Lösung mit HTML dann bittenavBlock nutzen und den CSS-Stil entsprechend kodieren) und natürlich wieder unsere richtig verschachtelten ul/li-Listen;
Styling mit intelligentem Floating (float: left;) - 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 Ihr Website-Projekt (den Projektordner) benötigt man jetzt einen Anbieter für den nötigen Webserver und die Registrierung einer gewünschten "Adresse" (Domain) im Internet
Beides (und auch E-Mail-Service, Datenbanken, FTP-Zugangstechnik, ...) bietet ein Hoster an.
Bekannte "Massen"-Hoster: 1und1, Strato, Hosteurope, ...
Hoster mit spezielleren und maßgeschneiderten Angeboten (hier TYPO3): jweiland.net, mittwald.de
Tipp: bei den Hostern kann man die Verfügbarkeit einer Domain checken lassen! (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 (ein kleines Bildergalerie Beispiel)
Anm.: bitte JS nicht mit Java (Programme dann z.B. als Java Applet - Java "Progrämmchen") verwechseln;
für JS ist keine Extra-Software nötig - die Browser haben eine JavaScritp-Engine eingebaut
Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2
aktuelle Version von Lokesh Dhakar - Link - Kurzanleitung aus Webseite bzw. aus Übung mit TN:
1. herunterladen und auspacken
Anm.: Dateienordner ./dist
2. CSS Datei für Lightbox2 in Webprojekt kopieren und verlinken (link-Tag im head-Element)
3. JS Datei(en) für Lightbox2 in Webprojektordner ./js kopieren und am Ende des Body-Elements per script-Tag einbinden
Anm./Empfehlung: hier kombinierte JavaScript-Datei aus Lightbox-JS und JS-Framewerk JQuery nutzen (lightbox-plus-jquery.js)
4. Links (a) gemäß Lightbox2-Dokumentation für die Lightbox2 einbauen{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; Toolbeispiel: CSS Minifier (als Online Tool). - Frameworks / Templates (HTML5 / CSS3 / JavaScript - Vorlagensysteme)
verfügbare, freie Vorlagen für unsere neuen Sites-Entwürfe vorgestellt; bitte unbedingt die jeweiligen Lizenzen beachten und einhalten
Hinweis auf CSS-Frameworks, die gleich komplett Techniken für Navigationen, Bilddarstellungen (Galerien, Karussel, ...) und sogar Responsive Design (Darstellung optimal auch auf eingeschränkten "Viewports/Auflösungen" wie Smartphones, Tabletts und Co.) mitbringen
Frameworks: (eine unvollständige Übersicht ;-)
Bootstrap (früher Twitter Bootstrap - Link),
YAML (Yet Another Markup Language - Dirk Jesse - Link),
Foundation (Link)
Spezialitäten: freie und eingeschränkte Lizenzen, Responsive Designs
Templatesites (mit Downloads - nur zwei Beispiele - und wieder auf die Lizenzen achten): html5up.net oder html5templatesdreamweaver.com - Free Templates - Bilder für Web verkleinern / optimieren: siehe auch Toolsammlung auf diesem Portal
Tipp: RIOT - Radical Image Optimization Tools (Link)
Tipp: kostenlose "wirklich" freie Bilder auf https://unsplash.com/ - 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) - Themen, die dem zeitlichen Rotstift zum Opfer fielen
Formulare mit HTML5/CSS3: Selfhtml-Wiki
Audio/Video - HTML5-Special
mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Files vorausgesetzt - die Medien direkt in den aktuellen Browsern abspielen; als Beispiel wurde eine Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp durch gespielt: siehe Webseite http://introducinghtml5.com/ und die "Downloadseite" http://introducinghtml5.com/examples/ch04/ für Kapitel 4 "Video und Audio" des Buchs - Freiwillige Prüfung - Koordination nach dem Seminar
Falls Sie nach dem Seminar an der Prüfung im Modul I "HTML & CSS" interessiert sind, dann bitte zeitnah per E-Mail an mich wenden.Die Koordination wird dann durch mich mit der KVHS Peine (Raumreservierung) erfolgen!
Prüfungsvorbereitung:
Als Terminrahmen gilt: KW ab 20.02.2017 (wahrscheinlich Di) ab 17.30 Uhr
Seminarwoche nachbereiten, Musteraufgabe nacharbeiten, Formulare! - TN-Bescheinigungen, letzte TN-Fragen, Feedback
Navigation horizontal
CSS3 Gradients
RIOT Bildtool
Lightbox2
HTML-Code für Lightbox2
FTP-Client Filezilla
Vielen Dank für die tollen Feedbackbögen und persönlichen Rückmeldungen zum Seminar.
Ihr Trainer Joe Brandes
