Embed Size (px)
Citation preview
Wie funktionieren Internetseiten?
Html und Co – Teil 2
Heimo Reiter
Heimo Reiter Webkurs Selbsthilfegruppen
• Einbindung durch Referenzierung
• Geeignete Dateiformate:
– *.GIF
– *.JPG,
– aber auch *.PNG
Einbindung von Bildern (img-Tag)
GRUNDPRINZIP
<img src=“bild1.jpg“ alt=“ein toller pinguin“ />
• Weitere Attribute:-> width, height, align
• Beispiel: <img src=“bild1.gif“ alt=“super“ width=“20“ height=“10“>
Heimo Reiter Webkurs Selbsthilfegruppen
Bild als Link
GRUNDPRINZIP
<a href=“http://www.orf.at“>
<img src=“bild1.jpg“ alt=“ein tolles bild“ />
</a>
Heimo Reiter Webkurs 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 Reiter Webkurs 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 Reiter Webkurs Selbsthilfegruppen
Design mit CSS<html> <head>
<title>Hier steht der Titel!</title> <style type="text/css">
h1 {color: red;font-size:48px;
}</style></head>
<body> <h1>Das wird eine Überschrift</h2>
<p>Das wird ein Absatz<p> </body> </html>
Heimo Reiter Webkurs Selbsthilfegruppen
• unmittelbare Ergänzung zu HTML– HTML = Content – CSS = Layout
• Einbindung: 1. Im Tag (<p style=„…“>…</p>)2. Im <HEAD></HEAD> Bereich3. Als externe Datei
• Sprache zur Definition von Formateigenschaften einzelner HTML-Tags. ZB: Alle Überschriften 1. Ordnung <h1> sollen folgendermaßen aussehen
• Schriftart Arial• Schriftfarbe Grün • und Kursiv
CSS – Cascading Style Sheets
Heimo Reiter Webkurs Selbsthilfegruppen
Begriffschaos
JavaSc
ript
FlashFlash
Client
PHP
Domain
IP-Nummer
88.198.25.44
CMS
Datenbank
MySQLRedirect
SEO
Heimo Reiter Webkurs Selbsthilfegruppen
Client <-> Server Internet
1. Anfrage
2. Antwortusw.
orf.at
Heimo Reiter Webkurs Selbsthilfegruppen
• Clientseitige Programmiersprache – Läuft im Browser
• JavaScript-Programme wird eingebunden:
– HTML-Datei direkt
– separaten Datei (im <head> referenziert).
Javascript - Clientseitig
Heimo Reiter Webkurs 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 Reiter Webkurs 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 Reiter Webkurs Selbsthilfegruppen
PHP – Beispiel
<html><head><title>Hier steht der Titel!</title></head> <body>
Jetzt ist: <?php echo date("d.m.y H:m:s"); ?>
</body> </html>
ERGEBNIS
Jetzt ist: 23.09.08 14:32:55
• Für kleine Anwendungen (zb. aktuelles Datum usw.) -> Code ist in HTML Code eingebettet und sieht so aus:
• Code zwischen „<?php“ und „?>“• Server Seite abgearbeitet
->Der Client erhält nur normalen HTML Code
Heimo Reiter Webkurs Selbsthilfegruppen
PHP – Anwendungsgebiete
• Formularauswertung serverseitig (!)• Guestbooks, Diskussionforen, ...• Redirect: UserInnen-Umleitung• Online-Research (Webfragebogen)• Usertracking („Sitzungen“)• Personalisierte Webpages (mit Datenbankanbindung)• Redaktionssystem – Contentmanagement• ….
