Dokument-Aufbau
Eine HTML-Dokument kann in jeden normalen Texteditor bearbeitet werden. Eine Datei wird mit der Endung .html gespeichert.
beispiel.html
Der Aufbau und die Basis-Struktur eines HTML-Dokuments ist einfach und immer gleich.
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
</body>
</html>
| HTML | Erklärung |
|---|---|
| <!DOCTYPE html> | Definiert den Typ des Dokuments als HTML-Dokument. Steht als erstes Tag gaz oben. |
| <html> … </html> | Definiert den Bereich, in dem der HTML-Code geschrieben und verwendet wird. |
| <head> … </head> | Definiert den Head-Bereich des HTML-Dokuments, in dem metatags und ähnliches eingebunden werden. |
| <body> … </body> | Markeirt den tatsähclichen Inhalt der Website. |
HTML-Tags Nutzen
Es gibt zwei Arten von HTML-Tags. HTML-Tags, die Inhalte umschließen und einen öffnenden und einen Schließenden Tag haben. und HTML-Tags, die allein stehen können und keinen schließenden Tags benötigen.
Ein alleinstehendes HTML-Tag ist zum Beispiel das <img> Tag.
<img src="/wp-content/uploads/2019/11/20190612_Casablanca_00002.jpg">
Ein umschließendes Tag wird vor dem Element geöffnet und mit einem / hinter dem Element wider geschlossen.
<h1> headline </h2>
weitere Elementare HTML-Tags
| HTML | Erklärung |
|---|---|
| <p> … </p> | Markiert einen Absatz. Startet immer in einer neuen Zeile. |
| <h1> … </h1> | Markiert eine Headline 1 |
| <h2> … </h2> | Markiert eine Headline 2 |
| <h3> … </h3> | Markiert eine Headline 3 |
| <h4> … </h4> | Markiert eine Headline 4 |
| <h5> … </h5> | Markiert eine Headline 5 |
| <h6> … </h6> | Markiert eine Headline 6 |
Beispiel für ein HTML Dokument
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Das ist die größte Überschrift - eine h1</h1>
Die h1 sollte nur ein einziges Mal pro Website verwendet werden.
<hr>
Headlines sollte nur als Headlines und zur Gliederung der Seite benuttz werden - nicht, um Texte fett oder öhnliches darzustellen.
<h2>Das ist eine h2 Überschrift</h2>
<h3>Das ist eine h3 Überschrift</h3>
<h4>Das ist eine h4 Überschrift</h4>
<h5>Das ist eine h5 Überschrift</h5>
<h6>Das ist eine h6 Überschrift</h6>
<h7>Das ist eine h7 Überschrift</h7>
</body>
</html>