Html: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 160: | Zeile 160: | ||
</div> | </div> | ||
</pre> | </pre> | ||
* <input type="text"> definiert ein einzeiliges Eingabefeld. | * <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. | * <input type="password"> definiert ein einzeiliges Eingabefeld, in dem die Eingabe mit '*' dargestellt werden. Für Passworteingabe. | ||
* <textarea> definiert ein mehrzeiliges Eingabefeld. | * <textarea> definiert ein mehrzeiliges Eingabefeld. | ||
* <button> definiert eine Push-Button | * <button> definiert eine Push-Button | ||
Version vom 24. September 2023, 20:30 Uhr
Links
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
<a href="https://bahn.de" target="_blank">Bahn</a>
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 eine Push-Button