Auf gehts! Heute geht es um DIV- und SPAN-Elemente. Wofür sie gut sind und wie man am besten mit diesen Werkzeug umgeht.

Im vorherigen Post ging es, um das formatieren und strukturieren von Texten. Davor besprachen wir schonmal die Grundlagen und Vorraussetzungen, um eine Webseite zu erstellen.

Viel Spaß mit meiner Tutorial-Serie!

Unser erstes Webdesign-Werkzeug!

DIV-Elemente

Jetzt wird es ernst. Mit dem DIV-Element können wir unsere Webseite noch besser gestalten.

Über ein DIV-TAG definiert man einen Bereich. Diesen Bereich kann man mithilfe von CSS gestalten, dass bedeutet man gibt diesen Bereich eine feste oder variable Größe. Man kann diesen Bereich eine Farbe geben, einen Hintergrund. Sogar die Schrift für diesen Bereich kann beliebig angepasst werden und noch viel mehr.

Doch fangen wir mal langsam an. DIV steht für division, übersetzt bedeutet dies "Gruppierung von Elementen". Ein DIV ist ein Blockelement. Dieses nutzt die komplette Bildschirmbreite.

Natürlich ist das was du an der oberen Grafik siehst erst die halbe Miete. Damit wir das DIV-Element ansprechen können, müssen wir dem Element noch einen Namen geben. In der HTML-Welt spricht man von der ID!

Dazu gibt man dem DIV ein zusätzliches id-Attribut. Dies kann so aussehen: id="NAME". Anstatt NAME können wir jeden beliebigen Namen vergeben.

Aber Achtung: Beim Attribut id sollte es nur ein Element mit derselben ID geben. Es darf in unserem Fall nur EIN (DIV-)Element geben, dass den Namen NAME trägt.

Wenn man mehrere DIV-Elemente hat, die in weiterer Folge dieselben Eigenschaften tragen sollen (beispielsweise: Farbe, Größe, ...) dann kann man auf das class-Attribut zurückgreifen.

Wir geben den DIV-Element eine ID oder eine CLASS. Mithilfe der ID oder der CLASS können wir das Element später Eigenschaften geben. Dafür nutzen wir CSS (Cascading Style Sheets). In der HTML-Datei legen wir zuerst das Layout der Webseite fest. Die Eigenschaften der Elemente geben wir in CSS an. Dies können wir entweder in derselben HTML-Datei angeben oder wie ich es bevorzuge in einer eigenen style.css-Datei

Bevor wir zum umfangreichen Bereich "CSS" kommen zeige ich dir in diesen Beitrag noch SPAN's

Ähnlich wie DIV's aber bitte nicht verwechseln.

SPAN-Elemente

Das span-Element ist ein Element, das Text und andere Inline-Elemente (=Elemente die in einer Zeile sind, beispielsweise Bilder) enthalten kann. Span-Elemente haben selbst keine Bedeutung, sie bewirken auch nichts.

Warum gibt es sie dann?

Ganz einfach! Zum formatieren. Span-Elemente können zum Beispiel gleich genutzt werden wie ein < b > < /b > oder eine Überschrift < h1 > < /h1 >. Es ist einfach eine zusätzliche Möglichkeit. Man kann dem span-Element andere Eigenschaften geben als normalen Text, also den Text oder Hintergrund in span-Elementen anders gestalten.

span steht für überspannen. Man überspannt den Textteilen einfach eine Art unsichtbare Fläche, die man später mit CSS gestalten kann.

Wie man diese DIV-Elemente und SPAN-Elemente mithilfe von CSS gestaltet erfährst du in einem folgenden Teil.

Wenn du nichts verpassen willst folge mir einfach!

Mehr Wissen!

Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:

• HTML-TAG: Texte strukturieren und formatieren. - Internet-Basics #7
• Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an. - Internet-Basics #6
• Warum gibt es Domains? - Internet-Basics #5
• Was sind IP-Adressen // +Gewinne 1 SBD - Internet-Basics #4

<sup>Schlussworte: Ich hoffe der Beitrag gefiel dir. Es wäre super, wenn du mir Feedback in einen Kommentar hinterlassen würdest.

In nächsten Teil der Serie werde ich die HTML5-Elemente wie header, nav, section, article, aside und footer näher erklären. Darauf kommt dann der große Artikel indem dann alles klar werden wird, wofür wir diese Elemente wie auch die DIV's und SPAN's eigentlich brauchen und wie wir unsere Seite mittels CSS richtig designen können.</sup>

DANKE!