Diskussion:HTML/Tutorials/Einstieg

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

Eine Diskussionsseite dient dazu, Änderungen am Artikel zu besprechen. Allerdings werden diese Seiten in unserem Wiki erfahrungsgemäß nur von sehr wenigen Leuten besucht.
  • Deshalb sollten Diskussionen über den Artikel zum Thema „Einstieg“ besser im SELFHTML-Forum geführt werden.
  • Unter https://forum.selfhtml.org/self/new kannst du einen entsprechenden Beitrag erstellen.
  • Bitte hinterlasse einen entsprechenden Link auf dieser Diskussionsseite, wenn du einen Thread im Forum eröffnet hast.

2021[Bearbeiten]

drölfte Neubearbeitung, Tutorial soll Basis für Video werden.

Lernziele[Bearbeiten]

  • Einstieg in HTML
    • lernen HTML-Elemente kennen
    • können Webseiten anlegen
  • Fertigkeiten
    Leser lernen Umgang und Arbeiten mit …
    • Frickl
    • Editor
    • Seiteninspektor

Abgrenzung zu genauerer Erklärung in der Doku und zum Webprojekte-Kurs. Die wenigsten wollen eine eigene Webseite, um sie dann zu hosten, sondern

  • in der Schule die Grundlagen von HTML lernen
  • einen ersten Einblick erhalten

Problem: Anders als 1995 haben alle schon mal von HTML gehört, und trotzdem kennen die „Digital Natives“ keine Grundbegriffe mehr.

Am Ende des Kurses sollen die Nutzer in der Lage sein, weitere Kurse durchzunehmen:

Kapitel 1[Bearbeiten]

ToDo (weitere ToDos)

Alle Kurse bestehen aus Unterseiten mit Namen, nur hier gibt es eine Nummerierung. Ist das sinnvoll? --Matthias Scharwies (Diskussion) 05:22, 20. Mär. 2021 (CET)

Forum: HTML-Kurs von Felix Riesterer

Alternative: Benutzer:Rolf_b/Einstieg

  • konsistente Namensgebung - das HTML spricht von Schreinerei Meier und im Mustertext heißt die Familie Holzmann, letzteres ist lustiger, macht aber mehr Arbeit beim Einarbeiten in die Tutorials 😉
    • Da bin ich schuld - ich hatte letztes Jahr den Lorem Ipsum-Text durch das ersetzt - weg damit (oder er heiratet wieder eine Meier?)

Frickl: Ja, das hatte ich @Jürgen B versprochen. Das sollte unter Hilfe:Artikel/Beispiele#Frickl notiert und dann jeweils beim 1. Beispiel pro Kurs eingebunden werden.

keine verschachtelte ul ul

evtl. eine ul für Produkte und eine ol für Topseller


  • Ein leeres Frickl für die erste Aufgabe, mit dem Auftrag an die Nutzer, den Text von Herrn Meier selbst dorthin zu kopieren. Im "ein Versuch" Abschnitt würde ich dann auch die body-Tags weglassen und das Ganze als Textvorlage präsentieren, ohne den Versuch, HTML zu erzeugen. Das lernt Herr Meier ja jetzt erst.
    • Vorher gab es da ja die Seite mit der Theorie, die uns ein leeres Grundgerüst bescherte, in deren body man den Text kopieren konnte. Leider kann das Frickl keinen Plain text rendern - deshalb habe ich abweichend schon ein <p> gesetzt. Ich hatte auch überlegt, auf das Frickl zu verzichten und alles im eigenen Editor machen zu lassen.

In Benutzer:Rolf_b/Einstieg gut gelöst

Kapitel 2 Hypertext[Bearbeiten]

Lernziel:

  • Verlinkung und Einbindung
    • Attribute in HTML

Grundproblem: Beispiel-Dateien und Bilder haben aufgrund der Mediawiki-Konvention andere Namen und URLs als im ZIP-Ordner

mögl. Lösung:

Kapitel 3 - Tabelle[Bearbeiten]

Preistabelle oder Terminkalender oft vorhanden.

viel Markup nötig

Gestaltung ohne CSS sieht sehr mager aus. Evtl. als Exkurs am Ende

Kapitel 4 - Gestaltung mit CSS[Bearbeiten]

passt imho so vom Grundaufbau

Am Schluss gibt es eine erste farbige Version der Webseiten (Begrüßung3, Bilder2, Preise2), Hier sollte man empfehlen, die Elemente mit dem Seiteninspektor zu untersuchen.

Kapitel 5[Bearbeiten]

Hier sollte ursprünglich div und id erklärt werden. Stattdessen werden header, footer und aside eingeführt.

Das aside soll dann per id selektiert und gestaltet werden.

Letztes Beispiel (Begrüßung7, Bilder3, Preise3); media queries und grid nur kurz anreißen, auf weiterführende Kurse verweisen

  • Header Höhe 1.5em gesetzt (viel zu niedrig) mit einem margin-bottom von 5em (was das wieder ausgleicht).

→ ist gefixt!

ZIP-Ordner[Bearbeiten]

