Lernen von HTML und CSS zusammen

Hallo an alle :smile:

Ich möchte gerne Webdesign lernen (also HTML und CSS) und habe mir auch Literatur dafür besorgt (aber auch einige Internetseiten in meinem Favoritenordner abgespeichert). Nun ist es leider so, dass ich das zu Lernende „nur“ „ungeordnete“ Theorie ist, also ein „In XHTML kann man dies machen und das und jenes und dann gibt es da noch…etc.pp“.

Nun wollte ich ganz gerne einen anderen Weg des Lernens einschlagen: XHTML und CSS anhand eines Webseitenbauens miteinander verknüpfen, also dass diese beiden…„Zahnräder“ ineinander greifen und ich nicht erst das eine und danach das andere erlernen muss.

Auf diese Weise erhoffe ich mir, dass ich beim Eintippen des jeweiligen Codes gleich sehe, was die Tags/Selektoren bewirken, ich also durch die Visualisierung besser begreife.

Kennt einer von Euch rein zufällig die eine oder andere Webseite oder Literatur, wo ein genau solcher Weg behandelt wird. Am besten, wenn auch das Thema Barrierearmut kein Fremdwort ist.

Liebe Grüße und schon einmal Dankeschön im Voraus

Tichuspieler

ich denke mal das simple schritt für schritt tutorial getrennt nach HTML und CSS ist ok

Hallo!

Nun wollte ich ganz gerne einen anderen Weg des Lernens
einschlagen: XHTML und CSS anhand eines Webseitenbauens
miteinander verknüpfen, also dass diese beiden…„Zahnräder“
ineinander greifen und ich nicht erst das eine und danach das
andere erlernen muss.

Davon kann ich Dir nur sehr wohlwollend abraten.
Nicht umsonst spricht man von „Trennung von Inhalt und Layout“.

Die meisten gehen eigentlich diesen Weg, insofern ist das kein „anderer“, sondern der am weitesten verbreitete Weg.
Der bessere Weg (im Sinne von „Du lernst es besser“) ist, erst HTML vollständig zu lernen und erst wenn Du das perfekt beherrschst, DIch auf CSS zu stürzen. Es wird dadurch vieles klarer und einfacher.

Auf diese Weise erhoffe ich mir, dass ich beim Eintippen des
jeweiligen Codes gleich sehe, was die Tags/Selektoren
bewirken, ich also durch die Visualisierung besser begreife.

Es muss Dir klar sein, dass HTML nichts mit dem Aussehen der Website zu tun hat, Dein geplantes Vorgehen also eigentlich kontraproduktiv ist. HTML ist dafür da, die Semantik des Inhalts zu bestimmen. Wie das in dem einen oder anderen Browser angezeigt wird, ist absolut irrelevant. Wenn Du so lernst, wie Du es geplant hast, dann machst Du den Fehler, den viele machen und dann kommt sowas vor, dass Du aufgrund eines gewünschten Aussehens ein anderes Tag verwendest, was aber semantischer Unfug ist.

HTML ist nicht für die Visualisierung, sondern ausschließlich CSS. Deswegen solltest Du erstmal Inhalt schreiben, diesen dann semantisch sinnvoll mit HTML auszeichnen und erst, wenn diese Basis steht, stürzt Du Dich auf CSS.

Bedenke, dass es nicht nur Browser als Webclients gibt, Suchmaschinen oder Vorlesebrowser interpretieren die Semantik des HTML-Codes, CSS interessiert sie gar nicht, weil sie nichts visualisieren. Wenn Deine Basis aus HTML aber nicht stimmt, verstehen diese beiden Clients nur Bahnhof.

Kennt einer von Euch rein zufällig die eine oder andere
Webseite oder Literatur, wo ein genau solcher Weg behandelt
wird. Am besten, wenn auch das Thema Barrierearmut kein
Fremdwort ist.

Gerade, wenn Du von Barrierearmut (-freiheit) sprichst, solltest Du den von Dir beschrieben Weg auf keinen Fall einschlagen, weil Du mit der Methode nämlich den entgegengesetzten Weg einschlägst und für noch mehr Barrieren sorgen wirst.

