Webseiten für Fortgeschrittene HTML Teil 2

Präsentation zum Thema: "Webseiten für Fortgeschrittene HTML Teil 2"—  Präsentation transkript:

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

2 Web-Techniken für Fortgeschrittene
Zweischneidigkeit von Techniken wie Javascript, Beispiel Flash, Beispiel Quicktime, Beispiel WAI, Benutzbarkeit wird auch den „Normalos„ erleichtert (alle Inhalte, die _Nicht_ html sind) animiertes gif als Hintergrund Beispiel: HTML für Fortgeschrittene Anja Slowinski –

3 Grundregeln Dateinamenkonventionen:
Keine Umlaute Keine Leerzeichen Keine Sonderzeichen Alle Dateien mit .html als Endung Speicherort für _alles_ (auch Bilder): Desktop – public_html HTML für Fortgeschrittene Anja Slowinski –

4 Arbeitsumgebung einrichten
Alle Daten unter: herunterkopieren Proton Kursunterlagen (Arbeitsblatt.html, diese Folien) Proton.zip auspacken starten Kurs.zip auspacken Aufgaben.html im Browser (Firefox) und in Proton öffnen In zweitem Tab (Strg-T) Stefan Münz Selfhtml öffnen HTML für Fortgeschrittene Anja Slowinski –

5 HTML Wiederholung Tagliste sammeln
Arbeitsblatt (Webadressen korrigieren) Tagliste sammeln Welche Tags sind besonders wichtig und warum? Title, hx, alt, HTML für Fortgeschrittene Anja Slowinski –

6 CSS Wiederholung Beispiele für CSS-Eigenschaften sammeln
Arten der Verknüpfung: Direkt (style=) als HTML-Attribut Im HTML-Head In externer Datei Sammeln: für welchen Zweck ist welche Verknüpfungsart sinnvoll? Arbeitsblatt Jeweils hinschreiben auf das DIN-A 3 Blatt zur ständigen Ansicht: Beispiele und HTML für Fortgeschrittene Anja Slowinski –

7 CSS – was kann außer tags noch umdefinieren?
Sammlung HTML für Fortgeschrittene Anja Slowinski –

8 CSS - (einige Beispiele und Übungen)
Tag (h1, p usw): erste Wahl, keine Änderung am Code nur begrenzte Anzahl von Tags zur Definition von Formaten vorhanden Class: gleiches Tag unterschiedlich formatieren Formatierungen, für die es keine Tags gibt HTML-Code muß geändert werden Ids: wie Klassen, nur einmalig im Dokument verwendbar HTML für Fortgeschrittene Anja Slowinski –

9 Übung: Listen Standard: schwarze Punkte Alternative Formatierungen:
Zahlen, Buchstaben, röm. Ziffern Hilfe: Selfhtml – CSS - CSS-Eigenschaften - Listenformatierung Arbeitsblatt Eigener Listenpunkt: Grafik anstelle des Punktes (nachmittag nach Bildbearbeitung) HTML für Fortgeschrittene Anja Slowinski –

10 Übung: Liste als Menü Logisch eine Liste, sichtbar als (waagerechtes) Menü Exkurs: tag-Eigenschaft Block: Steht allein auf einer Zeile (z.B. h1, ul, li) Inline Steht mit anderen Tags in einer Zeile (z.B strong) Ändern dieses Standards: Selfhtml – CSS – CSS-Eigenschaften – Positionierung – display Aufgabe in Testdatei lösen HTML für Fortgeschrittene Anja Slowinski –

11 Schlange aus Rahmen Langweiliges Beispiel: 3 divs mit Rahmen rundherum
Schickeres Beispiel: 3 divs mit S – Form (Rahmen nur oben/links/unten/rechts) Rahmen nur links/rechts zum Einsatz bei hover als Verbesserung der Linkanzeige Hilfe: CSS-Eigenschaften – Rahmen Aufgabe in Testdatei lösen HTML für Fortgeschrittene Anja Slowinski –

12 Anordnungsmöglichkeiten
Klassisch: Tabellen Vorteil: funktioniert einfach Nachteil: eigentlich ein Missbrauch des Tags Problematisch: Frames, iframes Nachteile: Sicherheit (Anzeige der wahren URL), Ausdruck, Autor muß auf Verlinkung achten Vorteil: identische Navigation auf allen Seiten Zeitgemäß, barrierearm: div Nachteil: alte Browser, IE fehlerhafte Darstellung Vorteil: barrierearm HTML für Fortgeschrittene Anja Slowinski –

