Mark: Text/Wörter/Bild in jeder ecke

041

Text/Wörter/Bild in jeder ecke

  1. 0
  2. 0
    1. 0
      1. 1
        1. 0
          1. 0
            1. 0
              1. 0
                1. 0
                  1. 0
                  2. 3
                    1. 0
                      1. 0
                    2. 0
              2. 4
                1. 0
                  1. 0
                    1. 1
        2. 0
          1. 0
  3. -4
    1. 0
      1. 0
        1. 1
      2. 0
        1. 1
          1. 0
            1. 0
            2. 0
        2. 3

          Wie soll HTML unterrichtet werden?

          1. 0
    2. 0
      1. 0
        1. 1
          1. 0
        2. 1
      2. 0
        1. 0
          1. 0
    3. 2

Guten Tag, ich habe gestern mit html angefangen und habe eine Frage. Wie schafft man es in jeder ecke ein Wort/Text/bild hinzuschreiben? Hier ein beispiel wie es aussehen sollte: So soll es ca. aussehen aber halt richtig formatiert habe es nur provisorisch in die ecken gemacht.

  1. Hallo

    HTML und CSS sind grundsätzlich zur Informationsübermittlung gedacht, nicht für solche Spielereien.

    Die Anordnung lässt sich entweder mit Flexbox oder CSS-Grid erreichen. Was sinnvoller ist hängt vom konkreten Inhalt und Quelltext ab, den wir nicht kennen.

    Gruss

    MrMurphy

  2. @@Mark

    Wie schafft man es in jeder ecke ein Wort/Text/bild hinzuschreiben?

    In jede Ecke wovon?

    habe es nur provisorisch in die ecken gemacht.

    9× „Test“, 4 Ecken. Irgendwas stimmt da nicht.

    Was genau willst du?

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Habe es jetzt einfach "ecke" genannt aber ich meine es so wie ich es in paint hingemacht habe.

      1. @@Mark

        Du möchtest deine Fläche (body? main?) in 3×3 Felder aufteilen? → Grid

        Um die Inhalte in den Gridzellen auszurichten, könnte man diese zu Flexboxen machen: Beispiel.

        Das ist aber vermutlich zu viel auf einmal, wenn du gestern erst angefangen hast. Mach erstmal die Aufteilung mit Grid und lass die Inhalte in den Zellen links oben.

        Und wie soll’s denn aussehen, wenn nicht 3 Spalten nebeneinander passen (auf Smartphones bspw.)?

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Danke so wie im Beispiel soll es aussehen aber wie funktioniert das in html?

          1. @@Mark

            Danke so wie im Beispiel soll es aussehen aber wie funktioniert das in html?

            Gar nicht. HTML ist nicht dazu da, Elemente anzuordnen; sondern dazu, Seiteninhalte entsprechend ihrer Funktion auszuzeichnen: Überschriften, Textabsätze, Links, Listen, Formulare, Eingabefelder, Buttons, …

            Das Layouten und Stylen ist Sache von CSS. ☞ Einstieg

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. also mir wurde gesagt, dass das irgendwie mit <table> geht

              1. @@Mark

                also mir wurde gesagt, dass das irgendwie mit <table> geht

                Höre nicht auf diese Stimmen! Tabellen sind nicht zum Layouten da.

                „Tabellen heißen so, weil sie in Zeilen und Spalten aufteilbare Daten darstellen sollen, die zueinander in irgendeiner Relation stehen. Wären sie zum Gestalten erfunden worden, hieße sie Gestelle.“ —Jaroslav Jablonski

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. die "Stimme" ist leider mein Lehrer haha

                  1. @@Mark

                    die "Stimme" ist leider mein Lehrer haha

                    Dann solltest du die Schule wechseln.

                    LLAP 🖖

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  2. Hej Mark,

                    die "Stimme" ist leider mein Lehrer haha

                    Um ihn in Schutz zu nehmen: viele Lehrer haben keine Ahnung von HTML und CSS, weil sie es nebenher mitmachen zu müssen.

                    Was wir hier an Beispielen aus der Schule bekommen, ist entsprechend veraltet (meist über ein Jahrzehnt - im Web eine Ewigkeit).

                    Layout-Tabellen sind etwa seit der Jahrtausendwende verpönt. Vielleicht warst du da noch nicht einmal geboren. Um das mal in Relation zu setzen.

                    Wie bereits von Gunnar gesagt, muss als erstes eine HTML-Datei erstellt werden. Die Inhalte haben ausschließlich ihrer logischen Bedeutung entsprechend ausgezeichnet zu werden. Anschließend würde man diese Inhalte sinnvoll anordnen — auf einem Smartphone anders als auf einem großen Bildschirm. Begonnen wird immer mit der Smartphone-Darstellung. Bereits hier (also bei dem ersten Versuch) wird Dein Lehrer kläglich scheitern, das garantiere ich. Mit seiner Vorstellung von einem Tabellen-Layout kann das nichts werden.

                    HTML und CSS auf einem Niveau zu kennen, dass es gelehrt werden kann, bedarf es ständiger Weiterbildung. Das leistet sich kaum jemand neben dem Schulalltag nebenher. Wir haben ein paar Lehrkräfte hier, aber die sind ganz offensichtlich die Ausnahme. Verständlich. Aber fatal. Denn das, was üblicherweise in Schulen an HTML und CSS unterrichtet ist, ist nicht nur unbrauchbar, sondern leider schädlich. Jedenfalls all die Fälle, die mir hier zu Gesicht gekommen sind.

                    IMHO sollten Schulen für solche Kurse externe Fachkräfte auf Hoonorar-Basis anheuern. Lehrern fehlt schlicht die Zeit, ihr Wissen aktuell zu halten.

                    Marc

                    1. hallo

                      Begonnen wird immer mit der Smartphone-Darstellung.

                      betonst du oder stellst du in Frage?

                      Bei Tabellen beginne ich mitnichten bei den schmalsten viewports.

                      -- https://beat-stoecklin.ch/pub/index.html
                      1. Hej beatovich,

                        Begonnen wird immer mit der Smartphone-Darstellung.

                        betonst du oder stellst du in Frage?

                        Bei Tabellen beginne ich mitnichten bei den schmalsten viewports.

                        Beim Layout. Ich bin von Layout-Tabellen ausgegangen. Aber der Beitrag war eh überflüssig. Hatte erst zu spät gesehen, dass alles wichtige bereits gesagt war. 😉

                        Marc

                    2. Passt IMHO alles. Nur:

                      Layout-Tabellen sind etwa seit der Jahrtausendwende verpönt.

                      Verpönt mag ja sein, aber mangels Alternativen war Tabellenlayout noch ein paar Jährchen nach der Jahrtausendwende "state of the art". Ich erinnere mich noch gut, wie der letzte relevante Netscape auf so manche CSS-Angaben reagiert hat 😉

              2. @@Mark

                also mir wurde gesagt, dass das irgendwie mit <table> geht

                Es gab einmal eine Zeit, da ging das nur mit <table>. Das war, bevor es CSS gab, und ist schon mehr als 20 Jahre her. (Also lange bevor du geboren wurdest?)

                Damals hat man mit Elementen wie <table> und <font> und allerhand Attributen wie bgcolor und align gestaltet, weil es noch nichts anderes gab. Ach, und nicht zu vergessen: 1×1 Pixel große Spacer-GIFs. Das sah in etwa so aus wie in diesem Pen nachgestellt.1 Grausames Mittelalter – mit Hexenbeschwörung und Folter.

                Wenn dein Lehrer heutzutage sagt, das ginge mit <table>, dann ist er im Mittelalter steckengeblieben, ohne Renaissance, ohne Aufklärung. Wenn du HTML und CSS lernen möchtest, dann nicht dort, sondern hier. Und das Wissen in deine Schule einbringen. Wenn es ein guter Lehrer ist, wird er es dankbar annehmen.

                LLAP 🖖

                PS: Den Text kannst du ausdrucken und deinem Lehrer vorlegen. Aber nicht „hier schaun Se mal, Sie sind doof“, sondern „hier schaun Se mal, was soll man denn davon halten?“ Dann bin ich der Böse, nicht du. 😉

                1. Etwas CSS hab ich allerdings doch gebraucht, um die Tabelle die Höhe des Viewports ausfüllen zu lassen. Ich wüsste nicht, wie man das ohne CSS hinbekäme.

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Danke, habe morgen Info werde ihm das mal zeigen :D Aber habe noch eine frage undzwar geht das auch mit Bildern anstatt mit Wörtern? Tut mir leid wenn ich mich so dumm anstelle aber wie ich gemerkt habe sollte ich mir es selber beibringen und nicht durch meinem Lehrer :D

                  1. @@Mark

                    geht das auch mit Bildern anstatt mit Wörtern?

                    Ja geht.

                    Wo du Text hinschreiben kannst, kannst du auch Bilder einbinden (an den meisten Stellen).

                    LLAP 🖖

                    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Danke aber ich versteh nicht ganz wie man in notepad++ html mit css "verbinden" kann.

                      edit: Ok hat sich schon erledigt habe es grade selbst herrausgefunden.

        2. Hallo Gunnar,

          Und wie soll’s denn aussehen, wenn nicht 3 Spalten nebeneinander passen (auf Smartphones bspw.)?

          Solange da nur Test drinsteht, passt das schon.

          Aber für einen Lehrer, dessen Kenntnisse auf dem Stand von table-Layout sind, ist responsive Layout vermutlich reine Science Fiction.

          <ironie>
          Für die Mobilisten haben wir statt www.example.org/dreimaldrei.html die Seite www.example.org/mobile-variante/sumsang/phone/dreinaldrei.html aufrufen (oder eine andere, je nach Marke, wir haben das individuell optimiert!). Wie, HTTP 404? Keine Ahnung, auf meinem Molorota läufts, du machst bestimmt was falsch...
          </ironie>

          Rolf

          -- sumpsi - posui - clusi
          1. hallo

            <ironie>
            Für die Mobilisten haben wir statt www.example.org/dreimaldrei.html die Seite www.example.org/mobile-variante/sumsang/phone/dreinaldrei.html aufrufen (oder eine andere, je nach Marke, wir haben das individuell optimiert!). Wie, HTTP 404? Keine Ahnung, auf meinem Molorota läufts, du machst bestimmt was falsch...
            </ironie>

            Das Traurige an deiner Ironie ist ja, dass du mobile mit Geräten assoziierst.

            -- https://beat-stoecklin.ch/pub/index.html
  3. Hallo,

    ich bin der ursprüngliche Gründer dieses Forums und hier gerade mal zufällig wieder reingeschneit. Die Antworten hier haben mich spontan dazu verleitet, kundzutun, welche Antwort ich dir heute geben würde:

    <!DOCTYPE html> <html> <head> <title>Doc</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-display-container w3-green" style="height:250px;"> <div class="w3-display-topleft w3-padding">Top Left</div> <div class="w3-display-topright w3-padding">Top Right</div> <div class="w3-display-bottomleft w3-padding">Bottom Left</div> <div class="w3-display-bottomright w3-padding">Bottom Right</div> <div class="w3-display-left w3-padding">Left</div> <div class="w3-display-right w3-padding">Right</div> <div class="w3-display-middle w3-padding">Middle</div> <div class="w3-display-topmiddle w3-hide-small w3-padding">Top Middle</div> <div class="w3-display-bottommiddle w3-hide-small w3-padding">Bottom Middle</div> </div> </body> </html>

    Probiere es aus und werde glücklich damit. Und wenn du Fragen zum Verständnis des Codes hast, dann melde dich wieder. Aber guck dir auch mal die URL-Adresse der eingebunden CSS-Datei an. Vielleicht rufst du die ja mal im Browser auf und wirst neugierig. Viel Spaß beim Basteln.

    viele Grüße, Stefan Münz

    1. Servus!

      Hallo,

      ich bin der ursprüngliche Gründer dieses Forums und hier gerade mal zufällig wieder reingeschneit.

      Hallo! Schön wieder von Dir zu hören!

      Die Antworten hier haben mich spontan dazu verleitet, kundzutun, welche Antwort ich dir heute geben würde:

      ...

      Probiere es aus und werde glücklich damit. Und wenn du Fragen zum Verständnis des Codes hast, dann melde dich wieder.

      Der Lehrer wollte, dass die Schüler als Hausaufgabe eine 3x3 Tabelle bauen. CSS kommt wsl. später (weil Mark es ja wohl noch nicht beherrschte).

      @Gunnar Bittersmann hat, wenn man die vielen Ablenkungen / off-topic-rants streicht, schon die Antwort gegeben:

      Das Layouten und Stylen ist Sache von CSS. ☞ Einstieg in CSS

      Des Weiteren hat er auch ein Live-Beispiel gebaut und gezeigt:

      geht das auch mit Bildern anstatt mit Wörtern?

      Ja geht.

      Wo du Text hinschreiben kannst, kannst du auch Bilder einbinden (an den meisten Stellen).

      Aber guck dir auch mal die URL-Adresse der eingebunden CSS-Datei an. Vielleicht rufst du die ja mal im Browser auf und wirst neugierig. Viel Spaß beim Basteln.

      Ich hoffe auch, dass die Neuen nicht verschreckt werden. Aber mit presentational CSS kann man auf Dauer auch nicht locken.

      Herzliche Grüße

      Matthias Scharwies

      -- "I don’t make typos. I make new words."
      1. Hallo Matthias,

        OK, macht halt so weiter. Das waren einfach meine 2 Cent.

        viele Grüße Stefan

        1. @@Stefan Münz

          OK, macht halt so weiter.

          Höre ich da ein Missfallen raus?

          Bei mir ist es jedenfalls so: Dass ich den Kram überhaupt mache, habe ich zu einem Großteil auch dir zu verdanken. Keine Ahnung, wo ich gelandet wäre, wenn es vor 15+ Jahren SELFHTML nicht gegeben hätte. Dadurch kam ich zur Webentwicklung. Durch deine Doku hab ich unglaublich viel gelernt.

          Und durch das Forum – insbesondere von Leuten, die damals wohl noch krasser drauf waren als ich heute. 😈 (Du warst schon weg als ich kam.)

          Da sag ich an der Stelle einfach mal: Hut ab und danke!

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. @@Matthias Scharwies

        Der Lehrer wollte, dass die Schüler als Hausaufgabe eine 3x3 Tabelle bauen. CSS kommt wsl. später (weil Mark es ja wohl noch nicht beherrschte).

        „Jestaltet ärstmal ohne CSS; dat krieje mer später“ ist Unsinn. Fachlich sowieso, aber IMHO auch pädogogisch. Wenn man in der ersten Stunde nur die Grundlagen von HTML lehrt und CSS nicht zum Inhalt der ersten Stunde gehört, dann gehört Gestaltung nicht zum Inhalt der ersten Stunde. Damit fängt man dann in der zweiten Stunde an – mit CSS. ☞ Hausaufgabe Tabelle (Kann ich doch nichts dafür, dass jener Thread so hieß. 😆)

        @Gunnar Bittersmann hat, wenn man die vielen Ablenkungen / off-topic-rants streicht,

        ?? Ich schweife ja gerne mal ab. In diesem Thread aber nirgends.

        Des Weiteren hat er auch ein Live-Beispiel gebaut und gezeigt:

        Drei. Eins davon als abschreckendes Beispiel.

        Aber mit presentational CSS kann man auf Dauer auch nicht locken.

        presentational mark-up meintest du?

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Aloha ;)

          Der Lehrer wollte, dass die Schüler als Hausaufgabe eine 3x3 Tabelle bauen. CSS kommt wsl. später (weil Mark es ja wohl noch nicht beherrschte).

          „Jestaltet ärstmal ohne CSS; dat krieje mer später“ ist Unsinn. Fachlich sowieso, aber IMHO auch pädogogisch. Wenn man in der ersten Stunde nur die Grundlagen von HTML lehrt und CSS nicht zum Inhalt der ersten Stunde gehört, dann gehört Gestaltung nicht zum Inhalt der ersten Stunde. Damit fängt man dann in der zweiten Stunde an – mit CSS. ☞ Hausaufgabe Tabelle (Kann ich doch nichts dafür, dass jener Thread so hieß. 😆)

          Ich möchte an der Stelle allerdings noch den Lehrer in Schutz nehmen. Dass es hier um eine Layout-Tabelle ging ist für mich zwar möglich, aber lange nicht erwiesen.

          Es kann auch einfach sein, dass es lediglich darum ging, eine Tabelle zu erstellen, die (mehr oder weniger) tabellarische Daten beinhaltet. Ja, auch die Texte „oben links“, „oben mitte“, „oben rechts“, „mitte links“, etc. pp. sind per se tabellarische Daten. Vielleicht keine sinnvollen, aber sie sind tabellarisch und Zeilen und Spalten sind inhaltlich zusammenhängend.

          Wir kennen nur das, was uns Mark über den Auftrag erzählt hat, und das kann auch gut (ohne böse Absicht versteht sich) einfach paraphrasiert worden sein.

          Vielleicht war die Aufgabe an der Stelle einfach nur, eine Tabelle mit drei Zeilen und drei Spalten zu erstellen - und das wäre beim Lernen von HTML auch sinnvoll. Ja, es wäre noch sinnvoller, dazu gleich sinnvolle tabellarische Daten zu verwenden. Aber auch da wissen wir nicht, ob die sinnvollen tabellarischen Daten vielleicht Teil des ursprünglichen Auftrags waren und es nur nicht hier her geschafft haben.

          @Gunnar Bittersmann hat, wenn man die vielen Ablenkungen / off-topic-rants streicht,

          ?? Ich schweife ja gerne mal ab. In diesem Thread aber nirgends.

          Das möchte ich an der Stelle gerne bekräftigen. Ich fand dich in diesem Thread sehr hilfsbereit und auf das Problem fokussiert. Ich verstehe die Kritik nicht (egal von wem).

          Aber mit presentational CSS kann man auf Dauer auch nicht locken.

          presentational mark-up meintest du?

          Ja, schätze auch. Vielleicht noch genauer: presentational class names.

          Grüße,

          RIDER

          -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

          # Twitter # Steam # YouTube # Self-Wiki #

          Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          1. @@Camping_RIDER

            Ich möchte an der Stelle allerdings noch den Lehrer in Schutz nehmen.

            Das ist nobel.

            Es kann auch einfach sein, dass es lediglich darum ging, eine Tabelle zu erstellen, die (mehr oder weniger) tabellarische Daten beinhaltet.

            Würde man denn eine Datentabelle so stylen, dass

            1. die Spalten in der Breite auseinandergerissen werden und dazwischen große Lücken klaffen?
            2. die linke Spalte linksbündig, die mittlere zentriert und die rechte rechtsbündig ausgerichte ist?
            3. die Zeilen in der Höhe auseinandergerissen werden und dazwischen große Lücken klaffen?

            Für Links-/Rechtsbündigkeit kann es gute Gründe geben (Text linksbündig, Zahlen rechtsbündig); für zentrierte Spalten eher nicht.

            Die Antwort auf Fragen 1 und 3 dürfte jeweils ein klares Nein sein.

            Dass es hier um eine Layout-Tabelle ging ist für mich zwar möglich, aber lange nicht erwiesen.

            Ohne den genauen Inhalt zu kennen, kann man das nicht ganz genau sagen, aber die Indizien … wie Der Martin zu sagen pflegte: Es müffelt.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Aloha ;)

              Es kann auch einfach sein, dass es lediglich darum ging, eine Tabelle zu erstellen, die (mehr oder weniger) tabellarische Daten beinhaltet.

              Würde man denn eine Datentabelle so stylen, dass

              1. die Spalten in der Breite auseinandergerissen werden und dazwischen große Lücken klaffen?
              2. die linke Spalte linksbündig, die mittlere zentriert und die rechte rechtsbündig ausgerichte ist?
              3. die Zeilen in der Höhe auseinandergerissen werden und dazwischen große Lücken klaffen?

              Für Links-/Rechtsbündigkeit kann es gute Gründe geben (Text linksbündig, Zahlen rechtsbündig); für zentrierte Spalten eher nicht.

              Die Antwort auf Fragen 1 und 3 dürfte jeweils ein klares Nein sein.

              Natürlich ist das ein Nein! Aber wie bereits gesagt: Wir kennen die ursprüngliche Aufgabenstellung nicht, sondern nur den paraphrasierten Inhalt, den uns der TO hier als Frage ins Forum gegeben hat.

              Dass es hier um eine Layout-Tabelle ging ist für mich zwar möglich, aber lange nicht erwiesen.

              Ohne den genauen Inhalt zu kennen, kann man das nicht ganz genau sagen, aber die Indizien … wie Der Martin zu sagen pflegte: Es müffelt.

              Die Wahrscheinlichkeit dafür, dass die Aufgabenstellung falsch verstanden und entsprechend verfälscht an uns weitergetragen wurde ist mMn etwa genauso hoch wie die Wahrscheinlichkeit dafür, dass der Lehrer an der Stelle eine völlig fehlgeleitete Aufgabe gestellt hat.

              Bedenke auch, dass die zugehörige Skizze aus dem TO, aus der du einen Teil deiner Schlussfolgerungen ziehst, ja vom TO selbst erstellt wurde (und nicht etwa exakt so vorgegeben war).

              Was nicht heißt, dass es nicht so gewesen sein kann. Ich warne nur vor einer Vorverurteilung 😉

              Grüße,

              RIDER

              -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

              # Twitter # Steam # YouTube # Self-Wiki #

              Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            2. @@Gunnar Bittersmann

              Für Links-/Rechtsbündigkeit kann es gute Gründe geben (Text linksbündig, Zahlen rechtsbündig); für zentrierte Spalten eher nicht.

              In dem Zusammenhang sei nochmal der A-List-Apart-Artikel „Web Typography: Designing Tables to be Read, Not Looked At“ erwähnt, Abschnitt Left-align text, right-align numbers, and align headings with data

              LLAP 🖖

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        2. Servus!

          @@Matthias Scharwies

          Der Lehrer wollte, dass die Schüler als Hausaufgabe eine 3x3 Tabelle bauen. CSS kommt wsl. später (weil Mark es ja wohl noch nicht beherrschte).

          „Jestaltet ärstmal ohne CSS; dat krieje mer später“ ist Unsinn. Fachlich sowieso, aber IMHO auch pädogogisch. Wenn man in der ersten Stunde nur die Grundlagen von HTML lehrt und CSS nicht zum Inhalt der ersten Stunde gehört, dann gehört Gestaltung nicht zum Inhalt der ersten Stunde. Damit fängt man dann in der zweiten Stunde an – mit CSS. ☞ Hausaufgabe Tabelle (Kann ich doch nichts dafür, dass jener Thread so hieß. 😆)

          Also haben wir 2 Probleme:

          1. Die Hausaufgabe des Threaderstellers Mark

          2. Die Frage, wie an Schulen, VHSen, usw. HTML unterrichtet wird.

            • @@Felix Riesterer hat mal vorgestellt, dass sein HTML-Kurs mit Textauszeichnung eines .txt-Dokuments anfängt und nach 10min bei Links landet, damit die Schüler kreativ werden können.
            • Auch in unserem Einstieg in HTML kommt die Preistabelle gleich in Kap 3 - in einer Diskussion plädierten andere, sie drin zu lassen

          Ich würde lieber versuchen, Thema 2 voranzubringen, indem wir …

          • Kurse entwickeln, die zeitgemäß sind
          • zumindest im Blog die Problematik solch „steinzeitlicher“ Aufgabenstellungen thematisieren.

          Herzliche Grüße

          Matthias Scharwies

          -- "I don’t make typos. I make new words."
          1. Felix Riesterer hat mal vorgestellt, dass sein HTML-Kurs mit Textauszeichnung eines .txt-Dokuments anfängt und nach 10min bei Links landet,

            Oh. Das vollzieht ja quasi die Entwicklung von FTP über Gopher zur ersten HTML-Version nach. (und ist richtig, weil es dem der Entwicklung zu Grunde liegenden Motivationspfad folgt)

    2. Aloha ;)

      ich bin der ursprüngliche Gründer dieses Forums und hier gerade mal zufällig wieder reingeschneit.

      Schön.

      <!DOCTYPE html> <html> <head> <title>Doc</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-display-container w3-green" style="height:250px;"> <div class="w3-display-topleft w3-padding">Top Left</div> <div class="w3-display-topright w3-padding">Top Right</div> <div class="w3-display-bottomleft w3-padding">Bottom Left</div> <div class="w3-display-bottomright w3-padding">Bottom Right</div> <div class="w3-display-left w3-padding">Left</div> <div class="w3-display-right w3-padding">Right</div> <div class="w3-display-middle w3-padding">Middle</div> <div class="w3-display-topmiddle w3-hide-small w3-padding">Top Middle</div> <div class="w3-display-bottommiddle w3-hide-small w3-padding">Bottom Middle</div> </div> </body> </html>

      Kannst du mir erklären, was die Vorteile bei diesem Ansatz sind?

      Die HTML-Spec sagt zum class-Attribut „authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content“.

      Ich lese da eine Art soll-Bestimmung heraus, dass Klassennamen in der Regel Inhalt und nicht Präsentation beschreiben sollen.

      Gibt es einen Grund, das an der Stelle über Bord zu werfen?

      Grüße,

      RIDER

      -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

      # Twitter # Steam # YouTube # Self-Wiki #

      Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      1. hallo

        Aloha ;)

        ich bin der ursprüngliche Gründer dieses Forums und hier gerade mal zufällig wieder reingeschneit.

        Schön.

        <!DOCTYPE html> <html> <head> <title>Doc</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-display-container w3-green" style="height:250px;"> <div class="w3-display-topleft w3-padding">Top Left</div> <div class="w3-display-topright w3-padding">Top Right</div> <div class="w3-display-bottomleft w3-padding">Bottom Left</div> <div class="w3-display-bottomright w3-padding">Bottom Right</div> <div class="w3-display-left w3-padding">Left</div> <div class="w3-display-right w3-padding">Right</div> <div class="w3-display-middle w3-padding">Middle</div> <div class="w3-display-topmiddle w3-hide-small w3-padding">Top Middle</div> <div class="w3-display-bottommiddle w3-hide-small w3-padding">Bottom Middle</div> </div> </body> </html>

        Kannst du mir erklären, was die Vorteile bei diesem Ansatz sind?

        Die HTML-Spec sagt zum class-Attribut „authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content“.

        Tja die nature of the content heisst entwederm etwas hat semantischen gehalt, und da kommst du mit Klassen nicht weit weil du besser dich bei schema.org bedienst, oder der Inhalt ist so generische (auswechselbar) dass dir kein Klassename einfällt.

        Bevor ich Klassen verschwende, schau ich mich gerne zuerst bei role Attributen um.

        Und ansonsten sind Klassen dort angesagt, wo ich Inhalte via JS query sammle.

        klassen haben also wirklich viel mehr mit der Behandlung zu tun, als mit dem Inhalt.

        Ich lese da eine Art soll-Bestimmung heraus, dass Klassennamen in der Regel Inhalt und nicht Präsentation beschreiben sollen.

        viel Spass dabei.

        -- https://beat-stoecklin.ch/pub/index.html
        1. Aloha ;)

          Die HTML-Spec sagt zum class-Attribut „authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content“.

          Tja die nature of the content heisst entwederm etwas hat semantischen gehalt, und da kommst du mit Klassen nicht weit weil du besser dich bei schema.org bedienst, oder der Inhalt ist so generische (auswechselbar) dass dir kein Klassename einfällt.

          Bevor ich Klassen verschwende, schau ich mich gerne zuerst bei role Attributen um.

          Und ansonsten sind Klassen dort angesagt, wo ich Inhalte via JS query sammle.

          klassen haben also wirklich viel mehr mit der Behandlung zu tun, als mit dem Inhalt.

          Und inwiefern beantwortet das jetzt meine Frage? Ich stelle sie gerne nochmal:

          Kannst du mir erklären, was die Vorteile bei diesem Ansatz sind?

          Ich lese da eine Art soll-Bestimmung heraus, dass Klassennamen in der Regel Inhalt und nicht Präsentation beschreiben sollen.

          viel Spass dabei.

          Deine Einstellung - oder zumindest das, was du sagst, und meine Rückschlüsse auf deine Einstellung - sprechen manchmal Bände.

          Grüße,

          RIDER

          -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

          # Twitter # Steam # YouTube # Self-Wiki #

          Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          1. hallo

            Und inwiefern beantwortet das jetzt meine Frage? Ich stelle sie gerne nochmal:

            Das kann ich natürlich nachholen:

            Kannst du mir erklären, was die Vorteile bei diesem Ansatz sind?

            Ehrlich gesagt sind die Vorteile nicht ersichtlich. Aber in Hinsicht auf die die Information betreffende Information können wir ja mit der Klasse "test" arbeiten, und das für alle neun Elemente.

            -- https://beat-stoecklin.ch/pub/index.html
        2. @@beatovich

          Bevor ich Klassen verschwende, schau ich mich gerne zuerst bei role Attributen um.

          Ui. Ich will nicht in Abrede stellen, dass du da weißt, was du tust. Nur allgemein als Warnhinweis:

          Wenn man nicht ganz genau weiß, was man tut, kann man mit ARIA mehr Schaden als Nutzen anrichten. Falsches ARIA ist für Barrierefreiheit schlimmer als gar kein ARIA.

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Die HTML-Spec sagt zum class-Attribut „authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content“.

        Ich lese da eine Art soll-Bestimmung heraus, dass Klassennamen in der Regel Inhalt und nicht Präsentation beschreiben sollen.

        Gibt es einen Grund, das an der Stelle über Bord zu werfen?

        Tja. Beispiele haben oft eigentlich keinen beschreibbaren Inhalt. Vorliegend ist jedenfalls kein solcher bekannt. "to use values that describe the nature of the content," endet hier also darin, die vorhandenen Items wie "Top Left" zu "verbauen".

        @Stefan Münz:

        Was mir aber Bauchschmerzen macht, ist für die Antwort eine CSS-Datei von einem fremden Server zu verwenden, welche laut

        wget -O - https://www.w3schools.com/w3css/4/w3.css | wc -l

        zwar für einen wie mich wie gerade noch kein "Monster" ist, aber immerhin über 8KB und 232 Zeilen hat und ergo für einen Anfänger als ein "unüberwindbar erscheinendes Monster" erscheint - und ihn eher verwirrt. Wir (ich beziehe mich ohne formale Gründe einfach mal ein) bitten schon die Fragesteller, sich bei der Darstellung des Problems auf den "relevanten Quelltext" zu beschränken.

        Wörtlich:

        Zeige den problematischen Quellcode! Entweder im Posting selbst oder mittels Link auf die betreffende Seite. Funktionierende Glaskugeln sind eine Rarität und bloßes Rätselraten erschwert eine schnelle und gute Hilfe. Gerne wird es gesehen, wenn der Quellcode auf die für das Problem notwendigen Stellen reduziert wird, schließlich hat kaum jemand Lust, sich in hunderte Zeilen unnötigen Code einzuarbeiten.

        Für Antwortende sollte das noch viel mehr gelten. Ganz besonders für "forumsnahe":

        Du solltest dich in deiner Antwort dem Niveau des Fragenden anpassen.

        Man sollte also Fragende nicht in 232 Zeilen Quellcode "wühlen" lassen. Insbesondere solche nicht, bei denen unklar ist ob die diesen überhaupt abholen und ansehen können.

        @Bewerter:

        Also. Man kann ja einen Beitrag für sich selbst schlecht finden. Aber ich frage mich hinsichtlich der Wirkung, ob eine dritte oder fünfte Negativbewertung noch sinntragend ist. Und ich frage mich, ob man diesen "Klick" nicht überlegter tätigen sollte.

        1. Hallo ursus,

          grundsätzlich zeigen mehrere Negativbewertungen, dass die Meinung „dat war nu nix“ keine Einzelmeinung ist. Ein Einzelminus kann man als „irgendwer meckert immer“ abtun.

          Aber die 5. Negativbewertung hat einen weiteren Effekt, nämlich den, dass der Beitrag nur noch auf Anforderung sichtbar ist. Daran hatte ich nicht gedacht und habe darum mein [-] (das war das fünfte) wieder entfernt.

          Rolf

          -- sumpsi - posui - clusi
          1. grundsätzlich zeigen mehrere Negativbewertungen, dass die Meinung „dat war nu nix“ keine Einzelmeinung ist.

            Das weiß ich wohl. Allerdings gibt es bei derart massierten Negativbewertungen auch erhebliche Nebeneffekte. Immerhin assoziieren viele Betrachter (gerade die Bewerteten) die Bewertungen nicht mit "Anzahl der Bewerter" sondern mit "Qualität des Beitrages".

            Die Nachteile der technischen Wirkung ("dass der Beitrag nur noch auf Anforderung sichtbar ist") treten meines Erachtens nach in manchen Fällen weit hinter der psychologischen zurück. Dies weil der Betroffene es - natürlich - persönlich nimmt. Insofern sollte man sich meiner geringen Meinung nach vor einem "Klick" stets fragen, ob die eigene, zusätzlich zu den vorherigen erfolgende Manifestation nicht eine unbeabsichtigte Wirkung hat.

            Vielleicht sollte man lieber an anderer Stelle ein "Plus" geben um den eigenen Zuspruch zu einer inhaltlich richtig erscheinenden und als angemessen formuliert empfundenden Kritik zu demonstrieren.

    3. @@Stefan Münz

      <div class="w3-display-container w3-green" style="height:250px;"> <div class="w3-display-topleft w3-padding">Top Left</div> <div class="w3-display-topright w3-padding">Top Right</div> <div class="w3-display-bottomleft w3-padding">Bottom Left</div> <div class="w3-display-bottomright w3-padding">Bottom Right</div> <div class="w3-display-left w3-padding">Left</div> <div class="w3-display-right w3-padding">Right</div> <div class="w3-display-middle w3-padding">Middle</div> <div class="w3-display-topmiddle w3-hide-small w3-padding">Top Middle</div> <div class="w3-display-bottommiddle w3-hide-small w3-padding">Bottom Middle</div> </div>

      Probiere es aus und werde glücklich damit.

      Am Ende sollte der Nutzer der Seite glücklich werden. Und das ist bei diesem Markup nicht gegeben: die Reihenfolge der divs ist falsch. Die Reihenfolge im DOM sollte mit der visuellen Reihenfolge auf dem Bildschirm übereinstimmen. Tut sie das nicht, liest ein Screenreader den Seiteninhalt völlig durcheinander vor.

      Aber guck dir auch mal die URL-Adresse der eingebunden CSS-Datei an.

      Gefrickel mit absoluter Positionierung. Warum sollte sich ein Anfänger das antun, wo es doch CSS Grid gibt? – Hier nicht nur das beste Mittel zum Layouten, sondern auch das einfachste.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann