• (X)HTML & CSS(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 , ./css oder ./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:
    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änglich 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 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) mit Strg + Leertaste   
    Zoomfaktor/Schriftanzeigengröße mittels Strg + 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 mittels Strg + ,  (Strg in Kombination mit Komma - kann man aber auch anpassen)
    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
    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"
    Problemlösung für Python-Fehlermeldungen: (Link Sourceforge) PythonScript_1.0.8.0.msi manuell nachinstalliert!
  • 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): &Uuml; (benanntes Entity) und &#220; (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 (mit title-Tag - Titel der Seite für Lesezeichen/Favoriten/Bookmarks),
    body (Browser - Körper/Inhalt)
    Quellen für Recherche und eigene Trainings: wiki.selfhtml.org (früheres Projekt von Stefan Münz - aktuelles HTML-Buch Amazon)
    Beispiele in erster Website test.html:
    p (Paragraph, Absatz), br (Break, Zeilenumbruch);
    Anm.: bitte keine Texte ohne Absatz-Tags!,
    pre (vorformatierter Text - preformated - für einfache Liste)
    hr (Horizontallinie - als optische Trennlinie oder techn. Texttrenner genutzt)
    ol / ul (sortierte / unsortierte Listen; li - List items);
    Wichtig: ul-Listen werden später unsere Navigationen (verschachtelte Listen)
    h1 bis h6 (Headings, Überschriften der Ebenen 1 bis 6)
    dl, dt, dd (Definitionslisten - Übungen zu Copy & Paste aus Wikiprojekt Selfhtml)
    a (Anchor, Link/Hyperlink); benötigt als Attribut href="/..." die URL für Verlinkung;
    Tipp: target="_blank" öffnet in neuem Fenster/Registerkarte
    Links zu Mailadressen mit URL "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"
    Tipp: Übergabe von Betreff mittels "mailto: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff"
  • 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)
    View source
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     
    7.     <!-- Externe CSS Datei verlinken -->
    8.     <link rel="stylesheet" href="montag.css">    
    9.     <!-- Zentrales Styling für dieses Dok -->
    10.     <style>
    11.         h2 {color: blue;"}
    12.     </style>
    13.     
    14. </head>
    15. <body>
    16.     <!-- manuelle Styling für einen einzigen Tag -->
    17.     <h1 style="color: red;" ></h1>
    18. </body>
    19. </html>
    Erste Zuweisungen und Tests bei kombinierten Anweisung für Headings h1 und h2, p, img, ...
  • Anm.: die Inhalte des heutigen Tages werden morgen früh ausführlich rekapituliert

 

  • Emmet - ShortcutEmmet - Shortcut
  • ArbeitsumgebungArbeitsumgebung
  • EntitiesEntities
  • csszengarden.comcsszengarden.com
  • CSS - DateiCSS - Datei
  • CSS - BeispieleCSS - 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 noch summary im table, caption und 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 mittels border-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 von body wird vererbt an h1, 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:
    View source
    1. /* Klasse für besondere Absatz-Formate */
    2. p.besondererstil {
    3.     color: #00FF00;
    4.     background: #000000;
    5.     padding: 10px 20px 30px 40px;
    6.     /*
    7.     padding-top: 10px;
    8.     padding-right: 20px;
    9.     padding-bottom: 30px;
    10.     padding-left: 40px;
    11.     */
    12.     border: 5px solid red;
    13.     /*
    14.     border-width: 5px;
    15.     border-style: solid;
    16.     border-color: red;
    17.     */
    18.     margin: 40px;
    19. }
    Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)
    Die Browser der aktuelleren Generationen haben auch keinerlei Probleme mit abgerundeten "Ecken" oder anderen aufwendigeren Styles.
  • Maße / Maßeinheiten für das CSS-Styling
    Absolute Längenmaße:
    Pixel (px - relativ), physischen Einheiten: Zoll (in), Pica (pc), Punkt (pt), Zentimeter (cm) und Millimeter (mm)
    Relative Längenmaße:
    em - Ein em entspricht der Schriftgröße des Elements, auf das eine Eigenschaft mit einem em-Wert angewendet wird. Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements!
    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: &nbsp; 
    HTML-Tags: pre (Vorformatierter Text), hr (Horizontale Linie)

 

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

 

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 
  • div und span  
    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 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)!
    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: ./css und ./img  - Ordner-Vorgaben durch Ersteller)
    Die Dateien (von 01 bis 10) wurden ausgiebig erläutert, diskutiert und getestet.
    Hier ein paar technische Anmerkungen:
    min-height gestylt mit * html #kopf in CSS als Überzeugungsarbeit für den IE (IE Hack)
    siehe Kompatibilität des IE zum CSS Style min-height
    Nutzung von Relativen Längenmaß: em  (oder ex, rem, % ) - Link Selfhtml-Wiki 
    Floating div-Blöcke mittels float:left; für Block #navigation gestylt (die Grundidee hinter dem tabellenlosen Layout!)
    mittels #navigation ul li a gezielt eine professionelle Linkstruktur aus unsortierter Liste erstellt,
    die Links werden zu "Schaltflächen/Buttons" indem die Anker/Links a-Tags mittels display: block; gestylt werden
    versteckte Zusatz-Headings (h6 mit Klasse .unsichtbar) für die barrierearme Nutzung der Seite
    CSS-Datei mittels Angabe von media="screen, projection" verlinkt, so lässt sich alternatives, spezielles Ausdrucksformat mittels media="print" erstellen;
    Übersicht über die Ausgabemedientypen auf selfhtml.org (Link)
    Dummy-Links mit href="#" verlinkt (Anker ohne Namen für dieselbe Seite)
    Pseudo-Klassen für a (anchor - Hyperlinks) :hover, :active, :link, :focus, :visited   (Link Selfhtml)
    Aufheben des Floating mittels Styling clear:both; (oder auch gezielt per clear:left oder clear:right)
  • Ausführliche Übungen und Praxisbeispiele
    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ür a (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-Seite
    main  - Hauptbereich
    Anm.: bitte per CSS mit display: block;  stylen, damit IE8 - IE11 keinen Stress machen;
    ein zusätzliches role="main" für ARIA Barrierefreiheit Unterstützung (Link) ist freiwillig, kann aber nicht schaden
    footer  - Fußbereich der Webpage
    article  - Beitrags-/Inhaltsbereich
    section  - Bereich/Abschnitt (z.B. in einem article-Tag)
    aside  - Beigeordneter Block (Seitenbereich)
    nav  - maßgeblicher Navigationsbereich
  • 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 - gestyltTabelle - gestylt
  • Scribble / EntwurfScribble / Entwurf
  • HTML5 TagsHTML5 Tags
  • RTL - Right-to-LeftRTL - Right-to-Left
  • box-shadowbox-shadow
  • Design01Design01

 

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:
    View source
    1. <!doctype HTML>
    2. <html lang="de">
    3. <head>
    4.     <meta charset="utf-8">
    5. <!--[if lte IE 8]>
    6.          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    7.     <![endif]-->
    8.     <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    9.     <meta name="description" content="Beispiel-Design Nr.01 von SelfHTML.org">    
    10.     <link href="css/style.css" rel="stylesheet">
    11.     <title>SelfHTML Design Nr.01</title>
    12. </head>
    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.
    auch name="keywords",
    und name="description", ...  Link Selfhtml
  • CSS-Kurzanalyse von "Design01" - einem freien Template des Selfhtml-Wiki
    im CSS-Code erkennt man folgende Techniken:
    View source
    1. /* == css/style.css == Auszüge == */
    2. @font-face {
    3. font-family: 'Tauri';
    4. font-style: normal;
    5. font-weight: 400;
    6. src: local('Tauri Regular'), local('Tauri-Regular'), url(http://themes.googleusercontent.com/static/fonts/tauri/v2/33NkxyDp8MBgQpwno_A-zw.woff) format('woff');
    7. }
    8.  
    9. * {
    10. margin: 0;
    11. padding: 0;
    12. }
    13.  
    14.  
    15. /* ... */
    16.  
    17.  
    18. a.more:after {
    19. content: " >";
    20. display: inline-block;
    21. height: 1em;
    22. padding: 0 .5em 0.5em 0.5em;
    23. border-radius: 1em;
    24. background: #ffa323;
    25. margin-left: 10px;
    26. }
    27.  
    28.  
    29. /* ... */
    30.  
    31.  
    32. header {
    33. width: 100%;
    34. height: 240px;
    35. background: url('../img/header.png') no-repeat center bottom #e7e8ee;
    36. background-size: contain; border: 1px solid #E5E7EB;
    37. }
    38.  
    39.  
    40. /* ... */
    41.  
    42.  
    43. main    {
    44. display: block;
    45. position: relative;
    46. width: 100%
    47. }
    48.  
    49.  
    50. /* ... */
    51.  
    52.  
    53. nav ul li:first-child {
    54. margin-left: 2%;
    55. }
    56.  
    57.  
    58. /* ... */
    59.  
    60.  
    61. /* 2-Spaltenlayout mit breiterem aside */
    62. @media screen and (max-width: 950px) {
    63. body {width:100%}
    64. section {width:58%;}
    65. section.spalte,
    66. aside {width:29%;}
    67. }
    68.  
    69.  
    70. /* 1-Spaltenlayout mit Navigation unten*/
    71. @media screen and (max-width: 620px) {
    72. section,
    73. section.spalte,
    74. aside {
    75. float: none;
    76. width: 96%;
    77. }
    78. /* ... */
    79. }
    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 :after  mit Styling für eine Kreis mit Zeichen >
    Zeile 33: mit background  ein Hintergrundbild im header  hinterlegt;
    Beachten: Relative Pfadangabe für die url des Bildes:  ../img/header.png 
    Zeile 37: HTML5-Tag main  (wegen der IE8 bis 11) bitte mit display: block;  stylen
    Zeile 45: Pseudo-Klasse :first-child  stylt gezielt das erste "Kindelement" in einer ul-Liste
    ab Zeile 52: mit @media  Anweisungen 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:
    Hautpseite index.html mit
    Unterseiten hobby.html, job.html, impressum.html und kontakt.html    (4 Unterseiten)
    website entwurf 800px
    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: ./css und ./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?min-height CanIUse?
  • Blöcke in DemositeBlöcke in Demosite
  • Font einbindenFont einbinden
  • background-imagebackground-image
  • Firebug AnalyseFirebug Analyse
  • background-repeatbackground-repeat

 

Tag 05

Freitag, 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 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 durchgespielt; 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;)
  • 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
    View source
    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4.      <meta charset="utf-8">
    5.      <title>Lightbox Beispiel</title>
    6.      <link rel="stylesheet" href="css/lightbox.css">
    7. </head>
    8. <body>
    9. <h3>2 Bilder als Galerie (data-lightbox gleich)</h3>
    10. <a href="img/big/DSC_0040.jpg"
    11.         data-lightbox="gallery"
    12.         data-title="Erste Bildunterschrift">
    13.         <img src="img/small/DSC_0040.jpg" alt="Bild 1">
    14. </a>
    15. <a href="img/big/DSC_0041.jpg"
    16.         data-lightbox="gallery"
    17.         data-title="Zweite Bildunterschrift">
    18.         <img src="img/small/DSC_0041.jpg" alt="Bild 2">
    19. </a>
    20. <script src="js/lightbox-plus-jquery.min.js"></script>
    21. </body>
    22. </html>
    Anm.: CSS und JS Dateien gibt es oft auch in einer "minified" (komprimierten) Version (lightbox.min.css), um kB beim Seitenaufruf einzusparen - Bearbeiten lassen sich diese "geschrumpften" Dateien kaum; 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!
    Als Terminrahmen gilt: KW ab 20.02.2017 (wahrscheinlich Di) ab 17.30 Uhr
    Prüfungsvorbereitung:
    Seminarwoche nachbereiten, Musteraufgabe nacharbeiten, Formulare!
  • TN-Bescheinigungen, letzte TN-Fragen, Feedback

 

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

 

 

 

Vielen Dank für die tollen Feedbackbögen und persönlichen Rückmeldungen zum Seminar.
Ihr Trainer Joe Brandes

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

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