Montag, 7. April 2014

Kurs Tag 1 - HTML & CSS - Einführung

TAG 1 - Mitschrift vom 4.4.2014

 Michael Sewelies

 Pausen:
9.30-9:45
11:15-11:30
13:00-13:30
Farben: 
rot = kurz weg, Technik kaputt
blau = ja/nein Entscheidungen

Unsere Bibel: ;)
http://de.selfhtml.org


 Lernmittelgrundlage:
  • HTML 5 - Grundlagen der Erstellung von Webseiten
    Übungen aus seinen Vorgaben - Bücher zur Vertiefung/ zum Nachschlagen
  • CSS - Cascading Style Sheets Level 3
Ablauf:
bis 13h Themen
nachmittags Erlerntes vertiefen (Konsolidierung)

 Zum Dozenten:
  • freiberuflicher Fachdozent
  • Hat Internetagentur seit 5 Jahren, vorher 14 Jahre im Sauerland im Konzern- erstellt Inetseiten
  • Webwaren - Shopsysteme
  • arbeitet mit HTML5 & CSS3
  • macht diverse Kurse am Comcave
  • ist Wirtschaftsinformatiker (Ausrichtung Projektmgt, -marketing & -ergonomie)
  • kein verschulter Dozent, sondern passt sich Teilnehmern an

 CSS3 (Cascading Style Sheets Level 3) - in ein paar Jahren stellen wir keine Grafiken mehr online, sondern wir programmieren sie.

 HTML (Hypertext Markup Language) = Beschreibungssprache - Führen Vokabelheft
Themenabriss:
Strukturierende und formatierende Elemente kennenlernen
mit verschiedenen Editoren arbeiten
kleines Projekt planen (Kochbuch mit Rezepten)
Einbindung von Grafiken (wie, was gibt es für welche?)
Dinge verlinken, Dia-Shows machen, strukturiertes Arbeiten in IT wichtig!
Tabellen (Grundlagen und Vertiefung)
Iframes (Fremdinhalte einbetten)

 CSS-Grundlagen - parallel zum HTML einfließen lassen
Boxmodell - wer das versteht, versteht CSS
Selektoren
Navigatoren

Tag 1: 
Die Geschichte von HTML
erste Schritte: Hallo
HTML ist ASCII (pdf)
Der Doctype (HTML-Version)
Übung: Der Karl
Ubung: Der Montag

HTML - Hypertext Markup Language

