HTML
HTML
Themen:
Für was wird HTML eingesetzt?
Welche Aufbau hat ein HTML-Dokument?
Mit welchen Tools lassen sich HTML-Dokumente einfach erstellen?
Wie kann ich einen Zeilenumbruch einfügen?
Wie kann ich einen Absatz einfügen?
Listen
Tabellen
Links
HTML (HyperText Markup Language) ist die Standard-Auszeichnungssprache für das Erstellen von Webseiten. Sie wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren, darunter Texte, Bilder, Links, Tabellen und Multimedia-Inhalte.
Ein HTML-Dokument besteht aus folgenden Grundelementen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel der Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
Erklärung der Struktur:
<!DOCTYPE html>: Gibt die HTML-Version an (HTML5 in diesem Fall).
<html>: Der Wurzelknoten des Dokuments.
<head>: Enthält Metadaten wie Titel, Zeichencodierung und Links zu CSS oder JavaScript.
<title>: Titel der Webseite (angezeigt im Browser-Tab).
<body>: Enthält den sichtbaren Inhalt der Webseite wie Texte, Bilder, Links und Tabellen.
Texteditoren:
Einfach: Notepad (Windows), TextEdit (macOS, im Plain-Text-Modus)
Fortgeschritten: VS Code, Sublime Text, Atom
WYSIWYG-Editoren (What You See Is What You Get):
Adobe Dreamweaver
KompoZer
Browserbasierte Tools:
CodePen, JSFiddle, Replit (zum Testen und Teilen von HTML)
Frameworks/Starter-Kits:
Bootstrap-Starter-Templates für schnelles Design mit HTML und CSS.
HTML-Grundlagen
Zeilenumbruch einfügen
Das <br>-Element wird verwendet, um einen Zeilenumbruch einzufügen.
Beispiel:
Zeile 1<br>Zeile 2
Absatz einfügen
Das <p>-Element wird für Absätze verwendet.
Beispiel:
<p>Dies ist ein Absatz.</p>
Listen
Geordnete Listen (<ol>): Diese Listen verwenden Zahlen oder Buchstaben, um die Reihenfolge der Elemente darzustellen.
Beispiel:
<ol>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ol>
Ungeordnete Listen (<ul>): Diese Listen verwenden Aufzählungszeichen (Bullets), um die Elemente darzustellen.
Beispiel:
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>
Definitionslisten (<dl>): Diese Listen bestehen aus Begriffen (<dt>) und deren Definitionen (<dd>).
Beispiel:
<dl>
<dt>HTML</dt>
<dd>Eine Markup-Sprache für Webseiten.</dd>
<dt>CSS</dt>
<dd>Eine Sprache zur Gestaltung von Webseiten.</dd>
</dl>
Tabellen
Tabellen werden in HTML verwendet, um Daten in Zeilen und Spalten darzustellen.
Mögliche Anwendungen von Tabellen:
Sportresultate
Fahr-, und Flugpläne
Stundenpläne
Personallisten
usw.
Tabellen werden NIE dazu verwendet, das Layout einer Webseite zu gestalten.
<table>: umschliesst die Tabelle
<thead>: umschliesst den Tabellen-Header
<tbody>: umschliesst den Tabellen-Body
<tr>: TableRow - Tabellen Zeile
<td>: TableData - Tabellenzelle für Inhalt
<th>: TableHeader - Tabellenzelle für Überschrift
SYNTAX:
Syntax
<body>
<table>
<thead>
<tr>
<th>Platzierung</th>
<th>Verein</th>
<th>Punkte</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Young Boys</td>
<td>76</td>
</tr>
<tr>
<td>2.</td>
<td>St. Gallen</td>
<td>68</td>
</tr>
<tr>
<td>3.</td>
<td>FCB</td>
<td>62</td>
</tr>
</tbody>
</table>
</body>
Verlinken auf ein anderes Dokument
<a href="projektarbeit.html">Projektarbeit</a>
Verlinken auf ein Dokument eine Hierarchiestufe höher in der Verzeichnisstruktur
<a href=../projektarbeit.html">Projektarbeit</a>
Verlinken auf ein Dokument eine Hierarchiestufe tiefer in der Verzeichnisstruktur
<a href=html/projektarbeit.html">Projektarbeit</a>
Verlinken auf eine andere Webseite
<a href="https://www.google.com">Google</a>
Verlinken auf eine Textstelle im selben Dokument. Diese Textstelle muss mit ebenfalls mit einem Anker definiert werden. Der Anker hat ein Attribut id mit einem eindeutigen Namen:
<a href="../links.html#links">zu den Links</a>
<a id="links">Links</a>
Verlinken einer Emailadresse damit der Benutzer direkt eine neue Email schreiben kann
<a href="mailto:francesco.lurati@edubs.ch">francesco.lurati@edubs.ch</a>
Verlinken einer Telefonnummer damit auf mobilen Geräten direkt diese Nummer angerufen werden kann.
<a href="tel:0615529577">Rufen Sie an</a>
Zudem können Links so programmiert werden, dass Sie in einem neuen Fenster aufgehen.
<a href="https://www.google.com" target="_blank">Google (neue Seite)</a>
In Webseiten werden immer relative Links verwendet. Sie kennen die Struktur Ihrer Webseite, wissen aber nicht, ob der Webserver auf einem Unix-System, Mac oder Windows-Rechner läuft.
Deshalb verwenden wir auch immer :
Dateinamen ohne Umlaute, Sonderzeichen oder Leerzeichen.
Datei- und Ordnernamen werden immer klein geschrieben.
Relative Links starten immer am aktuellen Ort der Verzeichnisstruktur.
.. navigiert eine Hierarchiestufe hoch in der Verzeichnisstruktur
[Ordnername] navigiert eine Hierarchiestufe runter in der Verzeichnisstruktur
/ trennt Hierarchiestufen voneinander
Formulare finden Sie auf fast allen Webseiten:
Google verwendet ein Formularfeld um Ihre Suche entgegen zu nehmen
Login und Passwort werden über Formularfelder an die Applikation weitergegeben
Rechnungs- und Lieferadresse in einem Onlineshop werden über ein Formular erfasst
Formulare sorgen also dafür, dass der Benutzer einer Webseite seine Daten mit der Webseite austauschen kann.
Dazu gibt es unterschiedliche Formularfelder für
die Eingabe von kurzem oder langem Text
die Eingabe eines Passwortes
die Eingabe einer URL oder einer Emailadresse
die Eingabe von Zeit und Datum
die Auswahl einer aus mehreren Möglichkeiten
die Auswahl mehrerer aus mehreren Möglichkeiten
das Hochladen von Dateien
das Versenden des Formulars