13 Frames Frameset-Seite ist zusammengesetzt aus mehreren HTML-Dateien, den Frames Die Art der Zusammensetzung wird über die Frameset-Datei bestimmt. Sie bildet den Rahmen, in dem die anderen HTML-Dateien dargestellt werden. HTML für Fortgeschrittene Anja Slowinski –

14 Was sind Frames? Aufteilung des Browsers in mehrere Fenster, jedes Fenster enthält eine WWW-Seite Für alle Hypertextlinks muß der Autor ein sich für Zielfenster ("target") entscheiden Probleme beim Anzeigen, Ausdrucken, mit der Sicherheit sind möglich Es wird immer die gleiche Adresse angezeigt (bei manchen Browsern Probleme bei Setzen von Lesezeichen) HTML für Fortgeschrittene Anja Slowinski –

15 iframes Der coole kleine Bruder der Frames
Leichtere Anwendung als ein Frameset (alles in einer Datei) Ein iframe ist ein freier Platz (Fenster) auf der HTML-Seite, in dem andere Webseiten angezeigt werden. Fügen Sie einen iframe ins Aufgabenblatt ein Selfhtml – HTML – Frames – Eingebettete Frames HTML für Fortgeschrittene Anja Slowinski –

16 Übung: Sprungziele in Frames – 1er für alle
Problem: klickt man einen link an, wird die Seite im gleichen Frame dargestellt! Die Seite mit dem iframe verschwindet, sobald man einen Link auf ihr anklickt. Lösung: Definieren Sie einen Standard-Ziel-Frame (base target) Fügen Sie in den Header des Aufgabenblatts ein: <base target="mainFrame"> HTML für Fortgeschrittene Anja Slowinski –

17 Übung Sprungziele: Link-Ziele einzeln setzen
Öffnen eines Links in einem neuen Fenster mit dem Attribut target/Ziel beim Link: <a href=link.html target=_parent> Vorbelegte Targetname: _top: alle Framesets werden beendet (bei geschachtelten F.) _blank : ein neues Fenster geht auf _parent: das aktuelle Frameset wird beendet HTML für Fortgeschrittene Anja Slowinski –

18 div Über das Block-Tag: <div></div>
Ältere Browser beherrschen das leider nicht sooo Teufel steckt im Detail (bei Schriftgrößenänderung im IE zb) HTML für Fortgeschrittene Anja Slowinski –

19 Eigenschaften des div-Tags
Die Eigenschaften erhält die div-Ebene durch Stylesheet-Eigenschaften: Hintergrundbild, Position, Größe, Überlappungen, Sichtbarkeit Positionierung von div: absolut (Pixel) %-Angaben HTML für Fortgeschrittene Anja Slowinski –

20 Farbdarstellung RGB-Konzept (Monitor, Beamer = Lichtfarben = additives Farbkonzept) (Rot-Grün-Blau), Mischung per Wert von 00 (=keine Farbe), FF (= Maximum) z.B blauer Text: <p style="color="#0000FF">blau</p> Subtraktives Farbkonzept (Farbkasten, Körperfarben: Grundfarben: Rot Gelb Blau) Druckfarben: CMYK (Cyan, Magenta, Yellow, blacK) Aufgabenblatt: Farben mischen HTML für Fortgeschrittene Anja Slowinski –

21 Bild (Bildbearbeitung) Irfanview
Entwickelt von Mitarbeiter der Uni Wien mit Vornamen Irfan Frei verfügbar für private und schulische Anwendung Zur Konvertierung Für Ausschnitte Graustufen und andere Filter Start – Alle Programme - IrfanView HTML für Fortgeschrittene Anja Slowinski –

22 Bildformate, Bildgröße
Bild direkt aus der Kamera verwenden Wie groß ist das Bild? Welches Format hat es? Probieren Sie aus, welche Bildformate sich anzeigen lassen. (Liste von Testbildern in der Testdatei) Aufgabe in Testdatei lösen HTML für Fortgeschrittene Anja Slowinski –

23 Bildgröße ändern Wie groß ist der Bildschirm ihres PCs daheim?
Bekannte Werte Sammeln Was passiert, wenn das Bild nicht auf den Bildschirm passt? Bildgröße verkleinern (Irfanview – Bearbeiten – Resize / Resample) Bildgröße per HTML verkleinern. Wie? Warum ist das eine schlechte Idee? HTML für Fortgeschrittene Anja Slowinski –

24 Übung: Hintergrundbild
Standard und einzige Möglichkeit direkt in HTML: Das Bild wird so oft wiederholt, dass der ganze Hintergrund ausgefüllt ist. Das Bild ist dabei Teil der Seiteneigenschaften Ändere das Aufgabenblatt, so dass die Viehweide als Hintergrund erscheint: <body background="viehweide.jpg"> Rhetorische Frage: Ist das ein "gutes" Hintergrundbild? HTML für Fortgeschrittene Anja Slowinski –

