Html: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 158: | Zeile 158: | ||
<div> | <div> | ||
<button>Anmelden</button> | <button>Anmelden</button> | ||
</div> | |||
<div> | |||
<input type="checkbox" checked>Angemeldet bleiben</input> | |||
</div> | </div> | ||
</pre> | </pre> | ||
| Zeile 164: | Zeile 167: | ||
* <textarea> definiert ein mehrzeiliges Eingabefeld. | * <textarea> definiert ein mehrzeiliges Eingabefeld. | ||
* <button> definiert einen Push-Button | * <button> definiert einen Push-Button | ||
=== Bilder === | |||
<pre> | |||
<img src="flower.jpg" alt="Eine wunderschöne Blume"> | |||
</pre> | |||
* src gibt die URL des Bildes an | |||
* alt stellt eine Beschreibung des Bildes dar. Sie wird benutzt, wenn das Bild nicht angezeigt werden kann. | |||
=== Sonderzeichen === | |||
Bestimmte Zeichen haben "Namen", damit sie in verschiedenen Zeichensätzen verwendet werden können. Diese Namen fangen mit & an und enden mit ';'. | |||
* <code>&lt;</code> Das Zeichen '<' | |||
* <code>&gt;</code> Das Zeichen '>' | |||
* <code>&amp;</code> Das Zeichen '&' | |||
* <code>&quot;</code> Das Zeichen " (doppeltes Anführungszeichen) | |||
* <code>&apos;</code> Das Zeichen ' (einfaches Anführungszeichen) | |||
* <code>&euro;</code> Das Zeichen "€" | |||
* <code>&copy;</code> Das Zeichen "©" | |||
* <code>&reg;</code> Das Zeichen "®" | |||
* <code>&#60;</code> Das Zeichen mit dem ASCII-Code 60 | |||
</pre> | |||
Version vom 26. September 2023, 20:32 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> <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
<img src="flower.jpg" alt="Eine wunderschöne Blume">
- src gibt die URL des Bildes an
- alt stellt eine Beschreibung des Bildes dar. Sie wird benutzt, wenn das Bild nicht angezeigt werden kann.
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 '<'>Das Zeichen '>'&Das Zeichen '&'"Das Zeichen " (doppeltes Anführungszeichen)'Das Zeichen ' (einfaches Anführungszeichen)€Das Zeichen "€"©Das Zeichen "©"®Das Zeichen "®"<Das Zeichen mit dem ASCII-Code 60