| Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung |
| gf_informatik:web:html [2023-10-24 15:43] – [Block-Elemente] hof | gf_informatik:web:html [2025-01-31 20:25] (aktuell) – [HTML-Grundgerüst aus head und body] gra |
|---|
| |
| ===== 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.: |
| <HTML> | <HTML> |
| <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;"> | <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;"> |
| <p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> | |
| <p>Jeder Paragraph beginnt auf einer neuen Zeile.</p> | |
| <h1 style="margin: unset ! important; border: unset;">Header 1 (Überschrift 1)</h1> | <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> | <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>Jeder Paragraph beginnt auf einer neuen Zeile.</p> |
| <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> |
hof