Einfache HTML -Beispiele
In diesem Kapitel zeigen wir einige grundlegende HTML-Beispiele.
Machen Sie sich keine Sorgen, wenn wir Tags verwenden, von denen Sie noch nichts gehört haben.
HTML-Dokumente
Alle HTML-Dokumente müssen mit einer Dokumenttypdeklaration beginnen: <!DOCTYPE html>.
Das HTML-Dokument selbst beginnt mit <html>und endet mit </html>.
Der sichtbare Teil des HTML-Dokuments liegt zwischen <body>und </body>.
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Die <!DOCTYPE>-Deklaration
Die <!DOCTYPE>Deklaration repräsentiert den Dokumenttyp und hilft Browsern, Webseiten korrekt anzuzeigen.
Es darf nur einmal oben auf der Seite erscheinen (vor allen HTML-Tags).
Bei der <!DOCTYPE>Deklaration wird die Groß-/Kleinschreibung nicht beachtet.
Die <!DOCTYPE>Deklaration für HTML5 lautet:
<!DOCTYPE html>
HTML-Überschriften
HTML-Überschriften werden mit den <h1>to <h6>-Tags definiert.
<h1>definiert die wichtigste Überschrift. <h6>definiert die am wenigsten wichtige Überschrift:
Beispiel
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML-Absätze
HTML-Absätze werden mit dem <p>Tag definiert:
Beispiel
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML-Links
HTML-Links werden mit dem <a>Tag definiert:
Beispiel
<a href="https://www.w3schools.com">This is a link</a>
Das Ziel des Links wird im hrefAttribut angegeben.
Attribute werden verwendet, um zusätzliche Informationen zu HTML-Elementen bereitzustellen.
In einem späteren Kapitel erfahren Sie mehr über Attribute.
HTML-Bilder
HTML-Bilder werden mit dem <img>Tag definiert.
Die Quelldatei ( src), alternativer Text ( alt),
widthund heightwerden als Attribute bereitgestellt:
Beispiel
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Wie wird der HTML-Quellcode angezeigt?
Haben Sie jemals eine Webseite gesehen und sich gefragt: „Hey! Wie haben die das gemacht?“
HTML-Quellcode anzeigen:
Klicken Sie mit der rechten Maustaste auf eine HTML-Seite und wählen Sie „Seitenquelltext anzeigen“ (in Chrome) oder „Quelltext anzeigen“ (in Edge) oder ähnlich in anderen Browsern. Dadurch wird ein Fenster geöffnet, das den HTML-Quellcode der Seite enthält.
Untersuchen Sie ein HTML-Element:
Klicken Sie mit der rechten Maustaste auf ein Element (oder einen leeren Bereich) und wählen Sie „Inspect“ oder „Inspect Element“, um zu sehen, woraus Elemente bestehen (Sie sehen sowohl HTML als auch CSS). Sie können den HTML- oder CSS-Code auch direkt im sich öffnenden Bedienfeld „Elemente“ oder „Stile“ bearbeiten.