Frage zum Wiki-Artikel „Hypertext_und_Multimedia“

[Ralf Wessels]

Hallo,

ich bin IT-Trainer für GIS und suche für meine Schüler ein gutes Einführungstutorial in HTML (zum üben) Grundsätzlich finde ich es immer gut solche Einführungen an konkreten Beispielen wie hier "Webseite für eine Schreinerei" zu machen. Leider kann selbst ich mit fast 15-jähriger HTML-Erfahrung ab Kapitel 2 diesem Tutorial kaum mehr folgen u.a. wird auf eine index.html verwiesen, die in Kapitel 1 noch gar nicht vorkommt. Ist das Tutorial in Überarbeitung?

MfG Ralf Wessels

[Matthias Scharwies]

Servus!

Hallo,

ich bin IT-Trainer für GIS und suche für meine Schüler ein gutes Einführungstutorial in HTML (zum üben) Grundsätzlich finde ich es immer gut solche Einführungen an konkreten Beispielen wie hier "Webseite für eine Schreinerei" zu machen. Leider kann selbst ich mit fast 15-jähriger HTML-Erfahrung ab Kapitel 2 diesem Tutorial kaum mehr folgen u.a. wird auf eine index.html verwiesen, die in Kapitel 1 noch gar nicht vorkommt.

Vielen Dank für ihr Feedback!

Ich habe das im 1. Kapitel geändert. Der Vorschlag, die erste Datei in meineDatei.txtund dann ...html zu benennen, hat jetzt schon das index.html drin.

Dazu habe ich kurz erklärt, warum der Name so wichtig ist.

Könnte man das noch besser formulieren?

Ist das Tutorial in Überarbeitung?

Ja, immer wieder! Siehe hier: https://forum.selfhtml.org/self/2021/sep/02/fehler-bei-html-tutorials-einstieg-kapitel2/1791265#m1791265

Das Tutorial hatte mal 13 Kapitel, die wir eingedampft hatten. Obwohl wir aufgepasst haben, können thematische Brüche drin sein - jetzt hoffentlich nicht mehr!

Bitte geben Sie uns Rückmeldung, wenn Sie noch etwas finden!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Verstößt das Siezen nicht gegen die Forums-Charta?

😷 LLAP

[Ralf Wessels]

Hallo Matthias,

das ging ja fix - Respekt!

danke für die Infos, jetzt wird mir einiges klarer. Ich bin dabei das Tutorial detailliert abzuarbeiten, um es für meine Schüler zu testen und dabei bin ich auch schon auf weitere Ungereimtheiten gestoßen: Wo: in Kapitel2

1.) das erste "ausprobieren"-Beispiel stimmt nicht mit dem Quelltext überein 2.) Die Anleitung zum Download von SVG (mit "Link speichern unter...") führt bei mir in Chrome dazu, dass zwar eine SVG heruntergeladen wird, aber nicht nur das Bild, sondern die gesamte Webseite (SVG-Datei ist auch viel größer). Eine funktionierende Methode eine SVG herunterzuladen ist, zur Original-URL der SVG-Datei zu gehen - hier mit Klick auf die "Speichern"-Links und dann im Kontextmenü mit "Speichern unter".. Für Einsteiger kann das aber alles schon zu viel sein, so dass ein einfacher Link zu einer zip-Datei wohl der beste Weg ist - macht ihr ja auch schon. Allerdings enthält die zip-Datei noch viele andere Dateien und SVGs so dass man erst einmal suchen muss. Am Besten wäre eine zip-Datei nur mit den SVGs für diesen Abschnitt des Tutorials.

Wenn mir noch weitere Dinge auffallen melde ich mich hier wieder 😉

Ralf

[ralfwessels]

Hallo...

....und das ist mir noch aufgefallen:

in Kapitel 2 kommt 2x vor: Erstellen Sie ein (zweites) HTML-Dokument mit dem Namen inhalt.html.

einmal unter "Weiter geht's mit dem Menü" und unter "Bilder einbinden"

Vorschlag: beim ersten mal nicht "inhalt.html" erstellen, sondern z.B. "kontakt.html" - das kommt ja im Menü auch vor (oder kommt das auch noch zu einem späteren Zeitpunkt?)

Beste grüße Ralf

[Matthias Scharwies]

Liebe SELFER, liebe „Neukunden“,

Kapitel 1: erste Schritte ist umformuliert. Es wird anfangs kurz erklärt was Markup ist und dann der unformatierte Text einmal in eine .txt-Datei und einmal als .html gerendert.

Da das unformatiert ist, werden die ersten Elemente erklärt.

