Webseiten für Fortgeschrittene HTML Teil 2 Orgakram: (Zeiten, Pausen, Namensschilder)

Webseiten für Webseiten für FortgeschritteneFortgeschrittene

HTML Teil 2HTML Teil 2

Orgakram: (Zeiten, Pausen, Orgakram: (Zeiten, Pausen, Namensschilder)Namensschilder)

HTML für FortgeschritteneAnja Slowinski –

www.slowinski.de.vu

Web-Techniken für Web-Techniken für Fortgeschrittene Fortgeschrittene

• Zweischneidigkeit von Techniken Zweischneidigkeit von Techniken wie wie – Javascript, BeispielJavascript, Beispiel– Flash, BeispielFlash, Beispiel– Quicktime, Beispiel Quicktime, Beispiel

• WAI, Benutzbarkeit wird auch den WAI, Benutzbarkeit wird auch den „Normalos„ erleichtert (alle Inhalte, „Normalos„ erleichtert (alle Inhalte, die _Nicht_ html sind) die _Nicht_ html sind) – animiertes gif als Hintergrundanimiertes gif als Hintergrund

Beispiel: Beispiel: http://http://www.dpgraph.comwww.dpgraph.com//, ,


www.slowinski.de.vu

GrundregelnGrundregeln

• Dateinamenkonventionen:Dateinamenkonventionen:– Keine UmlauteKeine Umlaute– Keine LeerzeichenKeine Leerzeichen– Keine SonderzeichenKeine Sonderzeichen– Alle Dateien mit .html als EndungAlle Dateien mit .html als Endung

• Speicherort für _alles_Speicherort für _alles_(auch Bilder): Desktop – public_html(auch Bilder): Desktop – public_html


www.slowinski.de.vu

Arbeitsumgebung Arbeitsumgebung einrichteneinrichten

• Alle Daten unter: Alle Daten unter: www.slowinski.de.vuwww.slowinski.de.vu herunterkopierenherunterkopieren– ProtonProton– Kursunterlagen (Arbeitsblatt.html, diese Folien)Kursunterlagen (Arbeitsblatt.html, diese Folien)

• Proton.zip auspacken startenProton.zip auspacken starten• Kurs.zip auspackenKurs.zip auspacken• Aufgaben.html im Browser (Firefox) und in Aufgaben.html im Browser (Firefox) und in

Proton öffnenProton öffnen• In zweitem Tab (Strg-T) In zweitem Tab (Strg-T) Stefan MStefan Münz ünz

Selfhtml öffnenSelfhtml öffnen


www.slowinski.de.vu

HTML WiederholungHTML Wiederholung

• Arbeitsblatt (Webadressen korrigieren)Arbeitsblatt (Webadressen korrigieren)

• Tagliste sammelnTagliste sammeln• Welche Tags sind besonders wichtig Welche Tags sind besonders wichtig

und warum?und warum?


www.slowinski.de.vu

CSS WiederholungCSS Wiederholung

• Beispiele für CSS-Eigenschaften Beispiele für CSS-Eigenschaften sammelnsammeln

• Arten der Verknüpfung:Arten der Verknüpfung:– Direkt (style=) als HTML-AttributDirekt (style=) als HTML-Attribut– Im HTML-HeadIm HTML-Head– In externer DateiIn externer Datei

• Sammeln: für welchen Zweck ist Sammeln: für welchen Zweck ist welche Verknüpfungsart sinnvoll?welche Verknüpfungsart sinnvoll?

• ArbeitsblattArbeitsblatt


www.slowinski.de.vu

CSS – was kann außer tags CSS – was kann außer tags noch umdefinieren?noch umdefinieren?

• SammlungSammlung


www.slowinski.de.vu

CSS - CSS - (einige Beispiele und (einige Beispiele und Übungen)Übungen)

• Tag (h1, p usw): Tag (h1, p usw): – erste Wahl, keine Änderung am Codeerste Wahl, keine Änderung am Code– nur begrenzte Anzahl von Tags zur Definition nur begrenzte Anzahl von Tags zur Definition

von Formaten vorhandenvon Formaten vorhanden

