Lassen Sie uns über das Schreiben von sauberem Code sprechen.
Wenn ich über sauberen Code spreche, spreche ich darüber, wie man
Code schreibt, der auf so vielen Geräten wie möglich funktioniert.
Um dies zu tun,
müssen Sie ein wenig über das Dokumentobjektmodell, das
auch DOM genannt wird, wissen.
Wenn HTML5 entwickelt wurde,
ist die wichtigste Art von Fahrziel, dass sie sich an den Standard halten wollen.
Dass alle neuen Funktionen auf HTML,
CSS, DOM und JavaScript basieren sollten,
und Sie können eine Chance haben, über jede dieser Funktionen zu erfahren.
Aber ich möchte nur ein wenig über das DOM sprechen,
weil es Ihnen helfen wird, den HTML ein wenig besser zu verstehen.
Eines der Dinge über geeky Informatiker wie ich ist, dass wir Bäume lieben.
Nicht wie Bäume draußen, die im Herbst grün und schön sind.
Wir mögen mathematische Bäume.
Diese baumartigen Strukturen, die wir als gültig oder ungültig erweisen können.
Wenn wir also über HTML als Baum sprechen, sprechen wir über
diese Idee, dass wir an der Wurzel des Baumes HTML erstellen werden.
Dann, von diesem Baum, wenn wir sagen:
„Ich werde ein HTML-Dokument erstellen.“
Wir wollen Teile.
Wir wollen den Kopf hier drüben, und wir wollen die Leiche.
Im Kopf behalten wir all diese Art von
Informationen, die der Benutzer zum größten Teil nicht sehen wird.
Der einzige Unterschied ist, dass wir über den Titel sprechen,
aber wir werden all diese Art von verstecktem Zeug haben, das niemand wirklich interessiert.
Im Körper ist, wo wir lernen werden, alle unsere HTML fünf Tags setzen.
Lassen Sie uns also über HTML als Baum sprechen.
In diesem Fall zeige ich Ihnen diese Idee, dass an der Wurzel
jeder HTML-Seite das sogenannte HTML-Tag sein sollte.
Diese Art von Sache, die sagt,
lässt den Browser wissen.
Ich werde Ihnen bestimmte Arten von Tags geben und hier ist, wie ich will, dass sie funktionieren.
Wenn wir es nicht als Bild betrachten,
kann ich Ihnen auch sagen, dass
jeder Baum drei Teile zu einem wohlgeformten Dokument hat.
Der Doctype, das ist die Version von HTML, die Sie verwenden werden.
Der Kopf, der alle Metadaten oder Art von zusätzlichen Informationen ist, und der Körper.
Der Körper ist der darstellbare Inhalt.
Die Sache, die die meisten Leute zurückbekommen werden, wenn sie den Anforderungsantwort-Zyklus ausführen.
Also lasst uns Doctype sprechen.
Du hast so viel Glück.
Als ich zuerst Webseiten erstellte und wir in HTML4 waren,
mussten wir all diese verschiedenen Möglichkeiten finden, um zu erklären, ob
unser HTML4 sehr strenge Standards war oder ob es übergangsweise war.
In HTML5 ist es sehr einfach zu sagen:
„Nein, es gibt nur eine Sache und es heißt DOCTYPE HTML“, und Sie sind alle bereit.
Für den Kopf, der sich innerhalb des head-Tags befindet,
werden wir all diese zusätzlichen Informationen vom Browser verwendet haben.
Zum Beispiel möchten Sie sagen, in welcher Sprache Sie Ihre Seite erstellen.
Sie könnten auch einschließen,
und Sie möchten wirklich, was der Titel Ihrer Seiten.
Wenn ich über den Titel spreche, spreche ich nicht über eine große Art von Header, die Sie sehen.
Ich spreche von der kleinen Sache, die Sie in der Registerkarte Ihres Browsers sehen.
Später möchten Sie möglicherweise auch unterstützende Dateien hinzufügen.
Möglicherweise möchten Sie CSS-Dateien haben, die Ihre Seite stylen,
oder JavaScript, das auf verschiedene Interaktionen hinzufügen kann,
oder wirklich jede Art von Add-Ons, die
die Art und Weise ändern, wie Benutzer Ihre Website sehen und interagieren.
Abgesehen vom Titel werden die Metadaten nicht angezeigt,
die Benutzer werden sie nicht sehen.
Was die Leute sehen, sind die Informationen, die in Ihrem Körper-Tag enthalten sind.
Dieses Body-Tag ist der Hauptteil Ihrer Seite.
Es ist also sehr wichtig, gut formatierten oder baumartigen
Code zu schreiben, wo Sie sicherstellen, dass jedes Tag ein Ende hat.
Dass du keine Tags in seltsame Reihenfolge bringst.
So wird der größte Teil des Inhalts im Körper vom Browser angezeigt
, aber ab und zu gibt es auch ein wenig Metadaten.
Aber das werden wir in dieser Klasse nicht treffen.
Schauen wir uns ein Beispiel an.
Genau hier habe ich eine Datei namens template.html,
und ich zeige den Code hier auf dem Bildschirm für Sie an.
Können Sie die drei Teile eines wohlgeformten Dokuments finden?
Das erste, was Sie suchen möchten, ist der Doctype.
Das haben wir genau hier.
Damit Sie wissen, dass es sich um ein HTML5-Dokument handelt.
Wir haben dann das HTML-Tag, das die Wurzel unseres wirklich wissenschaftlichen Baums war,
und ich lasse die Leute wissen, dass ich die Sprache, in der sie angezeigt wird, gerne Englisch war.
Im Kopfbereich haben wir diese Metadaten.
Wo es uns Dinge sagt wie: „Hey,
ich weiß, dass es auf der
ganzen Welt viele verschiedene Tastaturen und Wege gibt, Buchstaben darzustellen.
Ich möchte, dass Sie das, was UTF-8 genannt wird, verwenden.“
Mach dir keine Sorgen, dass du es einfach jedes Mal verwendest.
Dann ist der nächste Teil meiner Metadaten der Titel, in dem wir sehen wollen, dass er sagt:
„Meine erste Seite“. Das war's.
Das sind zwei der drei Teile.
Der letzte Teil ist das body-Tag und es
zeigt den Inhalt, den wir auf dem Bildschirm sehen möchten.
Schauen wir uns das in einem Browser an. Was habe ich?
Ich habe meinen Titel hier oben
und meine darstellbaren Inhalte direkt da unten.
Ich habe den Code geschrieben,
der nächste Schritt, den Sie immer tun sollten, ist der Code zu validieren.
Sagen Sie: „Ich habe Code geschrieben, der gut aussieht,
aber ich weiß, dass Browser sehr nett sind und die
Dinge gut angezeigt werden, auch wenn ich keinen guten Code geschrieben habe.“
Also, wenn Sie zum Validator gehen, dass w3.org,
können Sie jede Website überprüfen, um zu sehen, ob der Code gültig ist und Sie haben drei Möglichkeiten.
Sie können die URL hochladen,
Sie können eine Datei hochladen,
oder Sie können Ihren Code kopieren und einfügen und direkt dort einfügen.
In diesem Fall habe ich die URL zu template.HTML Run Check eingegeben,
und yay, nicht überraschend, weil ich wusste, dass ich
das Taping durchführen würde, wurde es erfolgreich überprüft.
Mach dir keine Sorgen um Warnungen.
Warnungen sind in der Regel in, um sich selbst zu bedecken.
Was ist, wenn Sie
Ihre Datei überprüfen möchten, aber Ihre Dateien noch nicht im Internet sind?
Lassen Sie uns wirklich schnell ein Beispiel dafür durchlaufen, wie Sie das tun können.
Nehmen wir an, dass ich meine Datei template.HTML habe und ich es überprüfen möchte.
Ich möchte Sie darauf hinweisen, dass ich reingegangen bin und
die Akte geändert habe und einen absichtlichen Tippfehler einfügte.
Ich habe das schließende Tag für Titel falsch geschrieben.
Also mal sehen, was passiert.
Und wenn der Browser oder der Validator das finden kann.
Was ich tun werde, ist, dass ich zu validator.w3.org gegangen
bin, und ich werde jetzt die dritte Option validieren durch direkte Eingabe auswählen.
Ich gehe zurück zu meinem Dateibefehl A oder Steuerung A,
wenn Sie auf einem PC Command C sind,
habe ich den ganzen Code kopiert und jetzt möchte ich ihn in den Validator legen.
Hit check, hoch, und wenn wir hier nach unten scrollen, kann ich das für Sie viel größer machen.
Sie können sehen, dass ich zwei Fehler bekommen habe.
Warum habe ich zwei Fehler erhalten, wenn ich nur einen Fehler eingegeben habe?
Tja, Validatoren sind nie perfekt.
Also, welcher Fehler es gefunden hat, ist, dass es sagte:
„Ich habe das Ende einer Datei gefunden und das habe ich nicht erwartet.“
Nun, der Grund, der passiert ist, lassen Sie uns überprüfen Fehler Nummer 2,
es sagt uns: „Oh, Sie haben vergessen, das Titel-Tag zu schließen.“
Manchmal kann ein Fehler viele Fehlermeldungen verursachen.
Also mach dir keine Sorgen.
Ich habe so viele wie 50 oder 60 Fehler gesehen, dass, sobald
ich eine Codezeile korrigiert habe, mehr als 80 Prozent dieser Fehler behoben hat.
Also werde ich zurück zu meinem Code gehen,
ich werde es reparieren und diesen Titel einfügen und speichern.
Kopieren Sie es noch einmal, legen Sie es ein und ich werde es nochmal überprüfen.
Dieses Mal Überprüfung abgeschlossen keine Fehler.
Also, nur um zu überprüfen,
möchten Sie wirklich der DOM-Struktur folgen, wenn Sie eine wohlgeformte Seite möchten. Wenn Sie
dieser Struktur folgen, verwenden Sie immer Anfangs- und End-Tags.
Außerdem schließen Sie innere Tags vor äußeren Tags.
Was das bedeutet, ist, wenn Sie
ein Titel-Tag beginnen, müssen Sie es beenden, bevor Sie das body-Tag beenden.
Sie werden auch
gültige Attribute verwenden möchten, was eines der Dinge ist, über die wir ein wenig
später sprechen werden, wenn wir über Bilder und
im Grunde Teile Ihrer Seite sprechen, die zusätzliche Informationen benötigen.
Das Problem mit Browsern ist, dass sie tatsächlich schlechten Code für Sie beheben.
Ich nenne sie immer die Helikoptereltern der Programmierung.
Es ist wie: „Ich weiß, wie du wolltest,
dass es so aussieht, so werde ich es auf dem Bildschirm aussehen lassen.“
Das Problem ist, dass nicht immer für jeden funktioniert.
Also, nur weil Ihre Website für Sie gut aussieht, wenn Sie es in Ihrem Browser betrachten,
bedeutet das nicht, dass es richtig ist.
Sie müssen einen Validator verwenden, um Ihren Code zu überprüfen.