CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG

Größe: px

Ab Seite anzeigen:

Download "CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG"

Helmut Knopp
vor 8 Jahren
Abrufe

1 CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH

2 DOZENTENTEAM FÜR JEDES THEMA EIN SPEZIALIST

3 ANDI KELLER Mitgründer von 4eyes Weit über 10 Jahre Erfahrung im Web Verantwortlich für Kurs 2 und 3

4 CHRISTOPH DÖRFEL Erfahrener Webentwickler Unser Experte für Mobile Entwicklung / Integration und JavaScript Verantwortlich für Kurs 5 und 6

5 MARKUS STAUFFIGER Mitgründer von 4eyes Weit über 10 Jahre Erfahrung im Web Verantwortlich für Kurs 1 und 4

6 STRUKTUR UND ZIELE

7 KURS 1: GRUNDLAGEN DER WEBENTWICKLUNG Verstehen und Anwenden der Grundlagen an einer eigenen Website

8 KURS 2: FORTGESCHRITTENES CSS Komplexere Layouts in HTML und CSS umzusetzen

9 KURS 3: DESIGN UND PHOTOSHOP Einführung in Photoshop

10 KURS 4: CMS Integration der Website in ein modernes CMS

11 KURS 5: MOBILE UND RESPONSIVE Website für verschiedenste Geräte optimieren

12 KURS 6: SEO UND TOOLS Suchmaschinenoptimierung, Social Media und weitere Tools

13 KURS 1 Wie funktioniert das Internet? Werkzeuge HTML-Basics CSS-Basics Fortgeschrittenes HTML

14 VORSTELLUNGSRUNDE Name Tätigkeit Motivation für den Kurs Themen für die Kaffeepause

15 HTML GRUNDLAGEN

16 STRUKTUR EINER WEBSITE <!DOCTYPE html> <html> <head> <title>cas Kurs Tag 1 - Bodytag</title> <meta charset="utf-8" /> </head> <body> <h1>überschrift</h1> <p> Absatz </p> </body> </html>

17 STRUKTUR EINER WEBSITE Hierarchie - Einrückung mit Tabs Öffnende und schliessende Elemente: Tags Weitere Informationen im Tag: Attribute Umrahmt von <html> </html>

18 DER <BODY> Enthält den Inhalt Überschriften Absätze Navigation Bilder

19 DER BODY <!DOCTYPE html> <html> <head> <title>cas Kurs Tag 1 - Bodytag</title> <meta charset="utf-8" /> </head> <body> <h1>überschrift</h1> <p> Absatz </p> </body> </html> Demo

20 ÜBERSCHRIFTEN <h1> Typ 1 </h1> <h2> Typ 2 </h2> <h3> Typ 3 </h3> bis zu Nr. 6 - immer kleiner h = Heading

21 INHALTSELEMENTE - ÜBERSCHRIFTEN <h1>überschrift 1</h1> <h2>überschrift 2</h2> <h3>überschrift 3</h3> ÜBERSCHRIFT 1 ÜBERSCHRIFT 2 ÜBERSCHRIFT 3

22 INHALTSELEMENTE - ABSATZ <p> p definiert einen Absatz </p> p = Paragraph

23 INHALTSELEMENTE - ABSATZ <p>inhalt des Absatzes</p> Inhalt des Absatzes

24 ÜBUNG - HTML GRUNDLAGEN 1 1. Erstelle eine Text-Datei: grundlagen.html 2. Grundstruktur: <html> <body> </body> </html> 3. Überschriften: <h1> <h2> <h3> 4. Absätze: <p> 5. Öffne das Dokument im Browser 6. Achte auf das korrekte Einrücken

25 DER <HEAD> Technische Informationen Titelzeile im Browser Hinweise zu Autor, Schlüsselwörter etc. Laden von zusätzlichen Elemente (Gestaltung und Funktionen)

26 DER <HEAD> <!DOCTYPE html> <html> <head> <title>cas Kurs Tag 1 - Der Titel</title> <meta charset="utf-8" /> </head> </html> Demo

27 ÜBUNG - HTML HEAD 1. Ergänze die Text-Datei "grundlagen.html" 2. Füge einen Head-Tag dazu <html> <head> </head> <body> </body> </html> 3. Gib der Seiten einen Titel <title> 4. Öffne die Datei im Browser 5. Wird der Titel korrekt angezeigt? 6. Stimmt die Einrückung im HTML-Code?

