Dies ist der zweite Artikel unserer Serie zu den absoluten Grundlagen der Webentwicklung. In unserem ersten Artikel wurde ausführlich erläutert, was HTML auf konzeptioneller Ebene ist. Wir haben untersucht, was eine Auszeichnungssprache ist, welche Tags verwendet werden und wie HTML mit anderen wichtigen Teilen des Web-Entwicklungspuzzles wie CSS verglichen wird.
Kommen Sie heute zu uns und schauen Sie sich die einzelnen Bestandteile eines HTML-Dokuments an. Ich erkläre all das oben in einer HTML-Datei, die Sie verwirrt, und erläutere die grundlegende Struktur, die Sie zum Erstellen Ihrer eigenen HTML-Dateien verwenden.
DOKTYP
Das erste, was Sie normalerweise in einer HTML-Datei sehen, ist die DOCTYPE-Deklaration. Vor HTML5 könnte dies ein sehr verwirrender Code sein, der ungefähr so aussah:
Hier ist viel los und jedes Wort spricht entweder den Webbrowser, den Leser oder beide an. Die Öffentlichkeit? Teil spricht nur für die Verfügbarkeit, für die die DTD steht Dokumenttypdefinition, die die verwendete HTML-Version deklariert, und der letzte Abschnitt ist eine URL, die darauf verweist, wo die DTD gefunden werden kann.
Die Worte? Lose? (oder vorübergehend)? streng? und? Frameset? verweisen auf verschiedene Versionen von HTML 4, die eine etwas andere Auszeichnung zulassen. Dies dient im Wesentlichen nur dazu, Übergangsentwicklern von älteren HTML-Versionen zu helfen.
Der HTML5-DOCTYPE
Es stehen mehrere DOCTYPEs zur Auswahl, die für neue Entwickler monumental verwirrend sein können. Glücklicherweise vereinfacht HTML5 die Situation mit einem erfrischend einfachen DOCTYPE:
Sehen Sie, wie einfach das ist? Es ist wirklich eine schöne Sache.
Was macht der DOKTYP?
Jetzt haben wir gesehen, was für ein DOKTYP sieht aus wie aber darüber haben wir nicht wirklich diskutiert tut. Die Antwort ist, dass der DOCTYPE dem Browser mitteilt, welche Art von HTML zu erwarten ist, was sich darauf auswirkt, wie der Browser die Seite rendert.
Wenn Sie sich mit der Webentwicklung beschäftigen, werden Sie feststellen, dass der Schwerpunkt auf "auf Standards basierender Entwicklung" liegt. Die allgemeine Idee ist, dass, wenn wir alle bestimmten Regeln und Standards folgen, die Webentwicklung eine zusammenhängendere und konsistentere Praxis sein wird. Dies ist besser für Entwickler, besser für Browser und vor allem für Benutzer.
DOCTYPEs wurden ursprünglich entwickelt, um den "Standardmodus" auszulösen. In Browsern bedeutet dies, dass die Seite mit neueren Webstandards gerendert wurde. Ebenso haben ältere Seiten ohne DOCTYPE den "Quirks-Modus" ausgelöst. in Browsern, wodurch ältere Methoden verwendet werden konnten, die im Standardmodus nicht ordnungsgemäß funktionieren würden.
Das neue, sehr einfache HTML5-DOCTYPE wird in allen gängigen Browsern unterstützt und löst in allen den Standardmodus aus. Der DOCTYPE hilft Ihnen auch bei der Validierung Ihres Codes, wodurch die Einhaltung der aktuellen Standards sichergestellt wird. Für jede von Ihnen erstellte Seite sollte ein DOCTYPE verwendet werden, der hoffentlich vollständig den Standards entspricht.
Wurzelelement
Nach dem DOCTYPE beginnt der HTML-Code wirklich. Dies wird durch das HTML-Root-Element angezeigt. Wenn Ihr gesamter HTML-Code ein Baum ist, ist dies die Wurzel, aus der alles andere sprießt.
Das Wurzelelement wird durch ein? -Tag? Definiert. worüber wir in unserem letzten Artikel erfahren haben. In diesem Fall ist es das? HTML? Etikett.
Beachten Sie, dass das Wurzelelement ein Sprachattribut enthält, in unserem Fall Englisch. Stellen Sie immer sicher, dass Sie für jede von Ihnen erstellte Seite die richtige Sprache angeben.
Alles andere, was wir auf dieser Seite hinzufügen, befindet sich innerhalb des Wurzelelements. Es ist der Container für jeden Informationsabfall und Inhalt, der einzige Ausschluss ist der DOCTYPE.
Kopfelement
Das nächste, was Ihnen in einem HTML-Dokument begegnet, ist der Kopf. Sektion. Das Head-Tag ist genau das, was Sie erwarten würden:
Der Inhalt des Head-Abschnitts ist in erster Linie informativ. Er informiert Sie und den Browser über bestimmte Aspekte der Seite wie Titel, Zeichensatz usw. Hier werden normalerweise auch wichtige externe Ressourcen geladen.
Es gibt ein paar wichtige Dinge, die in einem Head-Tag stehen. Schauen wir uns sie einzeln an.
Meta-Tags
Wie Sie sich vermutlich vorstellen können, enthalten Metatags Metadaten zur Seite. Metadaten haben viele Formen und können Schlüsselwörter, Autoren, Beschreibungen usw. enthalten. Hier einige bemerkenswerte Einschlüsse:
Zeichensatz
Dies ist ziemlich langweilig, der Zeichensatz ist normalerweise auf UTF-8 eingestellt und teilt dem Browser im Wesentlichen mit, welche Zeichenkodierung verwendet werden soll.
Ihre Seiten sollten auf jeden Fall einen Hinweis enthalten, welcher Zeichensatz verwendet werden soll. Denken Sie nicht darüber nach, es ist nur eines der Dinge, die Sie benötigen, um in Ihre Vorlage zu gelangen. Nachfolgend finden Sie eine typische Zeichensatzdeklaration in HTML5.
Dies ist eine weitere Sache, die mit HTML5 einfacher wurde. Überprüfen Sie die für HTML 4.01 erforderliche Version dieses Snippets:
Einige andere typische Metatags enthalten eine Beschreibung und einen Autor. Hier ist ein schnelles, selbsterklärendes Beispiel für jedes dieser Elemente:
Beschreibung
Autor
Titel
Eine weitere Sache, die sich im Kopfbereich Ihres Dokuments befindet, ist das Titel-Tag. Dies ist ein sehr einfacher Code, der einfach den Titel der Seite angibt. Hier ist ein Beispiel:
Dieser Titel wird dem Benutzer normalerweise ganz oben in der Mitte des Browserfensters, auf einer Registerkarte usw. angezeigt.
Links und Skripte
Das letzte, was wir bezüglich des Head-Tags besprechen, ist die Einbeziehung externer Ressourcen. Auf einer sehr einfachen Webseite sehen Sie normalerweise diese als Stylesheet oder Skript:
Hier lade ich im Wesentlichen meine CSS-Datei sowie jQuery (eine JavaScript-Bibliothek) in die Seite. Wenn diese Ressourcen in den Quelldateien enthalten sind, im Kopfabschnitt jedoch nicht verlinkt sind, funktionieren sie nicht.Beachten Sie, dass die Links für diese entweder auf etwas in der lokalen Ordnerhierarchie (wie oben) oder auf einem anderen Webserver verweisen.
Der oben für die CSS-Datei verwendete Link verwendet a Link-Beziehung (rel =? Stylesheet?). Weitere Informationen zu Linkbeziehungen finden Sie in diesem Artikel.
Alternativ zum Verknüpfen mit externen Dateien können Sie auch Code direkt in das head-Element einbetten. Hier ist ein Beispiel mit CSS, aber das Gleiche kann über das Skript ausgeführt werden. Tag und JavaScript (eingebettete Skripts werden stattdessen oft am Ende des body-Elements platziert).
Körperelement
Der letzte Teil einer HTML-Seite ist der wichtigste. Alles innerhalb des body-Elements bestimmt den Inhalt und die Struktur Ihrer Seite. Was die Entwicklungszeit angeht, verwenden Sie wahrscheinlich eine Satzvorlage für alles, was Sie benötigen, und brauchen einige Minuten, um sie für bestimmte Projekte anzupassen. Der Rest Ihrer HTML-Zeit wird innerhalb des body-Elements verbracht.
Alles zusammenfügen
Nachdem wir nun jeden einzelnen Teil einer HTML-Datei durchlaufen haben, lassen Sie uns alles in einer extrem einfachen HTML5-Vorlage zusammenfassen.
Ein Überblick
Tausend Entschuldigungen für die banale Natur dieses Themas. Anfänger werden an dieser Stelle oft durch Langeweile abgestellt, bleiben aber dran. Der eigentliche Spaß an HTML ist alles zwischen den Body-Tags, über die wir noch nicht einmal gesprochen haben!
Alle diese Teile waren notwendig, um das Bild eines HTML-Dokuments genau zu zeichnen. Wir sehen nun, dass ein HTML-Dokument über einen DOCTYPE verfügt, der dem Browser mitteilt, wie die Seite gerendert wird, und hilft sicherzustellen, dass die richtigen Standards verwendet werden.
Wir wissen auch, dass es eine feste Hierarchie für die Strukturierung von HTML-Seiten gibt. Fast alles außer dem DOCTYPE wird in das Wurzelelement geworfen, was bedeutet, dass es das "Elternelement" ist. der Kopf- und Körperelemente, die wiederum ihre eigenen Kinder haben.
Die Grundstruktur eines HTML-Dokuments wird als DOM oder Document Object Model bezeichnet. Dies wird fast immer metaphorisch als Baum bezeichnet und wie oben abgebildet dargestellt. Unser eigener Jack Rocheleau hat einen ausführlichen Einblick in das DOM mit dem Titel Deeper Study In das Document Object Model des WWW geschrieben. Sehen Sie sich den folgenden Artikel an, um die Grundstruktur einer HTML-Seite besser zu verstehen.
Fazit
Dieser Artikel bietet einen sehr kurzen Überblick über die Struktur eines HTML-Skeletts und die Arten von Dingen, die normalerweise enthalten sind. Es ist keinesfalls erschöpfend, sollte aber als gute Einführung in diese Themen dienen.
Wenn Sie gerade erst mit dem Code beginnen, geben Ihnen die meisten Leute einfach eine Vorlage für den gesamten Code, ohne wirklich zu erklären, was alles alles macht. Dies kann zu einer erheblichen Lücke in Ihrer Ausbildung führen. Daher ist es wichtig, diese Informationen durchzulesen und zu verstehen, was Sie können.
Bleiben Sie bei uns in dieser Serie und versuchen Sie es erneut, sobald wir eine weitere wichtige Frage beantworten: Was ist CSS?