Kategorie: HTML TAG

Semantische Tags

Mit diesen Tags kann man HTML Code strukturieren.

<header>
Der Header enthält die wichtigsten Informationen einer Seite, wie den Titel, die Navigation und das Logo. 
<body>
    <header>
       Das ist der Kopfbereich der Seite
    </header>
    <main></main>
    <footer></footer>
</body>
<main>
Der Main enthält den Hauptinhalt einer Seite. 
<body>
    <header></header>
    <main>
       Das ist der Hauptberich der Seite
    </main>
    <footer></footer>
</body>
<footer>
Der Footer enthält allgemeine Informationen, wie Kontaktinformationen, Impressum und Nutzungsbedingungen. 
<body>
    <header></header>
    <main></main>
    <footer>
       Das ist der Fussbereich der Seite
    </footer>
</body>

Dies sind weitere Tags zur Strukturierung eines HTML codes

<aside>
Der Aside-Bereich enthält Inhalte, die nicht direkt zum Hauptinhalt gehören, aber ergänzende Informationen bieten. 
  <body>
    <header>
    <aside>
      Das ist der Bereich für ergänzende Informationen
    </aside>
    </header>
    <main></main>
    <footer></footer>
  </body>
<nav>
Der Nav-Bereich enthält Navigationslinks oder Menüs für die Navigation auf der Seite. 
  <body>
    <header>
    <nav>
      Das ist der Bereich für die Navigation
    </nav>
    </header>
    <main></main>
    <footer></footer>
  </body>
<article>
Der Article-Bereich enthält eigenständige Inhalte, die unabhängig voneinander existieren können. 
  <body>
    <header></header>
    <main>
      <article>
        Das ist ein eigenständiger Artikel
      </article>
    </main>
    <footer></footer>
  </body>
<section>
Der Section-Bereich gruppiert thematisch zusammenhängende Inhalte innerhalb des Hauptinhalts. 
  <body>
    <header></header>
    <main>
      <section>
        Das ist eine thematische Sektion
      </section>
    </main>
    <footer></footer>
  </body>

Ausklappbare Elemente

<details>
Zur Erstellung von ausklappbaren Elementen 
<details>
   <summary>
       Das ist der Title
   </summary>
   Das ist der eingeklpate inhalt
</details>
<summary>
Zum anzeigen des immer ausgeklappten text 
<details>
   <summary>
       Das ist der Title
   </summary>
   Das ist der eingeklpate inhalt
</details>

In das summary-Element wird der Text geschrieben, der als Erklärung für den Inhalt des details-Elements dient. Der Text kann beliebig lang sein und kann auch HTML-Elemente enthalten.

Medien Tag

<img>
Mit diesem Tag kann man Bilder anzeigen lassen 
<img src=“https://www.example.com/bild.jpg”>
Das Bild können auch durch einen Dateipfad eingefügt werden 
<img src=“bild.jpg”>
<video>
Mit diesem Tag kann man Videos in Webseiten einbinden. 
<video src="video.mp4" controls></video>
Es ist möglich verschiedene Attribute verwenden, um das Verhalten des Videos zu steuern, wie z.B. controls, autoplay, loop, etc.
<audio>
Mit diesem Tag können Sie Audiodateien in Ihre Webseite einbinden 
<audio src="audio.mp3"></iframe>
<iframe>
Dient zur Implementierung von Webseiten und PDFs. 
<iframe src="https://www.example.com"></iframe>
Wichtig zu beachten ist das viele Webseite diese Funktion aus Sicherheitsgründen blockieren und diese über diesen Tag nicht implantierbar sind.
<object>
Mit diesem Tag können Sie verschiedene Arten von Medien in Ihre Webseite einbinden
z.B. Bilder, Videos, Audiodateien, Flash-Inhalte, etc. 
leer

Strukturierung und Ausrichtung

