Was ist HTML?
HTML steht für Hyper T ext M arkup L anguage
HTML ist die Standardauszeichnungssprache für Webseiten
HTML- Elemente sind die Bausteine von HTML-Seiten
HTML-Elemente werden durch <>-Tags dargestellt
HTML-Elemente
Ein HTML-Element ist ein Start -Tag und ein End -Tag mit Inhalt dazwischen:
<h1>Dies ist eine Überschrift</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
HTML-Attribute
- HTML-Elemente können Attribute haben
- Attribute liefern zusätzliche Informationen über das Element
- Attribute kommen in Name/Wert-Paaren wie charset="utf-8"
Ein einfaches HTML-Dokument
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Beispiel erklärt
HTML-Elemente sind die Bausteine von HTML-Seiten.
- Die
<!DOCTYPE html>Deklaration definiert dieses Dokument als HTML5 - Das
<html>Element ist das Wurzelelement einer HTML-Seite - Das
langAttribut definiert die Sprache des Dokuments - Das
<meta>Element enthält Metainformationen über das Dokument - Das
charsetAttribut definiert den im Dokument verwendeten Zeichensatz - Das
<title>Element gibt einen Titel für das Dokument an - Das
<body>Element enthält den sichtbaren Seiteninhalt - Das
<h1>Element definiert eine große Überschrift - Das
<p>Element definiert einen Absatz
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>.
HTML-Dokumentstruktur
Unten sehen Sie eine Visualisierung eines HTML-Dokuments (einer HTML-Seite):
Hinweis: Nur der Inhalt innerhalb des Abschnitts <body> (der weiße Bereich oben) wird in einem Browser angezeigt.
HTML-Überschriften
HTML-Überschriften werden mit <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 <p>Tags definiert:
Beispiel
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML-Links
HTML-Links werden mit <a>Tags definiert:
Beispiel
<a href="https://www.w3schools.com">This is a link</a>
Das Ziel des Links wird im hrefAttribut angegeben.
HTML-Bilder
HTML-Bilder werden mit <img>Tags definiert.
Die Quelldatei ( src), alternativer Text ( alt),
widthund heightwerden als Attribute bereitgestellt:
Beispiel
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
HTML-Schaltflächen
HTML-Schaltflächen werden mit <button>Tags definiert:
Beispiel
<button>Click me</button>
HTML-Listen
HTML-Listen werden mit <ul>(ungeordnete/Aufzählungsliste) oder
<ol>(geordnete/nummerierte Liste) Tags definiert, gefolgt von <li>
Tags (Listenelemente):
Beispiel
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML-Tabellen
Eine HTML-Tabelle wird mit einem <table>Tag definiert.
Tabellenzeilen werden mit <tr>Tags definiert.
Tabellenköpfe werden mit <th>Tags definiert. (standardmäßig fett und zentriert).
Tabellenzellen (Daten) werden mit <td>Tags definiert.
Beispiel
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML programmieren
Jedes HTML-Element kann Attribute haben .
Die wichtigsten Attribute für die Webentwicklung und -programmierung sind id und class. Diese Attribute werden häufig verwendet, um programmbasierte Webseitenmanipulationen zu adressieren.
| Attribut | Beispiel |
|---|---|
| Ich würde | <table id ="table01" |
| Klasse | <p class ="normal"> |
| Stil | <p style ="font-size:16px"> |
| Daten- | <div data -id="500"> |
| anklicken | <input onclick ="myFunction()"> |
| onmouseover | <a onmouseover ="this.setAttribute('style','color:red')"> |
Vollständiges HTML-Tutorial
Dies war eine kurze Beschreibung von HTML.
Ein vollständiges HTML-Tutorial finden Sie unter W3Schools HTML Tutorial .
Eine vollständige HTML-Tag-Referenz finden Sie unter W3Schools-Tag-Referenz .