Html: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 106: | Zeile 106: | ||
</li> | </li> | ||
<li>Yahoo</li> | <li>Yahoo</li> | ||
</ol></pre> | </ol> | ||
</pre> | |||
* <ul> steht für "unsorted list" | |||
* <li> steht für "list item" | |||
* <ol> steht für "ordered list" | |||
=== Tabellen === | === Tabellen === | ||
Version vom 8. Dezember 2023, 19:13 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.
- 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>
- steht für "unsorted list"
- steht für "list item"
- steht für "ordered list"
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 "®"<Das Zeichen mit dem ASCII-Code 60
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?