| Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung |
| gf_informatik:web:html [2023-10-24 15:40] – hof | gf_informatik:web:html [2025-10-24 09:51] (aktuell) – [Elemente mit Attributen] hof |
|---|
| |
| ===== Was ist eine Webseite? ===== | ===== Was ist eine Webseite? ===== |
| Schau dir irgendeine Webseite im Internet an: Du siehst meist nicht mehr als **Textstücke**, **Links** und **Bilder** (oder Gifs oder Videos). Aber diese Elemente (Textstücke, Links und Bilder) erscheinen nicht einfach nacheinander in beliebiger Reihenfolge und Gestalt, nein: Sie erscheinen in einer bestimmten **Struktur** – im Idealfall wohlgeordnet, übersichtlich und schön **gestaltet**. | Schau dir irgendeine Webseite im Internet an: Du siehst meist nicht mehr als **Textstücke**, **Links** und **Bilder** (oder Gifs oder Videos). Aber diese Elemente erscheinen nicht einfach nacheinander in beliebiger Reihenfolge und Gestalt, nein: Sie erscheinen in einer bestimmten **Struktur** – im Idealfall wohlgeordnet, übersichtlich und schön **gestaltet**. |
| |
| Eine Webseite ist also eine strukturierte und gestaltete Zusammenstellung von Text, Links und Bildern. Sie besteht mindestens aus einer **HTML-Datei**, also zum Beispiel ''index.html''. Oft gehören auch Bilder und weitere Dateien dazu. Auch eine **CSS-Datei** gehört meistens zu einer Webseite. | Eine Webseite ist also eine strukturierte und gestaltete Zusammenstellung von Text, Links und Bildern. Sie besteht mindestens aus einer **HTML-Datei**, also zum Beispiel ''index.html''. Oft gehören auch Bilder und weitere Dateien dazu. Auch eine **CSS-Datei** gehört meistens zu einer Webseite. |
| |
| ===== HTML-Grundlagen ===== | ===== HTML-Grundlagen ===== |
| **HTML** ist die eine //Auszeichnungssprache//, das heisst eine Sprache, in der du Textstücke und andere Elemente //auszeichnen// bzw. //markieren// kannst. Durch diese Markierungen wird der Text strukturiert: Dies ist ein Titel, dies eine Überschrift, diese eine Liste etc. | **HTML** ist eine //Auszeichnungssprache//, das heisst eine Sprache, in der du Textstücke und andere Elemente //auszeichnen// bzw. //markieren// kannst. Durch diese Markierungen wird der Text strukturiert: Dies ist ein Titel, dies eine Überschrift, diese eine Liste etc. |
| |
| ==== HTML-Beispiel ==== | ==== HTML-Beispiel ==== |
| ==== HTML-Grundgerüst aus head und body ==== | ==== HTML-Grundgerüst aus head und body ==== |
| |
| HTML besteht aus vielen Tags. Die meisten HTML-Elemente haben einen Start- und einem Endtag. | HTML besteht aus vielen Tags (Markierungen). Die meisten HTML-Elemente haben ein Start- und ein Endtag. |
| |
| Der HTML-Kopf beginnt mit dem Starttag `<head>` und endet mit dem Endtag `</head>`. Er beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt werden, z.B.: | Der HTML-Kopf beginnt mit dem Starttag `<head>` und endet mit dem Endtag `</head>`. Er beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt werden, z.B.: |
| <WRAP column half> | <WRAP column half> |
| <code html Blockelemente.html> | <code html Blockelemente.html> |
| <p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> | |
| <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> | |
| <h1>Header 1 (Überschrift 1)</h1> | <h1>Header 1 (Überschrift 1)</h1> |
| <h2>Überschriften sind h1 bis h6</h2> | <h2>Überschriften sind h1 bis h6</h2> |
| | <p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> |
| | <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> |
| <ul> | <ul> |
| <li>Listenpunkt in einer unnummerierten Liste</li> | <li>Listenpunkt in einer unnummerierten Liste</li> |
| <HTML> | <HTML> |
| <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;"> | <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;"> |
| | <h1 style="margin: unset ! important; border: unset;">Header 1 (Überschrift 1)</h1> |
| | <h2 style="margin: unset ! important; border: unset;">Überschriften sind h1 bis h6</h2> |
| <p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> | <p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> |
| <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> | <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> |
| <h1 style="margin: unset ! important; border: unset;">Header 1 (Überschrift 1)</h1> | |
| <h2 style="margin: unset ! important; border: unset;">Überschriften sind h1 bis h6</h2> | |
| <ul> | <ul> |
| <li>Listenpunkt in einer unnummerierten Liste</li> | <li>Listenpunkt in einer unnummerierten Liste</li> |
| <WRAP column half> | <WRAP column half> |
| <code html> | <code html> |
| <img src="tigerente.jpg" /> | <img src="tigerente.jpg" width="200" /> |
| </code> | </code> |
| </WRAP> | </WRAP> |
| </WRAP> | </WRAP> |
| |
| | === Weiterführende Links === |
| | * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials|HTML Tutorials auf SelfHTML]] |