SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Hallo,

auf meinen ersten Beitrag zum Thema "HTML Einstiegstutorial" Anfang des Monats (Link) habe ich das Tutorial zum ersten Mal in meinem Kurs genutzt. Die Teilnehmerinnen hatten alle wenig bis gar keine Erfahrungen in HTML und ich habe sie gebeten, mir ein Feedback zum Tutorial zu geben. Hier die Zusammenfassung nach Kapiteln:

Kapitel 1 "Die ersten Schritte"

• alle fanden es gut nachvollziehbar und es gab keine Fehlerhinweise

• Die angegebene Zeit von 15 Min. fanden alle etwas zu kurz insbesondere wenn man sich die (guten) Texte auch wirklich durchliest und die Beispiele im eigenen Editor nachvollzieht - Anfänger sollten min. 30 Min. einplanen

Kapitel 2 "Hypertext und Multimedia"

• in der ersten Aufgabe Punkt 3 soll ein Bild verlinkt werden - das passt überhaupt nicht zum Kontext, hier geht es um die Erstellung eines (Navigations-)Menüs. Links in HTML spielen ohne Zweifel eine wichtige Rolle, aber wer verlinkt in der Praxis zu einem Bild?

• Vorschlag: Die Aufgabe Punkt 3 ganz rausnehmen. Dann muss der Hinweis auf diesen Punkt unter "Bilder einbinden" natürlich auch raus. Als Ersatz für einen Beispiel-Link als erstes "Beispiel für einen Verweis" einen Link zu einer Webseite z.B <a href="https://wiki.selfhtml.org/wiki/Startseite">selfhtml Startseite</a> angeben

• 30 Min. besser als 15 Min

Feedbacks zum Erstellen des Menüs:

• Warum gibt es die Menüpunkte "preise.html" und "kontakt.html", wenn diese im weiteren Turorial nicht mehr genutzt werden? Ohne diese beiden könnte man sich besser auf die beiden Seiten "inhalt.html" und "index.html" focussieren, die ja als Ergebnis sich gegenseitig verlinken sollen.
• Hier hätten sich einige auch die beiden Seiten als fertiges Beispiel gewünscht - wie sehen die Menüs im Quelltext von "inhalt.html" und "index.html" aus?
• Zudem steht in den Beispielen als Link einmal "href="inhalt.html" und dann href="./Beispiel:Inhalt.html" was auch etwas verwirrt hat.

Feedbacks zum Abschnitt "Bilder einbinden"

• es war nicht allen klar, wo die Bilder eingebunden werden sollen - ein deutlicher Hinweis am Anfang auf "inhalt.html" wäre hilfreich
• im weiteren Text wird noch 2x die Datei "index.html" erwähnt - das muss natürlich auch "inhalt.html" heißen
• in den beiden Beispielen ("Inhalt.html mit Bildern" und "Bilder mit Größenangaben") werden unterschiedlich viele Bilder aufgelistet - grundsätzlich würden 2-3 Bildbeispiele ausreichen, um das Thema ausreichend zu erklären
• das Frickl-Bsp ist sehr unübersichtlich und nutz auch andere Pfade als beschrieben (nämlich ein Verzeichnis "img") und im Quelltext angezeigt

Feedbacks zum Abschnitt "Ein Film"

• es wird nicht klar beschrieben, wo das Video eingebunden werden soll - in "inhalt.html" oder "index.html" und an welcher Position - im Frickl-Bsp wird das Video auf einer Extra-Seite eingebunden, aber davon steht im Text überhaupt nichts - ich würde es auf der "inhalt.html"-Seite einbinden.
• im zweiten Quelltext-Bsp fehlt der "video"-Tag am Anfang

Kapitel 3 "Gestaltung mit CSS"

• im Text (Abschnitt "HTML und CSS miteinander verbinden") steht "...sollten wir an unsere anderen beiden HTML-Seiten denken..." - es wurde bis hier im Tutorial aber nur an einer weiteren HTML-Seite gearbeitet > auf die "beiden anderen HTML-Dateien" wird auch noch mal im letzten Absatz verwiesen
• in diesem letzten Absatz wird der Titel des letzten Beispiels nicht richtig dargestellt "{{Beispiel|titel = Produktseite mit Bildern|zeige = Beispiel:Inhalt-3.html|"
• in dem CSS-Bsp. "Blocksatz und serifenlose Schrift für Absätze" fehlt das Semikolon hinter "color:brown". Wenn zuvor geschrieben wird: "Beachten Sie, dass das Semikolon hinter jeder Eigenschaft wichtiger Teil der CSS Syntax ist." , sollte dies in den Beispielen auch angewandt werden.
• folgende zusätzliche Informationen wären hilfreich: ◦ Hinweis, dass Kommentierung in CSS anders ist als in HTML ◦ Hinweis, dass CSS in einer externen Datei auf keinen fall mit <style> beginnen darf.

Kapitel 4 "Layout mit CSS"

• im Abschnitt "header und footer" funktioniert das <header>-Bsp. nicht, da ""logo.svg" nicht vorhanden ist. Zudem wird mit keinem Satz darauf eingegangen warum das Logo als Link mit href="/" definiert wird. Ein Logo mit in das Tutorial aufzunehmen ist ok, aber dann muss es auch irgendwo herunterzuladen sein (Vorschlag: zusammen mit den Möbelbildern als zip-Datei) und es muss nicht als Link definiert werden.
• im Abschnitt "aside – (nicht nur) neben dem Inhalt" steht im Bsp. "aside für Zusatzinformationen" als erste Zeile "<ul id="leistungen">" . Das Attribut "leistungen" gehört aber nicht zum Tag <ul>, sondern zum Tag <section> wie im späteren Bsp. "Neue Startseite mit „verpackter“ Liste" zu sehen ist. (in diesem Bsp. ist übrigens der schließende zweite <section>-Tag ohne Slash)
• Zudem wird auch im nachfolgende Text zum Bsp. "aside für Zusatzinformationen" auf id="leistungen" hingewiesen, was dann natürlich auch raus muss.

Ich hoffe das Feedback meiner Kursteilnehmer hilf bei der Verbesserung des HTML-Tutorials. Ich habe hier nur die 'Probleme' aufgelistet, aber der Grundtenor der Feedbacks war auf jeden Fall eher positiv und die teilnhemer fanden es eine gute Möglichkeit in die Themen HTML und CSS einzusteigen.

Beste Grüße aus Berlin Ralf Wessels

EDIT: Formatierung repariert [Der Martin]