28 AB INS INTERNET!

29 FTP / FILEZILLA

30 FÜR WAS BENÖTIGE ICH FTP? HOCHLADEN MEINER WEBSITE AUF DEN SERVER

31 DEMONSTRATION

32 PROBLEM PASSWORT Bessere Möglichkeiten FTPS SSH Weitere

33 ÜBUNG: DATEIUPLOAD 1. Richte deinen Account in Filezilla ein, inkl. Verschlüsselung 2. Lade die Datei "grundlagen.html" in dein Verzeichnis 3. Ruf deine erste Seite aus dem Internet auf 4. Lösungen

34 MAGIE? - NEIN GRUNDLAGEN DES WEBS

35 CLIENT UND SERVER Server stellt Dateien zur Verfügung Client lädt Seite herunter Browser stellt Seite dar

36 BROWSER Lädt Seite aus dem Netz Stellt Seite dar Führt Programme aus Übermittelt Informationen (Formulare) Verteilung

37 HTTP Kommunikationsregeln Definierte Anfrage Definierte Antwort https: Das gleiche aber verschlüsselt

38 DEMONSTRATION

39 WEITER GEHT'S MIT HTML

40 AUFZÄHLUNGEN UND AUFLISTUNGEN <ul> ul definiert eine Auflistung </ul> <ol> ol definiert eine nummerierte Auflistung </ol> <li> li ist ein Element einer Liste </li> ul = Unordered list ol = ordered list li = list item

41 INHALTSELEMENTE - AUFLISTUNG <ul> <li>erstes Element</li> <li>zweites Element</li> </ul> Erstes Element Zweites Element

42 INHALTSELEMENTE - AUFZÄHLUNGEN <ol> <li>erstes Element</li> <li>zweites Element</li> </ol> 1. Erstes Element 2. Zweites Element

43 INHALTSELEMENTE - VERSCHACHTELN <ol> <li>erstes Element</li> <li>zweites Element <ol> <li>erstes Unterelement</li> <li>zweites Unterelement</li> </ol> </li> <li>drittes Element</li> </ol> 1. Erstes Element 2. Zweites Element 1. Erstes Unterelement 2. Zweites Unterelement 3. Drittes Element

44 HTML-TAGS - WO FINDE ICH INFOS? Google: "HTML Tags"

45 ÜBUNG - HTML GRUNDLAGEN 1. Erstelle eine neue Datei: grundlagen2.html 2. Grundstruktur mit html, head und body 3. Überschriften: <h1> <h2> <h3> 4. Absätze: <p> 5. Auflistungen: <ul>, <li> 6. Aufzählung: <ol>, <li> 7. Dokument mit Filezilla hochladen 8. Im Browser prüfen 9. So soll's aussehen

46 ÜBUNG: HTML <!doctype html> <html> <head> <title>grundlagen 2</title> </head> <body> <h1>die zweite Grundlagen-Datei</h1> <h2>allgemeines</h2> <p>ich habe gelernt, dass HTML aus Tags besteht und die Tags jeweils unterschiedliche Funktionen haben. Es gibt jeweils ein öffnendes und ein schliessendes Tag.</p> <h2>überschriften</h2> <p>ich habe gelernt, dass Überschriften mit einem h-tag geschrieben werden. Es gibt verschiedengrosse Überschriften, von einer grossen h1 bis zu einer kleinen h6 habe ich daher genügend Möglichkeiten meine Dokumente sauber zu strukturieren</p> <h2>absätze</h2> <p>absätze wie dieser werden in einem p-tag geschrieben</p> <h2>aufzählungen</h2> <p>wir haben im laufe des Kurses gelernt wie man Aufzählungen macht, untenstehend findet man ein Beispiel für verschiedene Arten von Aufzählungen</p>

47 VALIDIERUNG HTML: Definierte Struktur Kann automatisch überprüft werden Browser sind fehlertolerant

48 VALIDIERUNG: DEMONSTRATION

49 ÜBUNG: VALIDIERUNG 1. Gehe auf 2. Gib den Link zur eben erstellten Seite ein 3. Korrigiere die Fehler und lade die korrigierte Datei hoch 4. Kontrolliere erneut

50 EDITOR Es geht auch ein bisschen bequemer

51 NETBEANS Entwicklungsumgebung Kostenlos Für alle Plattformen

