Wie funktionieren Internetseiten? Html und Co – Teil 2 Heimo Reiter

Webkurs Selbsthilfegruppen Einbindung durch Referenzierung Geeignete Dateiformate: –*.GIF –*.JPG, –aber auch *.PNG Einbindung von Bildern (img-Tag) GRUNDPRINZIP Weitere Attribute: -> width, height, align Beispiel:

Heimo ReiterWebkurs Selbsthilfegruppen Bild als Link GRUNDPRINZIP

Heimo ReiterWebkurs Selbsthilfegruppen Exkurs: Organisieren der Dateien Alle Javascripts (*.js) (*.js, zb. rollover.js) /scripts Alle CSS-Sheets (*.css files, zb.: default.css) /styles Alle Bilder (*.png, *.gif, *.jpg) /images Startpage / Default-page (je nach Provider) index.html Soviel wie möglich organisieren! Immer kleingeschrieben Dateinamen verwenden Ohne Leerräume, Umlaute und Sonderzeichen in den Dateien verwenden

Heimo ReiterWebkurs Selbsthilfegruppen Design mit CSS GRUNDPRINZIP Selector { Eigenschaft: Wert; } h1 { color : red; } Tag, Class, ID Eigenschaft, die verändert werden soll Konkreter Wert: Farbe, Pixel,...

Heimo ReiterWebkurs Selbsthilfegruppen Design mit CSS Hier steht der Titel! h1 { color: red; font-size:48px; } Das wird eine Überschrift Das wird ein Absatz

Heimo ReiterWebkurs Selbsthilfegruppen unmittelbare Ergänzung zu HTML – HTML = Content – CSS = Layout Einbindung: 1.Im Tag ( … ) 2.Im Bereich 3.Als externe Datei Sprache zur Definition von Formateigenschaften einzelner HTML-Tags. ZB: Alle Überschriften 1. Ordnung sollen folgendermaßen aussehen Schriftart Arial Schriftfarbe Grün und Kursiv CSS – Cascading Style Sheets

Heimo ReiterWebkurs Selbsthilfegruppen Begriffschaos JavaScript Flash Client PHP Domain IP-Nummer CMS Datenbank MySQL Redirect SEO

Heimo ReiterWebkurs Selbsthilfegruppen Client Server Internet 1. Anfrage 2. Antwort usw. orf.at

Heimo ReiterWebkurs Selbsthilfegruppen Clientseitige Programmiersprache – Läuft im Browser JavaScript-Programme wird eingebunden: –HTML-Datei direkt –separaten Datei (im referenziert). Javascript - Clientseitig

Heimo ReiterWebkurs Selbsthilfegruppen Formularüberprüfung Reagieren auf den/die BenutzerIn – Eventsteuerung Weiterleitung zu einer anderen Page Einblendung von Zusatzinformation Aufpoppen von Fenster Interaktive Werbebanner, Bannersteuerung Spiele Google-Analytics - Webseitstatistiken Javascript - Anwendungsmöglichkeiten

Heimo ReiterWebkurs Selbsthilfegruppen PHP – Hypertext Preprocessor Serverseitige Scriptsprache (aktuelle Version ~5.3) Scripts werden am Server ausgeführt werden Kennzeichen: *.php LAMP / WAMP: Linux / Windows + Apache + Mysql + PHP Direkt in der Html-Seite integrierbar Der/Die BenutzerIn sehen aber nur Html! Komplexere Anwendung sind damit realsierbar (Contentmanagementsystem, Shop, …)

Heimo ReiterWebkurs Selbsthilfegruppen PHP – Beispiel Hier steht der Titel! Jetzt ist: ERGEBNIS Jetzt ist: :32:55 Für kleine Anwendungen (zb. aktuelles Datum usw.) -> Code ist in HTML Code eingebettet und sieht so aus: Code zwischen „ “ Server Seite abgearbeitet ->Der Client erhält nur normalen HTML Code

Heimo ReiterWebkurs Selbsthilfegruppen PHP – Anwendungsgebiete Formularauswertung serverseitig (!) Guestbooks, Diskussionforen,... Redirect: UserInnen-Umleitung Online-Research (Webfragebogen) Usertracking („Sitzungen“) Personalisierte Webpages (mit Datenbankanbindung) Redaktionssystem – Contentmanagement ….