Html
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>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