Am Schluss kommt neben der Begriffsklärung Startseite, Webseite, web site noch die Erklärung, warum man denn den Namen index.html verwenden sollte.

Kapitel 2: Hypertext_und_Multimedia

1.) das erste "ausprobieren"-Beispiel stimmt nicht mit dem Quelltext überein

Ich glaube, jetzt schon oder was meinst du?

2.) Die Anleitung zum Download von SVG (mit "Link speichern unter...") führt bei mir in Chrome dazu, dass zwar eine SVG heruntergeladen wird, aber nicht nur das Bild, sondern die gesamte Webseite (SVG-Datei ist auch viel größer). Eine funktionierende Methode eine SVG herunterzuladen ist, zur Original-URL der SVG-Datei zu gehen - hier mit Klick auf die "Speichern"-Links und dann im Kontextmenü mit "Speichern unter".. Für Einsteiger kann das aber alles schon zu viel sein, so dass ein einfacher Link zu einer zip-Datei wohl der beste Weg ist - macht ihr ja auch schon. Allerdings enthält die zip-Datei noch viele andere Dateien und SVGs so dass man erst einmal suchen muss. Am Besten wäre eine zip-Datei nur mit den SVGs für diesen Abschnitt des Tutorials.

Habe ich jetzt eingefügt. Meine Idee SVGs zu verwenden, war vom übernächsten Abschnitt geprägt, weil ich dort Größenangaben verwenden wollte, die man bei Rastergrafiken niocht benötigt.

Der Zip-Ordner ist jetzt neu. Evtl. sollte man doch wieder auf png-Grafiken gehen?

in Kapitel 2 kommt 2x vor: Erstellen Sie ein (zweites) HTML-Dokument mit dem Namen inhalt.html.

einmal unter "Weiter geht's mit dem Menü" und unter "Bilder einbinden"

Vorschlag: beim ersten mal nicht "inhalt.html" erstellen, sondern z.B. "kontakt.html" - das kommt ja im Menü auch vor (oder kommt das auch noch zu einem späteren Zeitpunkt?)

Nein, nicht direkt, aber im letzten Beispiel muss noch eins hin!

Habe aber umformuliert!

Beste grüße Ralf

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Liebe SELFER, liebe „Neukunden“,

Kapitel 1: erste Schritte

In Was_ist_besser_als_ein_Vierundzwanzig-Zoll_Bildschirm?_Zwei_davon! werden Tasten-Shortcuts zum Öffnen von Webseiten vorgestellt.

Die gängigen Browser wie Firefox, Chrome, Edge und Opera bieten dafür die Tastenkombination Strg+O an. (ToDo: Safari)

@JürgenB @Gunnar Bittersmann

Welche Tastenkombi gibt es denn bei Safari?

Vielen Dank im Voraus!

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Die gängigen Browser wie Firefox, Chrome, Edge und Opera bieten dafür die Tastenkombination Strg+O an. (ToDo: Safari)

Welche Tastenkombi gibt es denn bei Safari?

Ebenfalls O.

Auf dem Mac natürlich nicht mit Strg (ctrl), sondern mit cmd ⌘ – bei allen Browsern.

Hab das im Wiki berichtigt.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Die gängigen Browser wie Firefox, Chrome, Edge und Opera bieten dafür die Tastenkombination Strg+O an. (ToDo: Safari)

Welche Tastenkombi gibt es denn bei Safari?

Ebenfalls O.

Auf dem Mac natürlich nicht mit Strg (ctrl), sondern mit cmd ⌘ – bei allen Browsern.

Hab das im Wiki berichtigt.

Vielen Dank!

😷 LLAP

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Gutne Morgen!

Liebe SELFER, liebe „Neukunden“,

Vorschlag: beim ersten mal nicht "inhalt.html" erstellen, sondern z.B. "kontakt.html" - das kommt ja im Menü auch vor (oder kommt das auch noch zu einem späteren Zeitpunkt?)

Nein, nicht direkt, aber im letzten Beispiel muss noch eins hin!

Die Kontaktseite fehlt im 3. und 4. Kapitel und kommt erst im vollständigen Beispiel Design-0, das ganz zum Schluss vorgestellt wird: HTML/Tutorials/Einstieg/Layout_mit_CSS#Ziel_erreicht!

Evtl. sollten wir sie deshalb auch im 2. Kapitel wieder rausnehmen und dann als Aufgabe stellen.

Was haltet ihr davon, im Kapitel 2: Hypertext und Multimedia einen dritten Abschnitt mit einer „Hausaufgabe“ zu erstellen:

1. Gestalte Deine Bilderseite
2. Erstelle eine Kontaktseite,
   • in der Du ein bisschen über dich schreibst
   • in der eine fiktive Beispieladresse vorkommt.
   • in der eine Emailadresse verlinkt ist.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

warum nicht eine Hausaufgabe stellen. Andererseits werden die Leser des Tutorials doch hoffentlich ohnehin mit der Seite herumspielen und eigene Dinge damit tun.

Ich musste übrigens an den Abschnitt "Video" 'ran: Mein Chrome spielt die OGV-Datei nicht ab. Das liegt nicht am Wiki, auf Wikimedia-Commons funktioniert(e) das auch nicht. Ich habe jetzt bei Commons eine Transcodierung in VP8 und VP9 beauftragt, damit ist Chrome glücklich - mutmaßlich aber Firefox nicht, weil es ja der Google-Codec ist.

Und deshalb habe ich einen Exkurs zu Videoformaten geschrieben und das video-Element mit source-Kindern vorgestellt. Wenn es ein Videoformat "für alle" gäbe, wäre das natürlich einfacher. AV1 (Ah Vau EINS) soll es angeblich sein, aber dem Format bietet Wikimedia Commons das Video nicht an.

@Gunnar Bittersmann - ist WEBM oder OGV mit Safari abspielbar?

Rolf

[Rolf B]

Hallo Matthias,

ich habe jetzt eine MP4-Version mit H.264 Codec hochgeladen (MPEG-4 wurde nicht abgespielt).

https://src.selfhtml.org/designs/html-einstieg/video/carpentry.mp4

Die alte MPEG-4 Version steht noch unter

https://src.selfhtml.org/designs/html-einstieg/video/carpentry480.mp4

bis irgendwer im Git das current-tag anpasst. Spielt die auf anderen Browsern als Firefox/Windows oder Chrome/Windows ab?

Attributierung: Das ist die Transcodierung der Datei https://commons.wikimedia.org/wiki/File:Carpentry.ogv in H.264 in der Größe 850x480.

Rolf

[Ralf Wessels]

Liebe SELFER, liebe „Neukunden“,

Kapitel 1: erste Schritte ist umformuliert. Es wird anfangs kurz erklärt was Markup ist und dann der unformatierte Text einmal in eine .txt-Datei und einmal als .html gerendert.

Da das unformatiert ist, werden die ersten Elemente erklärt.

Am Schluss kommt neben der Begriffsklärung Startseite, Webseite, web site noch die Erklärung, warum man denn den Namen index.html verwenden sollte.

Yep, Kaoitel 1 sieht jetzt gut aus...und die Erklärung, warum index.html passt auch wunderbar...

Kapitel 2: Hypertext_und_Multimedia

1.) das erste "ausprobieren"-Beispiel stimmt nicht mit dem Quelltext überein

Ich glaube, jetzt schon oder was meinst du?

Das Frickl-Bsp. ist nicht ganz identisch mit dem Quelltext (andere Links), aber das ist eher nebensächlich. Grundsätzlich finde ich das mit dem "hin- und herspringen" zwischen den Seiten über das Menü etwas schwierig nachvollziehbar in der Umsetzung. Man sieht nur das Bsp. der index.html. Könnte man nicht ein zweites "Beispiel für ein Menü..." einfügen - das erste (was schon da ist) für die index.html und ein weiteres für die inhalt.html - da sieht das Menü ja etwas anders aus.

...und noch etwas: in dem allersten "Beispiel für einen Verweis" wird mit "inhalt.html" gearbeitet, im Satz darunter mit "zieldatei.htm". Wäre es nichr besser hier auch "inhalt.html" zu nutzen?

2.) Die Anleitung zum Download von SVG (mit "Link speichern unter...") führt bei mir in Chrome dazu, dass zwar eine SVG heruntergeladen wird, aber nicht nur das Bild, sondern die gesamte Webseite (SVG-Datei ist auch viel größer). Eine funktionierende Methode eine SVG herunterzuladen ist, zur Original-URL der SVG-Datei zu gehen - hier mit Klick auf die "Speichern"-Links und dann im Kontextmenü mit "Speichern unter".. Für Einsteiger kann das aber alles schon zu viel sein, so dass ein einfacher Link zu einer zip-Datei wohl der beste Weg ist - macht ihr ja auch schon. Allerdings enthält die zip-Datei noch viele andere Dateien und SVGs so dass man erst einmal suchen muss. Am Besten wäre eine zip-Datei nur mit den SVGs für diesen Abschnitt des Tutorials.