25 Probleme bei Hintergrundbildern
Kaum ein Bild ist dafür geeignet: entweder es ist zu klein, zu bunt, der Kacheleffekt ist unschön, oder es vereint alle diese Nachteile. Wir lernen im Folgenden, wie man die Kacheln "saumlos", also ohne Rand erzeugt und die Bilder in Helligkeit und Kontrast verändert. HTML für Fortgeschrittene Anja Slowinski –

26 Übung: Kacheln erzeugen (Photoshop)
Neues Bild anlegen: kachel.jpg (200x200 pixel) Etwas mit dem Stift oder anderem Werkzeug zeichnen Haben Sie beim Zeichnen mehrere Ebenen erzeugt? Dann auf: Ebene – Auf Hintergrundebene reduzieren Auf "Filter – Sonstige Filter – Verschiebungseffekt" gehen, (jeweils 80 Pixel eingestellt lassen) Jetzt sind die Ränder in der Mitte und können bemalt und gut verbunden werden. Die Schritte Verschieben und bemalen mehrmals wiederholen, bis Sie keine Fehler mehr sehen. Datei – Für Web speichern Verwenden Sie das kachel.jpg als Hintergrundbild in dem div-Tag Aufgabenblatts. HTML für Fortgeschrittene Anja Slowinski –

27 Übung: Hintergrundbild erzeugen (Photoshop)
Nimm ein Bild und öffne es in Photoshop Bild aufhellen: Bild – Anpassen – Farbton / Sättigung Farbton wählen, Sättigung verringern, Helligkeit erhöhen. „Färben“ anhaken. Datei – Für Web speichern. Von Gif auf jpg umstellen (Platz sparen). Das Bild als Hintergrund einbinden in den body der Aufgabendatei. HTML für Fortgeschrittene Anja Slowinski –

