Version vom 24. September 2023, 20:31 Uhr

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.

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>

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>

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>Ich kann auch <em>kursiv</em>.</li>
  <li>oder gemischt: <b><em>fett und kursiv</em></b>.</li>
</ul>

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>

<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

@@ Zeile 163: / Zeile 163: @@
 * &lt;input type="password"> definiert ein einzeiliges Eingabefeld, in dem die Eingabe mit '*' dargestellt werden. Für Passworteingabe.
 * &lt;textarea> definiert ein mehrzeiliges Eingabefeld.
-* &lt;button> definiert eine Push-Button
+* &lt;button> definiert einen Push-Button

Html: Unterschied zwischen den Versionen