• Class: gleiches Tag unterschiedlich Class: gleiches Tag unterschiedlich formatierenformatieren– Formatierungen, für die es keine Tags gibtFormatierungen, für die es keine Tags gibt– HTML-Code muß geändert werdenHTML-Code muß geändert werden

• Ids: wie Klassen, nur einmalig im Ids: wie Klassen, nur einmalig im Dokument verwendbarDokument verwendbar


www.slowinski.de.vu

Übung: Listen Übung: Listen

• Standard: schwarze PunkteStandard: schwarze Punkte• Alternative Formatierungen:Alternative Formatierungen:

– Zahlen, Buchstaben, röm. ZiffernZahlen, Buchstaben, röm. Ziffern

• Hilfe: Selfhtml – CSS - CSS-Hilfe: Selfhtml – CSS - CSS-Eigenschaften - ListenformatierungEigenschaften - Listenformatierung

• ArbeitsblattArbeitsblatt• Eigener Listenpunkt: Grafik anstelle Eigener Listenpunkt: Grafik anstelle

des Punktes (nachmittag nach des Punktes (nachmittag nach Bildbearbeitung)Bildbearbeitung)


www.slowinski.de.vu

Übung: Liste als MenüÜbung: Liste als Menü

• Logisch eine Liste, sichtbar als Logisch eine Liste, sichtbar als (waagerechtes) Menü(waagerechtes) Menü

• Exkurs: tag-EigenschaftExkurs: tag-Eigenschaft– Block: Steht allein auf einer Zeile (z.B. h1, ul, Block: Steht allein auf einer Zeile (z.B. h1, ul,

li)li)– Inline Steht mit anderen Tags in einer Zeile Inline Steht mit anderen Tags in einer Zeile

(z.B strong)(z.B strong)• Ändern dieses Standards: Selfhtml – CSS Ändern dieses Standards: Selfhtml – CSS

– CSS-Eigenschaften – Positionierung – – CSS-Eigenschaften – Positionierung – displaydisplay

• Aufgabe in Testdatei lösenAufgabe in Testdatei lösen


www.slowinski.de.vu

Schlange aus RahmenSchlange aus Rahmen

• Langweiliges Beispiel: 3 divs mit Langweiliges Beispiel: 3 divs mit Rahmen rundherumRahmen rundherum

• Schickeres Beispiel: 3 divs mit S – Form Schickeres Beispiel: 3 divs mit S – Form (Rahmen nur oben/links/unten/rechts)(Rahmen nur oben/links/unten/rechts)

• Rahmen nur links/rechts zum Einsatz Rahmen nur links/rechts zum Einsatz bei hover als Verbesserung der bei hover als Verbesserung der LinkanzeigeLinkanzeige

• Hilfe: CSS-Eigenschaften – RahmenHilfe: CSS-Eigenschaften – Rahmen• Aufgabe in Testdatei lösenAufgabe in Testdatei lösen


www.slowinski.de.vu

AnordnungsmöglichkeiteAnordnungsmöglichkeitenn

• Klassisch: TabellenKlassisch: Tabellen– Vorteil: funktioniert einfachVorteil: funktioniert einfach– Nachteil: eigentlich ein Missbrauch des TagsNachteil: eigentlich ein Missbrauch des Tags

• Problematisch: Frames, iframesProblematisch: Frames, iframes– Nachteile: Sicherheit (Anzeige der wahren Nachteile: Sicherheit (Anzeige der wahren

URL), Ausdruck, Autor muß auf Verlinkung URL), Ausdruck, Autor muß auf Verlinkung achtenachten

– Vorteil: identische Navigation auf allen SeitenVorteil: identische Navigation auf allen Seiten

• Zeitgemäß, barrierearm: divZeitgemäß, barrierearm: div– Nachteil: alte Browser, IE fehlerhafte Nachteil: alte Browser, IE fehlerhafte

DarstellungDarstellung– Vorteil: barrierearmVorteil: barrierearm


www.slowinski.de.vu

FramesFrames

• Frameset-Seite ist zusammengesetzt Frameset-Seite ist zusammengesetzt aus mehreren HTML-Dateien, den aus mehreren HTML-Dateien, den FramesFrames

