Verwendung eines HTML-Skeletts
Ein Skelett ist das tragende Gerüst eines Organismus.
Es besteht normalerweise aus etwas Hartem, um einen anfälligeren Körper zu schützen.
Enzyklopädie
Jeder Webentwickler sollte ein HTML-Skelett haben.
Es sollte in seiner Tasche aufbewahrt und für jeden Job verwendet werden:
Beispiel
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Klicken Sie auf die Schaltfläche „Probieren Sie es selbst“, um zu sehen, wie es funktioniert!
Versuchen Sie, den Text "Dies ist eine Überschrift" in "Das ist meine Hochzeit" zu ändern.
Hast du es gemacht?
Herzliche Glückwünsche! Jetzt wissen Sie, wie man HTML bearbeitet.
HTML-Skelett erklärt
Der DOCTYPE muss vorhanden sein. Es teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt:
<!DOCTYPE html>
Ein HTML-Start-Tag und ein HTML-End-Tag definieren den Anfang und das Ende eines HTML-Dokuments.
Die Sprache ist Englisch:
<html lang="en">
</html>
Ein Meta-Charset-Tag definiert den Zeichensatz (UTF-8):
Der HTML-Seite fehlen Head-Tags. Head-Tags werden in HTML nicht benötigt.
In HTML wird alles vor dem Body-Tag als Teil des Heads betrachtet.
<meta charset="UTF-8">
Der HTML-Standard verlangt einen ordentlichen Seitentitel:
<title>Page Title</title>
Ein Meta-Viewport-Tag lässt die Seite auf allen Bildschirmgrößen (Laptop, Handy) gut aussehen:
<meta name="viewport" content="width=device-width,initial-scale=1">
Das Link-Tag verlinkt auf ein Stylesheet:
<link rel="stylesheet" href="name">
Start-Tag und End-Tag umgeben das zukünftige CSS-Styling:
<style>
</style>
Das script-Tag verlinkt auf ein Skript:
<script src="name"></script>
Start-Tag und End-Tag umgeben den sichtbaren Hauptteil des HTML-Dokuments:
<body>
</body>
Bild-Tags definieren HTML-Bilder:
<img src="img_la.jpg" alt="LA" style="width:100%">
Machen Sie es sich zur Gewohnheit, HTML-Abschnitte in div-Elemente zu "packen".
Bereiten Sie sich darauf vor, jedem Abschnitt einen Klassennamen zu geben:
<div class="class name">
</div>
Überschriften-Tags definieren HTML-Überschriften:
<h1>This is a Heading</h1>
Absatz-Tags definieren HTML-Absätze:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>