HTML Grundwissen

Tutorial wurde erstellt von: StyLer

Was ist das Grundwissen?
HTML Grundgerüst
Begriffe und Erklärungen
Was ist Doctype und wozu dient es?
Unser HTML-Element
Unser Head-Element und dessen Bereich
Der Body-Bereich
W3C Angaben
Programmierstil oder Wie lesbarkeit erhöhen
Nochmal Programmierstil & Legend


Was ist das Grundwissen?

Das Grundwissen ist ein breites Thema und kann jedem dabei helfen sich besser auszudrücken oder auch um sich einen besseren Stil anzueignen. Werde euch natürlich nicht alles beibringen aber zumindestens wie ein Grundgerüst aufgebaut ist und warum das so sein soll. Genau so zeige ich euch die Benennungen, wozu Text-Einrückungen sind und welchen Regeln ihr unterlegen sein werdet.


HTML Grundgerüst

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Hier der Titel eurer Seite</title>
</head>
<body>
      Hier der Inhalt eurer Seite
</body>
</html>

Ehrlich gesagt, kann ich das HTML Grundgerüst nicht ohne hilfe. Warum? Nun, wenn ihr euch die erste sowie zweite Zeile anschaut, ist dort unser Doctype eingetragen. Wer bitte schön kann sowas langes auswendig? Erstmal Begriffe und Erklärungen und dann von Zeile zu Zeile.


Begriffe und Erklärungen

Elemente
Elemente sind unsere HTML-Tags. Mit diesen HTML-Tags arbeitet man. Wie sehen diese aus? Ganz einfach: <elementname> Sowohl HTML-Element als auch HTML-Tag sind richtig.

Attribute
Attribute liegen innerhalb unserer HTML-Tags, also so <div id="1">. ID ist also ein Attribut unseres Div-Tags Wichtig ist hier bei, das Werte die wir einem Attribut zuweisen immer in "" liegen. Funktionieren tut es auch ohne irgendwelche Anführungszeichen aber denkt an die W3C Form. Ihr habt auch mehr übersicht wenn ihr euch an sowas haltet.

Grundgerüst Elemente
Welche Elemente dürfen nur einmalig pro Seite auftauchen?
Da wäre das HTML-Element, das Head-Element, Title-Element und das Body-Element. Wenn ihr also beispielsweise eine Template Klasse (PHP) verwendet und damit eure Index.html/Index.php füllt dann achtet darauf, das die HTML Dateien keine einmaligen Elemente beinhalten. Warum? Weil die Index.html/Index.php diese ja schon beinhaltet und die zusätzlichen HTML Codes die wir mit der Template Klasse hinzufügen, dürfen diese Elemente nicht beinhalten da wir sonst ein Darstellungsproblem bekommen. Natürlich darf es auch nur 1 Doctype geben.

Grundregeln zum schließen und öffnen von Elementen
Ein mehrzeiliges Element wird erst geöffnet <head> und anschließend </head> geschlossen. Ein mehrzeiliges Element kann aber auch nur in einer Zeile stehen, trotzdem muss es sowohl geöffnet und geschlossen werden.
Man unterscheidet einzeilige und mehrzeilige Elemente dadurch, das mehrzeilige Elemente Text beinhalten können und einzeilige nicht.
Ein Beispiel für ein einzeiliges Element: <br />. Einzeilige Element werden also < geöffnet, es folgt der elementname, dann kommt ein leerzeichen und es wird /> geschlossen. Also: <elementname />.
Wo finden wir sowas? Bei einem IMG-Element (<img src="test.jpg" />) oder auch bei INPUT-Elementen (<input type="text" />). Natürlich sind diese Tags nicht vollständig dienen aber gut als Beispiel.


Was ist Doctype und wozu dient es?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wie ich das nun erklären soll. Es gibt da eine Organisation die sich W3 oder auch W3C schimpft. Sie sagt: "Leute, das geht so nicht, jede Internetseite hat einen anderen Aufbau und ungültige Attribute und und und, haltet euch an die Form!".