• Die Art der Zusammensetzung wird Die Art der Zusammensetzung wird über die Frameset-Datei bestimmt. über die Frameset-Datei bestimmt. Sie bildet den Rahmen, in dem die Sie bildet den Rahmen, in dem die anderen HTML-Dateien dargestellt anderen HTML-Dateien dargestellt werden.werden.


www.slowinski.de.vu

Was sind Frames?Was sind Frames?

• Aufteilung des Browsers in mehrere Aufteilung des Browsers in mehrere Fenster, jedes Fenster enthält eine WWW-Fenster, jedes Fenster enthält eine WWW-SeiteSeite

• Für alle Hypertextlinks muß der Autor ein Für alle Hypertextlinks muß der Autor ein sich für Zielfenster ("target") entscheidensich für Zielfenster ("target") entscheiden

• Probleme beim Anzeigen, Ausdrucken, mit Probleme beim Anzeigen, Ausdrucken, mit der der Sicherheit Sicherheit sind möglichsind möglich

• Es wird immer die gleiche Adresse Es wird immer die gleiche Adresse angezeigt (bei manchen Browsern angezeigt (bei manchen Browsern Probleme bei Setzen von Lesezeichen)Probleme bei Setzen von Lesezeichen)


www.slowinski.de.vu

iframesiframes

• Der coole kleine Bruder der FramesDer coole kleine Bruder der Frames• Leichtere Anwendung als ein Frameset Leichtere Anwendung als ein Frameset

(alles in einer Datei)(alles in einer Datei)• Ein iframe ist ein freier Platz (Fenster) Ein iframe ist ein freier Platz (Fenster)

auf der HTML-Seite, in dem andere auf der HTML-Seite, in dem andere Webseiten angezeigt werden.Webseiten angezeigt werden.

• Fügen Sie einen iframe ins Fügen Sie einen iframe ins Aufgabenblatt einAufgabenblatt ein

• Selfhtml – HTML – Frames – Selfhtml – HTML – Frames – Eingebettete FramesEingebettete Frames


www.slowinski.de.vu

Übung: Sprungziele in Übung: Sprungziele in Frames – 1er für alleFrames – 1er für alle

• Problem: klickt man einen link an, wird Problem: klickt man einen link an, wird die Seite im die Seite im gleichengleichen Frame dargestellt! Frame dargestellt! Die Seite mit dem iframe verschwindet, Die Seite mit dem iframe verschwindet, sobald man einen Link auf ihr anklickt.sobald man einen Link auf ihr anklickt.

• Lösung: Definieren Sie einen Lösung: Definieren Sie einen Standard-Standard-Ziel-FrameZiel-Frame (base target) (base target)

• Fügen Sie in den Header des Fügen Sie in den Header des Aufgabenblatts ein: Aufgabenblatts ein: <base target="mainFrame"><base target="mainFrame">


www.slowinski.de.vu

Übung Sprungziele: Übung Sprungziele: Link-Ziele einzeln setzenLink-Ziele einzeln setzen

• Öffnen Öffnen eineseines Links in einem neuen Fenster Links in einem neuen Fenster mit dem Attribut target/Ziel beim Link: mit dem Attribut target/Ziel beim Link: <a href=link.html target=_parent><a href=link.html target=_parent>

• Vorbelegte Targetname: Vorbelegte Targetname: – _top: alle Framesets werden beendet (bei _top: alle Framesets werden beendet (bei

geschachtelten F.)geschachtelten F.)– _blank : ein neues Fenster geht auf_blank : ein neues Fenster geht auf– _parent: das aktuelle Frameset wird beendet_parent: das aktuelle Frameset wird beendet


www.slowinski.de.vu

divdiv

• Über das Block-Tag: <div></div>Über das Block-Tag: <div></div>• Ältere Browser beherrschen das Ältere Browser beherrschen das

leider nicht soooleider nicht sooo• Teufel steckt im Detail (bei Teufel steckt im Detail (bei

Schriftgrößenänderung im IE zb)Schriftgrößenänderung im IE zb)


www.slowinski.de.vu

Eigenschaften des div-Eigenschaften des div-TagsTags

