Matthias Scharwies: Einstieg in HTML-Tutorial überarbeiten?

0 41

Einstieg in HTML-Tutorial überarbeiten?

Matthias Scharwies
  • html
  • selfhtml-wiki
  1. 2
    Rolf B
    1. 0
      Matthias Scharwies
      1. 2
        Rolf B
        1. 0
          Matthias Scharwies
          1. 1
            Matthias Apsel
          2. 0
            Rolf B
            1. 0
              Matthias Apsel
              1. 0
                Rolf B
                1. 0
                  Matthias Apsel
                  1. 0
                    Rolf B
          3. 0

            Kapitel 2 - Textauszeichnung

            Matthias Scharwies
            1. 0
              MudGuard
              1. 0
                Matthias Scharwies
  2. 0
    JürgenB
  3. 0
    Linuchs
    1. 0
      Matthias Apsel
      1. 0
        Linuchs
    2. 0
      Matthias Scharwies
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Scharwies
        2. 1
          Rolf B
          1. 0
            Gunnar Bittersmann
      2. 0
        Linuchs
        1. 0
          Der Martin
          • html
          • meinung
          • selfhtml-wiki
          1. 0
            Linuchs
            1. 0
              Der Martin
        2. 0
          Matthias Apsel
  4. 0

    Kapitel 6 - Gestaltung mit CSS

    Matthias Scharwies
    1. 0

      Kapitel 6 - Gestaltung mit CSS - Welche Selektoren für Tabelle und Liste??

      Matthias Scharwies
      1. 0
        Rolf B
        1. 0
          Matthias Scharwies
          1. 0
            Rolf B
            1. 0
              Matthias Scharwies
              1. 0
                Rolf B
                1. 0
                  Matthias Scharwies
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Matthias Scharwies
                  2. 0
                    Rolf B
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Rolf B

problematische Seite

Servus!

Ich hab grad noch mal unser Einstiegs-Tutorial durchgeschaut:

  • 9 Kapitel wirken sehr viel, auch wenn sie kurz sind.
  • Die fertige(n) Seite(n) sehen nach nichts aus.

Meine Vorschläge:

  • Kapitel 3 + 4 zusammenfassen
    • Organisatorisches gehört imho als Unterkapitel zu == eine zweite Seite ==
  • Kapitel 6: Bilder
    • neue Bilder, evtl SVG oder aus Wikimedia
    • Warnhinweis wegen Bilderklau
  • Kapitel 7+8 Seiten hübscher machen zusammenfassen
    • font-size:1,5em ist gut, zuerst würde ich aber noch color und background-color drannehmen, damit man „was sieht“
    • zuerst evtl. doch „nur“ im style-Element, erst am Schluss als eigene Datei. Dies hätte den Vorteil, dass man zuerst im Frickl herumprobieren kann.
  • im letzten Kapitel wird ein div mit id eingeführt, was könnte man dort noch verwenden?

Über eine Diskussion wäre ich dankbar!

Herzliche Grüße

Matthias Scharwies

