Paar kleine Fragen Blog
hmm
0 hmm
0 
Gunnar Bittersmann
0 hmm
0 Robert B.
0 hmm
Paar kleine Fragen Blog
hmm
AugeHi 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.
-
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.
-
@@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
pfür Textabsätze steht,divein allgemeines Element ohne Bedeutung ist.Außerdem, dass
pnur phrasing content (Inline-Elemente) enthalten darf,divjedoch flow content (auch Blockelemente).Wenn du gut bist, noch, dass
pper Browserstylesheet Abstand nach oben und unten hat;divnicht.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
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?
-
@@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-
@@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
in der document outline; das, was Screenreader-Nutzer vorgelesen bekommen, wenn sie sich von Überschrift zu Überschrift durchhangeln) ↩︎
-
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.
-
@@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.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
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
-
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>uiist 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
imgreferenziert.- 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-
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?
-
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
uigekennzeichnet und einen anscheinend missverständlichen Gag damit gemacht …Viele Grüße
Robert-
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.
-
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
-
-
@@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
-
-
-
-
-
-
-
-
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
punddivoder um den Unterschied dieses divs mit diesem p hier?Viele Grüße
Robert-
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
-
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 -
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: blueenthält, alsostyle="color: blue" ^^^^^^^ ^ HTML ^^^^^^^^^^^ CSSViele Grüße
Robert-
@@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: blueenthältstyle-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
-
-
-
-
-
Jetzt hab ich folgende Übungsaufgabe gemacht:
-
Baue eine Webseite welche kein CSS nutzt
-
verwende das main-tag
-
schreibe ein kontaktform (muss noch nicht funktionieren)
-
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>-
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-
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>-
@@hmm
schitte, hier das kontaktformular mit korrigierten ulli:
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
buttonsein – 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
-
-
-
@@hmm
<!DOCTYPE html> <html lang="de"> <head> <title> Christopher's Seite </title> <meta chartset="utf-8"> <meta name="author" content="Christopher"> </head>Im
headsollte außerdem noch vorhanden sein:- die Angabe zur Zeichencodierung, und zwar als allererstes.
- die Angabe fürs responsive Verhalten
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
chartsetgibt’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.uisteht für user interface?LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-