Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute

HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute

Den Zusammenhang zwischen den Begriffen Element, Tag und Attribut kennt ihr bereits aus dem ersten Teil dieser Reihe. Nun geht es darum, wie sich diese Dinge praktisch in HTML-Dokumenten nutzen lassen. Zum Abschluss dieses Video-Trainings erfahrt ihr dann, wie ihr euren HTML-Code auf syntaktische Korrektheit hin überprüfen könnt.


HTML-Dokumente bestehen aus Elementen, die durch die sogenannten Tags gekennzeichnet sind. Tags erkennt ihr an spitzen Klammern. Dabei sind fast alle HTML-Elemente durch ein einleitendes und abschließendes Tag gekennzeichnet. Das, was sich dazwischen befindet, nennt sich Gültigkeitsbereich.

Ein Beispiel:

<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>

Durch diese Syntax wird eine Überschrift der ersten Ordnung ins Dokument geschrieben. Das einleitende <h1>-Tag teilt dem Browser mit, dass es sich eben um eine solche Überschrift handelt. Das abschließende </h1> beendet die Überschrift. Ihr erkennt abschließende Tags an einer öffnenden spitzen Klammer, gefolgt von einem Schrägstrich </.

Bilder



 
Eine Frage taucht hinsichtlich der Schreibweise der Elementnamen auf: Wie sieht es eigentlich mit Groß- und Kleinschreibung aus? Wie bereits beschrieben, liegt der Fokus in dieser Reihe auf HTML5. Hier könnt ihr tatsächlich zwischen Groß- und Kleinschreibung wählen. Persönlich favorisiere ich allerdings eine konsequente Kleinschreibung und werde das auch in dieser Reihe so handhaben. Prinzipiell wären nach HTML5 aber die folgenden Dinge korrekt:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
<H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>

Elemente, die man öffnet, müssen auch wieder geschlossen werden. Wenn ihr also ein <h1> setzt, müsst ihr es nach dem Ende der Überschriftendefinition auch wieder schließen </h1>. Zwar gibt es in HTML5 hier auch Ausnahmen wie beispielsweise Listeneinträge und Absätze, dazu dann aber später mehr.

In HTML gibt es übrigens auch sogenannte Standalone-Tags. Diese bestehen nur aus einem Tag, nicht aus Anfangs- und End-Tag. Ein typisches Beispiel dafür ist <br />.
Das ist eine Zeile.<br />
Das ist eine andere Zeile.

Dieses <br /> definiert einen Zeilenumbruch.

Bilder



 
Solche leeren Tags schließt man üblicherweise mittels Schrägstrich, auch wenn das in HTML5 nicht zwingend nötig ist. Hier würde auch Folgendes gehen:
<br>

Ihr werdet im Laufe dieser Reihe noch weitere dieser Standalone-Tags kennenlernen.


Elemente verschachteln

HTML-Elemente lassen sich übrigens auch verschachteln. Stellt euch vor, ihr wollt innerhalb einer Überschrift eine Passage kursiv gestalten. Für eine kursive Darstellung wird das i-Element verwendet.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>

Achtet bei der Verschachtelung auf die richtige Reihenfolge. Man schließt als letztes das Element, das zuerst geöffnet wurde. Im vorliegenden Fall ist das also das h1-Element.

Bilder



 

Attribute verwenden

Innerhalb öffnender Tags oder Standalone-Tags lassen sich sogenannte Attribute definieren. Diese Attribute können Elementen zusätzliche Eigenschaften zuweisen. In früheren HTML-Zeiten hat man den Elementen vergleichsweise viele Attribute zugewiesen. Das lag schlicht und ergreifend an der Vermischung zwischen Struktur und Design. So hat man beispielsweise Farbdefinitionen direkt dem HTML-Element über ein entsprechendes Attribut übergeben. Mittlerweile ist – natürlich auch dank CSS – eine strikte Trennung von Design und Struktur möglich, die auch eingehalten werden sollte. Daher gibt es nur noch vergleichsweise wenige Attribute, die eingesetzt werden.

Ein wichtiges Attribut ist id. Über dieses Attribut lässt sich einem HTML-Element ein eindeutiger Name zuweisen, über den es sich dann beispielsweise per CSS oder JavaScript ansprechen lässt.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>

Um ein Attribut zuzuweisen, fügt man hinter dem h1 ein Leerzeichen ein. Daran schließt sich der Name des Attributs an, der üblicherweise kleingeschrieben wird. Hinter dem Attributnamen folgt das Gleichheitszeichen. In Anführungszeichen gesetzt schließt sich der Attributwert an.

Man kann einem Element übrigens auch mehrere Attribute zuweisen. So ist es beispielsweise durchaus üblich, für ein Element eine sogenannte Klasse und eine ID zu definieren. Auch dazu ein Beispiel: Über id wird die Überschrift eindeutig identifiziert. Die Klasse ist hingegen dafür da, die Überschrift in eine bestimmte Kategorie einzuordnen. So kann man bestimmen, dass alle Elemente, denen die Klasse blue zugewiesen wird, in blauer Farbe angezeigt werden. (Mehr zu dieser CSS- und Farbenthematik dann natürlich später ausführlich).
<h1 id="head" class="blue">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>

Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.


 

Den Code validieren

