HTML
Einführung:
Bei HTML handelt es sich NICHT um eine Programmiersprache sondern um eine Beschreibungssprache. HTML steht für "Hypertext Markup Language". Diese zeichnet sich dadurch aus, dass optimalerweise jeder Bereich in sogenannte Tags gefasst wird.
Jedes HTML Dokument besteht aus folgendem Grundgerüst:
<!doctype html>
<html lang="de">
<head>
<!-- Hier kommen alle Metadaten hin -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Hierhin gehört der Seitentitel</title>
</head>
<body>
<!-- Hier kommt der gesamte Inhalt rein -->
<h1> Überschrift </h1>
</body>
</html> Ein HTML Dokument dient zwar offiziell nur für den Inhalt und das Grundgerüst einer Website. Dennoch ist es in einem gewissen Rahmen auch möglich, das Aussehen einer Website zu bearbeiten. Die zugehörigen Tags können folgender Tabelle entnommen werden:
Textdesign
| Überschriften |
<h1>Überschrift</h1> kann von 1 bis 6 verwendet werden |
| Paragraph |
<p>Textparagraph</p> |
| Fett |
<b>Fett</b> |
| Kursiv |
<em>Kursiv</em> |
| Markiert |
<mark>Markiert</mark> |
| Klein |
<small>Klein</small> |
| Unterstrichen |
<ins>Unterstrichen</ins> |
| Durchgestrichen |
<del>Durchgestrichen</del> |
| Hochgestellt |
<sup>Hochgestellt</sup> |
| Tiefgestellt |
<sub>Tiefgestellt</sub> |
| Abkürzungen |
<p><abbr title="World Health Organization">WHO</abbr> </p>
|
| Anführungszeichen |
<q>Quotes</q> |
Es gibt in HTML zwei verschiedene Arten von Elementen. Es gibt zum einen die Block Elemente, die immer in einer neuen Zeile beginnen, zum anderen gibt es die Inline Elemente, die im Fliesstext stattfinden.
Style Attribute?
Tabellen und Listen
<table>
<tr> <!-- Neue Zeile -->
<th colspan="2">Name</th> <!-- Tabellenüberschrift, die sich über 2 Spalten streckt -->
<th>Age</th> <!-- Zelleninhalt -->
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<th rowspan="2">Phone</th> <!-- Zeilenbeschriftung, die sich über 2 Zeilen streckt -->
<td>555-1234</td>
<td>xyz</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>Listen
<!-- Geordnete Listen -->
<ol>
<li>Coffee</li>
<li>Tea
<ol type="a">
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Energy
<ol type="A">
<li>Red Bull</li>
<li>Monster</li>
</ol>
</li>
<li>Milk</li>
</ol>
<!-- Ungeordnete Listen -->
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<!-- Sonstige Listen -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>Klassen
Auch in HTML gibt es Klassen. Allerdings definieren diese hier nur, dass alles innerhalb eines Bereichs zu einer Klasse gehört. Auf diese Klassen können dann mit CSS oder JavaScript Veränderungen angewendet werden. Die Zuweisung geschieht wie in folgendem Code gezeigt:
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>Des weiteren kann jedem Element ein einzigartiger Identifyer zugewiesen werden. Dies geschieht mittels dem id Element.
<h1 id="myHeader">My Header</h1>Links
Links auf andere Websites können in HTML wie folgt eingebunden werden. Dabei ist zu beachten, dass der Linktext nicht zwingend gleich dem eigentlichen Link sein muss.
<a href="https://doku.stnd.io">This is a link</a>
1 Comment
CSS, margin, border, padding