<h1> bis <h6>
Erstellt eine Überschrift
Die Größe der Überschrift wird durch die zahl bestimmt h1 ist die Größte Überschrift und je höher du mit der Zahl gehst desto kleiner wird de Überschrift und hört bei h6 auf. 
<h1> Titel </h1>
<h2> Titel </h2>
<h3> Titel </h3>
<h4> Titel </h4>
<h5> Titel </h5>
<h6> Titel </h6>
Das ist der Code ausgefürt 
Überschrift 1


Überschrift 2


Überschrift 3


Überschrift 4


Überschrift 5


Überschrift 6
<p>
Erstellt eine Absatz 
<p> Text <p>
<br>
Erzwingt einen Zeilenumbruch.
Das ist ein Beispiel Code 
Das ist Zeile 1 <br> Das ist Zeile 2
Das ist der Code ausgefürt 
Das ist Zeile 1 
Das ist Zeile 2
<hr>
Erzwingt einen Zeilenumbruch.
Das ist ein Beispiel Code 
Das ist Zeile 1 <hr> Das ist Zeile 2
Das ist der Code ausgefürt 
Das ist Zeile 1 
Das ist Zeile 2

Listen Tag

<ol>
Erstellt eine geortnete Liste mit Zahlen 
<ol>
  <li>
    beispiel
  </li>
</ol>
<ul>
Erstellt eine ungeortnete Liste 
<ul>
  <li>
    beispiel
  </li>
</ul>
<li>
Erstellt ein Punkt der Liste 
<ol>
  <li>
    beispiel
  </li>
</ol>

Grundlangen HTML

< html >
Das HTML-Tag ist das grundlegende Tag, das den Anfang und das Ende eines HTML-Dokuments markiert und alle anderen HTML-Elemente umschließt 
        <html>

        <head>
            Meta-Informationen und Verweise auf CSS und Skripte
        </head>
        <body>
            Sichtbarer Inhalt der Webseite
        </body>

        </html>
< head >
Im Head liegen Meta-Informationen, wie den Seitentitel, Verweise auf CSS-Datein, Script oder Metadaten. Diese Infos werden nicht direckt im Browserfenster angezeigt 
  <head>
    <meta charset="UTF-8">
    <title>HTML Befehl</title>
    <link rel="stylesheet" href="style.css">
  </head>
< body >
Der Body enthält alle sichtbaren Elemente und den eigentlichen Inhalt, den ein Benutzer auf einer Webseite sehen kann. 
  <body>
    <h1>Willkommen auf Search-Tag.org!</h1>
    <p>Hier ist ein Absatz mit Text.</p>
    <img src="bild.jpg" alt="Bildbeschreibung">
    <a href="https://www.Search-tag.org">Link zu Seite</a>
  </body>
< !– leer — >
Der „“ Tag ist ein HTML-Kommentar, der verwendet wird, um im HTML-Code Notizen oder Informationen einzufügen, die vom Browser nicht angezeigt werden. 
  <body>
    < !-- Das ist ein Kommentar-- >
    <h1>Willkommen auf Search-Tag.org</h1>
  </body>

Tabellen-Tag

<table>
Erstellt eine Tabelle 
  <table>
    <tr>
      <td>Beispiel</td>
      <td>Beispiel</td>
    </tr>
  </table>
<thead>
Erstellt den Kopf einer Tabelle 
<table>
  <thead>
    <tr>
      <td>
        Titel
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Beispiel
      </td>
    </tr>
  </tbody>
</table>
<tbody>
Erstellt den Hauptteil einer Tabelle. 
<table>
  <tbody>
    <tr>
      <td>
        Beispiel
      </td>
    </tr>
  </tbody>
</table>
<tr>
Erstellt eine Zeile 
<table>
  <tr>
    <td>Beispiel</td>
    <td>Beispiel</td>
  </tr>
</table>
<td>
Erstellt eine Spalte 
<table>
  <tr>
    <td>Beispiel</td>
  </tr>
</table>
<tfoot>
Erstellt eine Zeile