Links

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg

Zielsetzung

HTML ist eine Sprache, mit der formatierte Texte beschrieben werden. Sie wird vor allem für Webseiten verwendet.

HTML ist eine Auszeichnungssprache: Metainformationen (z.B. Formatierungsanweisungen) werden mit Tags gekennzeichnet: ein Tag ist ein Wort, das in spitze Klammern gesetzt wird:

<head> <html> <table>

Es gibt viele Tags, die einen Bereich definieren, beispielsweise ein Absatz: dann wird der Anfang und das Ende mit einem Tag versehen, wobei das Ende-Tag vor dem Wort einen Slash / hat:

<title>Mein grandioses Projekt</title>

Schnellkurs

Grundgerüst erstellen

* Datei erstellen: index.html

Folgenden Text einkopieren:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
     <p>Das ist unser erster Text</p>
  </body>
</html>

Die erste Zeile (DOCTYPE) legt fest, dass hier ein HTML-5-Dokument vorliegt.
Die zweite Zeile <html> startet das HTML-Dokument, beendet wird es mit der letzten Zeile </html>
Es folgt die Definition eines Kopfbereichs mit Titel.
mit <body> fängt der eigentliche Inhalt an, mit </body> endet der Inhalt.
Als Inhalt gibt es einen Absatz (fängt mit <p> (paragraph) an und endet mit </p>

Diese Datei speichern und im Browser öffnen.

Attribute

Tags können Attribute haben. Diese werden innnerhalb der spitzen Klammern angegeben und haben die Form attribut (nur ein Wort) oder attribut="wert".

Beispiel: Der Tag "a" hat hier 2 Attribute: href und target

Weitere Elemente

Folgende Übungen werden immer zwischen die Tags <body> und </body> eingefügt.

Mehrere Absätze

<p>Hallo Leute, das ist ein ganz langer Satz mit vielen Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und Wiederholungen und so weiter.
</p>
<p>Hier beginnt Absatz 2.
</p>
<div>Auch so kann ich Absätze definieren
</div>

p steht für paragraph (Absatz)
div steht für division (Bereich, Gliederung)
p wird für Textabschnitte verwendet, div für allgemeine Bereiche, beispielsweise die Spalten einer Seite.

Überschriften

<h1>Aufsatz</h1>
  <h2>Einleitung</h2>
    <p>Jetzt wird es interessant.</p>
    <h3>Zielsetzung</h3>
      <p>Erklärung der Welt</p>
  <h2>Hauptteil</h2>
    <h3>Kapitel 1</h3>
      <p>Die Welt ist rund.</p>
    <h3>Kapitel 2</h3>
      <p>Die Welt ist schön.</p>
  <h2>Schluss</h2>
    <p>Das war es.</p>

Die Einrückung bietet bessere Darstellung der Struktur, ist aber nicht notwendig.
Die Zahl hinter "h" ist der Level. Der oberste Level ist 1, der unterste 5.
"h" steht für "header"

Aufzählungen

<ul>
  <li>Hase</li>
  <li>Reh</li>
</ul>
<ol>
  <li>Google</li>
  <li>Bing</li>
  <li>Yahoo</li>
</ol>
<ul>
  <li>Hase
    <ul>
      <li>Hase</li>
      <li>Kaninchen</li>
    </ul>
  </li>
  <li>Reh</li>
</ul>
<ol>
  <li>Google</li>
  <li>Bing
    <ul>
      <li>Hase</li>
      <li>Kaninchen</li>
    </ul>
  </li>
  <li>Yahoo</li>
</ol>

<ul> steht für "unsorted list"
<li> steht für "list item"
<ol> steht für "ordered list"
Verschachtelungen (weitere Einrückungstiefe) entstehen, wenn innerhalb von <li> eine weitere Liste (<ul> oder <ol>) eingefügt wird.

Tabellen

<table border="1">
<tr>
  <th>Nummer</th>
  <th>Name</th>
</tr>
<tr>
  <td>1</td>
  <td>Müller</td>
</tr>
<tr>
  <td>2</td>
  <td>Maier</td>
</tr>
</table>


    <table border="2">
    <tr>
    <th>Nummer</th>
    <th>Tabelle 1</th>
    <th>Tabelle 2</th>
    <th>Tabelle 3</th>
    <th>Tabelle 4</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1 steht am Anfang</td>
    <td>blablabö</td>
    </tr>
    <tr>
        <td colspan="4">2</td>
        <td>2 steht dahinter</td>
    </tr>
    <tr>
        <td>3</td>
        <td>die Nummer 3 stellt sich davor</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Nummer 4 beschwert sich nie</td>
    </tr>
    </table>

tr steht für table record (Zeile)
th steht für table header column (Spalte Überschrift)
td steht für table data column (Datenspalte)

Verweise

<p>Hier geht es zur <a href="https://bahn.de">Bahn</a>.
</p>

a steht für "anchor"

Textformatierungen

<ul>
  <li>Das ist <b>fetter</b> Text.</li>
  <li>das ist <strong>wichtig</strong>.</li>
  <li>das ist <u>unterstrichen</u>.</li>
  <li>Ich kann auch <em>kursiv</em>.</li>
  <li>oder gemischt: <b><em>fett und kursiv</em></b>.</li>
</ul>
<p>Das ist ein Absatz. <br>Nach <br> fängt aber eine neue Zeile an.
</p>

Eingabefelder

<div>
  <input type="text" placeholder="Benutzername">
</div>
<div>
  <input type="password" placeholder="Passwort">
</div>
<div>
  <textarea>Zeile 1
Zeile 2
  </textarea>
<div>
  <button>Anmelden</button>
</div>
<div>
  <input type="checkbox" checked>Angemeldet bleiben</input>
</div>

<input type="text"> definiert ein einzeiliges Eingabefeld. Wenn das Attribut "placeholder" angegeben ist: Im leeren Feld wird dieser Text angezeigt. Dieser verschwindet, wenn der Benutzer im Feld etwas einträgt.
<input type="password"> definiert ein einzeiliges Eingabefeld, in dem die Eingabe mit '*' dargestellt werden. Für Passworteingabe.
<textarea> definiert ein mehrzeiliges Eingabefeld.
<button> definiert einen Push-Button

Bilder, Videos und Audio

<img src="flower.jpg" alt="Eine wunderschöne Blume">

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Leider wird Video nicht unterstützt.
</video> 

 <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Leider wird Audio nicht unterstützt.
</audio>

src gibt die URL des Bildes/Videos/Audiofiles an.
alt stellt eine Beschreibung des Bildes dar. Sie wird benutzt, wenn das Bild nicht angezeigt werden kann.
Bei video und audio können mehrere src-Attribute angegeben werden. Es wird dann das erste benutzt, das der Browser kennt.

Sonderzeichen

Bestimmte Zeichen haben "Namen", damit sie in verschiedenen Zeichensätzen verwendet werden können. Diese Namen fangen mit & an und enden mit ';'.

< Das Zeichen '<' (lower than)
> Das Zeichen '>' (greater than)
& Das Zeichen '&' (ampersand)
" Das Zeichen " (doppeltes Anführungszeichen) (quotation)
' Das Zeichen ' (einfaches Anführungszeichen) (appostroph)
€ Das Zeichen "€"
® Das Zeichen "®"
< Das Zeichen mit dem ASCII-Code 60

Einbinden von CSS und Javascript

...
<head>
  <link href="css/local.css" rel="stylesheet" />
</head>
<body>
...
<script src="js/vendor/popper.min.js"></script>
...

Aufgaben

Lesezeichendatei

Favoriten
Vokabulator	leo.org	Übersetzer	Maps	Wetter	Beispiel
Niederschlagsradar	Kachelmann	Wetter-Online	Beispiel	Beispiel	Beispiel

Entwicklung
vok: html	vok: css	vok:	vok:	Beispiel	Beispiel

Gestalten einer Loginseite

Willkommen auf der Webseite "Sprachen lernen"

Benutzer:	[ ]
Passwort:	[ ]
`[Anmelden]`
Passwort vergessen?

Html

Inhaltsverzeichnis