52 NETBEANS ÜBERSICHT Projektverwaltung Dateibearbeitung Informationen

53 SYNTAX-HIGHLIGHTING Übersichtlichkeit Autovervollständigen Fehler anzeigen

54 ÜBUNG: NETBEANS EINRICHTEN 1. Leg dein Projekt gemäss Dokumentation an 2. Erstellen eine Datei netbeans.html 3. Laden die Datei mittels Filezilla hoch 4. Schau dir die Datei an

55 SYNCHRONISATION MIT DEM SERVER Konfigurier die Verbindung für dein Projekt Leg eine weitere HTML-Datei an: netbeans2.html Prüfe, ob der automatische Upload korrekt funktioniert hat

56 LOKALES ARBEITEN Schnell Keine "Experimente" auf der Live-Website

57 ÜBUNG: MEINE ERSTE WEBSITE 1. Neue Datei anlegen - index.html 2. Erfassen und formatieren von Inhalt 3. Willkommensseite bspw. deiner Firma, deines Instituts 4. Hochladen auf den Server 5. Testen

58 LINKS Verbinden von Websites Tag: a Attribut: href der Text als Inhalt

59 BEISPIEL LINK <a href=" verlinkte Text</a> Der verlinkte Text

60 ABSOLUTER LINK Link auf eine externe Seite Bsp 1: Bsp 2:

61 RELATIVER LINK Link innerhalb meiner Seite Bsp 1: kontakt.html Bsp 2: dateien/test.pdf

62 LINK Link auf eine -Adresse

63 BEISPIELE <a href=" externe Link</a><br /> <a href="kontakt.html">der interne Link</a><br /> <a Link auf eine -Adresse</a> Der externe Link Der interne Link Der Link auf eine -Adresse

64 ZWEI WEITERE TAGS

65 KURSIV Tag: em em: Emphasis Emphasis: Schwerpunkt, betonen

66 KURSIV Der <em>kursive</em> Test Der kursive Test

67 FETT Tag: strong

68 FETT Der <strong>fett</strong> Test Der Test

69 ÜBUNG: MEINE VERLINKTE WEBSITES TEIL 1 1. Neue Datei anlegen - kontakt.html 2. Erfassen und formatieren (Fett, Kursiv) von Inhalt 3. Kontaktdaten erfassen 4. Hochladen auf den Server 5. Testen

70 ÜBUNG: MEINE VERLINKTE WEBSITES TEIL 2 1. Link auf die Willkommen-Seite (index.html) 2. Link auf die -Adresse 3. Link auf google.ch 4. Hochladen auf den Server 5. Testen

71 ÜBUNG: MEINE VERLINKTE WEBSITES TEIL 3 1. Bearbeiten der Willkommen-Seite (index.html) 2. Link auf die Kontakt-Seite 3. Hochladen auf den Server 4. Testen

72 BROWSERTOOLS 1. Quellcode anschauen 2. Bearbeiten 3. Netzwerk

73 ÜBUNG: BROWSERTOOLS 1. Schau deinen Quellcode mit den Tools an. 2. Ändere den Quellcode 3. Besuche eine Website, bspw Öffne die Browsertools, wechsle in das Netzwerk-Tool 5. Lade die Seite erneut und schau dir die Anfragen an.

74 MENUS / NAVIGATION 1. Sammlung bzw. Liste von Links 2. Hierarchie

75 MENUS - BEISPIEL <!DOCTYPE html> <html> <head> <title>cas Kurs Tag 1 - Verschachtelte Auflistungen</title> <meta charset="utf-8" /> </head> <body> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">über uns</a> <ul> <li><a href="history.html">geschichte</a></li> <li><a href="team.html">team</a></li> </ul> </li> <li><a href="angebot.html">angebot</a></li> </ul> </body> </html>

76 ÜBUNG: MENUS 1. Erweitere die Kontakt-Seite um ein Menu 2. Das Menu enthält die Wilkommens- und Kontaktseite 3. Das Menu soll auf beiden Seiten sichtbar sein

77 ZUSAMMENFASSUNG Grundlagen des Webs Werkzeuge HTML-Tags

78 AUSBLICK CSS-Grundlagen Jetzt kommen Farbe und Bilder ins Spiel Weitere HTML-Tags Tabellen, Formulare und Multimedia

Ähnliche Dokumente

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,