Was ist die Form?
Nun das ist wieder so eine Sache, HTML ist (fast) Regellos. D.h. man kann eine HTML sowohl ohne Doctype als auch mit ins Netz stellen. Genau so kann man alles andere weg lassen. Die W3C versucht einen Standard einzubringen damit die Leute sich an gewisse Regeln halten und damit die Browser besser mit den HTML Dateien klar kommen.
Nun zum Doctype: Er besagt nach welchem Standard wir arbeiten. Das wäre im unseren Beispiel XHTML 1.0 strict. Das gibt an, das wir die zweite Edition von XHTML 1.0 verwenden und das XML Browser diese Seite richtig darstellen werden.
So richtig kann ich euch das nicht erklären. Ihr gebt halt an nach welchem Komform Eure Seite ist/sein wird. Das ist im grunde nur für den Browser wichtig und sollte euch klar machen, das ihr eine HTML Datei nach einem gewissen Standard aufbauen solltet. Auf einige dieser Form-Regeln werde ich später eingehen. Für mehr Informationen besucht einfach mal die seite W3.org (Englisch!).


Unser HTML-Element

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">

Unser HTML-Element leitet den HTML Bereich ein. Es ist sowohl das erste als auch das letzte Element in einem Dokument, Doctype ausgeschlossen. Was bedeutet das xmlns-Attribut? Das gehört wieder zur W3C geschichte und dient nur als Namespace. Ich geh hier mal nicht weiter drauf ein, da es für Anfänger weder wichtig noch Pflicht ist.


Unser Head-Element und dessen Bereich

HTML:

<head>
    <title>Hier der Titel eurer Seite</title>
</head>

Das Head-Element bestimmt den 'Kopf'-Bereich unseres HTML Dokumentes und kann wichtige Elemente beinhalten. Es beinhaltet auch unser Title-Element.
Das Title-Element dient nur zu einem Zweck, es bestimmt den Namen der oben im Browser steht. Also würde nun oben Hier der Titel eurer Seite stehen. Hoffe das ist soweit verständlich.

Was kann das Head-Element alles beinhalten?
Die wichtigsten wären Meta-Tags, Script-Tags und Link-Tags.
Meta-Elemente geben diverse Dinge an. Zum Beispiel Stichwörter, Seiteninhaber, Seiteninhalt ...usw
Man kann dort so gut wie alles Notieren. Auch ein Meta-Refresh ist möglich. Sowas nennt man auch Meta-Angabe(n). Mehr Infos daszu findet auf SelfHTML.org.
Zu den Script-Elementen sage ich nur eines: Sobald ihr Javascript kennen lernt, werdet ihr schon wissen wozu Script-Elemente dienen.


Der Body-Bereich

HTML:

<body>
    Hier der Inhalt eurer Seite
</body>

Der Body-Tag leitet den Inhalt der Seite ein. Innerhalb der Body-Tags wird also alles stehen. Und ich meine wirklich alles. Jedes Div-Element, Form-Element, A-Element und und und tragen wir dort ein. Momentan steht dort nur Hier der Inhalt eurer Seite. Öffnet man nun dieses Dokument, so würde auch nur dieser Text zu sehen sein. Wenn ihr zum Beispiel, die Seite statt weiß sondern Schwarz haben wollt, so müsstet ihr im Body-Element das Attribute bgcolor angeben: <body bgcolor="#000000">
Was ist #000000? Ein Hexadezimal Code. Das Hexadezimal-System besteht aus: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Ihr kennt bestimmt RGB Rot, Grün, Blau!
Also sieht im grunde genommen ein Farbcode immer so aus: #RRGGBB. Weiß ist #FFFFFF und Schwarz #000000. Rot wäre? #FF0000 Und Grün #00FF00.
Ihr müsst weder das Hexadezimal-System lernen noch euch diverse Codes merken. Standard-Codes wie Schwarz, Weiß, Rot, Grün, Blau sollte man jedoch aus dem FF können. Meine Lieblingscode ist #cc9900. Wollt ihr wissen was das für eine Farbe ist? Schaut auf der Startseite nach, wir Informationstechniker werden in dieser Farbe angezeigt "danke error". 

HTML:


</html>

Das müsstet ihr anhand des Tutorials schon allein wissen.
Aber als Vervollständigung gebe ich es mal an. Wir schließen mit diesem End-Tag unseren HTML-Bereich. Einfach oder?


W3C Angaben

Wie ich schon sagte, es ist keine Pflicht, die W3C Form einzuhalten aber es ist immer besser gewisse Sachen unbedingt anzugeben und manche vorsichtshalber. Ich nehme als Beispiel: 

HTML:


<img src="test.jpg" />

Was fehlt bei unserem IMG-Element? Nun da wäre sowohl das Height- als auch das Width-Attribut. Diese sind zwar keine Pflicht, aber sollten immer angegeben werden. W3C gibt vor, das man auch das ALT- und Title-Attribut angeben sollte. Sollte das Bild mal nicht angezeigt werden, so wird stattdessen der Wert des ALT-Attributes angezeigt. Fährt man mit der Maus über das Bild so wird nach 1-2Sekunden der Wert des Title-Attributes angezeigt was als kleine Beschreibung dient. Je nach Doctype wird etwas anderes verlangt. Wie sähe das ganze aus? 