• Die Eigenschaften erhält die div-Die Eigenschaften erhält die div-Ebene durch Stylesheet-Ebene durch Stylesheet-Eigenschaften: Hintergrundbild, Eigenschaften: Hintergrundbild, Position, Größe, Überlappungen, Position, Größe, Überlappungen, SichtbarkeitSichtbarkeit

• Positionierung von div:Positionierung von div:– absolut (Pixel)absolut (Pixel)– %-Angaben%-Angaben


www.slowinski.de.vu

FarbdarstellungFarbdarstellung

• RRGGBB-Konzept (Monitor, Beamer = -Konzept (Monitor, Beamer = Lichtfarben = additives Farbkonzept) (Rot-Lichtfarben = additives Farbkonzept) (Rot-Grün-Blau), Mischung per Wert von 00 Grün-Blau), Mischung per Wert von 00 (=keine Farbe), FF (= Maximum)(=keine Farbe), FF (= Maximum)

• z.B blauer Text: z.B blauer Text: <p style="color="#<p style="color="#00000000FFFF">blau</p>">blau</p>

• Subtraktives Farbkonzept (Farbkasten, Subtraktives Farbkonzept (Farbkasten, Körperfarben: Grundfarben: Rot Gelb Blau)Körperfarben: Grundfarben: Rot Gelb Blau)

• Druckfarben: CMYK (Cyan, Magenta, Druckfarben: CMYK (Cyan, Magenta, Yellow, blacK)Yellow, blacK)

• Aufgabenblatt: Farben mischenAufgabenblatt: Farben mischen


www.slowinski.de.vu

Bild (Bildbearbeitung) Bild (Bildbearbeitung) IrfanviewIrfanview

• Entwickelt von Mitarbeiter der Uni Entwickelt von Mitarbeiter der Uni Wien mit Vornamen IrfanWien mit Vornamen Irfan

• Frei verfügbar für private und Frei verfügbar für private und schulische Anwendungschulische Anwendung– Zur KonvertierungZur Konvertierung– Für AusschnitteFür Ausschnitte– Graustufen und andere FilterGraustufen und andere Filter

• Start – Alle Programme - IrfanViewStart – Alle Programme - IrfanView


www.slowinski.de.vu

Bildformate, BildgrößeBildformate, Bildgröße

• Bild direkt aus der Kamera Bild direkt aus der Kamera verwendenverwenden

• Wie groß ist das Bild? Welches Wie groß ist das Bild? Welches Format hat es?Format hat es?

• Probieren Sie aus, welche Bildformate Probieren Sie aus, welche Bildformate sich anzeigen lassen. (Liste von sich anzeigen lassen. (Liste von Testbildern in der Testdatei)Testbildern in der Testdatei)

• Aufgabe in Testdatei lösenAufgabe in Testdatei lösen


www.slowinski.de.vu

Bildgröße ändernBildgröße ändern

• Wie groß ist der Bildschirm ihres PCs Wie groß ist der Bildschirm ihres PCs daheim?daheim?

• Bekannte Werte SammelnBekannte Werte Sammeln• Was passiert, wenn das Bild nicht auf Was passiert, wenn das Bild nicht auf

den Bildschirm passt?den Bildschirm passt?• Bildgröße verkleinern (Irfanview – Bildgröße verkleinern (Irfanview –

Bearbeiten – Resize / Resample)Bearbeiten – Resize / Resample)• Bildgröße per HTML verkleinern. Wie? Bildgröße per HTML verkleinern. Wie?

Warum ist das eine schlechte Idee?Warum ist das eine schlechte Idee?


www.slowinski.de.vu

Übung: HintergrundbildÜbung: Hintergrundbild

• Standard und einzige Möglichkeit direkt Standard und einzige Möglichkeit direkt in HTML: Das Bild wird so oft wiederholt, in HTML: Das Bild wird so oft wiederholt, dass der ganze Hintergrund ausgefüllt ist.dass der ganze Hintergrund ausgefüllt ist.

• Das Bild ist dabei Teil der Das Bild ist dabei Teil der SeiteneigenschaftenSeiteneigenschaften

