Einfache HTML Formatierungen I

Überschrift 1

 
<h1>Überschrift 1</h1>
h wie "header". Geht auch mit h2,h3,h4,h5,h6 - wird dann entsprechend kleiner. Header verrgößern automatisch den Abstand zur nächsten Zeile.

Das ist ein Absatz

 
<p>Das ist ein Absatz</p>
p wie "paragraph". Absätze vergrößern den Abstand zur nächsten Zeile.
Zeile 1
Zeile 2 
Zeile 1<br/>Zeile 2
br wie "break". Text wird in der nächsten Zeile ohne zusätzlichen Abstand fortgeführt. Bei br gibt es keinen Endtag, deshalb die kompakte Schreibweise mit dem Slash vor dem Größerzeichen. 
<hr/>
hr wie "horizontal rule". Bei hr gibt es keinen Endtag, deshalb die kompakte Schreibweise mit dem Slash vor dem Größerzeichen.
Aufzählung:
  • Listenelement 1
  • Listenelement 2
 
<ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
</ul>
ul wie "unordered list", li wie "list item"
Aufzählung (nummeriert):
  1. Einleitung
  2. Hauptteil
 
<ol>
    <li>Einleitung</li>
    <li>Hauptteil</li>
</ol>
ol wie "ordered list", li wie "list item"
fett / kursiv 
<strong>fett</strong> / <em>kursiv</em>
em wie "emphasis" 
vorformatierter Text
mit Zeilenumbruch
   und Leerzeichen

<pre>
vorformatierter Text
mit Zeilenumbruch
   und Leerzeichen
</pre>
pre wie "preformatted". Zeilenumbrüche und Leerzeilen werden berücksichtigt. Alle Buchstaben haben die gleiche Breite.
Kommentare 
<!-- das ist ein Kommentar -->
alles zwischen <!-- und --> wird nicht angezeigt. Kommentare können sich auch über mehrere Zeilen erstrecken und HTML-Code beinhalten.
Spezielle Zeichen
&lt;<Kleinerzeichen
&gt;>Größerzeichen
&amp;&Ampersand (kaufmännisches Und)
&nbsp; geschütztes Leerzeichen
Link zur Geo-Homepage 
<a href="https://www.uibk.ac.at/geographie/">Link zur Geo-Homepage</a>
a wie "anchor", href wie "hyperlink reference". Der Link wird im Attribut href festgelegt. Der Linktext steht zwischen Start- und Endtag.
E-Mail Link 
<a mailto:klaus.foerster@uibk.ac.at>E-Mail Link</a>
statt https:// wird mailto: beim href Attribut verwendet.
Logo der Geographie Innsbruck 
<img src="https://www.uibk.ac.at/geographie/icons/geologo.jpg"
     alt="Logo der Geographie Innsbruck" />
img wie "image", src wie "source", alt wie "alternative". Das Bild wird im Attribut src festgelegt. Das Attribut alt enthält eine Kurzbeschreibung des Bildes, muss angegeben werden und wird von Screenreadern sprachlich wiedergegeben. Bei img gibt es keinen Endtag, deshalb die kompakte Schreibweise mit dem Slash vor dem Größerzeichen.
Unilogo
Logo der Universität
 
<figure>
    <img src="https://www.uibk.ac.at/geographie/icons/unilogo.jpg" alt="Unilogo" />
    <figcaption>Logo der Universität</figcaption>
</figure>
Eine Abbildung wird über figure vordefiniert. Mit img kann ein Bild eingebaut werden und figcaption liefert dazu die Bildunterschrift. Abbildungen werden automatisch vom linken Rand eingerückt. Die Bildunterschrift beginnt in einer neuen Zeile.
Id Name
1701 Innsbruck
1702 Imst
1703 Innsbruck Land
1704 Kitzbühel
1705 Kufstein
1706 Landeck
1707 Lienz
1708 Reute
1709 Schwaz 
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1701</td>
        <td>Innsbruck</td>
    </tr>
</table>
tr wie "table row", th wie "table header", td wie "table data". Spaltenüberschriften über th werden automatisch fett geschrieben und zentriert. Verbinden von Zellen horizontal mit dem Attribut colspan (z.B. colspan="2"). Verbinden von Zellen vertikal über rowspan (z.B. rowspan="3"). Beim Verbinden müssen dann dementsprechend td Einträge wegfallen.

Grundgerüst einer HTML-Seite

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Aussagekräftiger Titel der Seite</title>
    </head>
    <body>
        <p>Hier kommt der Inhalt der Seite ...</p>
    </body>
</html>
Bei Verwendung von Umlauten, Accents, etc. immer charset="utf-8" angeben, sonst werden diese Zeichen nicht richtig dargestellt. Titel werden bei Suchmaschinen als Linktext verwendet.

Elemente zur Strukturierung
<header> Kopfzeilenbereich der HTML-Seite
<main> Hauptteil der HTML-Seite
<footer> Fußzeilenbereich der HTML-Seite
<div> generischer Container für beliebigen Inhalt
<nav> Navigationsbereich mit Links
<article> Selbstständiger Artikel innerhalb der Seite der für sich alleine stehen kann
<section> Thematisch zusammenhängender Bereich in der HTML-Seite

Links zum Thema