Basis Tags
Kommentare oder hmlt kann mit <!-- und --> auskommentiert werden.
hier die wichtigsten Tags:
- <h1></h1> heading-Tags von 1-6 definieren Überschriften
- <p></p> Abatz / Paragraph
- <a href="" target=""></a> ein Link mit den Attributen href für die URL und target wie der link geöffnet werden soll z.B. _blank für einen neuen Tab
- <div></div> eine "diversion" bzw. Sektion, um Elemente zu einer Gruppe zusammen packen
- <b></b> bold / fett
- <u></u> underlined / unterstrichen
- <i></i> italic / kursiv
- <s></s> strikethrough / durchgestrichen
- <ul></ul> unordered list / ungeordnete Liste (diese hier)
- <ol></ol> ordered list / geordnete Liste / Nummerierung
- <li></li> list item ein Element in einer geordneten / ungeordneten Liste
- <hr> horizontale Linie
- <pre></pre> preformatted text. Der Text wird genauso mit allen Leerzeichen und Zeilenumbrüchen wiedergegeben wie er geschrieben wurde
- <sup></sup> superscript / hochgestellt
- <sub</sub> subscript / tiefgestellt
- <img src="" alt="" width="" height=""> image / Bild
- alternate text, wenn das Bild nicht angezeigt werden kann und für Blinde
- source URL zum Bild
- width und height in Pixeln
- <table></table> zwischen die Tags gehören die Tabellenzeilen und -felder
- <tr></tr> table row / Tabellenzeile (braucht Felder)
- <td rowspan="" colspan=""></td> Tabellenzelle
- rowspan: wie viele Zeilen das Feld überspannen soll
- colspan: wie viele Spalten (columns) das Feld überspannen soll
Jeder Tag kann die Attribute id (identifikator), class, style, dir (direction).
Beispiel
<html>
<head>
<title>HTML Beispiel 2 zu den Basis-Tags | JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta author="Jakob Schmitt">
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/icons/favicon.ico">
<meta name="robots" content="noindex"><!-- verhindert, dass das Beispiel in der Google Suche erscheint -->
</head>
<body>
<h1 style="text-align: center">Basis-Tags</h1>
<hr style="border-color: coral">
<div>
<h2>Text</h2>
<p>Dies ist ein langweiliger Text, der <b>fett</b>, <u>unterstrichen</u>, <i>kursiv</i> oder <s>durchgestrichen</s> ist. Außerdem listet er gleich noch Sachen auf. Das ist toll, oder?<br>Uuuiiiih, ein Zeilenumbruch. Jetzt die versprochene Liste:</p>
<ul style="list-style-type: square">
<li>SQL</li>
<li>PHP 7.4</li>
<li>Javascript</li>
<li>HTML</li>
<ol>
<li>HTML</li>
<li>HTML</li>
<li>HTML+</li>
<li>HTML 2.0</li>
<li>...</li>
<li>HTML 5</li>
</ol>
<li>CSS</li>
</ul>
</div>
<hr>
<img src="/assets/images/website_trans_col_512.png" alt="JS-Logo">
<p>H<sub>2</sub>O ist die Elementarschreibweise für Wasser. Zum Schluss noch einer Tabelle:</p>
<table border=1 style="border-collapse: collapse;"><!-- border=1 gehört NICHT zu html5 und sollte NICHT verwendet werden, unser Lehrer nutzt das aber und die richtige Lösung führt hier zu weit -->
<tr>
<td></td>
<td colspan=2>links</td>
<td colspan=2>rechts</td>
</tr>
<tr>
<td rowspan=2>oben</td>
<td>1. Feld</td>
<td>2. Feld</td>
<td>3. Feld</td>
<td>4. Feld</td>
</tr>
<tr>
<td>5. Feld</td>
<td>6. Feld</td>
<td>7. Feld</td>
<td>8. Feld</td>
</tr>
<tr>
<td rowspan=2>oben</td>
<td>9. Feld</td>
<td>10. Feld</td>
<td>11. Feld</td>
<td>12. Feld</td>
</tr>
<tr>
<td>13. Feld</td>
<td>14. Feld</td>
<td>15. Feld</td>
<td>16. Feld</td>
</tr>
</table>
<a href="/fach/#/Informatik">zurück zu Informatik</a>
</body>
</html>