• Ändere das Aufgabenblatt, so dass die Ändere das Aufgabenblatt, so dass die Viehweide als Hintergrund erscheint:Viehweide als Hintergrund erscheint: <body background=" <body background="viehweide.jpgviehweide.jpg">">

• Rhetorische Frage: Ist das ein "gutes" Rhetorische Frage: Ist das ein "gutes" Hintergrundbild?Hintergrundbild?


www.slowinski.de.vu

Probleme bei Probleme bei HintergrundbildernHintergrundbildern

• Kaum ein Bild ist dafür geeignet: Kaum ein Bild ist dafür geeignet: entweder es ist zu klein, zu bunt, der entweder es ist zu klein, zu bunt, der Kacheleffekt ist unschön, oder es Kacheleffekt ist unschön, oder es vereint alle diese Nachteile.vereint alle diese Nachteile.

• Wir lernen im Folgenden, wie man Wir lernen im Folgenden, wie man die Kacheln "saumlos", also ohne die Kacheln "saumlos", also ohne Rand erzeugt und die Bilder in Rand erzeugt und die Bilder in Helligkeit und Kontrast verändert.Helligkeit und Kontrast verändert.


www.slowinski.de.vu

Übung: Kacheln Übung: Kacheln erzeugen (Photoshop)erzeugen (Photoshop)

• Neues Bild anlegen: kachel.jpg (200x200 pixel)Neues Bild anlegen: kachel.jpg (200x200 pixel)• Etwas mit dem Stift oder anderem Werkzeug Etwas mit dem Stift oder anderem Werkzeug

zeichnenzeichnen• Haben Sie beim Zeichnen mehrere Ebenen erzeugt? Haben Sie beim Zeichnen mehrere Ebenen erzeugt?

Dann auf: Ebene – Auf Hintergrundebene reduzierenDann auf: Ebene – Auf Hintergrundebene reduzieren• Auf "Filter – Sonstige Filter – Verschiebungseffekt" Auf "Filter – Sonstige Filter – Verschiebungseffekt"

gehen, (jeweils 80 Pixel eingestellt lassen) gehen, (jeweils 80 Pixel eingestellt lassen) • Jetzt sind die Ränder in der Mitte und können bemalt Jetzt sind die Ränder in der Mitte und können bemalt

und gut verbunden werden.und gut verbunden werden.• Die Schritte Verschieben und bemalen mehrmals Die Schritte Verschieben und bemalen mehrmals

wiederholen, bis Sie keine Fehler mehr sehen.wiederholen, bis Sie keine Fehler mehr sehen.• Datei – Für Web speichernDatei – Für Web speichern• Verwenden Sie das kachel.jpg als Hintergrundbild in Verwenden Sie das kachel.jpg als Hintergrundbild in

dem div-Tag Aufgabenblatts.dem div-Tag Aufgabenblatts.


www.slowinski.de.vu

Übung: Hintergrundbild Übung: Hintergrundbild erzeugen (Photoshop)erzeugen (Photoshop)

• Nimm ein Bild und öffne es in PhotoshopNimm ein Bild und öffne es in Photoshop• Bild aufhellen: Bild – Anpassen – Farbton / Bild aufhellen: Bild – Anpassen – Farbton /

SättigungSättigung• Farbton wählen, Sättigung verringern, Farbton wählen, Sättigung verringern,

Helligkeit erhöhen. „Färben“ anhaken.Helligkeit erhöhen. „Färben“ anhaken.• Datei – Für Web speichern. Datei – Für Web speichern. • Von Gif auf jpg umstellen (Platz sparen).Von Gif auf jpg umstellen (Platz sparen).• Das Bild als Hintergrund einbinden in den Das Bild als Hintergrund einbinden in den

body der Aufgabendatei. body der Aufgabendatei.


www.slowinski.de.vu

Bild mit weichem Bild mit weichem Übergang zur Übergang zur

HintergrundfarbeHintergrundfarbe• Ziel: Das Bild soll saumlos in die Ziel: Das Bild soll saumlos in die Hintergrundfarbe der Webseite übergehenHintergrundfarbe der Webseite übergehen– Auf Vordergrundfarbe klicken, im Auf Vordergrundfarbe klicken, im

