HTML Crashkurs

Teil 1

Basiswissen

Unterschied: Internet und WWW
Was ist das WWW?
Welche weiteren Dienste gibt es noch?

HTML

Hypertext Markup Language

Hypertext: über Links verbundenes Netz aus Text-, Bild- und Dateneinheiten, in dem sich die Nutzer je nach Interesse bewegen können
Markup: Textauszeichnung -> strukturiert Inhalte eine Dokumentes
Language: Sprache -> kann von Menschen und Maschinen gelesen werde

HTML Eigenschaften

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache
HTML bestimmt den strukturellen Aufbau einer Webseite.
HTML verleiht Inhalten eine Bedeutung (Semantik)
HTML ist fehlertolerant
HTML wird vom W3C und WHATWG weiterentwickelt

HTML Element

Quelle: MDN web docs

Beispiel eines umschließenden HTML Elements

Elemente verschachteln

<p>Meine Katze ist <strong>sehr</strong> frech.</p>

Meine Katze ist sehr frech.

Html: Überschriften

<h1>1 Überschrift</h1>
<h2>1.1 Überschrift</h2>
<h3>1.1.1 Überschrift</h3>
<h4>1.1.1.1 Überschrift</h4>
<h5>1.1.1.1.1 Überschrift</h5>
<h6>1.1.1.1.1.1 Überschrift</h6>

h steht für ‘heading’
dient zur Textstrukturierung und Seitenstrukturierung
bilden Hierarchieverhältnisse innerhalb einer Seite ab
jede Seite sollte genau EINE h1 haben (Matt Cutts 2011)

HTML: Absatz

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.. </p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate ...</p>

p steht für ‘paragraph’
dient zur Gliederung eine Textes

Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten.

HTML: Liste

<ul>
  <li>ol = geordnete Listen</li>
  <li>ul = ungeordnete Listen</li>
  <li>dl = Beschreibungslisten</li>
</ul>

<ol>
  <li>ol = ordered list</li>
  <li>ul = unordered list</li>
  <li>dl = description list</li>
  <li>li = list item</li>
</ol>

<dl>
  <dt>Zu beschreibender Begriff</dt>
  <dd>Beschreibung</dd>

  <dt>term</dt>
  <dd>description</dd>
</dl>

es gibt 3 verschiedene Listentypen

HTML: Links (Verweise)

<a href="https://th-nuernberg.de/">TH Nürnberg</a> <!-- Im gleichen TAB öffnen -->
<a href="https://th-nuernberg.de/" target="_blank">TH Nürnberg</a> <!-- Im separaten TAB öffnen -->

<!-- Seiteninterner Verweis (Sprungmarke: # verweist auf id) -->
<a href="#ueberschrift_1" target="_blank">TH Nürnberg</a>
....
<h2 id="ueberschrift_1">Überschrift mit "id"</h2>

a steht für ‘anchor’
unidirektionaler Link zu einem anderen Dokument
href (Hypertext-Referenz) verwandelt das a-Element in einen Link (Verweis)

HTML: Grafiken

<img src="https://www.w3.org/Icons/WWW/w3c_home_nb.png" alt="W3C Logo">

img steht für ‘image’
bindet Grafiken ein (svg, jpeg, png, gif, webp)
ist ein “Standalone Tag” (besteht nur aus Anfangs-Tag)

HTML: Weitere Textauszeichnungen

<small>weniger Bedeutung (klein)</small>

<strong>starke Betonung (fett)</strong>
<b>ohne Bedeutung (fett)</b>

<em>Betonung (kursiv)</em>
<i>vom Text abheben, ohne Bedeutung (kursiv)</i>

alles Inline-Elemente
wichtig für SEO (semantische Bedeutung)

Elemente: inline vs block

Blockelemente erzwingen einen Zeilenumbruch
Inlineelement erzwingen Keinen Zeilenumbruch
Inlineelemente befinden sich innerhalb des Textflusses
Inlineelemente dürfen keine Blockelemente enthalten