Habe ich jetzt eingefügt. Meine Idee SVGs zu verwenden, war vom übernächsten Abschnitt geprägt, weil ich dort Größenangaben verwenden wollte, die man bei Rastergrafiken niocht benötigt.

Der Zip-Ordner ist jetzt neu. Evtl. sollte man doch wieder auf png-Grafiken gehen?

ich denke mit SVGs zu arbeiten ist schon ok, obwohl das Format etwas 'unhandlicher' für Einsteiger sein kann. Deswegen am einfachsten die SVGs als Download in einer ZIP-Datei anbieten. Der Download sollte aber von einer https-Seite kommen, denn Chrome lädt seit der 86er-Version keine Downloads mehr von http und das kann für Einsteiger dann schwierig werden, wenn man Chrome nutzt. Mit Firefox geht es noch, aber das wir auch nicht mehr lange so sein. Zudem steht im Text immer noch der Hinweis die SVGs einzeln mit "Link speichern unter..." herunterzuladen, was nicht möglich ist (siehe oben). Den ganzen Text hier am besten rausnehmen und nur noch der Hinweis auf die ZIP-Datei zum Download

in Kapitel 2 kommt 2x vor: Erstellen Sie ein (zweites) HTML-Dokument mit dem Namen inhalt.html.

einmal unter "Weiter geht's mit dem Menü" und unter "Bilder einbinden"

Vorschlag: beim ersten mal nicht "inhalt.html" erstellen, sondern z.B. "kontakt.html" - das kommt ja im Menü auch vor (oder kommt das auch noch zu einem späteren Zeitpunkt?)

Nein, nicht direkt, aber im letzten Beispiel muss noch eins hin!

Habe aber umformuliert!

Beste grüße Ralf

Herzliche Grüße

Matthias Scharwies

...und zum Schluss noch: im Video-Bsp. im Quelltext auch die Größenangaben einfügen wie im Frickl-Bsp. : <video controls width="640" height="480">

Beste Grüße Ralf

[Matthias Scharwies]

Servus!

Yep, Kaoitel 1 sieht jetzt gut aus...und die Erklärung, warum index.html passt auch wunderbar...

Danke

Kapitel 2: Hypertext_und_Multimedia

1.) das erste "ausprobieren"-Beispiel stimmt nicht mit dem Quelltext überein

Das Frickl-Bsp. ist nicht ganz identisch mit dem Quelltext (andere Links), aber das ist eher nebensächlich.

Ist jetzt gefixt. Das ist das Problem mit der MediaWiki-Software, dass man dort keinen Ordner anlegen kann, in dem die Dateien dann einfach referenziert werden können.

Grundsätzlich finde ich das mit dem "hin- und herspringen" zwischen den Seiten über das Menü etwas schwierig nachvollziehbar in der Umsetzung. Man sieht nur das Bsp. der index.html. Könnte man nicht ein zweites "Beispiel für ein Menü..." einfügen - das erste (was schon da ist) für die index.html und ein weiteres für die inhalt.html - da sieht das Menü ja etwas anders aus.

Ich würde das als Aufgabe stellen:

Lege die Seiten an und stelle sicher, dass Du nicht auf die jeweils aktuelle Seite verlinkst.

...und noch etwas: in dem allersten "Beispiel für einen Verweis" wird mit "inhalt.html" gearbeitet, im Satz darunter mit "zieldatei.htm". Wäre es nichr besser hier auch "inhalt.html" zu nutzen?

Gefixt

2.) Die Anleitung zum Download von SVG (mit "Link speichern unter...") führt bei mir in Chrome dazu, dass zwar eine SVG heruntergeladen wird, aber nicht nur das Bild, sondern die gesamte Webseite (SVG-Datei ist auch viel größer). Eine funktionierende Methode eine SVG herunterzuladen ist, zur Original-URL der SVG-Datei zu gehen - hier mit Klick auf die "Speichern"-Links und dann im Kontextmenü mit "Speichern unter".. Für Einsteiger kann das aber alles schon zu viel sein, so dass ein einfacher Link zu einer zip-Datei wohl der beste Weg ist - macht ihr ja auch schon. Allerdings enthält die zip-Datei noch viele andere Dateien und SVGs so dass man erst einmal suchen muss. Am Besten wäre eine zip-Datei nur mit den SVGs für diesen Abschnitt des Tutorials.

Habe ich jetzt eingefügt. Meine Idee SVGs zu verwenden, war vom übernächsten Abschnitt geprägt, weil ich dort Größenangaben verwenden wollte, die man bei Rastergrafiken niocht benötigt.

Der Zip-Ordner ist jetzt neu. Evtl. sollte man doch wieder auf png-Grafiken gehen?