HTML:


<img src="test.jpg" width="150" height="100" alt="Avatar" title="Mein Avatar" />

Etwas mehr Code als vorher wa? Ich lasse das Title-Attribut immer weg, da ich finde, das Bilder keine Beschreibung benötigen Aber das könnt Ihr euch aussuchen.


Programmierstil oder Wie lesbarkeit erhöhen

Wie ihr ganz oben sehen könnt, rücke ich meinen Code immer etwas ein. Das erhöht die Lesbarkeit und ist praktisch, wenn man Code lesen muss. Solltet ihr mal Euren Code weiterreichen müssen, so achtet darauf, das der Code leicht zu lesen ist ansonsten kann es sein, das der andere garnicht durchblickt und euch dann auch nicht helfen kann. Ich nehme mich mal als Beispiel. Ich rücke alle Kindelemente in einem HTML Dokument um 2 Leerzeichen ein. Genau so: 

HTML:


<element>
	<element></element>
</element>

Man erkennt den Aufbau oder? Bei PHP mache ich es so ähnlich, nur mit 4 Leerzeichen, da unter PHP doch viel viel mehr Code-WirrW herrscht. Allein IF-Anweisungen sind öfter mal gekapselt und so kommt man schonmal einwenig durcheinander, selbst mit einrückung(en). Wären aber keine da, so würde man wohl noch mehr Probleme bekommen. Wichtig ist auch, das ihr die Elemente richtig anordnet. Es gibt da keine Regeln, aber folgender Code ist WirrW und dadurch schlechter lesbar: 

HTML:


<div><ul><center>Irgendein Text<font-size="2">Test test</ul></div></font></center>

Seht ihr was ich meine? Da muss man schonmal 2mal hinschauen um genau zu wissen ob jedes Element auch richtig geschlossen und was der inhalt ist Wie würde es gut lesbar sein? 

HTML:


<div>
	<ul>
		<center>Irgendein Text <font size="2">Test test/lt;/font></center>
	</ul>
</div>

Erkennt ihr den Unterschied? Man sieht sofort das es ein Div-Block ist und das dass Div auch richtig geschlossen wird. Genau so mit dem ul-Element. Man erkennt auch auf die schnelle welcher Text hier präsent ist und das ein teil davon auch vergrößert dargestellt wird durch das font-Element mit Size-Attribut.


Nochmal Programmierstil & Legend

Auf das Thema wollte ich nun eigentlich nicht näher eingehen aber Legend wollte es wohl so. Es gibt keinen richtigen und falschen Programmierstil, da stimme ich Legend voll zu. Mein eigener Stil besteht aus 2 Standardstilen die ich euch jetzt nicht zeigen werde da diese mehr bei PHP präsent sind. Ich finde, solange man seinen Code lesbar hält, ist der Stil unwichtig!
Sollte man mal in einem Team arbeiten und muss so seinen Code weitergeben genau so anderen Code bearbeiten/lesen müssen, so sollte von jedem einzelnen Teammitglied erwartet werden, das der Code auch entsprechend verstanden/gelesen werden kann. Das verlangen die meisten Leute sogar, also versucht einfach euren Code lesbar zu halten, für euch selbst und auch für andere.
Kommen wir noch kurz zu Valide Solange ein Code keine Fehler enthällt, so ist dieser Valide. Es gibt aber Code der ist nicht W3C Komform und somit nicht W3C Valide. Worin liegt der Unterschied? Ihr werdet kein W3C Icon auf eure Page klatschen können Gut, könnt ihr schon aber das wäre nicht fair!

Meine Meinung?
Ich hab dazu keine. Wie ich sagte, W3C ist keine Pflicht und auch nicht-bekannte Attribute können verwendet werden für zum Beispiel Javascript um irgendwelche Elemente besser aufzuspüren (DOM). Das einzigste ist, das es dann nicht W3C Komform bzw Valide ist.
Ich sag euch was: Ich habe noch nie einen W3C Validen Code geschrieben! Gut was? Warum ich das nie getan habe? Ich brauch dieses W3C Bild nicht auf meiner Seite genau so wenig möchte ich meinen Code unnötig erweitern. Ich brauche keine Title-Attribute. Also lasse ich sie weg.