Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 27. Dezember 2018

Gewusst wo: Wissensquellen zu HTML und CSS

Die bei­den Auszeichnungssprachen HTML und CSS sind unver­zicht­bar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbei­test, kommst du ohne Kenntnisse in die­sen Sprachen nicht sehr weit. Aber natür­lich musst du nicht jedes Element und jede Eigenschaft ken­nen. Du soll­test nur wis­sen, wo du dich schlau machen kannst. Daher haben wir hier ein paar nütz­li­che Wissensquellen zu HTML und CSS für dich.

SelfHTML: Das Urgestein unter den Wissensquellen zu HTML, CSS und JavaScript

SelfHTML, das Wiki. (Screenshot: Dr. Web)

SelfHTML, gegrün­det von Stefan Münz, ist ein ech­tes Pionierstück des Web. Erstmalig 1995 online in Erscheinung getre­ten, ist es sogar noch zwei Jahre älter als der gute alte Dr. Web, den es 1997 in die Weiten des Netzes ver­schlug.

SelfHTML hat sich der Idee ver­schrie­ben, dass grund­sätz­lich jeder und jede im Netz auf der Basis von Web-Standards publi­zie­ren kön­nen soll­te. Wie der Name schon sagt, ist das Projekt von Beginn an eine Selbstlernplattform gewe­sen. War Münz über Jahrzehnte der Pfleger der Dokumentation, so ist die­ser Teil von SelfHTML heut­zu­ta­ge als Wiki ange­legt und dem­entspre­chend von einer brei­te­ren Kontributorenschar unter­stützt. Neben dem Wiki fin­den Wissensdurstige Hilfe im ange­glie­der­ten Forum und News im eben­falls vor­han­de­nen Blog.

Wie nicht anders zu erwar­ten, ist das Projekt an der ein oder ande­ren Stelle etwas in die Jahre gekom­men. Dennoch ist SelfHTML eine der, wenn nicht gar die wich­tigs­te Wissensquelle zum Thema im deutsch­spra­chi­gen Raum.

W3Schools: Der Alleskenner rund um Webentwicklung

W3Schools

Das Tutorial-Portal W3Schools gehört sicher zu den Klassikern, wenn es um Webentwicklung und die dazu­ge­hö­ri­gen Sprachen geht. Neben einer umfang­rei­chen Referenz zum Nachschlagen ein­zel­ner Elemente und Eigenschaften gibt es auch Einführungen in diver­se Sprachen.

So fin­dest du vor allem für Anfänger leicht ver­ständ­li­che Tutorials, die dir einen ers­ten Ein- und Überblick geben und Grundsätzliches erläu­tern. Fortgeschrittene fin­den zu jeder Sprache eine umfang­rei­che Referenz, in der Elemente und dazu­ge­hö­ri­ge Eigenschaften kurz und knapp erklärt wer­den. Sehr schön sind die vie­len ver­schie­de­nen Live-Beispiele, bei denen du mit dem Quelltext spie­len und das Verhalten der Eigenschaften ein­fach direkt auf der Website aus­pro­bie­ren kannst.

Kleiner Nachteil: W3Schools ist nur in eng­li­scher Sprache ver­füg­bar. Dafür fin­dest du neben HTML und CSS aber unter ande­rem auch Tutorials zu JavaScript, SVG und PHP.

Mozilla Developer Network: Mozillas eigenes Wissensportal

Mozilla Developer Network

Mozilla hat mit sei­nem Developer Network ein ganz ähn­li­ches Portal ent­wi­ckelt wie W3Schools. Allerdings sind vie­le Inhalte hier in deut­scher Sprache ver­füg­bar. Im MDN fin­dest du vie­le grund­sätz­li­che Informationen für Einsteiger, sowie umfang­rei­che Referenzen zu ein­zel­nen Elementen und Eigenschaften.

Dazu gibt es zahl­rei­che Beispiele und wie bei W3School zu allen Einträgen eine Übersicht, wie es sich mit der Browserkompatibilität ver­hält. Gerade bei neue­ren HTML- oder CSS-Features ist die­se Information ja nicht ganz unwich­tig.

Can I use …: Der schnelle Checker

Can I use …

Wenn du ein­fach mal schnell her­aus­fin­den willst, ob ein HTML-Element oder eine CSS-Eigenschaft bereits in allen gän­gi­gen Browsern läuft, bie­tet sich Can I use … an. Du gibst ein­fach das Feature ein, wonach du dich erkun­di­gen möch­test und erhältst umge­hend eine Tabelle, wel­che dir ver­rät, in wel­chen Browsern und ab wel­cher Version das Element oder die Eigenschaft unter­stützt wird.

Manchmal – vor allem beim Internet Explorer – sind eini­ge Features nicht ganz feh­ler­frei imple­men­tiert. Auch hier­zu lie­fert dir die Website nütz­li­che Hinweise. Verlangen Browser oder bestimm­te Versionen einen Prefix, wird dar­über eben­falls infor­miert.

Stack Overflow: Das Expertenforum

Stack Overflow

Kommst du bei einer Sache gar nicht mehr wei­ter, hilft dir das Entwicklerforum Stack Overflow. Wenn du schon mal über eine Suchmaschine nach bestimm­ten HTML- oder CSS-Dingen gesucht hast, bist du sicher schon ein­mal auf die­sem Portal gelan­det.

Mit über 15 Millionen bereits gestell­ten Fragen und 23 Millionen Antworten ist die Wahrscheinlichkeit hoch, dass dei­ne Fragen dort schon ein­mal beant­wor­tet wur­den. Da in so einem Forum nicht jede Antwort immer eine rich­ti­ge Antwort ist, gibt es bei Stack Overflow die Möglichkeiten, Antworten als hilf­reich zu kenn­zeich­nen. So soll­test du dich im Zweifel nur auf jene Antworten ver­las­sen, die durch ande­re Nutzer mit einem grü­nen Haken als hilf­reich dekla­riert sind.

