Vorgehen zur Analyse von HTML-Seiten aus dem Internet

Um selbst gute Seiten erstellen zu können, sollte man
  • gute Beispiele im Internet erkennen,
  • und für die eigene HTML-Seite verwenden können.
Dieses setzt voraus, dass man HTML-Seiten richtig lesen und deuten kann!

Wir wollen ...
  • Lernen, wie Profis Seiten programmieren
  • die Struktur von HTML-Seiten erkennen
  • interessante Effekte und Programmcode übernehmen

Was wollen wir wissen?
  • Wie ist die Seite generell aufgebaut? (Tabellen? Div? CSS? Etc.)
  • Wo finden wir CSS, Javascript-Code, interessante HTML-Elemente, ...?
  • ...

Generelle Vorgehensweise

  • Anzeige des Seitenquelltextes der zu analysierenden Seite im Browser
  • Alles selektieren mit CTRL-A
  • Anlegen einer neuen HTML-Datei im eigenen Ordner
  • Strukturieren der Seite, d. h. Ordnen der Tags, so dass deren Funktion für den Leser verständlich wird (richtig einrücken, Kommentare hinzufügen)
  • Entfernen Sie Informationen, welche zum Verständnis des Aufbaus der Seite nicht benötigt werden.
  • ...

3D-Ansicht

Eine große Hilfe zum Verständnis des Aufbaus einer HTML-Seite wird vom Mozilla-Firefox Browser bereitgestellt.
Klicken Sie mit der rechten Maustaste auf die zu untersuchende Seite und wählen Sie aus dem Menü "Element untersuchen".
Am unteren Bildschirmrand finden Sie den Button 3D-Ansicht, den Sie bitte ebenfalls anklicken.
Jetzt können Sie gezielt den Aufbau der Elemente der Seite untersuchen!
HTML-Seite-3D-Ansicht.PNG

Geeignete Seiten

  • Es sollten bevorzugt Seiten analysiert werden, die noch lesbar sind,
    computergenerierte Seiten sind dies oft nicht mehr, z.B. google.com.
  • ...

Kleine und grosse Probleme

Generierter Code

Der Seitenquelltext enthält oft nicht die zum Lesen erwünschte Struktur. Es gibt leere Kommentare, es gibt Quelltext in nur einer einzelnen Zeile, etc.
Leere Kommentare kann man löschen, längliche Zeilen umbrechen etc. Das sollten Sie tun.

Absolute und relative Links

Die neue HTML-Seite im eigenen Ordner wird u. U. nicht alle Inhalte so anzeigen, wie sie im Internet dargestellt sind. Dieses liegt oft an den in den Seiten enthaltenen unvollständigen Links, d.h. Angabe des vollen Pfadnamens in den verlinkten CSS und Javascript Dateien fehlt. Ein kompletter Pfad enthält auch z. B. http://berliner-zeitung.de/..., ein relativer Pfad beginnt z.B. einfach mit ./tralala.

Eventhandler

...

Struktur der Seite

Wie erkenne ich sie? Wie beschreibe ich sie? Machen Sie einen Vorschlag!




Interessante Seiten für eine Analyse:

leicht:


schwer:
http://www.berlinonline.de/berliner-zeitung/ Aufbau der Zeitungsseite mittels div und css
http://www.ftd.de/politik/international/:interaktive-karte-aufruhr-in-der-muslimischen-welt/60004621.html Javascript/Flash Kombination