= Formatiersprache
Exkurs: Beschreibungssprache (bestimmte Elemente werden am Bildschirm wiedergegeben - Eigenschaften/Attribute geben (mach mit grün, rot, groß) 
Gegenteil zu Scriptsprache (nutzen Interpreter - Zeile für Zeile eingelesen . und Interpreter interpretiert es)

Welche Dateitypen (nach Endungen) kennen wir: 
MS-Word: *.doc/*docx
MS-Excel: *.xls / *.xlsx
PDF: *.pdf
HTML: *.html / *.htm (das wird nicht mehr verwendet!)
= ein Browser kann eine *.html-Datein interpretieren / ausführen!

Besonderheit: sagen System beim Start: Ich bin ein Worddokument - öffne mir Word, damit du mich sehen kannst. => sagt, welches Programm ausgeführt werden muss!

 Übung:
Wir legen ein HTML-Dokument an  
-> dazu brauchen wir einen Editor (erzeugt das Dokument:
=>Notepad++ (notepad-plus-plus.org) (freier HTML-Editor bzw. Script-Editor, in dem wir programmieren können) - letzte Version downloaden und installieren -> Besonderheit: ist in der Lage alle möglichen Dateien abzulegen!
Hinweis: Nicht zu verwechseln mit- What you see is what you get-Editor sondern Quellcode-Editor
Arbeitsstruktur: Wie organisieren wir unsere Arbeit?
Verzeichnis - Dokumente - Neuer Ordner (HTML-CSS-Kurs)  - Neuer Ordner (Tag1) - erste-seite.html (Dateityp auf *.html umstellen)
Achtung! keine Leerzeichen - da sie später in der URL als % angezeigt werden - das gibt Probleme!

 -> wir können unheimlich viele Quellcode-basierte Sprachdateien hiermit erstellen!!!
-> nochmal überprüfen, ob dort abgelegt ist, wo gewünscht!

 -> im Browser öffnen: Datei im Ordner markieren - öffnen mit - Firefox!
Hinweis zu firefox: Für Entwicklung benutzen wir nur firefox (firebug wird demnächst installiert und daher wird es auch vornehmlcih in Agenturen verwendet)
Exkurs: UTF-Zeichensatz wurde geladen, dann werden die ü's und ä's richtig angezeigt.
Exkurs: Editoren für Mac - nachschauen, welche gebräuchlich sind
Wir haben eine Regel entdeckt:
Wenn ich in HTML einen Text einfüge, dann interessieren Leerzeilen, Umbrüche etc. den Browser nicht!
UND: Der Text passt dich der Größe des Browserfensters an! (immer das Maximale der Browserbreite wird genutzt!)
ERGO: Der (formatierte) Text wird vom Browser (als eine durchgehende Zeile) interpretiert, aber Leerzeilen, Umbrüche etc, werden ignoriert.

 Frage: Wie können wir dem Browser mitteilen, dass wir einen Zeilenumbruch haben wollen?
Antwort: Jetzt kommt das echte HTML zum Einsatz:  Break: <br /> (ist ein HTML-Tag)
(Hinweis: auf alten Seiten gibt es auch <br> - Leerzeichen und / benötigen keine schließenden Tags - seit dem HTMLX-Standard schreibt man nur noch die alleinstehenden Tags mit " /" Leerzeichen /)

 ein HTML-Tag beginnt mit "<" dann kommt der Tagname und dann wird der Tag mit
Aufgabe: miot dem Tag weisen wir den Browser an - bitte hier einen zeilenumbruch einfügen -
Tag = Befehl für Browser(interpretation)

Hinweis: Browser sind abwärtskompatibel - Browser verzeiht Formfehler oder alte Schreibweisen! - aber es wird die Zeit kommen, ab der die Browser nicjht mehr die alten Formatierungen lesen können - deshalb bitte an neue Standards halten!
Der Browser akzeptiert Inkonsistenzen, bspw, wenn wir vergessen ein Tag zu schließen - dann verwendet er den Befehl einfach bis zum Schluss. (normalerweise eben bis zum schließenden Tag...)

 Da der Browser Texte automatisch als eine Zeile ausliest, müssen wir ihm Kommandos geben.
Also immer da, wo wir einen Zeilenumbruch haben wollen, müssen wir ein Break <br /> (Befehl: Breche um - Leezeile) einfügen.

 Wir programmieren nicht mit HTML, wir formatieren!

 Was gibt es noch für Dinge, mit denen wir formatieren? - weitere Tags:
Fettschrift: <b>...</b>: <b> Text, der fett geschrieben sein soll</b>  
-> Aufgabe: Textbereich (der zwischen Anfangs- und schließendem Tag liegt) fett gestalten

Es gibt 2 Arten von Tags:

=> Tags mit schließendem Element: 
(beziehen sich auf einen Bereich - brauchen Start- und Endpunkt!)

  • <b>... </b> hat einen Start- und einen Endpunkt! Wir müssen festsetzen, wo begonnen werden soll mit dem Befehl/der Formatierung und das dem Broswer in einer verständlichen Sprache (eben HTML) mitteilen.
=> Tags ohne schließendem Element:
(beziehen sich auf einen speziellen Punkt - brauchen keinen Endpunkt)
  • <br /> hat keinen End-Tag, weil er ihn nicht braucht ;) - gibt genauen Punkt an!
Hinweis: Wir werden hier das händische schreiben von HTML-Dateien lernen, weil wir das DEBUGGING später auch beherrschen müssen. Es schleichen sich immer wieder Fehler ein - und wenn es nur der falsche Schrägstrich ist, bspw nicht <br /> sondern <br \> 

Hinweis: der Editor gibt Hilfestellungen - wenn ich auf den Startpunkt gehe, zeigt mir der Editor mit Hilfe von farblichen Unterlegungen das Gegenstück an!


 Umlaute: ä, ü, ö - Deutschland typisch
-> wir müssen dem Browser mitteilen, wie er mit den Umlauten umgehen muss.
mach uns aus den Zeichen ein ü - er kennt nur A-Z! 
-> wir müssen eine Dateistruktur aufbauen!

 Informationen für den Browser 
(sollen nicht ausgegeben werden - kleinerer Teil)

Informationen für die Leser 
(müssen ausgegeben werden - größerer Teil)

-> Damit wir die Trennung hinbekommen, gibt es Bereichsangaben:
<!doctype html>  (HTML5 Standard)
= Kopfdateien
hier geben wir dem Browser Info mit, nach welchem Standard wir die Seite aufbauen = Dokumententyp


das umfassende HTML-Tag: 
<html>...</html>
-> umschließt head und body und zeichnet den Text als echtes HTML-Dokument aus = Rahmen!
Ist der Container für Head UND Body-Bereich.


Head-Tag:
head <head> ... </head>
Nur Infos für den Browser!

Body-Tag
body <body> ... </body>
Für den Leser! (=Ausgabe-HTML)
->alles was zwischen dem beginnendem und schließendem Body-Tag steht, soll angezeigt werden.
-> ersten Quellcode eingeklammert :)


Übersicht der Bereiche eines HTML-Dokuments
Tipp: Bereiche ggfs Einrücken, um die Struktur besser zu erkennen

Hinweis: Ein Tag hat auch Attribute - also erweiterbare Eigenschaften

Ausflug in die Geschichte von HTML (nicht klausurrelevant)

der doctype hat sich im Laufe der Jahre gewandelt:
  • Ganz am Anfang gab es HTML 1.0 (HTML ist einfach)
    • Aufgabe: rudimentär formatierte Übertragung von Nachrichten
    • es gab vielleicht 10 Tags
    • es war ein Projekt und man erkannte das Potenzial
  • HTML 2.0
  • HTML 3.0
  • HTML 3.2
  • HTML 4 (HTML4 hatte schon fast den Standard wie jetzt)
  • HTML 4.01
Abwärtskompatibilität musste gewährleistet bleiben
  • Daraus hat sich dann das XML entwickelt.
  • Beginn der XHTML-Standards!
    • XHTML 1.0
    • XHTML 1.1
    • XHTML 2.0 -> XHTML wurde nicht weitergeführt (kein Unternehmen steht dahinter sondern Konsortium - also eine Community, die neue Standards entwickelt nach neuem Bedarf)
    • HTML 5 (noch kein offizieller Standard - permanente Verbesserungen und Erweiterungen)- hat eine Masse an Tags!
      • hat sich vereinfacht - ist jetzt benutzerfreundlicher - beschreibende Tags :)
-> jeder Standard bringt seine Neuerungen (neue Regeln etc mit) 
  • man muss die neuen Regeln angeben -was hat sich von Standard zu Standard verändert.
  • Kennzeichnung: Deshalb geben wir der Kopfdatei einen doctype mit dem verwendeten Standard an!
  • = Wir geben dem Browser die Information, welcher Standard verwendet wird.
HTML ist und bleibt DIE Sprache
ABER es gibt CSS3 mit dem neue Standards gesetzt werden in der Erstellung von Websites!- soll Grafik-Engine werden! In ein paar Jahren stellen wir keine Grafiken mehr online, sondern wir programmieren sie.

Linktliste:
Es ist nicht wichtig alles zu wissen, sondern zu wissen, wo es steht :)

weiter zur Übung
  • Aufgabe: 
    • 2. Seite bauen
    • einen Text aus dem Inet raussuchen und versuchen in der neuen Seite zu formatieren
  • Zeichencodierung 
    • was kann UTF8 alles abbilden: http://www.utf8-zeichentabelle.de/
    • Umlaute anzeigen als ä, ü, ö:  
      • <meta charset="utf-8"> in den Head einfügen -
      • besser noch verändern: <meta charset="UTF-8 /> 
  • ACHTUNG: evtl nötig: - Menü - kodierung - konvertieren zu UTF-8
Eingestellt von um

Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)