HTML & CSS
Aus dem Zertifikat "CMS Online Designer (VHS)" findet ab Montag, 10.04.17 bei der VHS Wolfenbüttel ein Seminar zum Modul I - "HTML & CSS" statt. Wir wollen an Hand praktischer Beispiele die Techniken für die Layouts und Designs von Webseiten kennen lernen. Diese werden wir sauber mit den beiden Techniken HTML und CSS trennen und anwenden.
Für Teilnehmer, die an einer anschließenden (freiwilligen) Prüfung im Modul I des Zertifikats interessiert sind, werden im Seminar der Termin und die notwendigen Vorbereitungen auf die Prüfung abgesprochen!
Hier die Rahmendaten unseres Seminars:
Ort: VHS Wolfenbüttel, Harzstraße 2-5, Raum "MacOS"
Zeiten: Mo, 10.04. bis Do, 13.04.2017 (4 Tage!); jeweils 08.00 - 15.30 Uhr (16.00 Uhr gem. Ausschreibung)
Freiwillige Prüfung: wird im Seminar mit den Interessierten an einer Prüfung abgesprochen/koordiniert
Ich werde unser Seminar an dieser Stellen mit täglichen Informationen begleiten...
Ihr Trainer Joe Brandes
Tag 01
Montag, 10.04.17, 08.00 - 15.30 Uhr
- Orientierungsphase, Pausenzeiten, Seminarzeiten/Seminarende,
Teilnehmerthemen, Prüfungsinteresse (freiwillig),
Hinweis: Software für VHS-Teilnehmer über Cobra-Shop - Ausstattung TN-PCs:
Hinweis auf Sicherungs-Hardware "Reborn Cards" bei VHS Wolfenbüttel - Vorgabe für Dateien und Ordner:
bei Datei- und Ordnernamen keine Leerzeichen und Sonderzeichen (ä, ß) nutzen
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\webprojekte\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ändlich 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 s.u.)
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 oder Vorgabe der "Code-Sprache" (Menü Sprachen) und natürlich Emmet... - 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 dann manuell nachinstallieren!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)
Übungen mit © und ♠ - HTML-Tags(erste Websites wie z.B. ./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 - Tipp kostenlose, freie Bilder: unsplash.com)
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) - 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
Projektordner
wiki.selfhtml.org
Entities / UTF-8
Notepad++
Browser
csszengarden.com
Tag 02
Dienstag, 11.04.17, 08.00 - 15.30 Uhr
- Rekapitulation (an Tag 02 ausführlich), TN-Fragen
- 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-Tag,captionund ggf.th(statt td) in erster Zeile
hier gleich mit Klassen für Tabellenreihentrund Tabellendatentd
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! - Firefox Browser zur HTML/CSS/JS - Analyse
(Link zu Firefox Add-on Seite oder mittels Menü Add-ons direkt in Firefox)
Info: Add-on Firebug wurde nicht mehr installiert, da aktuell seine Entwicklung zugunsten der Firefox Developer Tools bei Mozilla - s.u. Code-Inspektor - eingestellt wurde: Merke also: aus FireBug "wurde" Page-Inspector
Beispielhaftes Add-on für Firefox:
colorPicker - Farben direkt mit Maus wählen/zuweisen, oder alternativ: ColorZilla
Alternative Code-Analysen mit anderen Browsern:
MS Internet Explorer - Entwicklertools (Funktionstaste F12)
Google Chrome mit Erweiterung Web-Developer (Chris Pederick) oder eigenen Entwicklertools (Umschalten + Strg + I siehe: Code-Inspektor; das geht ja beim Firefox genauso!)
Viele Erweiterungen für Firebug (z.B. Farbenhandling) wurden ebenfalls in die Firefox Developer Tools integriert! (Link FF Dev Tools)
Übungen und Einsatz des Firefox-Add-on Firebug beim Entwickeln der eigenen Seiten oder Analysieren "fremder" Websites
Tipp: Firebug/Code-Inspektor 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" direkt eingebaut in Photoshop - Klassen (manuelles CSS-Styling)
Klassen definieren und nutzen:<p class="besondererstil"> ... </p>
in CSS:.besondererstil { ... }(Punkt beachten - hier allgemeine Klasse / Pseudoklasse)
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 für span-Tag:<p>Lorem ipsum <span class="formatklasse">dolor</span> sit amet, ... </p>
Vererbung von Eigenschaften von Elternelementen an Kinderelemente
Beispiel: Styling vonbody(z.B. font-family) wird vererbt anh1,h2,p, ... - Schriften für das Webdesign (Praxis: Google Fonts)
Es gibt verschieden Wege, Schriften für ein Webprojekt bereitzustellen und verschiedene Anbieter:
Google Webfonts, Fonts Squirrel oder natürlich Adobe (Typekit)
Für eine beispielhafte Einbindung mittels CSS-Anweisung @font-face für die Einbindung von Schriftartendateien (z.B. eot Embedded Open Type, woff Web Open Font Format, ttf True Type Font, otf Open Type Font oder gar svg Scalable Vector Graphics siehe: Wiki Selfhtml Schriftformatierung Artikel
Empfehlung (siehe Browser-Kompatibilität): otf/ttf oder woff, oder natürlich mehrere Formate bereitstellen!
Praxis mit Google Fonts (kostenlos und Schriften über Google bereitgestellt){code lang:css showtitle:false lines:true hidden:false}@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700');
body {
font-family: 'Ubuntu', sans-serif;
}{/code}Beispielhafte Einbindung per CSS-Datei: hier Schriftart "Ubuntu" mit Schriften Normal (400), Normal Kursiv (400i) und Fett (700) - 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. - 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!{code lang:css showtitle:false lines:true hidden:false}/* nur a in Navis ohne underline: */
ul > li > a {
text-decoration: none;
}
/* keine Aufzählungszeichen mehr: */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* zweite Navi-Ebene links einrücken: */
ul > li > ul {
padding-left: 20px;
}{/code}In den nächsten Übungen werden dann komplett gestylte horizontale und vertikale Navigationen entstehen.
Farben in RGB
Google Fonts
padding border margin
Firefox Developer Tools
Listen (verschachtelt)
CSS Selektor Kindelement
Tag 03
Mittwoch, 12.04.17, 08.00 - 15.30 Uhr
- Rekapitulation , TN-Fragen
- 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 - id (die etwas andere "Klasse")
Mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (also: id="test" statt class="test").
Nur dass wir im CSS die id durch die Kennzeichnung#testansprechen (statt.testbei 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")
Anm.: so macht die Dummy-Href-Zuweisung ...href="#"... auch Sinn: Quasi eine leere Sprungmarke (zur Seite selbst!) divundspan
mit div-Tags lassen sich "Blöcke" mit HTML-Code zusammenfassen;
in HTML5 heute neue Tags: footer, header, ...
span der "kleine Bruder" von div: Inline-Elemente Erzeugen; z.B. zum manuellen Styling von Textstellen in Absätzen p-Tag- 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)!
hier wurde die 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)
Als Trainer stelle ich die alte (XHTML) und eine überarbeitetete HTML5-Version für diese schöne grundlegende Technikdarstellung zu tabellenlosem Layout und Barrieretechniken bereit! - 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:
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!)
mittelsnav 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 vonmedia="screen"verlinkt, so lässt sich alternatives, spezielles Ausdrucksformat mittelsmedia="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 Template-Beispiel "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" - 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)
Morgen dann Umsetzung einer kompletten Website auf Basis dieses HTML5/CSS3-Templates
Beispieltabelle
CSS Größenangaben
Floating
Font-Formate
Bilder integrieren
CSS background-image
Tag 04
Donnerstag, 13.04.17, 08.00 - 15.30 Uhr
- Rekapitulation , TN-Fragen
Anm.: so viel zu tun - so wenig Zeit ;-) schauen wir mal, was wir so schaffen... - Diagnose zu "Design01" fortsetzen...
Tipp: verschachtelte Tags mit Floating (float:left;) für die horizontale Navigation - "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)
und natürlich: wiki.selfhtml.org (das Wiki-Projekt SelfHtml - ehemals S. Münz) - 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; bzw. 400, ...)
Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" zeigen
Darstellung zu Thema //wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face" target="_blank" title="Selfhtml @font-face" data-mce-href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face">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:
./webprojekte/design01(mit Unterordnern:./cssund./img- Vorgaben durch Ersteller)
nach Vorgabe 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./cssund./imgliegen "nebeneinander", also muss man aus CSS heraus erst einen Ordner "zurück" (siehe ..) und dann in den parallelen Bilderordner (hier: ./img)
Tipp zu Background-Images als Hintergründe ("Muster"):
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 mitclass="img group"- also 2 Klassen in HTML-Tag zugewiesen! - 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;) - JavaScript (ein kleines Bildergalerie Beispiel - Lightbox2 von Lokesh Dhakar)
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). - 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/ - 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 (Anm.: nicht mehr aktuell gepflegt - 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 - 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" gemietet werden:
Domain → domainname.TopLevelDomain → Bsp.: firmenname.de
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 - also einen Webhoster:
Bereitstellung Webserver und die Registrierung einer gewünschten "Adresse" (Domain) im Internet
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!
Beispielhafte Anleitungen zur Einrichtung von FTP-Zugängen bei Hostern und/oder die Einrichtung/Nutzen des FTP-Programms findet man leicht per Google (Suchlink) - Themen, die dem "zeitlichen Rotstift" zum Opfer fielen
Ausführlichere Übungen (allgemein und im Besonderen) für Tabellen, Listen, Bilder / Hintergrundbilder, Floating, ...
Alternative HTML-Editoren → Wiederholung Webprojektplanungen
Optimierung head-Tag: insbesondere Meta-Tags
Formulare mit HTML5/CSS3: Selfhtml-Wiki
Beispielseite mit unterschiedlichsten modernen Formularstylings: freefrontend.com/css-forms/
Audio/Video - HTML5-Special
mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Audio-/Video-Dateien vorausgesetzt - diese Medien direkt in den aktuellen Browsern abspielen; als Beispiel kann eine Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp durchgespielt werden:
siehe Webseite http://introducinghtml5.com/ und die "Downloadseite" http://introducinghtml5.com/examples/ch04/ für Kapitel 4 "Video und Audio" des Buchs - TN-Bescheinigungen, letzte TN-Fragen, Feedback
Tags dl, dt, dd
Grids - Spaltenlayouts
Horizontale Navigationen
Bildergalerie vorbereiten
Lightbox2 einbauen
ohne Floating
Vielen Dank für Ihre rege Teilnahme und Ihr persönliches positives Feedback nach Seminarende.
Ihr Trainer Joe Brandes
