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!
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!
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 ...
Was wollen wir wissen?
Generelle Vorgehensweise
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!
Geeignete Seiten
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