Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Webseiten für Fortgeschrittene HTML Teil 2 Orgakram: (Zeiten, Pausen, Namensschilder)"—  Präsentation transkript:

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

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

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

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

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

6 HTML für Fortgeschrittene Anja Slowinski – CSS Wiederholung Beispiele für CSS-Eigenschaften sammelnBeispiele für CSS-Eigenschaften sammeln Arten der Verknüpfung: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?Sammeln: für welchen Zweck ist welche Verknüpfungsart sinnvoll? ArbeitsblattArbeitsblatt

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

8 HTML für Fortgeschrittene Anja Slowinski – CSS - (einige Beispiele und Übungen) Tag (h1, p usw):Tag (h1, p usw): –erste Wahl, keine Änderung am Code –nur begrenzte Anzahl von Tags zur Definition von Formaten vorhanden Class: gleiches Tag unterschiedlich formatierenClass: 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 verwendbarIds: wie Klassen, nur einmalig im Dokument verwendbar

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

10 HTML für Fortgeschrittene Anja Slowinski – Übung: Liste als Menü Logisch eine Liste, sichtbar als (waagerechtes) MenüLogisch eine Liste, sichtbar als (waagerechtes) Menü Exkurs: tag-EigenschaftExkurs: 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Ändern dieses Standards: Selfhtml – CSS – CSS- Eigenschaften – Positionierung – display Aufgabe in Testdatei lösenAufgabe in Testdatei lösen

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

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

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

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

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

16 HTML für Fortgeschrittene Anja Slowinski – Ü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.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)Lösung: Definieren Sie einen Standard-Ziel-Frame (base target) Fügen Sie in den Header des Aufgabenblatts ein: Fügen Sie in den Header des Aufgabenblatts ein:

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

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

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

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

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

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

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

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

25 HTML für Fortgeschrittene Anja Slowinski – 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.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.Wir lernen im Folgenden, wie man die Kacheln "saumlos", also ohne Rand erzeugt und die Bilder in Helligkeit und Kontrast verändert.

26 HTML für Fortgeschrittene Anja Slowinski – Übung: Kacheln erzeugen (Photoshop) Neues Bild anlegen: kachel.jpg (200x200 pixel)Neues Bild anlegen: kachel.jpg (200x200 pixel) Etwas mit dem Stift oder anderem Werkzeug zeichnenEtwas mit dem Stift oder anderem Werkzeug zeichnen Haben Sie beim Zeichnen mehrere Ebenen erzeugt? Dann auf: Ebene – Auf Hintergrundebene reduzierenHaben Sie beim Zeichnen mehrere Ebenen erzeugt? Dann auf: Ebene – Auf Hintergrundebene reduzieren Auf "Filter – Sonstige Filter – Verschiebungseffekt" gehen, (jeweils 80 Pixel eingestellt lassen)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.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.Die Schritte Verschieben und bemalen mehrmals wiederholen, bis Sie keine Fehler mehr sehen. Datei – Für Web speichernDatei – Für Web speichern Verwenden Sie das kachel.jpg als Hintergrundbild in dem div- Tag Aufgabenblatts.Verwenden Sie das kachel.jpg als Hintergrundbild in dem div- Tag Aufgabenblatts.

27 HTML für Fortgeschrittene Anja Slowinski – Übung: Hintergrundbild erzeugen (Photoshop) Nimm ein Bild und öffne es in PhotoshopNimm ein Bild und öffne es in Photoshop Bild aufhellen: Bild – Anpassen – Farbton / SättigungBild aufhellen: Bild – Anpassen – Farbton / Sättigung Farbton wählen, Sättigung verringern, Helligkeit erhöhen. Färben anhaken.Farbton wählen, Sättigung verringern, 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 body der Aufgabendatei.Das Bild als Hintergrund einbinden in den body der Aufgabendatei.

28 HTML für Fortgeschrittene Anja Slowinski – Bild mit weichem Übergang zur Hintergrundfarbe Ziel: Das Bild soll saumlos in die Hintergrundfarbe der Webseite übergehenZiel: 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:Vordergrundfarbe = Hintergrundfarbe der Webseite, in die das Bild eingebaut wird: Optionenmenü durchsichtigen Verlauf auswählenOptionenmenü durchsichtigen Verlauf auswählen

29 HTML für Fortgeschrittene Anja Slowinski – Fotogalerie mit Adobe Photoshop Legen Sie mit dem Datei-Explorer 2 Verzeichnisse in Dokumente an: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 GalleryPhotoshop: Datei – Automatisieren –Web Photo Gallery Quelle und Ziel wählen, alle Kategorien füllenQuelle und Ziel wählen, alle Kategorien füllen

30 HTML für Fortgeschrittene Anja Slowinski – Fotogalerie Feineinstellungen Daten wie Titel, Beschreibung und mehr sind Metadaten. U.a. in psd und jpg-Dateien speicherbar.Daten wie Titel, Beschreibung und mehr sind Metadaten. U.a. in psd und jpg-Dateien speicherbar. Diese Beschreibungen tragen Sie im Photoshop ein.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)!Nicht jedes Galerie-Template zeigt Beschreibungen an (auf Texte in der Voransicht achten)!

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

32 HTML für Fortgeschrittene Anja Slowinski – Zusatzübungen: Schlagschatten –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 0Statt 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.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!Der Rand muß kariert (=durchsichtig) sein! –Schlagschatten anlegen: Nochmal doppelt auf Ebene klickenNochmal doppelt auf Ebene klicken Fenster Ebenenstil geht auf.Fenster Ebenenstil geht auf. im linken Teil "Schlagschatten" anklickenim linken Teil "Schlagschatten" anklicken Definieren Sie Intensität, Winkel, Abstand ( Haken "Vorschau" soll an sein)Definieren Sie Intensität, Winkel, Abstand ( Haken "Vorschau" soll an sein)

33 HTML für Fortgeschrittene Anja Slowinski – Transparente gifs (Vorbereitung selbstgemachte Listenpunkte) In Photoshop transparenten Bereich auswählen: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 - FreistellenDer Rest vom Bild kann weg: Menü Bild - Freistellen alles, was transparent wird, soll markiert sein:alles, was transparent wird, soll markiert sein: –Menü Auswahl - Auswahl umkehren. Transparenz für ausgewählten Bereich einstellen:Transparenz für ausgewählten Bereich einstellen: –Hilfe - Transparentes Bild exportieren –Trans. Bereich ausgewählt – weiter – online – w. - png bei Fotos,

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

35 HTML für Fortgeschrittene Anja Slowinski – Formularelemente Neben ein- und mehrzeiligem Text (beides unter "Textfeld")

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

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

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

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

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

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

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

44 HTML für Fortgeschrittene Anja Slowinski – Arbeiten mit vorbereiteten Webdateien Templates zb unter: mouseover.de/templates/templates.htmlTemplates zb unter: mouseover.de/templates/templates.html

45 HTML für Fortgeschrittene Anja Slowinski – CMS – Beispiele Zope-Plone (www.zope.org)Zope-Plone (www.zope.org) ZMSZMS Typo4Typo4 ReddotReddot

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

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

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


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

Ähnliche Präsentationen


Google-Anzeigen