Es soll ein ZIP-Ordner angeboten werden, der Bilder und Unterordner bereitstellt.

  • Evtl. sollte man 2 Versionen anbieten, was ich aber eigentlich nicht gerne machen würde.
    • Ich kann Dir nicht folgen - weshalb sollte man?

Stand Kapitel2 (Begrüßung2.html, Bilder.html, Preise.html)

Soll eine fertige Version mit kompletem HTML und CSS (Begrüßung7.html, Bilder3.html, Preise3.html) evtl als weitere Version angeboten werden?

Hinweise zum Bearbeiten dieses Tutorials[Bearbeiten]

Da ich derjenige bin, der (abgesehen von Stonie, von der der Originaltext stammt – nochmal danke dafür!) am meisten an diesem Tutorial rumgeschrieben hat, hier mal meine Bitte an alle, die etwas am Text oder an den Beispielen verändern möchten:

Achtung!

Bitte ganz, ganz sorgfältig beim Ändern der Beispiele oder des Textes sein. Das Tutorial richtet sich an Anfänger, d.h. wirklich alles, was wir in die Beispiele einbauen, muss auch erklärt werden.

Manchmal habe ich aus didaktischen Gründen, also etwa um dem Leser nicht zu überfordern oder zu langweilen, die Beispiele so vereinfacht, dass sie zwar noch korrekt im Sinne von valide sind, aber nicht unbedingt den allgemeinen best practices folgen. Im Abschlusskapitel des Tutorials weise ich den Leser auch auf diesen Umstand hin: „Die HTML- und CSS-Dateien, die wir Ihnen präsentiert haben, sind zwar formal korrekt, aber nicht unbedingt in jeder Hinsicht ideal und praxistauglich, und sie reizen keineswegs alle Möglichkeiten aus, die es gibt – weder technisch noch ästhetisch.“

Das bezieht sich z.B. auf Kapitel 2. Ins Grundgerüst wurde die Zeile <html lang="de"> anstelle von <html> eingefügt – ich hab's jetzt wieder rückgängig gemacht. Grund: Es passte nicht mehr zum erklärenden Text. Im Text wird nur von <html> geredet; Attribute kommen erst später dran.

Wenn jemand nun Codebeispiele anpassen möchte, dann möge er bitte auch ggf. die Erklärungen anpassen und beurteilen, ob die Erklärungen verständlich bleiben, nicht ermüden und auch zum restlichen Aufbau passen, d.h. häufig (wäre von Fall zu Fall zu entscheiden) wird man auch alle folgenden Codebeispiele anpassen müssen, damit alles stimmig bleibt und es keine verwirrenden Unterschiede gibt. Allerdings kann es dann trotzdem auch wieder überraschende Unstimmigkeiten mit dem Text an späterer Stelle geben. Änderungen sind also nicht mal eben schnell gemacht; dafür muss man sich schon recht intensiv mit dem Text beschäftigen und sehr gewissenhaft vorgehen. Also bitte Vorsicht und Sorgfalt walten lassen oder auf der jeweiligen Diskussionsseite fragen. Vielen Dank.

Anderes Beispiel: Das erste Anzeigebeispiel unter [HTML/Tutorials/Einstieg/Kapitel6#Weiter_geht.27s_mit_dem_Men.C3.BC], wo ich den zweiten Link im Anzeigebeispiel absichtlich unbrauchbar gemacht habe – der Link wurde nämlich im Verlaufe des Tutorials bislang nur vorläufig eingebaut; die Zielseite soll im weiteren Verlauf des Tutorials erst noch erstellt werden. Der Leser soll natürlich beim eventuellen Ausprobieren des Links nicht verwirrenderweise auf einer Beispielseite landen, die nach seiner Wahrnehmung noch gar nicht existieren dürfte! Also bitte immer den Kontext beachten!

Allgemein bitte vor dem Einfügen von neuen Anzeigebeispielen oder Änderungen an den vorhandenen Beispielen dran denken, den Code durch den Validator zu schicken, um Flüchtigkeitsfehler zu vermeiden.

-- MathiasB (Diskussion) 18:12, 6. Jan. 2015 (CET) (der immer wieder versucht, sich an seine eigenen Ratschläge zu halten…)

Stand der Bearbeitung[Bearbeiten]

Aus meiner Sicht ist das Tutorial jetzt fertiggestellt. Aufteilung, Aufbau und Gestaltung sind jetzt so, wie ich mir das vorstelle. Kritik, Anmerkungen, Fragen bitte auf die jeweiligen Diskussionsseiten, oder wenn es sich auf das ganze Tutorial bezieht, einfach auf diese Seite hier.

Wenn die allgemeine Meinung sein sollte, dass das Tutorial zu kurz ist, könnte ich oder jemand anders es auch weiterschreiben. Ideen gäbe es genug: die Preistabelle gestalten, die Bilder kreativer präsentieren, das Menü verschönern, eine weitere Seite entwerfen (z.B. ein Kontaktformular)…

Ich meine zwar, dass das Tutorial so wie es jetzt ist eigentlich ausreichen sollte, aber ich höre mir gerne andere Meinungen an.

Viele Grüße
-- MathiasB (Diskussion) 23:18, 8. Jan. 2015 (CET)