StartseiteVon Bits und Bytes

Über die Gestaltung von Websites mit Hilfe von CSS

Von / 8. November 2011 / 22 Kommentare / Seite 3 von 3 / Auf einer Seite lesen
Mehr

Damit haben wir die Grundlagen der Webentwicklung geklärt. Wer sich jetzt bemüßigt fühlen sollte, eigene Erfahrungen in diesem Bereich zu sammeln: die Website selfhtml.org ist ein guter Einstiegspunkt dafür, da sie einen guten Überblick über die möglichen HTML-Tags und CSS-Elemente bietet.

 

Update

Leser Andreas P. hat mich auf eine schöne Site im Internet aufmerksam gemacht, welche einen großen Vorteil von CSS, nämlich den schnellen Austausch des Designs einer Website, besonders hervorhebt. Interessierte klicken bitte hier.

1 / 2 / 3
Stichworte: , ,
Mehr

Kommentare (22)

  1. #1 Nele
    November 8, 2011

    Mhm. Ja. Ich denke, so eine knappe Einführung ist ja ganz lustig, aber ist das nicht ein Bedarf, der von gefühlten 5005 Webseiten geleistet wird? Wäre im Kontext einer Wissenschaftsblog-Community wie scienceblogs.de nicht eher interessant, einen etwas weiter gespannteren Blick auf die Computerwelt und Geschichte zu werfen?

    Was ich für meinen Teil sehr spannend fände, wäre in diesem Kontext z.B. einen Überblick über das Design von Text- und Bildschirmausgaben von den Anfängen bis heute; von Linearen Teletext-Drucken über ebenso lineare Terminal-Ausgaben, die ersten Grafiken auf der PDP, die Entdeckung der zweiten Dimension in Textterminals und die Bedeutung von Curses, die Grafikoberflächen von Gem an und X-Window an, der Werdegang von HTML und die Interaktivierung in Scripten und Serveranwendungen.

    Ach es gäbe so viel, was ich wirklich gerne von fachwissenschaftlicher Seite erzählt und beschrieben hätte und was es nicht an jeder Ecke gibt.

    Nele

  2. #2 nihil jie
    November 8, 2011

    @Nele

    ach naja… ich finde es auch so spannend. ich habe schon ein paar mal CSS genutzt, aber mehr schlecht als recht, weil ich kaum Webseiten in meinem Leben erstellt habe 😉 vielleicht sollte ich das mal öfters tun… von daher motivieren mich gelegentlich die Artikel von Marcus mal wieder mehr in der Richtung zu machen 🙂 bloß HTML schreckt mich und nervt mich oft ziemlich ab… ich empfinde es als wirr und unübersichtlich.

  3. #3 Christian Mai
    November 8, 2011

    Vielen Dank für diesen Artikel; jetzt ist bei mir endlich der Groschen gefallen. Vorige Woche noch dachte ich, ich müßte mal einen Artikel finden, der kurz und verständlich die Grundlagen erklärt. Nochmal vielen Dank!

  4. #4 Marcus Frenkel
    November 8, 2011

    @Nele
    Prinzipiell richtig und ich hoffe ja auch, dass ich mit meinen anderen Artikeln auch etwas in diese Richtung gehe. Nur gehört zur Informatik eben auch, wie eine Programmiersprache, ein Computer, HTML oder ein Algorithmus funktioniert, genauso wie zur Astronomie die Funktionsweise eines Teleskops und die Formel zur Berechnung des Schwarzschild-Radius gehört. Und der gewöhnliche Nicht-Informatiker da draußen wird, wie ich denke, eher an HTML als an X-Windows interessiert sein, da er mit ersterem häufiger Kontakt hat. Klar könnte ich hier eine Abhandlung darüber schreiben, welche Neuerungen C++11 gebracht hat, warum Perl unter der Kategorie “considered harmful” eingeordnet werden sollte (nichts für ungut) oder wie Integrationstests im Kontext des Extreme Programming eingesetzt werden sollten; wissenschaftlich genug wäre das wohl. Aber mal ehrlich – das dürfte Nicht-Informatiker weder Interessieren noch dürften sie es – ohne ausführliche Einleitung vorher – überhaupt verstehen.
    Scienceblogs.de ist eben keine Plattform für Fachleute, sondern für den normalinteressierten Bürger – und den kann man (hoffentlich) mit einer allgemeinen Abhandlung über HTML genauso begeistern wie mit einer Geschichte zur Entwicklung des Internets (die hoffentlich auch noch als Artikel irgendwann kommt).

    @Christian Mai
    Schön, wenn ich helfen konnte. 😉

  5. #5 Kallewirsch
    November 8, 2011

    Gibt es eigentlich einen triftigen Grund, warum man bei CSS schon wieder ein eigenes Syntax-Süppchen gekocht hat und nicht auf eine Markup-Darstellung gegangen ist?

  6. #6 Marcus Frenkel
    November 8, 2011

    @Kallewirsch
    Ich kann nur spekulieren, würde aber zwei Gründe dafür nennen:

    1.: Die Markup-Darstellung mit Hilfe von XML ist arg umständlich und hässlich zu lesen. Eventuell wollte man eine einfachere Darstellung; CSS ist auch definitiv leichter zu schreiben/lesen als HTML.

    2.: Jeder Informatiker, der etwas auf sich hält, entwickelt seine eigene Syntax. 😉

  7. #7 rolak
    November 8, 2011

    Oohkay. CSS habe ich bisher erfolgreich zu ignorieren versucht, während sich HTML und JS mir Steinzeit-ITler recht zügig erschlossen (≠für gut befunden worden! wg JS…).
    Und selbst wenn es mal unterkam bei einer Quelltextanalyse (was macht der browser in welcher Reihenfolge und warum? und wo bitte ist das, was ich eigentlich haben will?) war es doch eher kurzfristig feiner Sand im Getriebe als richtig hinderlich, es reichte ein ‘ist nicht tagged, sieht fremd aus, wird css sein’ und links liegen lassen.
    Sogar bei der SB-Schmieraffen-Erweiterung ging das bisher gut, kam ein JS/HTML-Element unerhörterweise auch noch in einem css-Teil vor, wurde der mit Namensänderung kopiert. Klingt doof, funktioniert aber.

    Doch imho müßte das ganze Teil (der Kram neben dem Edit-blob) mal sauber geschrieben, kommentiert und dokumentiert werden – falls sinnvoll, kann ja je upgrade eine aufs Notwendigste kastrierte Version von einem schnellen script erstellt werden. Tja, dann ist aber Schicht mit der Technik ‘will ich nicht’ 😉

    Und ja, Nele, es könnten sogar 5006 sein, doch was bringt mir ein Googlehupf? Da steh ich doch bis zur Halskrause (nicht, daß ich dergleichen tragen würde, so altmodisch bin ich dann doch nicht) in Schrott, Mist und Hinderlichem.
    Hier jedoch, im Vorbeigehen aufgeschnappt, finde ich das entscheidende Überblicks-Konzentrat, das leichtes und lässiges Weiterarbeiten ermöglicht. Ich kenne jetzt die Grundstruktur, der Rest ist Stichwortrecherche…

  8. #8 Ingo
    November 9, 2011

    Danke! Solche Artikel sind echt goldwert, um den ersten Schritt auf der Lernkurve zu nehmen. Von da an geht es dann doch echt einfacher weiter, aber die meisten umfangreicheren Einführungen zu dem Thema vergessen doch meist, die zugrunde liegende Struktur beizubringen.

  9. #9 Wb
    November 9, 2011

    Die Grundidee hinter CSS ist, dass mit Hilfe einer speziellen deklarativen, also beschreibenden Programmiersprache die Formatierungsanweisungen für einen Textbestandteil effizient aufzuschreiben und durch den Browser dann anwenden zu lassen.

    Hmja, die Trennung von Inhalt und Form ist wohl das Entscheidende, inwiefern CSS eine Programmiersprache ist, sei dahingestellt, wichtich ist das Erkennen und die nachfolgende Trennung der Schichten – war ja am Anfang nicht so…

  10. #10 Andreas P.
    November 9, 2011

    Eine Website die sehr schön vorführt warum es Sinn macht, Content und Layout zu trennen ist der css Zen Garden auf https://www.csszengarden.com/tr/deutsch

    Die Idee dahinter ist zu zeigen, was mit ein und demselben HTML und unterschiedlichen Stylesheets erreichbar ist …

  11. #11 Wb
    November 9, 2011

    Die Idee dahinter ist zu zeigen, was mit ein und demselben HTML und unterschiedlichen Stylesheets erreichbar ist …

    Streng genommen geht es nicht um die “Erreichbarkeit” von HTML, sondern um die menschenakzeptante Aufbereitung einer Datenbasis, vgl. auch XML, XHTML imd XSL(-FO).

    Aber genau diese Hinweise fehlten dem Schreiber dieser Zeilen auch im Artikel…

    HTH
    Wb

  12. #12 Marcus Frenkel
    November 9, 2011

    @Andreas P.
    Das ist eine schöne Seite, die kannte ich noch nicht. Danke. 🙂
    Ich erlaube mir mal, sie im Artikel noch zu verlinken.

  13. #13 Wb
    November 10, 2011

    Was ich für meinen Teil sehr spannend fände, wäre in diesem Kontext z.B. einen Überblick über das Design von Text- und Bildschirmausgaben von den Anfängen bis heute; von Linearen Teletext-Drucken über ebenso lineare Terminal-Ausgaben, die ersten Grafiken auf der PDP, die Entdeckung der zweiten Dimension in Textterminals und die Bedeutung von Curses, die Grafikoberflächen von Gem an und X-Window an, der Werdegang von HTML und die Interaktivierung in Scripten und Serveranwendungen.
    Ach es gäbe so viel, was ich wirklich gerne von fachwissenschaftlicher Seite erzählt und beschrieben hätte und was es nicht an jeder Ecke [1] gibt.

    Kommt ja vielleicht noch – und, so wie die Anforderung formuliert ist, haben Sie’s wirklich bitter nötig, lol.

    MFG
    Wb (der das Wesen der Styles, dieser neuen Schicht, im Artikel besser herausgearbeitet gewünscht hätte – aber auch hier: kommt ja vielleicht noch…)

    [1] zu “jeder Ecke” vielleicht noch: Ischt doch ein Unterschied, ob’s von Herrn Frenkel kommt oder von anderen, gell

  14. #14 ZielWasserVermeider
    November 10, 2011

    Nette Übersicht.

    Dann kommen demnächst wohl die dynamischen Seiten dran (z.B. php, damit wird ja auch sb betrieben;).

    Gruß
    Oli

  15. #15 Wb
    November 10, 2011

    Vorgeschlagener Titel: Über die Gestaltung von Websites mit Hilfe von PHP

  16. #16 Andreas P.
    November 17, 2011

    ach themen gibts genug … man könnte mal was zu design patterns sagen (MVC bietet sich an bei websites), oder mal einen Überblick über gängige Frameworks geben (sagen wir Zend, Code Igniter, Django und ROR), oder man könnte sich mal über den Aufbau sicherer Websites unterhalten (Stichwort OWASP), oder oder … gibt genug 🙂

  17. #17 Marcus Frenkel
    November 17, 2011

    @Andreas P
    Für ein Blog für (Web-)Entwickler wären diese Themen vermutlich wunderbar. Auf einer allgemeinen Wissenschaftsseite sind sie aber doch ein wenig zu speziell, würde ich sagen. 😉
    Websicherheit allgemein wäre aber wohl mal ein gutes Thema.

    @Wb
    PHP könnte man auch mal machen, das ist richtig.

  18. #18 Andreas P.
    November 17, 2011

    @Marcus Frenkel

    Für ein Blog für (Web-)Entwickler wären diese Themen vermutlich wunderbar. Auf einer allgemeinen Wissenschaftsseite sind sie aber doch ein wenig zu speziell, würde ich sagen. 😉

    Ich hatte gerade das Gefühl es entwickelt sich gerade in die Richtung, ein Beitrag über HTML, einer über CSS, das Publikum erwartet einen über PHP … 😉

    Aber Websicherheit wird auch gern genommen 😉

  19. #19 Marcus Frenkel
    November 17, 2011

    Ich hatte gerade das Gefühl es entwickelt sich gerade in die Richtung, ein Beitrag über HTML, einer über CSS, das Publikum erwartet einen über PHP … 😉

    Irgendwo muss man eben die Grenze ziehen. 😉

    Aber Websicherheit wird auch gern genommen 😉

    Ich schau, was sich machen lässt. Im Bereich Web bin ich ja auch eher nur der “Anwender” und kann da auch nur über Dinge sprechen, die den Anwender direkt betreffen (Stichwort: das Veröffentlichen von persönlichen Daten und das Öffnen von E-Mails).

    Vermutlich hatten Sie aber beim Begriff “Websicherheit” aber etwas anderes im Hinterkopf? 😉

  20. #20 Andreas P.
    November 17, 2011

    In der Tat, ich dachte da mehr an das Erstellen sicherer Websites/Apps gedacht (da es hier ja schon um HTML und CSS ging) .. daher hatte ich ja auch OWASP, das “Open Web Application Security Project” erwähnt. Man könnte den Leuten mal erklären wie SQL Injections funktionieren und wie man sich davor schützt, oder über Cross Site Scripting, oder … aber das is schon wieder viel zu praktisch für ein SB Blog, oder?! 😉

  21. #21 Marcus Frenkel
    November 17, 2011

    aber das is schon wieder viel zu praktisch für ein SB Blog, oder?!

    Was heißt praktisch…es dürfte, so vermute ich, in erster Linie für die Ersteller von Websites interessant sein, und die sind hier eindeutig nicht die Zielgruppe. 😉
    Praktische Themen kann man sicherlich auch auf SB.de gut anbringen, aber dann vermutlich doch eher mit Bezug zu alltäglicheren Dingen, würde ich meinen. 😉

    Wobei der xkcd-Strip immer wieder schön anzusehen ist. 😉

  22. #22 Donnamara
    Dezember 11, 2011

    Ich komme mir richtig dumm vor, weil ich nur im Maschinencode programmiert habe. “12769” oder “ffpx” bedeutete dann in Assembler eben move d3, f1
    Und nun lese ich, wie man heute “beschreibt”, was ich damals vielleicht gemacht habe.

    “….wie mit Hilfe der Auszeichnungssprache HTML auf einfache Weise Websites im Internet beschrieben werden können.”

    Verstehe ich das nun so oder so? Es wird von “Beschreiben” gesprochen. Eine Landschaft kann man beschreiben. Aber Etwas, was es noch nicht gibt, kann man nicht beschreiben sondern es muß erst einmal erzeugt werden, damit es beschreibbar ist!

    Oder ist mit “beschreiben” gemeint, das leere Blatt mit Text füllen? Auch dazu brauche ich nicht HTML sondern den verdammten Text!

    Aber seitdem man auf “Start” drücken muß um ein Programm zu beenden, wundert mich schon gar nichts mehr.