ich denke mit SVGs zu arbeiten ist schon ok, obwohl das Format etwas 'unhandlicher' für Einsteiger sein kann. Deswegen am einfachsten die SVGs als Download in einer ZIP-Datei anbieten.

Ist jetzt nach oben gerückt!

Der Download sollte aber von einer https-Seite kommen, denn Chrome lädt seit der 86er-Version keine Downloads mehr von http und das kann für Einsteiger dann schwierig werden, wenn man Chrome nutzt. Mit Firefox geht es noch, aber das wir auch nicht mehr lange so sein.

Das ist ein Zwischenstand, da ich hier im Urlaub keinen Zugriff auf src.selfhtml.org habe.

@Rolf B Könntest du den ZIP-Ordner mit den Bilder passend auf src.selfhtml.org hochladen und den Link anpassen? TIA

...und zum Schluss noch: im Video-Bsp. im Quelltext auch die Größenangaben einfügen wie im Frickl-Bsp. : <video controls width="640" height="480">

Done!

@Ralf Wessels Könntest du noch mal durch die Gestaltung mit CSS durchgehen? Da müsste es eigentlich besser sein - ich bin da aber schon betriebsblind, da ich den Text zu gut kenne.

Heute mache ich noch Kapitel 5: Preistabelle neu.

BTW: Was ist denn GIS - da habe ich im Netz nichts gefunden.

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

BTW: Was ist denn GIS

GeoInformationsSystem

da habe ich im Netz nichts gefunden.

Hä? - wenn dein Googel kaputt ist, nimm ne andre Suma

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

BTW: Was ist denn GIS

GeoInformationsSystem

In manchen Bundesländern heißt der IT-Anfangsunterricht ITG; mich interessierte der Zusammenhang "ich unterrichte seit 15 Jahren GIS" && HTML-Einstieg.

Aber egal

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Tabellenkalk

Hä? - wenn dein Googel kaputt ist, nimm ne andre Suma

Den Ratschlag gebe ich auch ohne Wenn und Aber.

😷 LLAP

[Rolf B]

Hallo Matthias,

@Rolf B Könntest du den ZIP-Ordner mit den Bilder passend auf src.selfhtml.org hochladen und den Link anpassen?

Done.

TIA

YWIH

Rolf

[Der Martin]

Hallo Rolf,

YWIH

Young Women In Harmony?? 🤔

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Der,

TIA ist ja auch nicht der Geheimdienst von Clever und Smart, sondern Thanks in Advance.

Was könnte YWIH dann bedeuten?

Rolf

[Der Martin]

Hi,

TIA ist ja auch nicht der Geheimdienst von Clever und Smart, sondern Thanks in Advance.

das ist mir bekannt (auch wenn ich nicht weiß, was Clever und Smart ist).

Was könnte YWIH dann bedeuten?

Ich war schon bei You're welcome, aber der Rest erschließt sich mir nicht.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Thanks - You're Welcome

in Advance.

Danke im Voraus - Gern geschehen ..?..

Was könnte ein passendes Gegenstück zu "in Advance" sein?

(auch wenn ich nicht weiß, was Clever und Smart ist)

WIE BITTE?!?!? Herr Ibáñez würde sich im Grab umdrehen, wenn er könnte. Aber er lebt und zeichnet ja noch 😂

Dann kennst Du vermutlich auch Asterix und Micky Maus nicht. Armer Mensch 😟, das ist eine schwere Bildungslücke. Ich werde Dich Dr. Bakterius als nächste Versuchsperson empfehlen, wenn Mr. L nichts dringenderes vorhat.

Hinweis - Hinweis

Rolf

[Der Martin]

Hallo Rolf,

Was könnte ein passendes Gegenstück zu "in Advance" sein?

ich komm immer noch nicht drauf.

(auch wenn ich nicht weiß, was Clever und Smart ist)

WIE BITTE?!?!? Herr Ibáñez würde sich im Grab umdrehen, wenn er könnte. Aber er lebt und zeichnet ja noch 😂

Dann kennst Du vermutlich auch Asterix und Micky Maus nicht. Armer Mensch 😟

Die sind mir geläufig. Auch der rosarote Panther oder Tom und Jerry. Aber Comics sind generell nicht so mein Ding. Auch Lucky Luke, Popeye oder Tim und Struppi kenne ich nur dem Namen nach. Und habe auch kein Verlangen nach näherem Kennenlernen.

Hinweis - Hinweis

Hmm. Danke, sieht aus, als hätte ich da nichts versäumt.

Live long and pros healthy,
 Martin