Matthias Scharwies: HTML-Einstieg - die drölfte

Warum schon wieder einer Überarbeitung des eigentlich so „einfachen“ HTML-Einstiegs?
Weil es eben schwieriger ist, Anfängern Dinge einfach zu erklären, als sich in Fortgeschrittenen-Kursen schon auf Vorwissen und Skills der Lesenden verlassen zu können.

Die Doku fing anfangs (1995!) mit trockenem Wissen über WWW, HTTP und Domains an, die heute im Einstieg in das Internet zu finden sind. Astrid Steinmann (Stonie) begann 2008 mit einem kurzweiligen Einstiegs-Tutorial über die Schreinerei Meier, das 2015 von MathiasB ausgebaut und fertiggestellt wurde.

Anders als 1995 haben aber heute alle schon mal von HTML gehört, und trotzdem kennen die vermeintlichen „Digital Natives“ keine Grundbegriffe mehr. Mit der überarbeiteten Version wagen wir den Spagat:

Die wenigsten wollen eine eigene Webseite, um sie dann zu hosten, sondern …

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

Dashalb haben wir den Kurs auf 4 (bzw. 5) Kapitel zusammengefasst:

  1. erste Schritte erklärt was Markup ist, indem unformatierter Text einmal in eine .txt-Datei und einmal als .html vom Browser gerendert wird. Mit einem Blick in den Seiteninspektor merkt man, dass das HTML-Grundgerüst mit doctype und head noch fehlt.

  2. Hypertext und Multimedia zeigt, wie man auf HTML- und Medien-Dateien verlinkt und diese auch in Webseiten einbinden kann.

  3. Gestaltung mit CSS bringt Farbe und unterschiedliche Schriftformatierungen ins Spiel.

  4. Layout mit CSS kratzt mit Seitenstrukturierung, Grid Layout und media queries nur an der Oberfläche, bietet aber genügend Futter für weitere Untersuchungen mit dem Seiteninspektor.

  5. Die Preistabelle, ursprünglich ganz vorne platziert, ist nun ein Exkurs für ein Projekt.

Um gleich loslegen zu können, gibt es alle Dateien auch zum Download:

src.selfhtml.org/kurse/html-einstieg.zip (ZIP, 8.9MB)

Wir wünschen allen Anfängern viel Erfolg mit dem Kurs!

Matthias Scharwies

  1. Gut erklärt, aber die Farben!! ;-)

    1. Hallo Jonathan,

      es ist doch schön, wenn Leute das Wesentliche vom Unwesentlichen unterscheiden können - und das Unwesentliche kommentieren 😉

      Oder als eine andere Ausrede: Das Abändern der Farben in Holztöne ist eine weiterführende Aufgabe für die Leser 😂

      Rolf

      --
      sumpsi - posui - obstruxi
      1. Hallo,

        Das Abändern der Farben in Holztöne ist eine weiterführende Aufgabe für die Leser 😂

        Holztöne ... nennt man so den Klang eines Xylophons? 🤔

        Live long and pros healthy,
         Martin

        --
        Klein φ macht auch Mist.
  2. Ende der 90er hat mir die Schreinerei Meier den Einstieg in HTML unheimlich erleichtert. Ein richtiger Flashback, das Bild der Seite heute nochmal zu sehen! Da wird man ja richtig nostalgisch! 😀

    Hat denn das "Lese-Format" heute denn überhaupt noch eine Chance? Ich habe das Gefühl, dass alle nur noch Junk-Infos über YT konsumieren. Schnell irgendwas mit WordPress zusammenkleistern, wozu noch HTML-Grundlagen?

    Bernd

    1. Hallo,

      Hat denn das "Lese-Format" heute denn überhaupt noch eine Chance?

      ich denke schon. Ich bin sicher kein Einzelfall, wenn ich textbasierte Informationen Video-Tutorials vorziehe, weil ich die selber lesen kann - in dem Tempo, das mir passt.

      Ich habe das Gefühl, dass alle nur noch Junk-Infos über YT konsumieren. Schnell irgendwas mit WordPress zusammenkleistern, wozu noch HTML-Grundlagen?

      Was hat youtube dabei mit Wordpress zu tun?

      Live long and pros healthy,
       Martin

      --
      Klein φ macht auch Mist.
    2. Servus!

      Ende der 90er hat mir die Schreinerei Meier den Einstieg in HTML unheimlich erleichtert. Ein richtiger Flashback, das Bild der Seite heute nochmal zu sehen! Da wird man ja richtig nostalgisch! 😀

      Schön! Deswegen ist es auch gut Bewährtes zu überarbeiten und an die neue Zeit (HTML5, Responsivität, etc) anzupassen anstatt das Rad immer wieder neu zu erfinden.

      Hat denn das "Lese-Format" heute denn überhaupt noch eine Chance?

      Ja, die Zugriffszahlen und auch das Feedback im Forum beweisen das.

      Ich habe das Gefühl, dass alle nur noch Junk-Infos über YT konsumieren. Schnell irgendwas mit WordPress zusammenkleistern, wozu noch HTML-Grundlagen?

      Irgendwann kommt man doch an den Punkt an dem die Copy&Paste- Skripte und Plugins angepasst werden müssen und dann muss man eben doch die Grundlagen beherrschen.

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. 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]

        1. Servus!

          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.

          Vielen Dank! Ich werde die Anregungen in den nächsten Tagen einarbeiten!

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        2. EDIT: Formatierung repariert [Der Martin]

          Hallo "Der Martin", danke für die Überarbeitung - so sieht das natürlich viiiel besser aus. Ich kämpfe noch ein wenig mit dem Forumseditor 😉 Beste Grüße Ralf

          1. Hallo, bin erst jetzt dazu gekommen, meine Verbesserungsvorschläge (bzw. die meiner Kursteilnehmer) für das Einsteiger-Tutorial zu begutachten. Toll, dass ihr (fast) alle Vorschläge umgesetzt habt - Daumen hoch dafür! Falls mir oder meinen Kursteilnehmern im nächsten Kurs noch etwas auffallen sollte, werde ich das hier im Forum wieder posten. Ich hoffe die Änderungen helfen auch anderen EinsteigerInnen in das Thema HTML und CSS.

            Beste Grüße aus Berlin Ralf Wessels