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 -->