hmm: Paar kleine Fragen Blog

Hi Leute,

Montag ist meine Web-Klausur und ich gehe gerade das Skript und die Hausuafgaben durch. Ich schreib alle Fragen die sich mit ergeben hier in diesen Blog, eventuell könnt ihr mir die ein oder andere beantworten.

  1. Frage 1:

    In meinem Skript stehet <div style="color: blue">hallo</div> unter "HTML mit der einbindung von CSS"

    und <p style="red">hallo</p>, <h1> etc. unter HTML mit semantik und der einbindung von css

    Wenn ich in der Prüfung gefragt werde was der unterschied zwischen <p> und <div> ist, was würde ich dann da hinschreiben? Angenommen das wäre eine 1/100 Punkte Aufgabe.

    1. @@hmm

      In meinem Skript stehet <div style="color: blue">hallo</div> unter "HTML mit der einbindung von CSS"

      Wegen diesem Unsinn würde ich dein Skript als fehlerhaft bezeichnen.

      und <p style="red">hallo</p>

      Wenn das drinsteht, ist es garantiert fehlerhaft.

      Wenn ich in der Prüfung gefragt werde was der unterschied zwischen <p> und <div> ist, was würde ich dann da hinschreiben?

      Zunächst einmal, dass p für Textabsätze steht, div ein allgemeines Element ohne Bedeutung ist.

      Außerdem, dass p nur phrasing content (Inline-Elemente) enthalten darf, div jedoch flow content (auch Blockelemente).

      Wenn du gut bist, noch, dass p per Browserstylesheet Abstand nach oben und unten hat; div nicht.

      LLAP 🖖

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

        <body> 
        <h1
         style="font-size: 30px; color: red"> 
          Webtechnologien 
        </h1>
        <h2
         style="font-size: 24 px; color: blue"> 
          Vorlesung im Studiengang Medieninformatik 
        </h2>
        <p>
          HTML liefert die Inhalte einer Website 
          in einer strukturierten Form. 
        </p>
        <p>
          CSS ergänzt das HTML und bereitet die Inhalte optisch auf. 
          Eine gute HTML-Struktur ist elementar für Suchmaschinen. 
        </p>
        </body>
        

        das war das beispiel für "html mit semantik und eingebetteter css".

        beim <p style=...> hab ich mich vertan es ist nur ein <p>

        das hier steht im script zu html mit css dingens:

        <body> 
        <div style="font-size: 30px; color: red">
          Webtechnologien 
         </div> 
        <div style="font-size: 24 px; color: blue">
          Vorlesung im Studiengang Medieninformatik 
         </div> 
         <div> 
          HTML liefert die Inhalte einer Website 
          in einer strukturierten Form. 
          CSS ergänzt das HTML und bereitet die Inhalte optisch auf. 
          Eine gute HTML-Struktur ist elementar für Suchmaschinen. 
         </div> 
        </body>
        

        als kommentar steht u.a. das im skript:

        Optische Anreicherung ohne Struktur (wie hier im Beispiel) ist ein häufiger Fehler in der Webentwicklung - blendet man CSS aus, bleibt der Text unstrukturiert

        gilt das für beide beispiele oder nur für das ohne semantik?

        1. @@hmm

          <body> 
          <h1
           style="font-size: 30px; color: red"> 
            Webtechnologien 
          </h1>
          <h2
           style="font-size: 24 px; color: blue"> 
            Vorlesung im Studiengang Medieninformatik 
          </h2>
          <p>
            HTML liefert die Inhalte einer Website 
            in einer strukturierten Form. 
          </p>
          <p>
            CSS ergänzt das HTML und bereitet die Inhalte optisch auf. 
            Eine gute HTML-Struktur ist elementar für Suchmaschinen. 
          </p>
          </body>
          

          das war das beispiel für "html mit semantik und eingebetteter css".

          Fehlerhaft.

          Zum einen gehören Darstellungsangaben nicht ins Markup; zum anderen ist „Vorlesung im Studiengang Medieninformatik“ keine Überschrift 2. Ordnung.

          Entweder:

          <header>
          	<h1>Webtechnologien</h1>
          	<p>Vorlesung im Studiengang Medieninformatik</p>
          </header>
          

          oder

          <h1>
          	Webtechnologien
          	<span class="untertitel">Vorlesung im Studiengang Medieninformatik</span>
          </h1>
          

          Die Darstellungsangaben dazu im Stylesheet.

          als kommentar steht u.a. das im skript:

          Optische Anreicherung ohne Struktur (wie hier im Beispiel) ist ein häufiger Fehler in der Webentwicklung - blendet man CSS aus, bleibt der Text unstrukturiert

          gilt das für beide beispiele oder nur für das ohne semantik?

          Wenn der Seiteninhalt strukturiert ausgezeichnet wird (Überschrift als Überschrift, Textabsätze als Textabsätze, …), dann ist die Struktur natürlich unabhängig von CSS vorhanden. Browser haben dafür Grundeinstellungen, um das zu visualisieren. Und strukturelles Markup kommt bei nicht-visueller Ausgabe in Screenreadern zugute.

          LLAP 🖖

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

            Entweder:

            <header>
            	<h1>Webtechnologien</h1>
            	<p>Vorlesung im Studiengang Medieninformatik</p>
            </header>
            

            oder

            <h1>
            	Webtechnologien
            	<span class="untertitel">Vorlesung im Studiengang Medieninformatik</span>
            </h1>
            

            Womit ich nicht sagen wollte, dass es egal wäre, welche Variante. Sie unterscheiden sich nämlich:

            Im ersten Fall ist die Überschrift[1] „Webtechnologien“, im zweiten „Webtechnologien (–) Vorlesung im Studiengang Medieninformatik“.

            LLAP 🖖

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

            1. in der document outline; das, was Screenreader-Nutzer vorgelesen bekommen, wenn sie sich von Überschrift zu Überschrift durchhangeln) ↩︎

            1. danke, das mit dem header usw. kommt erst noch im skript. der aufbau hangelt sich ganz langsam von

              <body>blablubblick</body>

              zu

              <!1DOCTPE html> <head…

              frage 2:

              Ich möchte ein Bild mit HTML einbauen, welches sich selbst verlinkt, klickt man das bild an sieht man das bild in originalgröße. Welches Attribut brauch ich? href ging leider nicht.

              1. @@hmm

                frage 2:

                Ich möchte ein Bild mit HTML einbauen, welches sich selbst verlinkt, klickt man das bild an sieht man das bild in originalgröße.

                Die Antwort auf diese Frage findest du in diesem Forum – in so ziemlich jedem Posting, das ein Bild enthält.

                Welches Attribut brauch ich?

                href.

                href ging leider nicht.

                Was nicht geht …

                LLAP 🖖

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

                <!DOCTYPE html>
                <html lang="de">
                    <head>
                        <title>Eine Simple HTML Seite</title>
                        <meta charset="utf-8">
                        <meta name="author" content="Christopher">
                    </head>
                    <body>
                        <a href="img/mope.png">
                            <img src="img/mope.png" alt="dolles bild" link="img/mope.png" heigth="20" width="20">
                        </a>
                        <section>
                            <h1>Mein Text mit mehreren Abschnitten</h1>
                            <p>Mein erster Abschnitt</p>
                            <p>Mein zweiter Abschnitt</p>
                            <p>Das sind jetzt viele Abschnitte</p>
                        </section>
                        <ui>
                            <li>ungeordnete liste eintrag 1</li>
                            <li>der zweite</li>
                        </ui>
                        <ol>
                            <li> geordnete liste eintrag 1</li>
                            <li>der zweite</li>
                        </ol>
                        
                        <p>Im folgenden Verlinke ich einmal auf ein externe seite und dann auf eine interne</p>
                        <p><a href="https://forum.selfhtml.org/self/2018/mar/22/paar-kleine-fragen-blog/1716932#m1716932">Meine Fragen</a></p>
                        <p><a href="index2.html">Meine zweite Seite</a></p>
                    </body>
                </html>
                

                erfüllt dieses von mir runtergeschrieben beispiel die folgende aufgabe? Mir geht es nur um die Minimallösung+verständis, der rest kommt step by stept in den nächsten aufgaben die ich noch.durchgehe

                • das <title> -Element verwenden

                • einen Text mit mehreren Abschnitten und einer Überschrift einbringen

                • ein verkleinertes Bild einbinden, welches in einem Unterordner namens images gespeichert ist

                • eine ungeordnete und geordnete Liste einfügen

                • einen Link sowohl auf eine externe (nicht von Ihnen erstellte), als auch auf eine interne (von Ihnen neu erstellte) Webseite einbinden

                • das Bild soll auf sich selbst verlinken, so dass beim Klick auf das Bild nur noch das Bild selbst in Original-Größe angezeigt wird

                1. Moin @hmm,

                      <body>
                          <a href="img/mope.png">
                              <img src="img/mope.png" alt="dolles bild" link="img/mope.png" heigth="20" width="20">
                          </a>
                  

                  Das Bild steht da einfach so im Raum, äh body? Welche Aufgabe soll das hier haben – noch vor der h1?

                          <ui>
                              <li>ungeordnete liste eintrag 1</li>
                              <li>der zweite</li>
                          </ui>
                  

                  ui ist aus dem kommenden HTML-Standard um überraschende HTML5-Wendungen zu kennzeichnen, gell?

                  erfüllt dieses von mir runtergeschrieben beispiel die folgende aufgabe?

                  • das <title>-Element verwenden

                  Ja.

                  • einen Text mit mehreren Abschnitten und einer Überschrift einbringen

                  Nein, es ist nur ein Abschnitt.

                  • ein verkleinertes Bild einbinden, welches in einem Unterordner namens images gespeichert ist

                  Nein, das Bild wird aus einem Unterordner namens img referenziert.

                  • eine ungeordnete und geordnete Liste einfügen

                  Ja.

                  • einen Link sowohl auf eine externe (nicht von Ihnen erstellte), als auch auf eine interne (von Ihnen neu erstellte) Webseite einbinden

                  Ja.

                  • das Bild soll auf sich selbst verlinken, so dass beim Klick auf das Bild nur noch das Bild selbst in Original-Größe angezeigt wird

                  Ja.

                  Neben dieser Aufgaben wäre noch eine saubere Strukturierung des Inhalts sehr sinnvoll.

                  Viele Grüße
                  Robert

                  1. sind das jetzt zwei abschnitte?

                    <!DOCTYPE html>
                    <html lang="de">
                        <head>
                            <title>Eine Simple HTML Seite</title>
                            <meta charset="utf-8">
                            <meta name="author" content="Christopher">
                        </head>
                        <body>
                            <a href="img/mope.png">
                                <img src="img/mope.png" alt="dolles bild" link="img/mope.png" heigth="20" width="20">
                            </a>
                            <article>
                                <header>
                                    <h1>Mein Text mit mehreren Abschnitten</h1>
                                </header>
                                <section>
                                    <p>Mein erster Abschnitt</p>
                                </section>
                                <section>
                                    <p>Mein zweiter Abschnitt</p>
                                    <p>Das sind jetzt viele Abschnitte</p>
                                </section>
                                <aside>
                                    hier könnte ihre werbung stehen
                                </aside>
                            </article>
                            <ui>
                                <li>ungeordnete liste eintrag 1</li>
                                <li>der zweite</li>
                            </ui>
                            <ol>
                                <li> geordnete liste eintrag 1</li>
                                <li>der zweite</li>
                            </ol>
                            
                            <p>Im folgenden Verlinke ich einmal auf ein externe seite und dann auf eine interne</p>
                            <p></p><a href="https://forum.selfhtml.org/self/2018/mar/22/paar-kleine-fragen-blog/1716932#m1716932">Meine Fragen</a></p>
                            <p></p><a href="index2.html">Meine zweite Seite</a></p>
                        </body>
                    </html>
                    

                    Das Bild steht da einfach so im Raum, äh body? Welche Aufgabe soll das hier haben – noch vor der h1?

                    joa, nicht so gut? müsste ich sinnvollerweise div oder so rum machen? (sinnvoll bezieht sich auf ein minimal-/klausurbeispiel)

                    ui ist aus dem kommenden HTML-Standard um überraschende HTML5-Wendungen zu kennzeichnen, gell?

                    html5 ist im doctype angegeben oder was meinst du?

                    1. Hallo @hmm,

                      sind das jetzt zwei abschnitte?

                      <section>
                         <p>Mein erster Abschnitt</p>
                      </section>
                      <section>
                         <p>Mein zweiter Abschnitt</p>
                         <p>Das sind jetzt viele Abschnitte</p>
                      </section>
                      

                      Abschnitt heißt im Englischen section, wie viele davon zählst du denn?

                      Das Bild steht da einfach so im Raum, äh body? Welche Aufgabe soll das hier haben – noch vor der h1?

                      joa, nicht so gut? müsste ich sinnvollerweise div oder so rum machen? (sinnvoll bezieht sich auf ein minimal-/klausurbeispiel)

                      Beantworte mir doch bitte erst einmal die Frage, bevor du eine Gegenfrage stellst: Welche Aufgabe soll das hier haben?

                      ui ist aus dem kommenden HTML-Standard um überraschende HTML5-Wendungen zu kennzeichnen, gell?

                      html5 ist im doctype angegeben oder was meinst du?

                      Ich hatte das ui gekennzeichnet und einen anscheinend missverständlichen Gag damit gemacht …

                      Viele Grüße
                      Robert

                      1. Abschnitt heißt im Englischen section, wie viele davon zählst du denn?

                        2, also passt das mit dem tag article. ich war mir nicht sicher.

                        Beantworte mir doch bitte erst einmal die Frage, bevor du eine Gegenfrage stellst: Welche Aufgabe soll das hier haben?

                        es soll mir ein bild im frontend anzeigen und wenn man auf bdieses bild klickt soll man im browser das bild in originalgröße angezeigt bekommen.

                        1. Moin @hmm,

                          Beantworte mir doch bitte erst einmal die Frage, bevor du eine Gegenfrage stellst: Welche Aufgabe soll das hier haben?

                          es soll mir ein bild im frontend anzeigen und wenn man auf bdieses bild klickt soll man im browser das bild in originalgröße angezeigt bekommen.

                          Aber doch nicht einfach so zu Beginn des Dokuments vollkommen außerhalb eines Kontexts.

                          Viele Grüße
                          Robert

                      2. @@Robert B.

                        sind das jetzt zwei abschnitte?

                        <section>
                           <p>Mein erster Abschnitt</p>
                        </section>
                        <section>
                           <p>Mein zweiter Abschnitt</p>
                           <p>Das sind jetzt viele Abschnitte</p>
                        </section>
                        

                        Abschnitt heißt im Englischen section, wie viele davon zählst du denn?

                        Null.

                        Ein Abschnitt sollte mit einer Überschrift beginnen. Ansonsten ist das section-Element fragwürdig.

                        LLAP 🖖

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

      In meinem Skript stehet <div style="color: blue">hallo</div> unter "HTML mit der einbindung von CSS"

      Da wird kein CSS eingebunden.

      und <p style="red">hallo</p>,

      Das ist komplett falsch.

      Wenn ich in der Prüfung gefragt werde was der unterschied zwischen <p> und <div> ist, was würde ich dann da hinschreiben?

      Geht es um den generellen Unterschied zwischen p und div oder um den Unterschied dieses divs mit diesem p hier?

      Viele Grüße
      Robert

      1. hi,

        ich hab das skript so verstanden, dass das hier:

        style="color: blue"

        css wäre, istr das falsch?

        bei <p> hab ich nen fehler gemacht

        1. Hallo

          ich hab das skript so verstanden, dass das hier:

          style="color: blue"

          css wäre, istr das falsch?

          Nein, das ist CSS und somit nicht falsch. Aber es wird genaugenommen nichts ‚eingebunden‘, sondern stattdessen direkt im Element notiert. Eine Einbindung wäre das Referenzieren einer externen CSS-Ressource.

          Tschö, Auge

          --
          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
          Toller Dampf voraus von Terry Pratchett
        2. Hallo @hmm,

          ich hab das skript so verstanden, dass das hier:

          style="color: blue"

          css wäre, istr das falsch?

          wenn man es auf die Goldwaage legt, Ja. style ist ein HTML-Attribut, dass die CSS-Regel color: blue enthält, also

          style="color: blue"
          ^^^^^^^           ^    HTML
                 ^^^^^^^^^^^     CSS
          

          Viele Grüße
          Robert

          1. @@Robert B.

            wenn man es auf die Goldwaage legt

            Du handelst aber auch eher mit Kupfer als mit Gold, hm?

            style ist ein HTML-Attribut, dass die CSS-Regel color: blue enthält

            style-Attribute enthalten keine CSS-Regeln (Symbolbild), sondern Deklarations-Listen.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Jetzt hab ich folgende Übungsaufgabe gemacht:

    1. Baue eine Webseite welche kein CSS nutzt

    2. verwende das main-tag

    3. schreibe ein kontaktform (muss noch nicht funktionieren)

    4. mache einen navigationsbereich in den header und footer

    meine minimallösung:

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <title>
                Christopher's Seite
            </title>
            <meta chartset="utf-8">
            <meta name="author" content="Christopher">
        </head>
        <body>
            <header>
                <h1>Christopher's Seite</h1>
                <nav>
                    <ui>
                        <li><a href="main.html">Willkommen</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ui>
                </nav>
            </header>
            <main>
                <p>Das hier ist meine Hauptseite.</p>
                <table>
                    <tr><td>1.1</td><td>1.2</td></tr>
                    <tr><td>2.1</td><td>2.2</td></tr>
                </table>
            </main>
            <footer>
                <nav>
                    <ui>
                        <li><a href="datenschutz.html">Datenschutz</a></li>
                        <li><a href="impressum.html">Impressum</a></li>
                    </ui>
                </nav>
            </footer>
        </body>
    </html>
    

    und das kontakt.html:

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <title>
                Christopher's Seite
            </title>
            <meta chartset="utf-8">
            <meta name="author" content="Christopher">
        </head>
        <body>
            <header>
                <h1>Christopher's Seite</h1>
                <nav>
                    <ui>
                        <li><a href="main.html">Willkommen</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ui>
                </nav>
            </header>
            <main>
                <p>Das hier ist meine Hauptseite.</p>
                <table>
                    <tr><td>1.1</td><td>1.2</td></tr>
                    <tr><td>2.1</td><td>2.2</td></tr>
                </table>
            </main>
            <footer>
                <nav>
                    <ui>
                        <li><a href="datenschutz.html">Datenschutz</a></li>
                        <li><a href="impressum.html">Impressum</a></li>
                    </ui>
                </nav>
            </footer>
        </body>
    </html>
    
    1. Hallo @hmm,

      das ist doch zwei mal das gleiche HTML – mit dem gleichen „Deppenapostroph“ und dem (immer noch) nicht existierenden HTML-Element ui.

      Viele Grüße
      Robert

      1. schitte, hier das kontaktformular mit korrigierten ulli:

        <!DOCTYPE html>
        <html lang="de">
            <head>
                <title>
                    Christopher's Seite
                </title>
                <meta chartset="utf-8">
                <meta name="author" content="Christopher">
            </head>
            <body>
                <header>
                    <h1>Christopher's Seite</h1>
                    <nav>
                        <ul>
                            <li><a href="main.html">Willkommen</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>
                        </ul>
                    </nav>
                </header>
                <main>
                    <p>Das hier ist meine Kontaktseite.</p>
                    <form action="zielseite.html" method="post" name="mein-form">
                        <fieldset>
                            <legend>Pflichtfelder</legend>
                            <label for="name">Name</label>
                            <input type="text" id="name" required/>
                            <label for="email">E-Mail</label>
                            <input type="email" id="email" required/>
                            <label for="nachricht">Nachricht</label>
                            <textarea id="nachricht" required></textarea>
                        </fieldset>
                        <fieldset>
                            <legend>Optional</legend>
                            <label for="anrede"></label>
                            <select id="anrede">
                                <option>Dr.</option>
                                <option>Prof. Dr.</option>
                            </select>
                            <label for="checkbox">Newsletterabo</label>
                            <input type="checkbox" id="news" />
                        </fieldset>
                        <input type="submit" value="Absenden"/>
                    </form>
                </main>
                <footer>
                    <nav>
                        <ul>
                            <li><a href="datenschutz.html">Datenschutz</a></li>
                            <li><a href="impressum.html">Impressum</a></li>
                        </ul>
                    </nav>
                </footer>
            </body>
        </html>
        
        1. @@hmm

          schitte, hier das kontaktformular mit korrigierten ulli:

          Listig.

          Warum hast du die Deppenapostrophe nicht auch gleich korrigiert?

          Warum hast du das Formular nicht getestet? Ach so, wegen „muss noch nicht funktionieren“. Um deiner nächsten Frage zuvorzukommen: Das wird es nicht. Für die Datenübertragung fehlt noch was.

                          <input type="submit" value="Absenden"/>
          

          Nein, das sollte ein button sein – aus Gründen. Und noch einer.

          LLAP 🖖

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

      <!DOCTYPE html>
      <html lang="de">
          <head>
              <title>
                  Christopher's Seite
              </title>
              <meta chartset="utf-8">
              <meta name="author" content="Christopher">
          </head>
      

      Im head sollte außerdem noch vorhanden sein:

      1. die Angabe zur Zeichencodierung, und zwar als allererstes.
      2. die Angabe fürs responsive Verhalten <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      chartset gibt’s nicht, kann weg.

              <footer>
                  <nav>
                      <ui>
                          <li><a href="datenschutz.html">Datenschutz</a></li>
                          <li><a href="impressum.html">Impressum</a></li>
                      </ui>
                  </nav>
              </footer>
      

      Ob Footer-Links wie „Datenschutz“ und „Impressum“ in ein nav-Element gehören, darüber lässt sich streiten. Ich sage: nein. Die Spec sagt: nein.

      ui steht für user interface?

      LLAP 🖖

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