--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  1. problematische Seite

    Hallo Matthias,

    ich bin kein Lehrer und habe daher nicht unbedingt die beste Erfahrung darin, Themen didaktisch aufzubereiten.

    • Ich hatte die Vorüberlegungen beinahe übersehen. Ich weiß, dass eine Agenda nach vorn gehört, aber ggf. müsste man einen Hinweis haben, dass nach der Agenda noch was kommt. Sonst klickt man gleich auf den ersten Punkt und die Vorüberlegungen sind vorüber.

    • Du hattest doch irgendeinen Onlinedienst der Lesedauern bestimmt. Ich kann mir vorstellen, dass solche Zeitangaben sowohl auf den einzelnen Seiten wie auch in der Agenda nützlich sind, damit die Interessentin weiß, was ihr bevorsteht. Neun Abschnitte sind erträglicher, wenn da 15 Minuten pro Abschnitt hintersteht (und die sind es sicher, man soll ja auch ausprobieren).

    • Achso, ausprobieren. Darauf müsste man die Interessenten einschwören. Trocken lernt sich das nicht. Und man sollte auch gleich zu Beginn sagen, dass das Bauen von Webseiten auf einem Smartphone ein frustrierendes Erlebnis ist. Es gibt für Webentwickler nur eins, was besser ist als ein großer Bildschirm: ein zweiter großer Bildschirm.

    • Wie ist die Abgrenzung zwischen diesem und jenem? Ich weiß das, aber ein Anfänger ist ggf. verwirrt. Und die Frage wäre auch, ob man die beiden Teile nicht verheiraten sollte. Zumindest sehe ich gerade im Abschnitt "Grundgerüst", dass da etwas über Editoren steht, aber dann in den HTML 5 Bereich verlinkt wird, um eine Erklärung in allen Einzelheiten zu bekommen. Und danach folgen eigene Erklärungen in allen Einzelheiten. Man merkt der Sache an, dass hier Dinge parallel entstanden und nicht konsolidiert sind.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Servus!

      • Ich hatte die Vorüberlegungen beinahe übersehen. Ich weiß, dass eine Agenda nach vorn gehört, aber ggf. müsste man einen Hinweis haben, dass nach der Agenda noch was kommt. Sonst klickt man gleich auf den ersten Punkt und die Vorüberlegungen sind vorüber.

      Guter Einwand! Ich hatte sie „rausgeklammert“, da imho das "Wollen Sie wirklich weitermachen?" zu negativ klang. Einen Hinweis muss es aber geben!

      • Du hattest doch irgendeinen Onlinedienst der Lesedauern bestimmt. Ich kann mir vorstellen, dass solche Zeitangaben sowohl auf den einzelnen Seiten wie auch in der Agenda nützlich sind, damit die Interessentin weiß, was ihr bevorsteht. Neun Abschnitte sind erträglicher, wenn da 15 Minuten pro Abschnitt hintersteht (und die sind es sicher, man soll ja auch ausprobieren).

      Ja, das werde ich einfügen!

      • Achso, ausprobieren. Darauf müsste man die Interessenten einschwören. Trocken lernt sich das nicht.

      Ja, da hatte ich schon Email-Kontakt mit Leuten, die das "ausprobieren" bei den Live-Beispielen überlesen hatten! 😀

      Und man sollte auch gleich zu Beginn sagen, dass das Bauen von Webseiten auf einem Smartphone ein frustrierendes Erlebnis ist. Es gibt für Webentwickler nur eins, was besser ist als ein großer Bildschirm: ein zweiter großer Bildschirm.

      Ja, danke!

      • Wie ist die Abgrenzung zwischen diesem und jenem? Ich weiß das, aber ein Anfänger ist ggf. verwirrt. Und die Frage wäre auch, ob man die beiden Teile nicht verheiraten sollte. Zumindest sehe ich gerade im Abschnitt "Grundgerüst", dass da etwas über Editoren steht, aber dann in den HTML 5 Bereich verlinkt wird, um eine Erklärung in allen Einzelheiten zu bekommen. Und danach folgen eigene Erklärungen in allen Einzelheiten. Man merkt der Sache an, dass hier Dinge parallel entstanden und nicht konsolidiert sind.

      Full Ack! Da muss halt dauernd gearbeitet werden. DAs HTML5-Tutorial hatten wir erst nachträglich eingerichtet, weil sich Leute anno 2017/18 beschwert hatten, dass es nirgends eine Auflistung neuer Elemente gäbe.

      Danke für Dein Feedback!

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. problematische Seite

        Hallo Matthias,

        ich habe Kapitel 1 einmal überarbeitet und hoffe, dass es in deinem Sinne ist. Tim Ehling meint, es wären 17 Minuten Lesezeit, ich hab's mal auf 15 abgerundet weil auch einiges so erzählt wird.

        Wenn's Dir nicht passt, mach einfach einen Revert :)

        Eigentlich sollte im Kapitel 1 jetzt alles stehen, was auch im HTML5/Grundgerüst steht.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Servus!

          Hallo Matthias,

          ich habe Kapitel 1 einmal überarbeitet und hoffe, dass es in deinem Sinne ist. Tim Ehling meint, es wären 17 Minuten Lesezeit, ich hab's mal auf 15 abgerundet weil auch einiges so erzählt wird.

          Wenn's Dir nicht passt, mach einfach einen Revert :)

          Eigentlich sollte im Kapitel 1 jetzt alles stehen, was auch im HTML5/Grundgerüst steht.

          Vielen Dank! Was meinst du - sollte Abschnitt 3 "Spitze Klammern piken" da überhaupt noch drin stehen? Wir predigen bei umlauten ja immer kein &uuml;zu verwenden und eine einzelne > < schadet ja auch nicht.

          Für Kapitel 2 habe ich schon eine Idee!

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. problematische Seite

            Hallo Matthias Scharwies,

            Vielen Dank! Was meinst du - sollte Abschnitt 3 "Spitze Klammern piken" da überhaupt noch drin stehen?

            Unbedingt.

            Wir predigen bei umlauten ja immer kein &uuml;zu verwenden und eine einzelne > < schadet ja auch nicht.

            Das sind zwei verschiedene Dinge: Das eine sind Sonderzeichen, das andere nicht. Ein Sonderzeichen ist ein Zeichen, das im Kontext der (Programmier- oder Auszeichnungs-)sprache eine besondere Bedeutung hat.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          2. problematische Seite

            Hallo Matthias,

            ja, Eingabe der HTML Steuerzeichen <&> gehört definitiv rein. Vielleicht hat es Zeit bis Kapitel 2, weil im <head> der Bedarf dafür nicht so besteht.

            Warum steht im Wiki eigentlich immer <code><nowiki><sometag></nowiki></code>? code impliziert allem Anschein nach nowiki; ich nehme das nowiki-Element weg, wo immer ich es innerhalb von <code>...</code> finde. Gibt es Gründe, das nicht zu tun?

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Hallo Rolf B,

              Warum steht im Wiki eigentlich immer <code><nowiki><sometag></nowiki></code>?
              code impliziert allem Anschein nach nowiki;

              Nein.

              ich nehme das nowiki-Element weg, wo immer ich es innerhalb von <code>...</code> finde.

              Solange du prüfst, ob es noch wie gewünscht aussieht … 😉🤔

              Gibt es Gründe, das nicht zu tun?

              Vergleiche

              <code><nowiki>https://example.com</nowiki></code> und

              <code>https://example.com</code>

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. problematische Seite

                Hallo Matthias,

                somelink ≠ sometag...

                Rolf

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Hallo Rolf B,

                  somelink ≠ sometag...

                  <code><a href="https://example.com">Link</a></code> shows the same problem.

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  1. problematische Seite

                    Hallo Matthias,

                    <code>https://example.com</code>
                    <code><a href="https://example.com">Link</a></code>

                    willst Du mich linken? 😉

                    Rolf

                    --
                    sumpsi - posui - obstruxi
          3. problematische Seite

            Servus!

            Für Kapitel 2 habe ich schon eine Idee!

            Ich wollte in Kapitel 2 anstelle der lorem Ipsum-Absätze nicht ausgezeichneten Text verwenden, den man dann im Frickl formatieren könnte.

            @Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

            Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. problematische Seite

              Hi,

              @Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

              Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

              Ein p erlaubt nur inline innendrin. Ein div würde auch block-Inhalte innendrin erlauben - das p wäre also vor einem eingefügten <div> zu Ende, der Text nach dem </div> könnte dann wieder verschluckt werden.

              Wobei ich den Text rechts auch sehe, wenn ich das <p> weglösche und das Ergebnis aktualisiere …

              cu,
              Andreas a/k/a MudGuard

              1. problematische Seite

                Servus!

                Hi,

                @Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

                Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

                Ein p erlaubt nur inline innendrin. Ein div würde auch block-Inhalte innendrin erlauben - das p wäre also vor einem eingefügten <div> zu Ende, der Text nach dem </div> könnte dann wieder verschluckt werden.

                div kennen die Anfänger noch nicht. 😀

                Wobei ich den Text rechts auch sehe, wenn ich das <p> weglösche und das Ergebnis aktualisiere …

                Das Frickl-Script zieht den Inhalt des p (oder div)-Elements in den neuen body. Dann kann man damit machen, was man will. Ohne ein einleitendes HTML-Element wird nichts aus dem bestehenden Beispiel in das Frickl gezogen.

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. problematische Seite

    Hallo Matthias,

    • Ich würde für die „Vorüberlegungen“ eine eigene Seite nehmen, z.B. Kapitel 0.
    • In den Vorüberlegungen oder (und) im ersten Kapitel würde ich auf die Vorschau und das Ausprobieren eingehen.
    • Kapitel 3 und 4 können zusammengefasst werden.
    • Bilder ersetzen ist OK, wenn man ohne Aufwand schönere Bilder findet.
    • Kapitel 7 und 8 zusammenfassen ist ok. Das wird zwar ein großes Kapitel, aber es gehört ja zusammen.
    • CSS im Style-Element behandeln finde ich gut. Am Ende kann man darauf hinweisen, dass das Meiste in jeder Datei vorkommt und eine zentrale CSS-Datei einfacher zu handhaben ist. Hier dann aber auch auf die Unterschiede bei relativen Pfaden im CSS und im HTML eingehen.

    Gruß
    Jürgen

  3. problematische Seite

    Hallo Matthias,

    ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

    habe mir als Beispiel das Kapitel 6 angeschaut.

    Wie auf vielen selfHTML-Seiten wortreiche Beschreibung, beinahe schon geeignet zum Vorlesen über Herrn Meyer und die fehlenden Bilder seiner Belegschaft.

    Wenn ich per Google nach der Syntax von HTML, CSS, Javascript suche, ist selfHTML selten erste Wahl, weil oft das gesuchte Know-How im Text versteckt wird.

    Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

    <img src="../img/bett.jpg" alt="Bett">
    

    danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

    Und erst dann Beispiele für Anfänger, wie man Bilder in eine Webseite einbinden kann.

    Linuchs

    1. problematische Seite

      Hallo Linuchs,

      vielen Dank für die netten Worte.

      Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

      <img src="../img/bett.jpg" alt="Bett">
      

      danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

      Mach doch mal einen konkreten Vorschlag.

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. problematische Seite

        Mach doch mal einen konkreten Vorschlag.

        Gerne.

        <img src="../img/bett.jpg" alt="Bett">

        Kürzel bedeutet
        img (engl. image = „Bild“), eine rechteckige Fläche
        src (engl. source = „Quelle“), URL der Bilddatei, die der Browser laden und anzeigen soll
        alt (engl. alternative = „Alternativtext“) wird angezeigt, falls die Datei nicht verfügbar ist. Wird von Screenreadern vorgelesen

        Basis-Eigenschaften:

        img wird im Fließtext wie ein Zeichen behandelt, kann also mitten im Text stehen und belegt die Breite und Höhe in Pixel, die in der Bilddatei vorgesehen ist.

        Tipp:

        Ein unbearbeitetes Bild von der Kamera kann größer sein als die Sichtfläche (Viewport) des Browsers und benötigt eine (unnötig) lange Ladezeit. Mit einem Grafik-Programm (z.B. kostenloses GIMP) kann das Bild und damit die Dateigröße vor dem Hochladen auf das gewünschte Maß verkleinert werden.

        freiwillige CSS-Eigenschaften:

        `<img src="../img/bett.jpg" alt="Bett" style="height:8em;opacity:.8;width:10em;">``

        Kürzel bedeutet
        height anzuzeigende Höhe des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn width fehlt, wird es proportional zu height errechnet
        opacity Deckkraft 0 .. 1
        width anzuzeigende Breite des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn height fehlt, wird es proportional zu width errechnet

        Einbindung in HTML:

        <!DOCTYPE html>
        <html lang="de">
        <head>
        ...
        </head>
        <body>
          <h1>Wir tischlern nicht nur, wir stühlen und betteln auch</h1>
          <p>Unser Renner:</p>
          <p><img src="../img/bett.jpg" alt="Bett"><br>
          Hundebett statt -körbchen</p>
        </body>
        </html>
        

        Linuchs

    2. problematische Seite

      Servus!

      Hallo Matthias,

      ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

      Das ist das Verdienst von Stefan Münz. Er hat vor 25 Jahren ein neues Medium mit seiner Dokumentation vielen Leuten nahegebracht. Dies ging damals nur mit Prosa und weiter-Links am Ende der Seiten:

      1. Was ist das Internet?
      2. HTML/Regeln
      3. HTML/Kopfdaten

      und dann kamen die ersten Beispiele mit Elementen zur Textstrukturierung.

      Mittlerweile ist die Kenntnis viel größer und jeder Anfänger glaubt, die ersten Kapitel überspringen zu können. Deshalb hatte Astrid Semm ( @stonie ) den Versuch unternommen, hier in lockerem Ton eine Einführung zu schreiben. @Rolf B Um dieses Tutorial haben sich die anderen Tutorials und Kurse herum entwickelt - oft aus SELFHTML-Aktuell-Artikeln heraus.

      Jetzt ist es eben Zeit dieses erste Tutorial (mal wieder) auf den Prüfstand zu stellen.

      habe mir als Beispiel das Kapitel 6 angeschaut.

      Wie auf vielen selfHTML-Seiten wortreiche Beschreibung, beinahe schon geeignet zum Vorlesen über Herrn Meyer und die fehlenden Bilder seiner Belegschaft.

      Wenn ich per Google nach der Syntax von HTML, CSS, Javascript suche, ist selfHTML selten erste Wahl, weil oft das gesuchte Know-How im Text versteckt wird.

      Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

      <img src="../img/bett.jpg" alt="Bett">
      

      danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

      Das ist eine Referenz für Leute, die wissen wonach sie suchen. Das haben wir auch: Referenz:HTML/img

      Für einen Anfänger ist das Gift.

      Und erst dann Beispiele für Anfänger, wie man Bilder in eine Webseite einbinden kann.

      Die Tutorials versuchen eine Quadratur des Kreises

      • Kontextualisierung: eine Geschichte erzählen, die Spannung aufbaut und zum Weiterlesen animiert.
      • didaktische Reduktion: etwas so zu vereinfachen, dass es gut zu verstehen ist, ohne dass es falsch wird.
      • klare, einfache Sprache, ohne auf wichtige Fachbegriffe zu verzichten.
      • einfache Beispiele, die eine Sache erklären, sich dann aber erweitern lassen
      • ein End-Produkt, das so gut aussieht, dass man sieht, dass HTML, CSS und alles andere aus einem Guss ist.

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. problematische Seite

        @@Matthias Scharwies

        danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

        Das ist eine Referenz für Leute, die wissen wonach sie suchen. Das haben wir auch: Referenz:HTML/img

        Das haben andere auch – nur besser. Zum Vergleich: MDN

        Könnten im Wiki auch mal sämtliche Hinweise auf HTML 4 (und davor) und auf XHTML getilgt werden? Deren praktische Relevanz fürs Zielpublikum: null.

        😷 LLAP

        --
        „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
        1. problematische Seite

          Servus!

          @@Matthias Scharwies

          Könnten im Wiki auch mal sämtliche Hinweise auf HTML 4 (und davor) und auf XHTML getilgt werden? Deren praktische Relevanz fürs Zielpublikum: null.

          Du hast dir grad nen <i> gekauft!

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        2. problematische Seite

          Hallo Gunnar,

          Deren praktische Relevanz fürs Zielpublikum: null.

          Das sehe ich anders. Man findet im Netz genügend Beispiele, die HTML 4 oder XHTML verwenden, und bei denen man ggf. gar nicht mehr weiß, was das eigentlich sollte.

          Nur den aktuellen Stand zu dokumentieren, ohne Hinweise auf "so war das mal, aber das macht man heute so und so", ist nicht die beste Idee. Ja ich weiß, das bläht die Doku auf. Aber ich habe die letzten 4 Wochen damit verbracht, Dokumentation zu ASP.NET 4 und ein paar Komponenten wie ScriptManager zu suchen. Kaum noch was zu finden, weil MS die ganze ASP.NET 4 Doku bis auf ein paar blabla Seiten depubliziert hat. Was nicht ASP.NET Core 3 ist, existiert für MS nicht mehr. Und ich steh da und muss mich in Legacy-Code einarbeiten. Und mein ASP.NET 4 Buch steht im Büro, weit weg...

          Rolf

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            @@Rolf B

            Hallo Gunnar,

            Deren praktische Relevanz fürs Zielpublikum: null.

            Das sehe ich anders. Man findet im Netz genügend Beispiele, die HTML 4 oder XHTML verwenden

            Ich kenne kein einziges Beispiel, das XHTML verwendet.[1]

            HTML 4 ist eine Teilmenge von HTML (f/k/a HTML5) – bis auf das bisschen Zeugs, was rausgefallen ist, aber weiterhin von Browsern interpretiert wird.

            Man verwendet kein HTML 4, man verwendet HTML.

            Nur den aktuellen Stand zu dokumentieren, ohne Hinweise auf "so war das mal, aber das macht man heute so und so", ist nicht die beste Idee.

            Doch. Für den Zweck, den SELFHTML verfolgt, genau das.

            Es kann ja durchaus eine Seite geben, wo auf die Unterschiede zwischen XHTML und HTML – und polyglottem HTML! – eingegangen wird. Da kann man dann auch unterbringen, dass es Vorteile hat, optionale Tags nicht wegzulassen und Attributwerte immer in Anführungszeichen zu setzen.

            Aber bitte nicht bei img, input, br, hr, … jedesmal der Hinweis: in XHTML muss da ein Schrägstrich hin. Unnützer Ballast fürs Zielpublikum; lenkt bloß vom Wesentlichen ab.

            😷 LLAP

            --
            „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin

            1. abgesehen vielleicht von vereinzelten Testseiten (nicht -sites), von denen ich auch eine oder zwei habe ↩︎

      2. problematische Seite

        Moin Matthias S.

        ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

        Das ist das Verdienst von Stefan Münz.

        Ich weiß. Er schrieb damals sinngemäß, dass er neue Werkzeuge (HTML) dadurch lernt, dass er sie mit Hilfe dieser Werkeuge beschreibt.

        Das war mir sofort sympathisch, so mache ich es auch.

        jeder Anfänger glaubt, die ersten Kapitel überspringen zu können

        Kann ich sehr gut nachvollziehen. Anfänger möchten mit „Hello World“ ein Erfolgserlebnis, aber keinen Vortrag über die Grundlagen und Anfänge des Internet durchlesen.

        Auch hier im Forum gibt es Schlaukluge, die bei den einfachsten Fragen erstmal die Fettnäpfchen aufzählen, in die man treten kann. Schau mal in die Statistik, wer sich registriert hat, aber nur einen einzigen Beitrag eingegeben hat.

        Ich habe für meine Kunden-Projekte Dokumentationen erstellt und weiß, dass die Kommunikation zwischen IT-Profis und Anwendern problematisch und voller Mißverständnisse ist. Eigentlich sollte die Doku nicht vom Programmierer, sondern von einem Tester/Texter erstellt werden. In den 1980er Jahren war das meine Funktion in einem Softwarehaus. Kostet aber extra.

        Mir gefällt der Aufbau bei Wikipedia. Im ersten Absatz wird versucht, den Begriff zu erklären und danach kommen Kapitel zu den diversen Sichtweisen geografisch, historisch, ...

        eine Geschichte erzählen, die Spannung aufbaut und zum Weiterlesen animiert.

        Bei einer „technischen“ Dokumentation erwarte ich das nicht. Vor einiger Zeit suchte ich nach Rasenmähern und Rasentrimmern. Was las ich auf den Webseiten der Händler? Wie toll man damit Rasen mähen kann. Wer hätte das gedacht, dass man mit Rasenmähern Rasen mähen kann?

        Ich weiß aus Erfahrung, dass die

        Quadratur des Kreises

        keinem so recht gelingen kann. Umso schlimmer, wenn keine Rückmeldungen kommen.

        Linuchs

        1. problematische Seite

          Hallo,

          jeder Anfänger glaubt, die ersten Kapitel überspringen zu können

          Kann ich sehr gut nachvollziehen. Anfänger möchten mit „Hello World“ ein Erfolgserlebnis, aber keinen Vortrag über die Grundlagen und Anfänge des Internet durchlesen.

          das mag für eine Mehrheit zutreffen; ich bin eher jemand, der beim Einstieg in ein neues Thema wirklich mit den Basics anfangen und diese verstehen möchte. Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

          Auch hier im Forum gibt es Schlaukluge, die bei den einfachsten Fragen erstmal die Fettnäpfchen aufzählen, in die man treten kann.

          Ja, und das ist nicht besonders nützlich. Aber viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten. Die setzt der Laie dann nämlich ein, ohne weiter darüber nachzudenken.

          Ich habe für meine Kunden-Projekte Dokumentationen erstellt und weiß, dass die Kommunikation zwischen IT-Profis und Anwendern problematisch und voller Mißverständnisse ist.

          Eigentlich sollte die Doku nicht vom Programmierer, sondern von einem Tester/Texter erstellt werden.

          Ja. Oder noch besser, von beiden gemeinsam.

          Vor einiger Zeit suchte ich nach Rasenmähern und Rasentrimmern. Was las ich auf den Webseiten der Händler? Wie toll man damit Rasen mähen kann. Wer hätte das gedacht, dass man mit Rasenmähern Rasen mähen kann?

          Das mag so manchen überraschen. 😉

          Live long and pros healthy,
           Martin

          --
          Home is where my beer is.
          1. problematische Seite

            Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

            Dann bist du der Typ „Theoretiker“, der beim Kaffeekochen zunächst nicht an den leckeren Kaffee denkt, sondern verstehen möchte, warum das Wasser siedet und wieviel Energie das kostet.

            Ich poste beim Physikerboard. Zu 95% Theoretiker, die nach passenden Formeln zum Problem suchen. Aber so manches Mal kein Gefühl haben, ob das Ergebnis tausendfach zu hoch oder um ein tausendstel zu klein ist.

            Ich bezeichne mich erstmal als „Praktiker“, stelle mir die beschriebene Situation vor. Kann dann logischerweise zu Themen wie „Quantenphysik“ und „Urknall“ nichts schreiben, aber überprüfe immer meine Schätzungen zu Größenordnungen und lerne, besser zu schätzen.

            Und irgenwie betrifft das auch IT-Probleme. Gerne schätze ich, welcher Aufwand bis zur Lösung erforderlich ist. Falls zu hoch, suche ich alternative Ansätze oder verabschiede mich von der Idee. Lebenswichtig für einen Freiberufler, der ein Angebot machen soll.

            viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten

            Da bin ich ganz anders. Menschen und viele Tiere brauchen Vorbilder, um zu lernen. Eine Lösung, die funktioniert, kann ich untersuchen, nachahmen, hinfallen und wieder aufstehen.

            Ich denke, der Eine (du) lernt nach dem Top-Down-Verfahren (erstmal das Allgemeine), der andere (ich) nach dem Down-Top-Verfahren (das gelungene Detail erweckt Interesse an Zusammenhängen).

            Linuchs

            1. problematische Seite

              Hallo,

              Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

              Dann bist du der Typ „Theoretiker“, der beim Kaffeekochen zunächst nicht an den leckeren Kaffee denkt, sondern verstehen möchte, warum das Wasser siedet und wieviel Energie das kostet.

              und daran, was eigentlich im Kaffee drin ist und so. Ja, im Prinzip schon.

              Ich poste beim Physikerboard. Zu 95% Theoretiker, die nach passenden Formeln zum Problem suchen. Aber so manches Mal kein Gefühl haben, ob das Ergebnis tausendfach zu hoch oder um ein tausendstel zu klein ist.

              Das ist nicht gut.

              Ich bezeichne mich erstmal als „Praktiker“, stelle mir die beschriebene Situation vor. Kann dann logischerweise zu Themen wie „Quantenphysik“ und „Urknall“ nichts schreiben, aber überprüfe immer meine Schätzungen zu Größenordnungen und lerne, besser zu schätzen.

              Ich sehe mich irgendwo im Transit dazwischen. Wenn ich in ein Thema neu einsteige, bin ich der Theoretiker, den du beschreibst; mit zunehmendem Wissen steigt dann auch die Motivation zum Ausprobieren; mit zunehmender Erfahrung werde ich dann mehr und mehr zum Praktiker, der dann auch ein "Gefühl" für die richtigen Größenordnungen und mögliche Fehlerquellen hat.

              Und irgenwie betrifft das auch IT-Probleme. Gerne schätze ich, welcher Aufwand bis zur Lösung erforderlich ist. Falls zu hoch, suche ich alternative Ansätze oder verabschiede mich von der Idee. Lebenswichtig für einen Freiberufler, der ein Angebot machen soll.

              Absolut. Aber auch wichtig für einen Angestellten, der vom Chef gefragt wird: "Schaffen Sie das bis Ende der Woche?"

              viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten

              Da bin ich ganz anders. Menschen und viele Tiere brauchen Vorbilder, um zu lernen. Eine Lösung, die funktioniert, kann ich untersuchen, nachahmen, hinfallen und wieder aufstehen.

              Richtig. Aber wie groß ist die Motivation zum Untersuchen, wenn man etwas bekommt, das augenscheinlich funktioniert? Bei den meisten wahrscheinlich sehr gering.

              Ich denke, der Eine (du) lernt nach dem Top-Down-Verfahren (erstmal das Allgemeine), der andere (ich) nach dem Down-Top-Verfahren (das gelungene Detail erweckt Interesse an Zusammenhängen).

              So wie du uns beschrieben hast, ist es genau umgekehrt: Ich fange gern bei den Grundlagen und Einzelheiten an und arbeite mich dann langsam zum Gesamtkunstwerk durch. Das nennt man übrigens Bottom-Up, also von unten nach oben. Was du machst, ist Top-Down: Oben beim Gesamtkonzept anfangen, und von da aus langsam nach unten in die Details gehen.

              Live long and pros healthy,
               Martin

              --
              Home is where my beer is.
        2. problematische Seite

          Hallo Linuchs,

          Schau mal in die Statistik, wer sich registriert hat, aber nur einen einzigen Beitrag eingegeben hat.

          Meinem Gefühl nach werden die meisten dieser Beiträge Fragen sein und keine Antworten.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  4. problematische Seite

    Servus!

    Ich habe das jetzt so umgesetzt: Kapitel 6: Gestaltung mit CSS

    In der Erklärung wird erst nur dies vorgegeben:

    h2 {
    	font-size: 2.5em;
    	color: red;
    	background-color: beige;
    } 
    

    Im Frickl wird dann noch mehr angeboten:

    
    h2 {
    	font-size: 2.5em;
    	color: red;
    	background-color: beige;
    	border: thin solid;
    	text-align: center;
    } 
    
    

    In den nächsten Tagen entwerfe ich für Beispiel:Schreinerei-Meier-formate.css mal ein Layout, das man dann aber im Frickl nicht verändern kann. Zum Herunterladen und lokal rumprobieren geht es aber.

    Im Kapitel 7 würde CSS dann weitergehen:

    • Breiten und Abstände, wobei ich eigentlich auf media queries verzichten, aber auch kein float verwenden möchte.

    • Klassen und ids, um einzelne Elemente zu selektieren

    Evtl. benötigt man außer dem div dann noch andere HTML-Elemente; evtl. figure oder aside - mal schauen.

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      Servus!

      Ich habe das jetzt so umgesetzt: Kapitel 6: Gestaltung mit CSS

      Im Abschnitt: Kapitel6#Schriftgröße_von_Listen_und_Preistabelle gibt es folgendes CSS:

      li { font-size: 1.7em; }
      tr { font-size: 1.7em; }
      

      Ich würde hier den Begriff Selektor-Listen einführen, glaube aber, dass table und ul bessere Selektoren sind, auch wenn li natürlich eventuelle ol-Listen berücksichtigt. Was meint ihr?

      ul, 
      table { 
       font-size: 1.7em; 
      }
      

      Die auf ./Beispiel:formate.css eingebundene(n) Datei(en) kann man im Frickl eh nicht ändern. Was haltet ihr davon, hier im Tutorial mit style-Elementen zu arbeiten

      … und paralell ein Beispiel-Design mit background-image, max-width etc anzubieten, das nicht vollständig im Tutorial erklärt wird? Oder sollte man es ganz kurz erklären? Oder so lassen, wie's ist, auch wenn (mir) das zuwenig CSS-Regelsätze sind?

      https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate2.css

      https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate3.css

      mit id für ein div/aside in Kapitel 7:

      https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate4.css

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. problematische Seite

        Hallo Matthias,

        ich guck mir das gleich mal an, ich bin gerade beim Überfliegen der Kapitel 2-5 bei den Links hängen geblieben, wo Du ganz stolz die Attribute als Neuigkeit einführst. Dummerweise hatte ich das schon in Kapitel 1 vorweggenommen (weil die <head> Elemente ja Attribute verwenden und ich das erklären wollte), darum habe ich das in #4 ein bisschen umformatiert.

        Dabei fällt mir auf: Ist die Beispielvorlage kaputt? Wenn ein Beispiel gemacht wird, dann steht da sowas wie {{Beispiel|titel = für ein Dings|... und ich meine auch, dass dann früher mal die Überschrift Beispiel für ein Dings daraus geworden wäre. Das ist aber nicht mehr der Fall, das Wort „Beispiel“ wird nicht mehr generiert. Es sieht aber merkwürdig aus, wenn ein Beispiel mit den Worten „für ein Dings“ statt mit „Beispiel für ein Dings“ eingeleitet wird.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Servus!

          Hallo Matthias,

          ich guck mir das gleich mal an, ich bin gerade beim Überfliegen der Kapitel 2-5 bei den Links hängen geblieben, wo ~Du~ ganz stolz die Attribute als Neuigkeit einführst.

          Nicht ich, das Tutorial stammt von Stonie und MatthiasB

          Dummerweise hatte ich das schon in Kapitel 1 vorweggenommen (weil die <head> Elemente ja Attribute verwenden und ich das erklären wollte), darum habe ich das in #4 ein bisschen umformatiert.

          Ja, das ist das Problem des Grundlayouts. Eigentlich wollte MatthiasB ja alles Stück für Stück erklären.

          Siehe: Diskussion:HTML/Tutorials/Einstieg (an die man aber nur noch indrekt rankommt: Sidebar: Links auf diese Seite)

          Andererseits sollte so ein Gerüst eben vollständig sein, also auch mit lang="de"-Attribut und dem Meta-Viewport; charset ist ja auch ein Attribut. Deshalb finde ich es ok, wenn so ein Praxis-Tutorial am Anfang eine Kopiervorlage verwendet (und auch kurz erklärt)

          Dabei fällt mir auf: Ist die Beispielvorlage kaputt? Wenn ein Beispiel gemacht wird, dann steht da sowas wie {{Beispiel|titel = für ein Dings|... und ich meine auch, dass dann früher mal die Überschrift Beispiel für ein Dings daraus geworden wäre. Das ist aber nicht mehr der Fall, das Wort „Beispiel“ wird nicht mehr generiert.

          Das hatten wir mal geändert, da bei kleinen Schnipseln immer das Beispiel davorstand .

          Es sieht aber merkwürdig aus, wenn ein Beispiel mit den Worten „für ein Dings“ statt mit „Beispiel für ein Dings“ eingeleitet wird.

          Ja, da geh ich noch mal durch und formuliere die Titel um.

          Generell bleibt anzumerken, dass das Tutorial aus (dem unveröffentlichten) SELFHTML9 stammt und MatthiasB es dann 2010 - 2015 weitergeführt hat. Ich bin erst durch den Thread slideshow-html von Idna001 drauf gekommen, da mal wieder drüberzuschauen.

          Ich hatte immer gedacht @Felix Riesterer Vorschlag eines HTML-Kurses als eigenes Tutorial zu veröffentlichen. Das hätte dann aber zu viele Dopplungen gegeben. In Kapitel 2 habe ich diese Idee jetzt umgesetzt.

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. problematische Seite

            Hallo Matthias,

            danke für den Blick in die Historie. Ich bin zwar schon ein paar Jahre hier, aber nicht so lange. Deswegen kann es mir auch immer mal passieren, dass ich Dinge ändere, die absichtlich anders waren - weil ich die Absicht nicht kannte.

            Ich will aber auch nicht vor jedem Tastendruck nachfragen, ob das so in Ordnung geht. Das dürfte arg nervig für Dich werden. Also - wenn Du siehst, dass ich mich vergaloppiere, pfeif mich gern zurück.

            Was mir in dem Tutorial nicht ganz klar ist: Was möchtest Du von der Leserin? Dass sie die Dateien Stück für Stück auf ihrem Computer nachbaut? Das ist teilweise so geschrieben. Andererseits wird man aber auch aufgefordert, Sachen im Frickl zu machen. Ich finde, da sollte man einheitlich vorgehen. Entweder alles im Frickl, oder alles lokal. Wenn lokal, würde ich auch keine Frickls anbieten.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Servus!

              Hallo Matthias,

              danke für den Blick in die Historie. Ich bin zwar schon ein paar Jahre hier, aber nicht so lange. Deswegen kann es mir auch immer mal passieren, dass ich Dinge ändere, die absichtlich anders waren - weil ich die Absicht nicht kannte.

              Ich will aber auch nicht vor jedem Tastendruck nachfragen, ob das so in Ordnung geht. Das dürfte arg nervig für Dich werden. Also - wenn Du siehst, dass ich mich vergaloppiere, pfeif mich gern zurück.

              Was mir in dem Tutorial nicht ganz klar ist: Was möchtest Du von der Leserin? Dass sie die Dateien Stück für Stück auf ihrem Computer nachbaut? Das ist teilweise so geschrieben. Andererseits wird man aber auch aufgefordert, Sachen im Frickl zu machen. Ich finde, da sollte man einheitlich vorgehen. Entweder alles im Frickl, oder alles lokal. Wenn lokal, würde ich auch keine Frickls anbieten.

              Mist, das war ursprünglich ja ohne Blick auf Frickl geschrieben, hatte aber trotzdem die Links auf die Dateien im Beispiel-Namensraum.

              Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht und hatte das jetzt bis 1000_tolle_Sachen,_die_man_mit_CSS_machen_kann so umgearbeitet.

              Auch die von mir vorhin angesprochene Schriftgröße_von_Listen_und_Preistabelle mit dem folgenden li li, bzw wohl ul ullässt sich besser im Frickl ausprobieren.

              Die externe CSS-Datei formate.css benötigt man imho aber nicht in 4 Versionen - dann eher als Teil eines zip-Downloads unter src.selfhtml.org.

              Herzliche Grüße

              Matthias Scharwies

              --
              Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
              1. problematische Seite

                Hallo Matthias,

                Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht

                Ja ok, für manche Dinge stellt man besser eine Spielwiese bereit. Sonst hat die Leserin sich ihre lokalen Dateien nachher komplett zerschossen.

                Wobei das auch eine Lektion ist: Bevor man etwas ändert, sollte man sichern, sichern, sichern 😀

                Rolf

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Servus!

                  Hallo Matthias,

                  Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht

                  Ich habe das jetzt vorerst fertig: Kapitel 6 - Gestaltung mit CSS

                  Die Theorie habe ich zugunsten einer Infografik gekürzt.

                  Die ersten zwei Abschnitte laden zum Ausprobieren mit dem Frickl ein; im 3. Abschnitt wird die formate.css dann lokal gespeichert.

                  Kapitel 7

                  In Kapitel 7 soll es ja einerseits um Klassen und id, andererseits um Breiten und Innnen- und Außenabstände gehen.

                  Ich hatte schon mal überlegt anstelle des div ein aside zu verwenden. Die Telefonnummer im p-Absatz gefällt mir nicht. Evtl. könnte man ja address und dl einführen?

                    <h2>Kontakt</h2>
                    <address>
                      <dl>
                        <dt>Tel.</dt>
                        <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
                  
                  
                        <dt>Öffnungszeiten</dt>
                        <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
                        <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>
                  
                        <dt>E-Mail Adresse</dt>
                        <dd><a href="mailto:kontakt@example.com">kontakt@example.com</a></dd>
                  
                        <dt>Geschäftsadresse</dt>
                        <dd>Fiktives Unternehmen<br/>
                          Musterstraße 93<br/>
                          80331 München
                        </dd>
                  
                  
                      </dl>
                    </address>
                  

                  Oder würde das Anfänger erschlagen?

                  Eigentlich will ich nicht bis zu media queries und grid kommen, ein Hinweis auf den Seiteninspektor wäre aber gut.

                  Herzliche Grüße

                  Matthias Scharwies

                  --
                  Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                  1. problematische Seite

                    @@Matthias Scharwies

                          <dt>Tel.</dt>
                          <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
                    
                          <dt>Öffnungszeiten</dt>
                          <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
                          <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>
                    

                    Die Leerzeichen in der Telefonnummer und vor „Uhr“ sollten NBSP sein (wenn ein Zeilenumbruch nicht per CSS verhindert wird).

                    Es bietet sich an, die Bis-Striche zu escapen, damit der Unterschied zu den Bindestrichen (wie in der Telefonnummer) auch in für Code meist verwendeter dicktengleicher Schrift deutlich wird.

                          <dt>Tel.</dt>
                          <dd><a href="tel:+49-89-00000000">089&nbsp;00000000</a></dd>
                    
                          <dd><span>Mo&ndash;Fr:</span> <span>7:00&ndash;21:00&nbsp;Uhr</span></dd>			
                          <dd><span>Sa:</span> <span>9:00&ndash;15:00&nbsp;Uhr</span></dd>
                    
                          <dt>E-Mail Adresse</dt>
                    

                    Da fehlt ein Bindestrich.

                    😷 LLAP

                    --
                    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
                    1. problematische Seite

                      Servus!

                      Da fehlt ein Bindestrich.

                      😷 LLAP

                      Danke!!!

                      Herzliche Grüße

                      Matthias Scharwies

                      --
                      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                  2. problematische Seite

                    Hallo Matthias,

                    Kapitel 6

                    Ich bin mal mutig gewesen und habe den Abschnitt "Grundprinzip" umgestaltet. Ich hoffe, das ist ok so.

                    Kapitel 7

                    Semantik ist vermutlich viel Verhandlungssache. Und es mag sein, dass das W3C nur an akademische Papers denkt. Aber wenn man sich in der Spec durchliest, welchem Zweck das <address> Element dienen soll, dann ist es eben nicht dafür da, eine beliebige Adresse zu markieren, sondern Kontaktinformationen zum Autor des Dokuments, das auf der Seite dargestellt wird.

                    https://html.spec.whatwg.org/multipage/sections.html#the-address-element

                    Sie schreiben auch, dass man für allgemeine Adressen <p> verwenden solle.

                    Auf der Kontakt-Seite befindet sich kein Dokument. Sondern die Adresse des Seitenanbieters, bzw. die Adresse des Unternehmens, über das die Seite informiert. Insofern überschneiden sich hier die Autoren-Adresse und eine allgemeine Adresse etwas. Aus meiner Sicht stellt Adresse auf der Kontakt-Seite aber eher nicht die Autorenadresse dar. Allein schon die Anwesenheit der Öffnungszeiten spricht gegen eine Autorenreferenz.

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    1. problematische Seite

                      @@Rolf B

                      https://html.spec.whatwg.org/multipage/sections.html#the-address-element

                      Sie schreiben auch, dass man für allgemeine Adressen <p> verwenden solle.

                      Wieder mal so ’ne Stelle, wo die WHATWG-Spec und die W3C-Spec was anderes sagen. Dort heißt es nämlich:

                      “The address element represents contact information for a person, people or organization.”

                      Finde ich sinnvoller. Aber was weiß ich schon? Die WHATWG weiß ja alles besser.

                      Auf der Kontakt-Seite befindet sich kein Dokument. Sondern die Adresse des Seitenanbieters, bzw. die Adresse des Unternehmens, über das die Seite informiert. Insofern überschneiden sich hier die Autoren-Adresse und eine allgemeine Adresse etwas. Aus meiner Sicht stellt Adresse auf der Kontakt-Seite aber eher nicht die Autorenadresse dar. Allein schon die Anwesenheit der Öffnungszeiten spricht gegen eine Autorenreferenz.

                      Der Autor der Kontaktseite ist die Organisation, die die Website betreibt. Da passt address auch gemäß der WHATWG-Spec.

                      😷 LLAP

                      --
                      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
                      1. problematische Seite

                        Hallo Gunnar,

                        Semantik ist vermutlich viel Verhandlungssache.

                        Man kann es vermutlich so deuten, dass <address> passt. Die Frage ist, wie es die Hersteller von Screenreadern oder Webcrawlern deuten, denn <address> ist ja nur dann wirklich sinnvoll, wenn damit etwas sehr spezifisches geschieht. Als Selektor für Styles genügt eine Klasse.

                        Rolf

                        --
                        sumpsi - posui - obstruxi