nicht angemeldet
Matthias Scharwies
Henry
Matthias Scharwies
marctrix
Felix Riesterer
Julius
Felix Riesterer
Julius
Camping_RIDER
Auge
Camping_RIDER
at
Servus!
@Julius @marctrix @Matthias Apsel @Felix Riesterer @Camping_RIDER
Wir hatten im Mai ja schon eine Diskussion über das HTML-Tutorial.
Ich finde auch das neu formulierte
Oder was muss man wissen, um andere Menschen auf eine Webseite oder Domain, wie etwa example.com, hinweisen zu können?
im Zusammenhang mit einem HTML-Tutorial eher redundant und nicht zum Thema passend und möchte euch einen stark gekürzten Neuentwurf präsentieren:
Mein Ziel wäre es, die Seiten über HTML und CSS so zu lassen. Auch wenn ich persönlich erst Links und Bilder anstelle einer Tabelle einführen würde, schadet es ja nicht.
Ursprünglich wollte ich "Ein div für alle Fälle" durch ein aside ersetzen, damit würde sich aber auch die anschließende Einführung von ids erübrigen.
Das Nachwort würde ich nicht auf einer eigenen Seite platzieren, sondern im Anschluss und mit mehr Links auf andere Tutorials versehen.
Was haltet ihr davon?
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
ich finde den Einstieg auch zu textüberfrachtet und grundsätzlich nicht wirklich für "Einsteiger" geeignet. Wenn jemand sich neu mit diesem Thema beschäftigt, sind ihm alle diese Fachbegriffe komplett fremd und er wird davon erschlagen, was die Motivation rauben könnte.
Versetzen wir uns doch mal einen Moment in einen Neuling hinein. Ich komme auf das, überall und richtigerweise, gelobte Selfthtml. Dann komme ich, wenn ich nicht durch die vielen Links verwirrt bin, tatsächlich zum Einsteigerseminar. Hier, Text ohne Ende mit Wörtern, die ich noch nie gehört habe, fühle mich wie im fremden Land und mein Gefühl sagt mir, das lerne ich nie. Was da jetzt, m.M.n. geändert gehört, ist so wenig Text erst mal wie nötig und dem Neuling ein schnelles Erfolgsergebnis liefern, was auch gerne zunächst Fehler aufweisen darf. Wie meine ich das?
z.B.
HTML
Bevor wir dich hier verunsichern, durch zu viele Informationen und Fachbegriffe, zeigen wir dir hier mal wie einfach HTML (eine Webseite bauen) eigentlich ist.
*Anmerkung Das wäre dann natürlich jeweils ein Link zu dem Frickle
und so einfach geht es auch weiter... Klick mich
usw... kommt dann langsam Grundgerüst, mehr Elemente, etc... schrittweise dazu.
Der Gedankengang ist halt, es dem Leser spielerisch und intuitiv nahezubringen ohne ihn abzuschrecken.
Wer da auch schon einen guten Ansatz hat, ist dieser hier, der sich übrigens auch immer auf selfhtml bezieht.
Gruss
Henry
Wer da auch schon einen guten Ansatz hat, ist dieser hier, der sich übrigens auch immer auf selfhtml bezieht.
Zitat: "Überschrift". LOL
Hallo Mitleser,
Zitat: "Überschrift". LOL
geht ja nicht darum, ob veraltet, sondern um den Aufbau eines Tutorials.
Gruss
Henry
Zitat: "Überschrift". LOL
geht ja nicht darum, ob veraltet, sondern um den Aufbau eines Tutorials.
Da bin ich bei Dir, musste nur schmunzeln. Didaktisch finde ich Dein Beispiel auch gut!
Hallo Mitleser,
... musste nur schmunzeln...
ja kommen auch alte (und lustige) Erinnerungen wieder hoch 😉
Gruss
Henry
Servus!
Hallo Matthias,
ich finde den Einstieg auch zu textüberfrachtet und grundsätzlich nicht wirklich für "Einsteiger" geeignet. Wenn jemand sich neu mit diesem Thema beschäftigt, sind ihm alle diese Fachbegriffe komplett fremd und er wird davon erschlagen, was die Motivation rauben könnte.
Ja Full ACK. Deshalb ja auch nur noch 7 Zeilen Text vor dem Inhaltsverzeichnis.
Versetzen wir uns doch mal einen Moment in einen Neuling hinein. Ich komme auf das, überall und richtigerweise, gelobte Selfthtml. Dann komme ich, wenn ich nicht durch die vielen Links verwirrt bin, tatsächlich zum Einsteigerseminar.
Das wird in Suchanfragen, auch mit Google Ads, ganz oben gelistet. Deshalb ist es so wichtig, dass alles stimmt, es aber auch ansprechend ist!
Wer da auch schon einen guten Ansatz hat, ist dieser hier, der sich übrigens auch immer auf selfhtml bezieht.
Das ist ähnlich wie unser Tutorial aufgebaut, wobei Felix in seinem Post richtig sagt, dass es interessanter wäre, zuerst Links und Grafiken durchzunehmen und dann erst später den head-Bereich. Da möchte ich aber nicht zuviel ändern.
Mir ist nur aufgefallen, dass anfangs ein Hinweis fehlt, die Text-Datei als .html zu speichern.
Herzliche Grüße
Matthias Scharwies
Hej Henry,
Wer da auch schon einen guten Ansatz hat, ist dieser hier, der sich übrigens auch immer auf selfhtml bezieht.
Gefällt mir gut - abgesehen von ein paar Ungenauigkeiten und der Tatsache, dass es veraltet ist. Das letzte Problem wird man immer haben…
Marc
Lieber Matthias,
man hat mir dieses Posting als mein (bisher?) bestes bewertet. Darin erkläre ich, wie ich einen HTML-Kurs für Neulinge aufziehen würde. Das würde ich auch heute noch so machen. [Edit]Bis auf <nav> anstelle von <div id="navi"> natürlich...[/Edit]
Liebe Grüße,
Felix Riesterer.
Servus!
Lieber Matthias,
man hat mir dieses Posting als mein (bisher?) bestes bewertet.
Ich hab Dir einen dreizehnten dazu gegeben!
Darin erkläre ich, wie ich einen HTML-Kurs für Neulinge aufziehen würde. Das würde ich auch heute noch so machen. [Edit]Bis auf <nav> anstelle von <div id="navi"> natürlich...[/Edit]
Ja, wie im Mai schon angesprochen ist das Tutorial eben historisch so gewachsen. Ich will Stonies und MathiasBs Arbeit nicht völlig umschreiben, sondern nur so entschlacken, dass man schneller zum HTML kommt. Im Mai kam es wie 2011 zu Diskussionen wie viel Grundwissen über das Web nötig wäre. TS will da was zu Dateikonventionen, HTTP-Anfragen und -Responses etc schreiben.
Ich warte noch mal bis Dienstag morgen auf Rückmeldungen. Was auf jeden Fall erweitert werden muss, ist das Nachwort, dass mehr weiterführende Tutorials vorstellen muss.
Liebe Grüße,
Felix Riesterer.
Herzliche Grüße
Matthias Scharwies
Lieber Matthias,
jetzt, wo ich Deine Antwort lese, kommt mir die Idee, dass man ja umgekehrt zu Henrys Vorschlag, mit einfachsten Dingen anfangen könnte, eben wie in meinem damaligen Posting strukturiert, um bei jedem Beispiel Links zur Vertiefung und all den damit zusammenhängenden Spezifika anzubieten (z.B. als Fußnote), die aber den Fluss des Tutorials nicht unterbrechen dürfen.
Beispiel:
==============================================
Mit dem <a>-Element kann man einen Textklumpen zu einem anklickbaren Verweis auszeichnen. Dazu umschließt man den Textinhalt mit<a>...</a>, wobei man das Linkziel als sogenanntes Attribut[1] im öffnenden Tag notiert:
Orlok
Gunnar Bittersmannhier geht's zu <a href="http://google.de">Google</a> entlang
Das Attribut trägt den Namen "href"[2] und hat einen Wert zugewiesen bekommen (unser Linkziel[3]), der nach dem Istgleichzeichen notiert wird. Um das Istgleichzeichen darf kein Leerzeichen herum notiert werden! Es empfiehlt sich grundsätzlich, Attributwerte in Anführungszeichen zu notieren, egal ob in doppelten oder einfachen (nur nicht vermischen!).
Das Vorhandensein des href-Attributs führt dazu, dass unser Textklumpen zu einem anklickbaren Verweis wird, ganz egal welcher Wert im Attribut steht.
Mein Beispiel ist vielleicht nicht zuende gedacht, aber Du siehst, wie ich prinzipiell bei einfach umzusetzenden Sachen bleibe, jedoch Links zur Vertiefung in Form von Fußnoten anbiete, damit Menschen, die sich nicht einfach an der Hand leiten lassen, sondern auf dem Weg hinter jedem Strauch und Halm dessen Entstehungsgeschichte meditieren müssen, dieses tun können.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
... kommt mir die Idee, dass man ja umgekehrt zu Henrys Vorschlag, mit einfachsten Dingen anfangen könnte,...
ähm, ich dachte eigentlich meine Intention wäre es eben mit einfachsten Dingen anzufangen. Warum also umgekehrt zu meinem Vorschlag?
Was das Nachfolgende betrifft, so finde ich den Fachjargon schon wieder zu viel für einen Neuling.
Gruss
Henry
Hallo Felix
Um das Istgleichzeichen darf kein Leerzeichen herum notiert werden!
Doch. Sowohl davor als auch danach dürfen beliebig viele Leerzeichen eingefügt werden.
<button type = "button" > Push </button>
Das ist zwar unschön, aber nicht verboten.
Nicht durch Whitespace getrennt werden darf im Starttag die öffnende Klammer und der Elementname, sowie im schließenden Tag öffnende Klammer, Slash und Elementname.
Durch Whitespace getrennt werden müssen der Elementname und ein nachfolgender Attributname, sowie mehrere hintereinander notierte Attribute, unabhängig davon, ob mit oder ohne Anführungszeichen um den Attributwert.
Wird der Wert eines Attributes nicht in Anführungszeichen notiert, dann gilt darüber hinaus, dass nach dem Attributwert und vor einem das Element schließenden Slash mindestens ein Leerzeichen notiert werden muss.
Viele Grüße,
Orlok
Servus!
Ich habe das Tutorial jetzt um Kapitel 1 (jetzt in der Übersicht) und Kapitel 11 (jetzt als Nachwort im letzten Kapitel) gekürzt.
Eure Vorschläge
jetzt, wo ich Deine Antwort lese, kommt mir die Idee, dass man ja umgekehrt zu Henrys Vorschlag, mit einfachsten Dingen anfangen könnte,
Ja, ich habe sowohl Henrys Beispiel (das mir aufgrund seines Inhalts gefällt), als auch Deine Beiträge gespeichert.
Mir ging es jetzt nur um eine Verkürzung der Einführung und Ergänzung des Nachworts um nützliche Links, z. B. zu den fertigen Layouts. Ich wollte inhaltlich nichts am Tutorial verändern, da ich es gut finde, wenn ein Tutorial mit einem anderen Schreibstil als meiner im Wiki existiert und da ich im Augenblick keine Zeit habe.
Wer Zeit hat, könnte ja Kapitel 5 (Links) und 4 (organisatorisches) zusammenfassen und als Kapitel 3 anstelle der Preistabelle einfügen. Auch der CSS-Abschnitt (Kapitel 7-9) könnte umgearbeitet werden, passt jetzt aber so als Einführung.
Projekt Webvisitenkarte
Grundsätzlich könnte ich mir ein weiteres Tutorial mit deinem Aufbau …
sehr gut vorstellen - evtl. mit dem Ziel eine Webvisitenkarte/Bewerbungsseite zu erstellen? Eine eigene Seite, auf der Hobbies vorgestellt werden, wirkt wohl eher aus der Zeit gefallen.
Optimalerweise sollte/ könnte diese dann um den Aufbau der fertigen Layouts erweitert werden:
Oder als Single-Page-Webseite?
Herzliche Grüße
Matthias Scharwies
@@Felix Riesterer
man hat mir dieses Posting als mein (bisher?) bestes bewertet.
Nicht zu unrecht, würd ich mal sagen.
Darin erkläre ich, wie ich einen HTML-Kurs für Neulinge aufziehen würde. Das würde ich auch heute noch so machen. [Edit]Bis auf <nav> anstelle von <div id="navi"> natürlich...[/Edit]
Naja, da gäbe es noch die eine oder andere Stelle …
XHTML 1.0 Strict heute wohl nicht mehr.
Bei der Zeichencodierung bleibe ich bei dem in jenem Thread Gesagten, zumal das mit <meta charset="UTF-8"/> heutzutage ja einfacher ist. Gehört ins Dokument, ohne das Einzelheiten darüber verloren werden müssen. (Außer dass gesagt werden muss, dass alle Web-Dokumente UTF-8-codiert gehören.)
Mit rein gehört heutzutage auch die Zeile <meta name="viewport" content="width=device-width, initial-scale=1.0"/>, ohne das Einzelheiten darüber verloren werden müssen. (Außer dass gesagt werden muss, dass Smartphones die Seite sonst nicht vernüftig darstellen.)
Mit rein gehört auch die Angabe der Sprache: <html lang="de"> für Deutsch; <html lang="en"> für Englisch.
LLAP 🖖
Servus!
@@Felix Riesterer
man hat mir dieses Posting als mein (bisher?) bestes bewertet.
Nicht zu unrecht, würd ich mal sagen.
Ja, ich finde vor Allem attraktiv, dass mit der Textauszeichnung und dann gleich den Links schon am Anfang was passiert.
Im HTML-Einstiegs-Tutorial wird das Grundgerüst gleich im 1.Kapitel behandelt, was leider gleich etwas Fahrt aus dem Kurs rausnimmt.
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Ja, ich finde vor Allem attraktiv, dass mit der Textauszeichnung und dann gleich den Links schon am Anfang was passiert.
Ja, damit hat man schon mal das allerwichtigste HTML-Element: a. Ohne dieses wäre HTML ja nur TML.
Im HTML-Einstiegs-Tutorial wird das Grundgerüst gleich im 1.Kapitel behandelt, was leider gleich etwas Fahrt aus dem Kurs rausnimmt.
Da können wohl einige Sätze ersatzlos entfallen:
Das im Browser sichtbare Ergebnis wird davon nicht unbedingt immer beeinflusst; dennoch ist es allgemein empfehlenswert, die Zeile einfach so zu übernehmen, wie sie ist.
Es gibt zwar ein paar Ausnahmen, aber darum kümmern wir uns jetzt einfach erst einmal nicht.
Damit Screenreader den Inhalt nicht z.B. auf Englisch ausprechen, wird ein lang="de"-Attribut hinzugefügt. (an dieser Stelle unpassend)
LLAP 🖖
Hallo Matthias,
deine Entschlackungsbemühungen, deren Kenntlichmachung du in einer früheren Version deines Vorschlags noch drin hattest, empfinde ich als angemessen.
Gunnars Vorschlag, Zeichenkodierung und Viewport-Meta-Angabe nur kurz zu erklären, finde ich ebenfalls gut – Ich habe die Erfahrung gemacht, dass HTML-Lernende ziemlich frühzeitig auf Probleme mit der Kodierung stoßen und dann via Google als erste „Lösung“ ü finden, statt UTF-8 sauber durchzuziehen.
Der Abschnitt darüber, dass HTML die Grundlage bildet und CSS und JS „on top“ kommen, würde ich vielleicht nur auf einen Satz kürzen, aber nicht ganz weglassen (→ Links innerhalb des Wikis). Vielleicht motiviert man damit die Leser, weiterzumachen und nicht aufzuhören, wenn sie das erste HTML im Standard-Stil ihre Browsers sehen und sich dann denken („Das sieht aber hässlich aus, warum lerne ich dann HTML, wenn es WordPress gibt?“).
Zu den vorgeschlagenen Editoren ist mir auch noch etwas eingefallen:
Gruß
Julius
Lieber Julius,
- Allgemein stellt sich mir die Frage, ob man noch einen Plattform-übergreifenden Editor empfehlen sollte,
ja!
vielleicht Atom?
Nein, sondern Geany! Aber das ist nur meine persönliche Präferenz. Mit Geany habe ich schon Quelltexte von C#, CSS, HTML, Java, JavaScript, PHP, Python und SQL bearbeitet. [Edit]und JSON (als JavaScript) und XML natürlich[/Edit]
Liebe Grüße,
Felix Riesterer.
Aloha ;)
Nein, sondern Geany! Aber das ist nur meine persönliche Präferenz.
Meine auch. Notepad++ ist zwar (unter Windows) gefühlt besser, ich bin aber zwecks plattformübergreifender Nutzung inzwischen komplett auf Geany umgestiegen.
Atom fühlt sich für mich noch sehr "jung" (Kinderkrankheiten-jung) an.
Grüße,
RIDER
Hallo
Nein, sondern Geany! Aber das ist nur meine persönliche Präferenz.
Wie man aus einer persönlichen Präferenz ein derart kategorisch vorgetragenes „Nein, sondern …!“ ableiten kann, bleibt aber das Geheimnis von @Felix Riesterer.
Meine auch. Notepad++ ist zwar (unter Windows) gefühlt besser, ich bin aber zwecks plattformübergreifender Nutzung inzwischen komplett auf Geany umgestiegen.
Muss man denn überhaupt einen plattformübergreifenden Editor haben? Die meisten Anwender arbeiten mit einem System oder mit mehreren Systemen mit dem gleichen oder einem vergleichbaren OS. Ich selbst arbeite zuhause und auf Arbeit mit unterschiedlichen Betriebssystemen. Dennoch bin ich nicht der Meinung, überall den selben Editor benutzen zu wollen oder gar zu müssen.
Atom fühlt sich für mich noch sehr "jung" (Kinderkrankheiten-jung) an.
Ich habe den, durch diese Diskussion motiviert, gestern ein wenig angetestet. Ich finde das Konzept zwar durchaus interessant, aber auch mir fehlen noch hier und da ein paar Funktionen und Funktiönchen.
Tschö, Auge
Aloha ;)
Muss man denn überhaupt einen plattformübergreifenden Editor haben?
Für mich war das schon eine wichtige Frage. Ich hatte festgestellt, dass ich mich sehr an Notepad++ und dessen spezifische Bedienung gewöhnt hatte, inklusive Tastatur-Shortcuts, so dass ich mich unter Linux mit meinen Editoren immer gefühlt habe wie der Storch im Salat, weil ich quasi meinen gewohnten Workflow nicht "mitnehmen" konnte. Seither setze ich eigentlich nur noch Werkzeuge ein, die es plattformübergreifend gibt und kann zumindest für mich subjektiv sagen, dass sich die Sache für mich dadurch verbessert hat.
Grüße,
RIDER
Hallo Auge,
Meine auch. Notepad++ ist zwar (unter Windows) gefühlt besser, ich bin aber zwecks plattformübergreifender Nutzung inzwischen komplett auf Geany umgestiegen.
Muss man denn überhaupt einen plattformübergreifenden Editor haben?
Wie kann man aus einer persönlichen Präferenz… den Rest kennst du ja 😉
Ich möchte Cross-Plattform-Editoren. Ich mag es nicht, wenn die Haupt-Komponente (mein Editor) ständig wechselt. Da steckt ja auch nicht wenig lernen drin.
Atom fühlt sich für mich noch sehr "jung" (Kinderkrankheiten-jung) an.
Ich habe den, durch diese Diskussion motiviert, gestern ein wenig angetestet. Ich finde das Konzept zwar durchaus interessant, aber auch mir fehlen noch hier und da ein paar Funktionen und Funktiönchen.
Schau dir mal die diversen Erweiterungen an, die es gibt. Ich bin für Webzeugs inzwischen vollständig auf Atom umgestiegen. Er bietet mir dermaßen viele Vorteile, dass ich den nicht mehr missen möchte.
LG,
CK
Hallo
Meine auch. Notepad++ ist zwar (unter Windows) gefühlt besser, ich bin aber zwecks plattformübergreifender Nutzung inzwischen komplett auf Geany umgestiegen.
Muss man denn überhaupt einen plattformübergreifenden Editor haben?
Wie kann man aus einer persönlichen Präferenz… den Rest kennst du ja 😉
Deswegen stellte ich eine Frage und äußerte folgend meine klar als solche deklariert Meinung.
Ich möchte Cross-Plattform-Editoren. Ich mag es nicht, wenn die Haupt-Komponente (mein Editor) ständig wechselt. Da steckt ja auch nicht wenig lernen drin.
Das ist ein durchaus schwerwiegendes Argument, wenn man denn auf unterschiedlichen Systemen arbeitet. Kann ich nachvollziehen.
Atom fühlt sich für mich noch sehr "jung" (Kinderkrankheiten-jung) an.
Ich habe den, durch diese Diskussion motiviert, gestern ein wenig angetestet. Ich finde das Konzept zwar durchaus interessant, aber auch mir fehlen noch hier und da ein paar Funktionen und Funktiönchen.
Schau dir mal die diversen Erweiterungen an, die es gibt.
Da habe ich gestern auch reingeschaut. Die programminterne Liste der wenigen gefeatureten Plugins ist ja nicht sehr lang, aber die Packages-Seite selbst gibt momentan 6537 Pakete als verfügbar an. Da kann man sich bestimmt gut verirren. 😀
Tschö, Auge
Hallo Auge,
Da habe ich gestern auch reingeschaut. Die programminterne Liste der wenigen gefeatureten Plugins ist ja nicht sehr lang, aber die Packages-Seite selbst gibt momentan 6537 Pakete als verfügbar an. Da kann man sich bestimmt gut verirren. 😀
und auch beim Programm selbst... Ich bin immer noch nicht ganz sicher, ob es unter den Downloadvarianten ein portable Version gibt, bzw. der Editor dafür vorgesehen ist. Da ich aber mittlerweile bei einem anderen Anbieter eine spezielle portable Version gesehen habe, die leider nur durch PortableApps generiert wird, gibt es Atom wohl nicht nativ portable?
Gruss
Henry
Hallo Julius.
- Allgemein stellt sich mir die Frage, ob man noch einen Plattform-übergreifenden Editor empfehlen sollte, vielleicht Atom? (ich weiß, es gibt eine Liste mit Editoren, aber es fällt dem Anfänger höchstwahrscheinlich schwer, einen Editor für den Anfang zu wählen)
Für Anfänger sicher Brackets. Ich habe aber vor allem die besagte Liste mal um Brackets, Smultron, Sublime Text und Visual Studio Code ergänzt.
MfG, at