Im FAQ:1161 ist anfangs eine Einführung verlinkt, die Dir HTML anständig beibringt.

Mein Tipp:

  1. Inhalte schreiben (ohne an Aussehen zu denken)
  2. Inhalt semantisch mit HTML auszeichnen (nur die Bedeutung, das Aussehen ist hier immer noch nicht relevant)
  3. Erst dann das externe Stylesheet schreiben. Wenn Du alles perfekt gemacht hast, musst Du jetzt kein einziges Mal mehr in den HTML-Code eingreifen.

Wenn Du Fragen dazu hast, dann frag! Bevor Du anfängst, es Dir unnötig schwerer zu machen und die Materie womöglich dann nicht richtig verstehst.

Die Menschen, die nach Deiner geplanten Methode vorgehen, haben später immer unglaubliche Schwierigkeiten. Sie kämpfen mit CSS, haben aber noch so viele Löcher im HTML-Code, dass sie den Überblick verlieren und Layout mit CSS für sie unglaublich kompliziert erscheint.

Das sage ich aus meiner Erfahrung in Foren. Bei den Leuten, die mir geglaubt haben, hat es schließlich "+klick* gemacht und sie haben die Einfachheit von HTML begriffen und wie wichtig es ist, Inhalt (HTML) und Layout (CSS) in allen Dingen, in jeder Hinsicht immer strikt zu trennen.

Fragen? Fragen!

Liebe Grüße,
-Efchen

Hi,

Eigentlich alles, was du wissen musst:
SELFHTML

Demii

Moin,

SelfHTML ist leider nur noch bedingt geeignet, Anfängern würde ich das nicht mehr empfehlen. Die aktuelle Version hat schon einige Jährchen auf dem Buckel, und wenn doch immerhin zwischen physischer und logischer Textauszeichnung unterschieden wird, wird zu wenig darauf hingewiesen, was HTML eigentlich ist und warum man keine physische Inhaltsauszeichnung verwendet.

Die Einführung aus FAQ:1161 ist da doch deutlicher. Denn das ist eine ganz wichtige Basis, wenn man HTML zur physischen Auszeichnung verwendet, hat man schon das grundlegendste an Webseiten nicht verstanden und das zieht im Laufe der „Karriere“ immer weitere Kreise.

Liebe Grüße,
-Efchen

Hi Ihrs!

Dankeschön erstmal für die vielen vielen Antworten, auch für die Links. Ich schaue Sie mir die Tage mal in Ruhe an. Ich habe übrigens noch ein Onlinebuch gefunden:
http://jendryschik.de/wsdev/einfuehrung/.
Kann mir einer von euch sagen, ob das auch schon gut/okay ist?

GLG
Tichuspieler

Moin!

http://jendryschik.de/wsdev/einfuehrung/.
Kann mir einer von euch sagen, ob das auch schon gut/okay ist?

Ich hab jetzt nur den Anfang überflogen, da stehen aber schon sehr wichtige Angaben, die man z.B. bei SelfHTML nicht findet, ich darf da mal einen Abschnitt zitieren:

—Zitat--------------------------------------------------------
Beispiel: Eine Überschrift soll in einer größeren Schrift und fett formatiert werden. Unerfahrene Anwender wählen oftmals den scheinbar einfacheren, aber falschen Weg und formatieren die entsprechenden Textstellen direkt. Damit treffen sie zwar eine Aussage über die visuelle Darstellung des Texts und erreichen so ihr primäres Ziel, allerdings fehlt eine Aussage über die Bedeutung des Texts, die Semantik, an dieser Stelle. Ein Text wird nicht dadurch zur Überschrift, dass er groß und fett ist, sondern dadurch, dass man ihn als Überschrift auszeichnet. Der richtige Weg ist, eine semantische Formatierung zuzuweisen – in diesem Fall Überschrift 1
—Zitat-Ende---------------------------------------------------

Das ist genau das, was man als Anfänger schon falsch machen kann und somit den Grundstein legt für spätere, schlechte Websites und ein völlig falsches Verständnis der gesamten Thematik.

Hier ist es richtig erklärt!

Liebe Grüße,
-Efchen

Hallo Efchen!

Danke Dir! Dann setze ich mich ran.

GLG
Tichuspieler