So erstellen und validieren Sie Ihre eigenen HTML- und CSS-Vorlagen

Wenn ich einen Artikel schreibe – oder eine beliebige Webseite –, beginne ich gerne mit einfachen HTML-, XHTML- und CSS-Dokumenten, von denen ich weiß, dass sie gültigen Code enthalten. Nachdem Sie dieses Tutorial gelesen haben, können Sie auch diesen Ansatz verwenden.

Es gibt zwei Arten von grundlegenden, auf Standards basierenden Dokumenten, die ich zum Schreiben von Webseiten verwende. Die erste hat eine Document Type Definition (DTD) von XHTML 1.0 Transitional, genau wie WordPress sie verwendet. Das zweite ist ein einfaches HTML-Dokument mit einer Document Type Definition (DTD) von HTML 4.01 Transitional. Diese Definitionen teilen dem Browser mit, welche Spezifikation das Dokument verwendet. Beispielsweise würde die DTD verwendet, um einem Browser mitzuteilen, ob es sich bei dem Dokument um HTML oder XHTML handelt. Die DTD ist die erste Codezeile einer Webseite.

Die Syntaxregeln für HTML und XHTML unterscheiden sich in gewisser Weise. Sie müssen die korrekte Syntax für die von Ihnen verwendete DTD verwenden, oder Ihr Code wird das W3C nicht passieren. Dies gilt, obwohl der von Ihnen verwendete Browser Ihre Seite möglicherweise wie erwartet anzeigt: Browser sind sehr nachsichtig in Bezug auf nicht standardmäßigen Code.

Für den Inhalt meiner Website verwende ich die HTML 4.01 Transitional DTD, weil ich mit ihrer Syntax vertraut bin.

Der beste Weg, um sicherzustellen, dass Sie mit einer auf Standards basierenden Webseite beginnen, besteht darin, zuerst eine bekanntermaßen gute Skelett-Webseite zu kopieren und sie in einen einfachen Texteditor einzufügen. Als nächstes speichern Sie den Code als Textdatei mit der Erweiterung „.txt“. Sie könnten die Datei my-HTML-template.txt nennen.

Sie können den Code auch in den W3C Markup Validation Service einfügen, um zu prüfen, ob er tadellos ist: Wenn der Code den Validator „im grünen Bereich“ passiert, wissen Sie, dass Ihr Code gut ist. Einfache Skelett-Webseiten finden Sie bei W3 Schools. Dort findet sich auch anderer Code, wie die DTD für HTML und XHTML.

Es kommt sehr häufig vor, dass Online-Webseiten die W3C-Validierung mit einer großen Anzahl von Fehlern nicht bestehen. Manchmal liegt das daran, dass für eine Seite die falsche DTD angegeben ist; In anderen Fällen ist der Fehler auf die Verwendung von nicht standardmäßigem oder veraltetem Code zurückzuführen. Wenn Sie mit einer gültigen, einfachen Vorlage beginnen und alle auftretenden Validierungsfehler korrigieren, werden Ihre Seiten immer „im grünen Bereich“ sein, wenn sie im Web veröffentlicht werden.

Sobald Sie eine gültige Basisvorlage haben, können Sie damit beginnen, Ihren Inhalt zwischen den Body-Tags und zusätzlichen Code zwischen den Head-Tags hinzuzufügen.

Normalerweise verwende ich keine harten Wagenrückläufe innerhalb eines Absatzes. Die Editoren, die ich verwende, haben alle eine „Zeilenumbruch“-Funktion, die es mir ermöglicht, den gesamten Text, den ich schreibe, zu sehen, ohne die horizontale Bildlaufleiste verwenden zu müssen. Die tatsächliche Zeilenlänge des veröffentlichten Inhalts wird später bestimmt, wenn die Seitenanzeige gestaltet wird.

Ich verwende nach dem letzten Satz eines Absatzes einen harten Wagenrücklauf und füge einen zusätzlichen zwischen den Absätzen hinzu. Feste Zeilenumbrüche können auch hinzugefügt werden, um zusätzlichen Platz zwischen anderen Elementen, wie z. B. Bildcode, zu schaffen.

Wenn Sie Inhalte zur Datei my-HTML-template.txt hinzugefügt haben, speichern Sie sie erneut mit der Dateierweiterung „.HTML“. Sie können es dann in einem Browser öffnen. Was Sie sehen werden, ist, dass alle Inhalte zusammenlaufen. Das liegt daran, dass Browser nach Zeilenumbruch-Tags und nicht nach Wagenrückläufen suchen. Sie können dies beheben, indem Sie mit Ihrem Editor suchen und ersetzen: Suchen Sie einfach jeden Wagenrücklauf und ersetzen Sie ihn durch ein Break-Tag. Wenn Sie das HTML-Dokument erneut öffnen, sind die verschiedenen Teile des Inhalts sauber und aufgeräumt, aber nicht sehr hübsch. CSS-Styling wird dies beheben.