28 Bild mit weichem Übergang zur Hintergrundfarbe
Ziel: Das Bild soll saumlos in die Hintergrundfarbe der Webseite übergehen Auf Vordergrundfarbe klicken, im Farbwählerfenster den Hexwert der Farbe unten rechts eintippen Verlaufswerkzeug auswählen (länger auf den Gießeimer drücken Vordergrundfarbe = Hintergrundfarbe der Webseite, in die das Bild eingebaut wird: Optionenmenü durchsichtigen Verlauf auswählen HTML für Fortgeschrittene Anja Slowinski –

29 Fotogalerie mit Adobe Photoshop
Legen Sie mit dem Datei-Explorer 2 Verzeichnisse in Dokumente an: Quelle (dahin kopieren Sie alle Bilder der Übung) Ziel (das bleibt leer. Dahin erzeugt Photoshop alle Webseiten und web-optimierten Bilder) Photoshop: Datei – Automatisieren –Web Photo Gallery Quelle und Ziel wählen, alle Kategorien füllen HTML für Fortgeschrittene Anja Slowinski –

30 Fotogalerie Feineinstellungen
Daten wie Titel, Beschreibung und mehr sind Metadaten. U.a. in psd und jpg-Dateien speicherbar. Diese Beschreibungen tragen Sie im Photoshop ein. Bild öffnen bei "Datei - Dateiinformation„ Titel und Beschreibung eintragen Nicht jedes Galerie-Template zeigt Beschreibungen an (auf Texte in der Voransicht achten)! HTML für Fortgeschrittene Anja Slowinski –

31 Zusatzübung: Fotogalerie - Metaangaben
Optionen: bei Allgemein „Meta-Angaben“ und bei „Große Bilder" die Felder, die übernommen werden sollen, anklicken. HTML für Fortgeschrittene Anja Slowinski –

32 Zusatzübungen: Schlagschatten
Sie brauchen ein wenig Rand ums Bild: „Fenster – Ebene“, doppelt auf Ebene klicken. OK. Statt Hintergrund steht da „Ebene 0“ Bild - Arbeitsfläche. Vergrößern Sie bei "Neue Größe" Breite und Höhe um zb um 1/2 cm zu. OK. Der Rand muß kariert (=durchsichtig) sein! Schlagschatten anlegen: Nochmal doppelt auf Ebene klicken Fenster Ebenenstil geht auf. im linken Teil "Schlagschatten" anklicken Definieren Sie Intensität, Winkel, Abstand ( Haken "Vorschau" soll an sein) HTML für Fortgeschrittene Anja Slowinski –

33 Transparente gifs (Vorbereitung selbstgemachte Listenpunkte)
In Photoshop transparenten Bereich auswählen: Werkzeugleiste die Auswahlellipse (oberstes links, länger gedrückt halten!) Weiche Übergänge? Optionsfenster (obere Kante) Weiche Kante auf 10 px Der Rest vom Bild kann weg: Menü Bild - Freistellen alles, was transparent wird, soll markiert sein: Menü Auswahl - Auswahl umkehren. Transparenz für ausgewählten Bereich einstellen: Hilfe - Transparentes Bild exportieren „Trans. Bereich ausgewählt“ – weiter – online – w. - png bei Fotos, HTML für Fortgeschrittene Anja Slowinski –

34 Flash-Objekt integrieren
(object-Tag) flash einzubinden funktioniert über das object und das embed – Tag Komplizierter ist es, eine Flashdatei zu erzeugen Daher hier im Arbeitsblatt eine vorbereitete Datei HTML für Fortgeschrittene Anja Slowinski –

35 Formularelemente Neben ein- und mehrzeiligem Text (beides unter "Textfeld")<input type=text … <textarea … Radio Buttons (immer nur einer ist "an") <input type=radio … Checkbox (mehrere anklickbar) <input type=checkbox … Aufklappmenüs <select …><option… Wichtig: Der Abschickknopf! Submit <input type=submit Versteckte Felder: <input type=hidden HTML für Fortgeschrittene Anja Slowinski –

36 Welches Element für welchen Zweck?
Wenige Worte:<input type=text … Mehrere Sätze: <textarea … Eine Antwort (zb ja/nein) <input type=radio Mehrere Antworten möglich:<input type=checkbox … Große Auswahl: <select><option… HTML für Fortgeschrittene Anja Slowinski –

37 Programmieren im WWW Wo ist die Intelligenz, d. h. das Programm, das die Dynamik erreicht? auf der Serverseite: CGI, php, SSI, php auf der Browserseite: JAVA, embedded Javascript/Jscript, Vbscript … HTML für Fortgeschrittene Anja Slowinski –

38 Interaktivität: Serverseitig
WWW-Browser Intelligenz WWW-Server stdin "Feld=Inhalt&Feld2=Inhalt2" Formular <form action="script.pl" method="POST"> Ergebnis POST Script.pl Feld1 Inhalt1 Feld2 Inhalt2 ... Verarbeitung Rückmeldung als HTML-Datei oder URL OK GET method="GET" HTML für Fortgeschrittene Anja Slowinski –

39 Interaktivität: Browserseitig
WWW-Browser Intelligenz WWW-Server HTML-Datei Javascript / Java Bytecode Ausführung: unabhängig vom Browser HTML für Fortgeschrittene Anja Slowinski –

40 Javascript Komplette Programmiersprache, nichts für „mal nebenbei“
Das Script "verbirgt" sich in der HTML-Datei Interpretation der Daten beim Laden "Event"-gesteuerte Sprache: man kann Mausklicks und Eingaben abfangen und Aktionen des Programms daranhängen Aufgabenblatt: vorbereitetes Javascript HTML für Fortgeschrittene Anja Slowinski –

41 Javascript am Beispiel (Uhrzeit, Datum)
HTML für Fortgeschrittene Anja Slowinski –

42 Javascript (Formulareingabe)
HTML für Fortgeschrittene Anja Slowinski –

43 Gästebuch/Forum iboox HTML für Fortgeschrittene
Anja Slowinski –

44 Arbeiten mit vorbereiteten Webdateien
Templates zb unter: HTML für Fortgeschrittene Anja Slowinski –

45 CMS – Beispiele Zope-Plone (www.zope.org) ZMS Typo4 Reddot
HTML für Fortgeschrittene Anja Slowinski –

46 Suchmaschinenoptimierung
Title Überschriften Meta-tags Verlinkung durch andere HTML für Fortgeschrittene Anja Slowinski –

47 Eigener Domainname Um privat Webseiten zu betreiben, wenden Sie sich an einen Provider Dieser gibt Ihnen Speicherplatz und Domainnamen Sie bekommen dort einen Benutzernamen, Passwort und einen Server genannt, auf den sie Ihre Webseiten kopieren HTML für Fortgeschrittene Anja Slowinski –

48 Übung: Suchmaschinen- unterstützung
Zweck: Suchmaschinen werten diese Headertags oft mit höherer Priorität aus. <meta name="keywords" content=„Stichwort1, Stichwort2"> Test nicht möglich, da die Seite in der Suchmaschine nicht gefunden wird. DAMIT Sie gefunden wird, muß sie verlinkt sein! ( zb in yahoo: "Website vorschlagen" oder bei Google im Verzeichnis unter „URL anmelden“) HTML für Fortgeschrittene Anja Slowinski –