Einige grundlegende Syntaxregeln habt ihr nun bereits kennengelernt. Gerade am Anfang, wenn man HTML lernt, ist es wichtig, sich an diese Regeln zu halten. Was man sich nämlich einmal falsch angewöhnt hat, kriegt man nur schwer wieder aus dem Kopf. Ihr solltet daher euren HTML-Code immer auf Richtigkeit überprüfen bzw. validieren (lassen). Das müsst ihr natürlich nicht selbst machen. Hierfür gibt es entsprechende Online-Tools. Einen sogenannten Validator findet ihr beispielsweise unter http://validator.w3.org/.

Bilder



 
Am besten wechselt ihr dort direkt in das Register Validate by direct Input. Hier kann man den zu überprüfenden HTML-Code direkt per Copy & Paste einfügen. Achtet unbedingt darauf, den kompletten Code der Datei einzufügen, also auch die DOCTYPE-Angabe.

Bilder



 
Fügt, um den Validator zu testen, Folgendes in das Textfeld ein und klickt anschließend auf die Validate-Schaltfläche.
<!DOCTYPE html>
<html lang="de">
<head>
   <title>PSD-Tutorials.de</title>
   <meta charset="UTF-8" />
</head>
<body>
   <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
</body>
</html>     

Das Ergebnis sollte folgendermaßen aussehen:

Bilder



 
Hier ist alles in Ordnung. (An den zwei Warnungen müsst ihr euch in diesem Fall nicht stören). Erscheint also die Meldung This document was successfully checked as HTML5!, ist tatsächlich alles in Ordnung. Wie stellt sich das Ganze aber im Fehlerfall dar? Dazu könnt ihr einfach mal absichtlich einen Fehler in die Syntax einbauen.
<h1 id=head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>

Hier wurde das einleitende Anführungszeichen bei head vergessen. Lässt man die Syntax jetzt noch einmal validieren, wird der Fehler erkannt.

Bilder



 
Der Validator gibt daraufhin eine entsprechende Meldung aus. Was genau schiefgelaufen ist, kann man im unteren Fensterbereich ablesen.

Bilder



Hier ist dann auch sehr schön beschrieben, was eigentlich der Fehler ist.

Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>

Ihr seht also direkt, in welcher Zeile eine fehlerhafte Eingabe erfolgte, und könnt diese korrigieren. Somit hilft euch der Validator also dabei, sauberen HTML-Code zu erstellen. Ihr solltet euren Code immer validieren lassen. Denn die Browser zeigen HTML-Code oftmals korrekt an, obwohl die Syntax fehlerhaft ist. In anderen Browsern, in denen ihr eure Seiten aber nicht testet, kann das hingegen ganz anders aussehen.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von vegator
  • 12.10.2016 - 15:59

Herzlichen Dank für das Video.

Portrait von BeBa
  • 18.04.2015 - 19:59

Wieder gut erklärt. Leicht und verständlich, so kann es weitergehen.

Portrait von ZainaPhoto
  • 28.03.2015 - 20:38

Großen Dank für das Video.

LG Zaina

Portrait von AnneRick
  • 16.10.2014 - 10:24

Vielen dank fur das Tutorial.

Anne

Portrait von Steve007
  • 23.09.2014 - 17:27

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Kundentest
  • 20.09.2014 - 21:43

Herzlichen Dank für das Video.

Portrait von Caesarion2004
  • 20.09.2014 - 10:47

Vielen Dank für das verständliche, informative und interessante Tutorial mit den sinnvollen Hinweisen. Danke auch für die Datei.

Portrait von Domingo
  • 20.09.2014 - 10:35

Danke für die hilfreichen Tipps.

Portrait von cythux
  • 14.09.2014 - 14:09

3 Teile und in fast in allen steht das selbe drin. Wer wirklich validen Code erzeugen will sollte sich dieses http://emmet.io/ (ehemals unter ZenCoding bekannt und das Cheat Sheethttp://docs.emmet.io/cheat-sheet/)Tool anlegen.

Portrait von muhtsch
  • 13.09.2014 - 17:54

Danke...erst einmal.
Mit dem Validator stehe ich manchmal auf Kriegsfuß, weil ich dann nicht verstehe, was "er" von mir will.
Meist hat er an der Ausführung meiner meta tags zu meckern...aber darüber wirst Du sicherlich auch etwas schreiben...oder?
Ansonsten...kann es weiter gehen ;)

Portrait von Caesarion2004
  • 13.09.2014 - 11:16

Vielen Dank für das gute Texttutorial samt Datei!

Portrait von teste123
  • 12.09.2014 - 20:54

hallo zusammen
vielen Dank
MfG

Portrait von samtron
  • 12.09.2014 - 20:52

hallo
vielen Dank
MfG

Portrait von Kundentest
  • 12.09.2014 - 20:45

Herzlichen Dank für das Tutorial.

Portrait von MicroSmurf
  • 12.09.2014 - 20:37

Interessant wie immer. Vielen Dank.

Portrait von Domingo
  • 12.09.2014 - 19:39

Tutorial gefällt mir gut.

Portrait von solsito
  • 12.09.2014 - 18:13

Habe wertvolle Tipps bekommen. Danke! :)

Portrait von BOPsWelt
  • 12.09.2014 - 17:00

Danke für den nächsten Teil des Tutorials. :)

Portrait von pallasathena
  • 12.09.2014 - 16:41

Danke, zum Nachlesen immer wieder gut.

Portrait von mmaatthhiiss
  • 12.09.2014 - 16:36

Hat mir jetzt nicht unbedingt weitergeholfen

x
×
×