Und soll­te eine Frage tat­säch­lich mal noch nicht gestellt wor­den sein, kannst du dir dort sehr sicher sein, dass du auf dei­ne Frage recht schnell eine Antwort bekommst.

Mediaevent: Das deutsche Einsteigerportal

Mediaevent

Die meis­ten Wissensdatenbanken und -por­ta­le sind ent­we­der aus­schließ­lich in eng­li­scher Sprache oder wie beim MDN mit deut­scher Übersetzung, die dann aber meist nur für einen Teil der Inhalte vor­han­den ist.

Komplett deutsch­spra­chig ist die Website Mediaevent. Dort fin­dest du vor allem für Einsteiger aus­führ­li­che Einleitungen zu HTML, CSS und JavaScript. Wer des Englischen also nicht ganz so mäch­tig ist, dürf­te hier eine gute Anlaufstelle fin­den.

Web Fundamentals: Googles Entwicklerportal

Web Fundamentals

Nicht nur Mozilla hat sein eige­nes Entwicklerportal, auch Google ist mit sei­nen Web Fundamentals dabei. Für Einsteiger oder Entwickler, die bestimm­te Elemente oder Eigenschaften nach­schla­gen wol­len, ist die­se Website nicht geeig­net.

Stattdessen gibt es umfang­rei­che Tutorials und Leitfäden zu moder­nen Webtechniken, sowie Sicherheits- und Performanzaspekten. So beschäf­ti­gen sich die meist sehr umfang­rei­chen Artikel unter ande­rem damit, wie du eine Progressive Web App oder Multi-Device-Websites ent­wi­ckelst.

Die meis­ten Tutorials set­zen gute Kenntnisse in HTML, CSS und vor allem JavaScript vor­aus. Dafür geben die Artikel eini­ges an Inhalt her und zei­gen oft Schritt für Schritt, wie du vor­ge­hen soll­test.

Cheat Sheets: Grundsätzliches ganz kompakt

HTML Cheat Sheet

Wenn du die Basics in Sachen HTML und CSS nicht immer auf der Reihe hast, kannst du dir die wich­tigs­ten Begriffe und Regeln über soge­nann­te Cheat Sheets immer in Griff- bezie­hungs­wei­se Lesenähe bereit­hal­ten.

Das HTML Cheat Sheet etwa lis­tet die wich­tigs­ten Elemente auf und erläu­tert, wie die­se zu gebrau­chen sind. Außerdem gibt es zu allen Elementen jeweils ein kur­zes Beispiel

Analog dazu gibt es natür­lich ein CSS Cheat Sheet. Hier fin­dest du alle wich­ti­gen und gebräuch­li­chen CSS-Eigenschaften sowie die mög­li­chen Werte bezie­hungs­wei­se Schlüsselwörter. Werden Zahlen als Werte erwar­tet, sind die erlaub­ten Einheiten dort auf­ge­lis­tet.

Schau auch in unse­re gro­ße Übersicht der Lernplattformen rein, die dir alle­samt das Rundum-Knowhow zum Thema bie­ten.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

5 Kommentare

  1. Danke für die Verbeugung vor SelfHTML!

    @ Martin: Schon mög­lich, dass dort man­ches ange­jahrt wirkt, dass es moder­ne­re Quellen für die heu­ti­ge Generation von Web-Autoren gibt – aber wie gesagt: Das waren unse­re Lehrjahre, die Grundausbildung sozu­sa­gen.

    Ohne Stefan Münz und Dr. Web (ihr hät­tet euch auch ruhig in die Liste set­zen kön­nen – Eigenlob ist cool) wären zumin­dest mei­ne 90 er Jahre anders ver­lau­fen …

    Danke!

  2. selfhtml.org ist in mei­nen Augen über­haupt nicht mehr zu emp­feh­len. Schau dir die Diskussionen im Forum an und die zum Teil mehr als ver­al­te­te Dokumentation. W3Schools und das Mozilla Developer Network rei­chen völ­lig und sind immer auf dem aktu­el­len Stand.

  3. Gute Zusammenfassung – aller­dings fehlt mir hier selfhtml.org – das ist wohl einer der ältes­ten Seiten, dort wird auch direkt der Browsersupport ange­zeigt und es ist sehr über­sicht­lich :).

    VG Christian

    • Ja, stimmt!
      Wie man Stefan Münz hier ver­ges­sen konn­te …?
      Glaube Generation von Web-Autoren haben damit und noch mit dem Win-Editor ihre ers­ten Lehrjahre absol­viert. Die ers­ten Jahre, denn die­ses Lernen endet nie.
      Nur gibts die kaum noch?, heu­te schubst man Blöcke über die Seiten, eine paar Farben und Grafiken hoch­la­den, fer­tig.

      Ansonsten dan­ke für die Liste, ein paar kann­te ich noch nicht und es feh­len sicher noch wel­che und so kommt Leben in die Bude, wenn sich wei­te­re Leser mel­den: “ihr habt .… ver­ges­sen?!”

      Wünsche allen Webworkern Gesundheit und viel Erfolg im neu­en und allen fol­gen­den Jahren!

    • In der Tat soll­te SelfHTML in sol­chen Übersichten stets auf­tau­chen, schon allei­ne aus Respekt vor der über 20-jäh­ri­gen kon­ti­nu­ier­li­chen Arbeit, die dar­in steckt. Ich habe es dazu­ge­nom­men. Danke für den Hinweis.

Schreibe einen Kommentar zu pezi Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.