Farbwählerfenster den Hexwert der Farbe Farbwählerfenster den Hexwert der Farbe unten rechts eintippenunten rechts eintippen

– Verlaufswerkzeug auswählen (länger auf den Verlaufswerkzeug auswählen (länger auf den Gießeimer drückenGießeimer drücken

• Vordergrundfarbe = Hintergrundfarbe der Vordergrundfarbe = Hintergrundfarbe der Webseite, in die das Bild eingebaut wird:Webseite, in die das Bild eingebaut wird:

• Optionenmenü durchsichtigen Verlauf Optionenmenü durchsichtigen Verlauf auswählenauswählen


www.slowinski.de.vu

Fotogalerie mit Adobe Fotogalerie mit Adobe PhotoshopPhotoshop

• Legen Sie mit dem Datei-Explorer 2 Legen Sie mit dem Datei-Explorer 2 Verzeichnisse in Dokumente an:Verzeichnisse in Dokumente an:– Quelle (dahin kopieren Sie alle Bilder der Quelle (dahin kopieren Sie alle Bilder der

Übung)Übung)– Ziel (das bleibt leer. Dahin erzeugt Photoshop Ziel (das bleibt leer. Dahin erzeugt Photoshop

alle Webseiten und web-optimierten Bilder)alle Webseiten und web-optimierten Bilder)

• Photoshop: Datei – Automatisieren –Web Photoshop: Datei – Automatisieren –Web Photo GalleryPhoto Gallery

• Quelle und Ziel wählen, alle Kategorien Quelle und Ziel wählen, alle Kategorien füllenfüllen


www.slowinski.de.vu

Fotogalerie Fotogalerie FeineinstellungenFeineinstellungen

• Daten wie Titel, Beschreibung und mehr sind Daten wie Titel, Beschreibung und mehr sind Metadaten. U.a. in psd und jpg-Dateien Metadaten. U.a. in psd und jpg-Dateien speicherbar.speicherbar.

• Diese Beschreibungen tragen Sie im Diese Beschreibungen tragen Sie im Photoshop ein.Photoshop ein.– Bild öffnenBild öffnen– bei "Datei - Dateiinformation„bei "Datei - Dateiinformation„– Titel und Beschreibung eintragenTitel und Beschreibung eintragen

• Nicht jedes Galerie-Template zeigt Nicht jedes Galerie-Template zeigt Beschreibungen an (auf Texte in der Beschreibungen an (auf Texte in der Voransicht achten)! Voransicht achten)!


www.slowinski.de.vu

Zusatzübung: Zusatzübung: Fotogalerie - Fotogalerie - MetaangabenMetaangaben

• Optionen: bei Allgemein „Meta-Optionen: bei Allgemein „Meta-Angaben“ und bei „Große Bilder" die Angaben“ und bei „Große Bilder" die Felder, die übernommen werden Felder, die übernommen werden sollen, anklicken.sollen, anklicken.


www.slowinski.de.vu

Zusatzübungen: Zusatzübungen: SchlagschattenSchlagschatten

– Sie brauchen ein wenig Rand ums Bild: Sie brauchen ein wenig Rand ums Bild: • „„Fenster – Ebene“, doppelt auf Ebene klicken. OK.Fenster – Ebene“, doppelt auf Ebene klicken. OK.• Statt Hintergrund steht da „Ebene 0“Statt Hintergrund steht da „Ebene 0“• Bild - Arbeitsfläche. Vergrößern Sie bei "Neue Bild - Arbeitsfläche. Vergrößern Sie bei "Neue

Größe" Breite und Höhe um zb um 1/2 cm zu. OK. Größe" Breite und Höhe um zb um 1/2 cm zu. OK. • Der Rand muß kariert (=durchsichtig) sein!Der Rand muß kariert (=durchsichtig) sein!

– Schlagschatten anlegen:Schlagschatten anlegen:• Nochmal doppelt auf Ebene klickenNochmal doppelt auf Ebene klicken• Fenster Ebenenstil geht auf. Fenster Ebenenstil geht auf. • im linken Teil "Schlagschatten" anklicken im linken Teil "Schlagschatten" anklicken • Definieren Sie Intensität, Winkel, Abstand ( Haken Definieren Sie Intensität, Winkel, Abstand ( Haken

"Vorschau" soll an sein)"Vorschau" soll an sein)


www.slowinski.de.vu

Transparente gifs Transparente gifs (Vorbereitung (Vorbereitung

selbstgemachte selbstgemachte Listenpunkte)Listenpunkte)• In Photoshop transparenten Bereich auswählen:In Photoshop transparenten Bereich auswählen:

– Werkzeugleiste die Auswahlellipse (oberstes links, Werkzeugleiste die Auswahlellipse (oberstes links, länger gedrückt halten!)länger gedrückt halten!)

– Weiche Übergänge? Optionsfenster (obere Kante) Weiche Übergänge? Optionsfenster (obere Kante) Weiche Kante auf 10 pxWeiche Kante auf 10 px

• Der Rest vom Bild kann weg: Menü Bild - Der Rest vom Bild kann weg: Menü Bild - FreistellenFreistellen

• alles, was transparent wird, soll markiert sein:alles, was transparent wird, soll markiert sein:– Menü Auswahl - Auswahl umkehren. Menü Auswahl - Auswahl umkehren.

• Transparenz für ausgewählten Bereich Transparenz für ausgewählten Bereich einstellen:einstellen:– Hilfe - Transparentes Bild exportierenHilfe - Transparentes Bild exportieren– „„Trans. Bereich ausgewählt“ – weiter – online – w. - Trans. Bereich ausgewählt“ – weiter – online – w. -

png bei Fotos,png bei Fotos,


www.slowinski.de.vu

Flash-Objekt integrierenFlash-Objekt integrieren

• (object-Tag) flash einzubinden (object-Tag) flash einzubinden funktioniert über das object und das funktioniert über das object und das embed – Tagembed – Tag

• Komplizierter ist es, eine Flashdatei Komplizierter ist es, eine Flashdatei zu erzeugenzu erzeugen

• Daher hier im Arbeitsblatt eine Daher hier im Arbeitsblatt eine vorbereitete Dateivorbereitete Datei


www.slowinski.de.vu

FormularelementeFormularelemente• Neben ein- und mehrzeiligem Text (beides unter Neben ein- und mehrzeiligem Text (beides unter

"Textfeld")<input type="Textfeld")<input type=texttext … …<textarea …<textarea …

• Radio Buttons (immer nur Radio Buttons (immer nur einereiner ist "an") ist "an")<input type=<input type=radioradio … …

• Checkbox (mehrere anklickbar)Checkbox (mehrere anklickbar)<input type=<input type=checkboxcheckbox … …

• Aufklappmenüs <select …><option…Aufklappmenüs <select …><option…• Wichtig: Der Abschickknopf! SubmitWichtig: Der Abschickknopf! Submit

<input type=<input type=submitsubmit• Versteckte Felder:Versteckte Felder:

<input type=<input type=hiddenhidden


www.slowinski.de.vu

Welches Element für Welches Element für welchen Zweck?welchen Zweck?

1.1. Wenige Worte:<input type=Wenige Worte:<input type=texttext … …2.2. Mehrere Sätze: <textarea …Mehrere Sätze: <textarea …3.3. Eine Antwort (zb ja/nein) <input Eine Antwort (zb ja/nein) <input

type=type=radioradio4.4. Mehrere Antworten Mehrere Antworten

möglich:<input type=möglich:<input type=checkboxcheckbox … …5.5. Große Auswahl: <select><option…Große Auswahl: <select><option…


www.slowinski.de.vu

Programmieren im WWWProgrammieren im WWW

• Wo ist die Intelligenz, d. h. das Wo ist die Intelligenz, d. h. das Programm, das die Dynamik Programm, das die Dynamik erreicht?erreicht?

• auf der Serverseite: CGI, php, SSI, auf der Serverseite: CGI, php, SSI, phpphp

• auf der Browserseite: JAVA, auf der Browserseite: JAVA, embedded Javascript/Jscript, embedded Javascript/Jscript, Vbscript …Vbscript …


www.slowinski.de.vu

Interaktivität: Interaktivität: ServerseitigServerseitig

WWW-ServerWWW-Browser

OK

Formular

http://host.de/script.pl?Feld=Inhalt&Feld2=Inhalt2

<form action="script.pl" method="POST">

Rückmeldung als HTML-Datei oder URL

Script.plFeld1 Inhalt1Feld2 Inhalt2... Verarbeitung

Ergebnis

method="GET"

stdin "Feld=Inhalt&Feld2=Inhalt2"


www.slowinski.de.vu

Interaktivität: Interaktivität: BrowserseitigBrowserseitig

WWW-ServerWWW-Browser

Javascript / Java Bytecode

HTML-Datei

Ausführung: unabhängig vom Browser


www.slowinski.de.vu

JavascriptJavascript

• Komplette Programmiersprache, nichts Komplette Programmiersprache, nichts für „mal nebenbei“für „mal nebenbei“

• Das Script "verbirgt" sich in der HTML-Das Script "verbirgt" sich in der HTML-DateiDatei

• Interpretation der Daten beim LadenInterpretation der Daten beim Laden• "Event"-gesteuerte Sprache: man kann "Event"-gesteuerte Sprache: man kann

Mausklicks und Eingaben abfangen und Mausklicks und Eingaben abfangen und Aktionen des Programms daranhängenAktionen des Programms daranhängen

• Aufgabenblatt: vorbereitetes JavascriptAufgabenblatt: vorbereitetes Javascript


www.slowinski.de.vu

Javascript am Beispiel Javascript am Beispiel (Uhrzeit, Datum)(Uhrzeit, Datum)


www.slowinski.de.vu

Javascript Javascript (Formulareingabe)(Formulareingabe)


www.slowinski.de.vu

Gästebuch/ForumGästebuch/Forum

• ibooxiboox


www.slowinski.de.vu

Arbeiten mit vorbereiteten Arbeiten mit vorbereiteten WebdateienWebdateien

• Templates zb unter: http://www.on-Templates zb unter: http://www.on-mouseover.de/templates/templates.hmouseover.de/templates/templates.htmltml


www.slowinski.de.vu

CMS – BeispieleCMS – Beispiele

• Zope-Plone (www.zope.org)Zope-Plone (www.zope.org)• ZMS ZMS • Typo4Typo4• ReddotReddot


www.slowinski.de.vu

SuchmaschinenoptimieruSuchmaschinenoptimierungng

• TitleTitle• ÜberschriftenÜberschriften• Meta-tagsMeta-tags• Verlinkung durch andere Verlinkung durch andere


www.slowinski.de.vu

Eigener DomainnameEigener Domainname

• Um privat Webseiten zu betreiben, Um privat Webseiten zu betreiben, wenden Sie sich an einen Providerwenden Sie sich an einen Provider

• Dieser gibt Ihnen Speicherplatz und Dieser gibt Ihnen Speicherplatz und DomainnamenDomainnamen

• Sie bekommen dort einen Sie bekommen dort einen Benutzernamen, Passwort und einen Benutzernamen, Passwort und einen Server genannt, auf den sie Ihre Server genannt, auf den sie Ihre Webseiten kopierenWebseiten kopieren


www.slowinski.de.vu

Übung: Suchmaschinen- Übung: Suchmaschinen- unterstützungunterstützung

• Zweck: Suchmaschinen werten diese Headertags Zweck: Suchmaschinen werten diese Headertags oft mit höherer Priorität aus.oft mit höherer Priorität aus.

• <meta name="keywords" content=„Stichwort1, Stichwort2"><meta name="keywords" content=„Stichwort1, Stichwort2"> • Test nicht möglich, da die Seite in der Test nicht möglich, da die Seite in der

Suchmaschine nicht gefunden wird.Suchmaschine nicht gefunden wird.• DAMIT Sie gefunden wird, muß sie verlinkt sein! DAMIT Sie gefunden wird, muß sie verlinkt sein!

( zb in yahoo: "Website vorschlagen" oder bei ( zb in yahoo: "Website vorschlagen" oder bei Google im Verzeichnis unter „URL anmelden“)Google im Verzeichnis unter „URL anmelden“)

Documents

Webseiten für Fortgeschrittene HTML Teil 2 Orgakram: (Zeiten, Pausen, Namensschilder)