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-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.: |
<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;"> |
<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> |