HTML und FTP Einführung

HTML - Hypertext Markup Language
FTP - File Transfer Protocol

Lernziele
Ich kann die wichtigsten HTML-Tags schreiben und strukturiert einsetzen.
Ich kann meine erste HTML-Seite im Internet veröffentlichen.

Arbeitsumgebung und Ressourcen (Unterlagen)

Vorstellungsrunde: Name, Beruf, eigene Kenntnisse und Erwartungen an den Kurs.
Kurs-Admin: Absenzen, Kontakte
Was lernen wir in diesem Kurs: Vorstellen der Kurs-Website
Buch: HTML & CSS Erfolgreich Websites gestalten & programmieren von Jon Duckett

Kursprojekt - Website «mobile first»

Schritt für Schritt, oder Kurstag für Kurstag erarbeiten wir eine Website und lernen dabei den aktuellen Umgang mit HTML5 und CSS kennen. Wie auf dem Bild unten, wird diese Website zum Kursende veröffentlicht dargestellt. Sie ist mobile. Links siehst Du eine Template-Ansicht auf einem Mobilephone und rechts die Ansicht im Browser eines Computers.

Wie funktioniert das Web

Was ist Web Publishing
Welche Software brauchen wir für Web Publishing?
Und wo findest du diese Software auf deinem Computer?

Alle Übungen im Kurs werden von der Kursleitung mit Texteditor "Brackets" gezeigt.

Den Texteditors Brackets auch auf Deinem privaten Computer installieren

Führe den Download von Brackets aus: http://brackets.io
Speichere die Datei auf dem lokalen Rechner
Klicke auf den Installer (exe - PC), (dmg - MAC).

Eine wichtige Unterstützung beim schreiben von HTML und CSS bietet die Erweiterung "Emmet".

Brackets und Erweiterungen installieren: Anleitung zur Installation

HTML - HyperText Markup Language

HTML-Grundgerüst: HTML-Elemente
Der Browser kann reinen Text darstellen unformatierter Text, mit HTML formatierter Text.

Wichtig: Jede HTML-Seite ist Teil eines HTML-Projekts. Verlinkungen zu weiteren HTML-Seiten und Dateien erfordern eine fixe Position innerhalb einer Ordnerstruktur (Ablage). Für die Publikation auf dem Server muss die gesamte Ordner- und die Datenstruktur beibehalten werden. Falls ich diese lokal verändere, muss ich alle erneut auf den Server hochladen.

Übung - Ein HTML-Projekt erstellen

Öffne die Datenverwaltung deines Computers. (MAC den Finder, PC den "Datei"-Explorer)
Erstelle einen neuen Ordner mit den Initialen Deines Namens xx (klein geschrieben) auf dem Schreibtisch oder im Verzeichnis Dokumente.
Öffne den Texteditor Brackets und folge nun der Anleitung Brackets: Ein neues Projekt erstellen mit einer index.html-Datei.

Lösung | Lösung ZIP

Übung – Grundgerüst mit HTML5-Elementen

Arbeite weiter mit dem Brackets in der index.html-Datei.
Erweitere das HTML-Grundgerüst innerhalb des body-Elements durch folgende HTML5-Elemente. (HTML5 Tags).
header nav main article (innerhalb des main-Elements) <main> <article></article> </main> footer

Erstelle eine Listen-Navigation im nav-Tag mit 4 Menupunkten (Startseite, Projekte, Portrait, Kontakt)

<nav>
    <ul>
        <li>Startseite</li>
        <li>Projekte</li>
        <li>Portrait</li>
        <li>Kontakt</li>
    </ul> 
</nav>

Ergänze das Grundgerüst im head-Bereich mit einem Viewport Meta-Tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setzte ein h1 Titel-Element im den Inhaltsbereich ( main Element).
Ergänze den Footer mit Inhalt.

Lösung | Lösung ZIP

PAUSE

FTP – File Transfer Protokoll

Den lokalen Ordner mit dem Server verbinden

Theorie: Client-Server Struktur
Das Netzwerk, bestehend aus vielen Client-Computern und Server.

FTP ist ein Internet-Dienst, der dazu dient, sich auf einem bestimmten Server-Rechner im Internet einzuwählen. Von dort kannst du Dateien auf den eigenen Rechner übertragen (Download) oder eigene Dateien an den Server-Rechner schicken (Upload).

Um die Dateien eines Web-Projekts ins Web auf den Server zu laden, wo du Speicherplatz zur Verfügung gestellt bekommen hast, brauchst du eine Software, die das File-Transfer-Protokoll (FTP) unterstützt. Mit einem FTP-Programm kannst du deine Projektdateien hochladen und verwalten. Der Zugriff auf einen Server ist durch das Einwählen anhand eines Usernamens und eines dazugehörigen Passwort gesichert.

File Transfer Protokoll: FTP Programme
Was ist eine IP Adresse
Beispiel: IP = 194.209.0.30 = eb-zuerich.ch

FTP: Cyberduck installieren

Übung - Eine Seite im Web veröffentlichen

Öffne das FTP-Programm: Cyberduck.
Erstelle eine neue Verbindung mit: Menuleiste > Neue Verbindung.
Übertrage die Daten anhand des Datenblattes in das dargestellte Fenster: Server/Benutzername/Passwort...
...und klicke auf Verbinden!
Öffne in der Ansicht den Ordner: public_html.
Du schaust jetzt auf die Dokumente unserer Kurssite.
Deinen Ordner "xx" findest du im Ordner: public.
Ziehe deine Datei: "index.html" in deinen Ordner.
Damit hast du die Datei auf dem Server publiziert.
Du kannst jetzt mit dem Browser diese Publikation testen, indem du die URL hinter deinem Namenskürzel mit "index.html" ergänzt!

Aufgaben

Lesen Im HTML & CSS Buch

Einleitung - Seite 8 bis 15
Kapitel 1 - Seite 16 bis 33