FAQ HTML/CSS

Ist Groß- und Kleinschreibung egal?

Nein. Oft habe ich das Problem, dass die Bilder von studentischen Arbeiten auf meinem Rechner nicht angezeigt werden. Das liegt in allen Fällen daran, dass die Schreibweise des Dateinamens, bspw. Hund.jpg abweicht von der Schreibweise, wie Sie das Bild einbinden, bspw. <img src="hund.jpg" />.

Während Windows hier “ein Auge zudrückt”, nehmen es Mac und Linux sehr genau mit der Schreibweise.

Regel: Schreiben Sie alle Dateinamen, die im Webkontext verwendet werden, konsequent klein, dann kann Ihnen nichts passieren.

Empfehlung: Verwenden Sie in Ordner- und Dateinamen keine Sonderzeichen und auch keine Leerzeichen. Für Trennungen von Wörtern empfiehlt sich der -.

Ist es egal, wie meine Dateien benannt werden?

Im Grunde schon. Allerdings wird der Dateiname einer HTML-Seite von Suchmaschinen ausgewertet. Daher haben Sie hier die Chance, wichtige und treffende Begriffe unterzubringen.

Regel: Die Homepage sollte immer index.html genannt werden. Sie ist es , nach der der Webserver sucht, wenn bspw. die URL https://secondhandblumen.de eingegeben wird. Hieße Ihre Homepage home.html, müsste man https://secondhandblumen.de/home.html eingeben und würde andernfalls eine Fehlermeldung erhalten.

Soll ich mein CSS immer in einer eigenen Datei pflegen?

Ja! Das lohnt sich, wenn Sie das CSS für mehrere HTML-Dokumente brauchen - und das ist bald der Fall. Andernfalls pflegen Sie an verschiedenen Orten Ihr CSS - und das wollen Sie nicht bei 37 HTML-Dateien ;-)

Kann ich Tabellen auch für Navigationen, Bildergalerien oder das Layout verwenden?

Lieber nicht. Also - nein! Nutzen Sie die HTML-Elemente immer gemäß ihrer Bedeutung. Das ist das Grundkonzept von semantischem Markup. Das table-Element ist also für Tabellen gedacht, das nav-Element für Navigationen. Bildergalerien könnten Sie mit Tabellen bauen, diese würde aber auch kleineren Displays nicht gut angezeigt werden. Daher nutzen Sie lieber div-Elemente, die Sie mit CSS geschickt in Zeilen und Spalten bringen können.

Was ist der Unterschied zwischen Klassen und IDs in CSS?

Eine gute Erläuterung finden Sie im HTML-Seminar.

Wann sollte ich Inline-CSS verwenden?

Inline-CSS bedeutet, CSS-Anweisungen als Attribut eines HTML-Elements zu notieren:

<h1 style="color: red">Hundekuchen</h1>

Das ist auf jeden Fall zulässig, sollte aber mit Bedacht getan werden. Eine ausführliche Erläuterung bietet die Codeacademy auf Englisch. Das HTML-Seminar hat einige Argumente auf Deutsch.

Regel: Inline-CSS hat die größte Wirkung. Das bedeutet, dass CSS, das vorher eingebettet und aus einer externen Datei geladen wurde, von Inline-CSS überschrieben wird.

Soll ich das <font>-Tag verwenden?

Das <font>-Tag gehört wie einige andere HTML-Elemente ins vergangene Jahrhundert, als CSS noch in den Anfängen steckte. “Damals” hat man versucht, mithilfe bestimmter HTML-Tags auch formatierend zu arbeiten, also das Aussehen einer Webseite mit HTML zu ändern. Das tut man heute nicht mehr, dafür gibt es CSS.

Regel: HTML ist dafür da, Informationen in einem HTML-Dokument Bedeutung zuzuweisen, sie semantisch, also gemäß ihrer Bedeutung, auszuzeichnen. HTML gibt Struktur. CSS hingegen dient der Formatierung und Gestaltung.

Statt also <font> zu verwenden, weisen Sie einem Element mit CSS die Schrifteigenschaften zu, bspw.

body {
    font-familiy: Arial, sans-serif;
}

Welchen CSS-Ansatz sollte ich für mein Layout nutzen: float, flex oder grid?

Es gibt vier verschiedene Möglichkeiten, Layouts mit CSS zu bauen:

  1. mit Tabellen: sehr alter Ansatz, heute nicht mehr zeitgemäß aus unterschiedlichen Gründen.
  2. mit float: gut zu wissen, wie’s geht, weil es noch unzählige alte Kundenwebseiten in Betrieben geben könnte, die gepflegt werden müssen. Kein empfehlenswerter Ansatz für neue Webseiten.
  3. mit flexbox: Das Layouten mit Flexbox ist relativ neu und sehr mächtig. Sollte man sich zuerst aneignen.
  4. mit grid: modernster Ansatz, ebenfalls sehr mächtig und mit Flexbox kombinierbar. Sollte man anschließend lernen

Das folgende Video stellt die Ansätze sehr gut einander gegenüber und zeigt auf, was in HTML und CSS zu tun ist:

Dieses Video steht leider nicht unter einer CC-Lizenz.

Verstanden
Um die Inhalte auf dieser Website optimal für Sie anbieten zu können, verwenden wir Cookies. Mehr erfahren