Wenn Sie den Inhalt einfach zwischen den Body-Tags in einen visuellen Editor im Web „ablegen“, wie z. B. einen WordPress-Editor oder die Artikelinhaltsbox bei EzineArticles, müssen Sie sich keine Gedanken über die Zeilenumbrüche machen, da sie hinzugefügt werden zum HTML-Code für Sie.

Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in Ihren Texteditor ein. Speichern Sie es als „my-template. css“ im selben Ordner, in dem Sie Ihre HTML-Vorlagendatei gespeichert haben.

Karosserie

{

Hintergrund: #fffef2;

Farbe: Schwarz;

Zeilenhöhe: normal;

Marge: 3 % 25 % 3 % 25 %;

Mindestbreite: 400 Pixel;

}

Das Link-Meta-Tag verknüpft eine CSS-Datei mit dem HTML-Dokument. Kopieren Sie das unten gezeigte Link-Tag und fügen Sie es zwischen den Head-Tags in der Datei my-HTML-template.txt ein, die Sie gespeichert haben. Ersetzen Sie die Klammerzeichen jeweils durch „“.

[link title=“Template Style Sheet“ rel=“stylesheet“ href=“my-template.css“type=“text/css“]

Wenn Sie etwas Inhalt zu Ihrer my-HTML-template.txt-Datei hinzugefügt haben, werden Sie, wenn Sie die Datei jetzt in einem Browser öffnen, beginnen, einige ziemlich schöne Formatierungen zu sehen. Der Seiteninhalt ist jetzt ungefähr in der Mitte der Seite zentriert, es gibt eine schöne Hintergrundfarbe und der Text ist Verdana. Das alles liegt an den Vorgaben im CSS-Code für „body“. Der „body“-Code bestimmt das Gesamterscheinungsbild der Seite.

Sie können auch Ihren CSS-Code validieren. W3C hat einen CSS-Code-Validator. Kopieren Sie einfach den CSS-Code und fügen Sie ihn in das Textfeld des Validators ein und klicken Sie auf die Schaltfläche „Prüfen“. Sie werden feststellen, dass der obige Code „im grünen Bereich“ verläuft, wie er sollte.

Um die Anzeigeformatierung anzuwenden, muss der Inhalt, der die Formatierung erhalten soll, identifiziert werden. Inhalte können mit HTML-Tags eingeklammert werden, die Namen enthalten, die auf Stildefinitionen in der CSS-Datei verweisen. Beispiele für diese Tags sind „div“ und „span“. Wenn ein Browser auf ein HTML-Tag stößt und eine Namensreferenz findet, sucht er in der CSS-Datei nach dem Stil und wendet den Stil dann auf die Anzeige der Webseite an. Wenn in den HTML-Tags kein Stil referenziert wird, verwendet der Browser seine Standardeinstellungen für die Anzeige.

W3 Schools bietet umfassende Informationen und Tutorials zu CSS.

Ihre eigenen (X)HTML- und CSS-Vorlagen zu erstellen – und sie dann den W3C-Validierern zu unterziehen – ist eine großartige Möglichkeit sicherzustellen, dass Ihre Webseiten immer standardbasiert sind. Sie benötigen kein teures Softwarepaket für die Webentwicklung, um Ihre Vorlagen zu entwickeln. Sie können einen einfachen Texteditor verwenden. Verwenden Sie den Texteditor, um die Webseitenstruktur aufzubauen und den Inhalt hinzuzufügen. Verwenden Sie CSS, um die Anzeige des Inhalts zu gestalten. Wenn Sie Ihre Inhalte online veröffentlichen, können Sie die Inhalte wahrscheinlich ohne Änderungen aus Ihrer Textdatei (zwischen den Body-Tags) direkt in das Textfeld des Editors ziehen. Wenn Sie Ihr Dokument während der Erstellung in einem Browser anzeigen möchten, müssen Sie möglicherweise Break-Tags zwischen Inhaltselementen hinzufügen und die Datei dann mit der Erweiterung „.HTML“ speichern. Wenn Sie Ihre Webseiten bei der Erstellung validieren, können Sie immer sicher sein, dass sie bei ihrer Online-Veröffentlichung „im grünen Bereich“ validiert werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.