Hallo Peter,

habe mir Teil 0 und teil 1 von little boxes bei Amazon gekauft.

Mein Ziel ist es, zu verstehen was ich in den Editor eintippe. Ich sehe auch ein, daß meine Ausführungen noch stark verbesserungswürdig sind. Vielleicht habe ich auch versucht das Haus mit dem Dach beginnend aufzubauen.

Werde mich jetzt erstmal in die HTML-Materie reinarbeiten um dann später mit CSS weitermachen zu können.

Ich denke sooo schwer wird es nicht sein, da andere das ja auch gelernt haben

Nur eines würde mich jetzt vorab noch interessieren, wie bekomme ich via CSS in einer Auflistung andere Abstände hin? Indem ich die Listeneinträge via margin bzw. padding formatiere?

Gruß
Marko

Hallo Marko, dein Weg ist nicht unbedingt der falsche aber du gehst von einer falschen Position an das ganze ran.

Du sagst selber das es nicht so schwer sein kann das zu lernen. Nur durch eigeneinsatz lernt man mehr als sich auf andere verlassen.

Zu deiner letzgenannten Frage:
Geh doch mal mit folgendem Gedanken an das ganze ran: Wie könnte man das ganze denn noch umsetzten? Wenn es mehrere Wege gibt probier doch alle mal aus und schau mal welcher dir am besten gefällt.

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Kurze Antwort: Ja.

Schau dir das HTML und stelle dir dann die Kästchen vor, die die Elemente im Browserfenster bauen:

• Du hast eine ul-Kiste, die alles umgibt.
• Darin sind mehrere li-Kisten, die untereinander liegen und die volle Breite der ul-Kiste in Anspruch nehmen
• In jeder li-Kiste befindet sich dann noch eine a-Kiste.

Oder installiere das Firefox-Addon "View Source Chart" und schaue dir das dann an. Das Buch heißt ja nicht umsonst "Little Boxes".

Jedes dieser Elemente (Kisten) hat verschiedene Eigenschaften, die man mit Hilfe von CSS gestalten kann. Die Eigenschaften zur Gestaltung von Abständen heißen padding, border und margin und werden in Kapitel 7 erklärt: "Abstände gestalten mit dem Box-Modell".

Beim Schreiben des HTML solltest du dich darum aber überhaupt noch nicht kümmern. Wichtig ist, dass das HTML grammatikalisch korrekt (checken mit dem Validator) und sinnvoll geschrieben ist ("semantisch").

Im Buch erstellst du auch zuerst in Kapitel 4.1 eine Navigationsliste. Diese HTML-Liste wird erst viel später in Kapitel 9 (horizontal) oder in Kapitel 16.1 (vertikal) gestaltet.

Das Schwierigste beim Lernen ist für viele, dass man seine Ungeduld zügelt und ein solides Fundament (HTML) legt, bevor man an die Gestaltung (CSS) geht.

Viel Spaß dabei.

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Danke für das empfohlene ADD-ON, hab es direkt mal installiert und ausprobiert.

Womit ich noch nicht so richtig im Reinen bin ist das Wort "semantisch". Was genau möchtet Ihr mir damit sagen. Habe mir den Link zwar angesehen, den fricca mir da gegeben hat, kann jedoch mit dem ganzen nicht viel anfangen. Gebt mir doch mal ein anderes Wort für semantisch, vielleicht klickt es ja dann....

Gruß
Marko

Semantik "nennt man die Theorie oder Wissenschaft von der Bedeutung der Zeichen" (Definition bei Wikipedia).

Ein anderes Wort für "semantisch" wäre "sinnvoll" oder "der Bedeutung entsprechend". Das klingt sehr hochtrabend, ist aber eigentlich recht simpel. Mit semantischem HTML ist gemeint, dass man die Elemente ihrer Bedeutung nach vergibt und nicht zum Beispiel nach dem Aussehen geht.

Ein einfaches Beispiel dafür findest du in Little Boxes Teil 0 auf Seite 193. Schaue dir die beiden folgenden HTML-Schnippsel an:

1. <h1>Ich bin eine Überschrift</h1>
2. <p><font size="7"><b>Ich bin eine Überschrift</b></font></p>

Im Browser sehen beide Beispiele fast identisch aus, aber Beispiel 1 ist "semantisches HTML": Eine Überschrift bekommt im HTML ein Überschriften-Element zur (h1 bis h6) zugewiesen, egal wie es aussieht. In Beispiel 2 hingegen wurde das HTML so geschrieben, dass im Browser ein bestimmtes "Aussehen" erreicht werden soll. Das ist nicht die Aufgabe von HTML. Das stammt aus einer Zeit, als es CSS noch nicht gab.

Anderes Beispiel: Eine Navigation ist eine "Liste von Hyperlinks", also schreibt man das im HTML auch so. Das Aussehen wird später per CSS geregelt.

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Hallo,

also mit meinen Worten gesagt: Im HTML kommen nur definierte Inhalte. Für das Styling ist am Ende CSS verantwortlich.

Also werden im HTML keine Attribute mehr für Schriftart, Form und Farbe mehr direkt hinter die Tags eingetragen, sondern nur noch grundlegende Elemente wie Absätze, Liste, und Grafiken.

Das würde bedeuten, daß die Größe der Grafik nicht mehr, wie früher, direkt im HTML-Text definiert wird, sondern später über CSS. Richtig?

Gruß
Marko

Wenn es sich um Hintergrundgrafiken handelt, die der Gestaltung dienen, dann ja. Bilder, die zum Inhalt gehören (z.B. Fotos, die Motive zeigen, die im Artikel behandelt werden) gehören ins Markup (img-Element). Das Image-Element fordert die Atribute „width“ und „height“ aus dem Grund, dass der benötigte Platz für das Bild von vornherein bekannt ist, auch wenn das Bild noch nicht fertig geladen wurde. Damit vermeidet man, dass der Text im nachhinein noch „hüpft“.

__________________
github | http://dnaber.de

Bingo.

Per img integrierte Grafiken benötigen weiterhin die Attribute width und height - siehe den Beitrag von David.

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Aber... angenommen ich nehme nur ein Stylesheet für alle meine HTML-Layouts.
Auf Seite 1 soll die mit H1 deklarierte Überschrift Rot sein und auf Seite 2 Blau.

Normalerweise kann ich dem H1-Tag im CSS nur eine Farbe zuweisen, richtig?

Wäre es dann richig, dem H1-Tag eine ID zuzuweisen um im CSS später die einzelnen IDs zu formatieren?

Für Rot so: <h1 id="rot">Das soll Rot</h1>

und für blau so <h1 id="blau">Das soll Blau</h1>

Gruß
Marko

Ab hier klinke ich mich dann mal wieder aus, denn das steht nun wirklich alles in "Little Boxes Teil 1", und zwar im Kapitel über Selektoren. Viel Spaß beim Lesen

__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«