Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
gf_informatik:web:html [2023-10-24 13:24] – gelöscht - Externe Bearbeitung (Unknown date) 127.0.0.1gf_informatik:web:html [2025-01-31 20:25] (aktuell) – [HTML-Grundgerüst aus head und body] gra
Zeile 1: Zeile 1:
 +====== HTML ======
 +
 +===== 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**.
 +
 +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. 
 +
 +Die **Struktur** einer Webseite legst du mit **HTML** fest. Mit **CSS** kann du das **Erscheinungsbild** dieser Struktur anpassen.
 +
 +===== HTML-Grundlagen =====
 +**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 ====
 +Eine sehr einfache HTML-Datei sieht zum Beispiel so aus:
 +
 +<WRAP group>
 +<WRAP column half>
 +<code html Beispiel.html>
 +<html>
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Meine HTML-Seite</title>
 +</head>
 +<body>
 +    <h1>Willkommen auf meiner Webseite</h1>
 +    <p>Dies ist ein <em>einfacher</em> Absatz.</p>
 +    <h2>Eine ungeordnete Liste:</h2>
 +    <ul>
 +        <li>Listenpunkt 1</li>
 +        <li>Listenpunkt 2</li>
 +        <li>Listenpunkt 3</li>
 +    </ul>
 +    <h2>Ein Bild:</h2>
 +    <img src="bild.jpg" alt="Mein Bild" width="200">
 +    <h2>Ein Link:</h2>
 +    <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
 +</body>
 +</html>
 +</code>
 +</WRAP>
 +<WRAP column half code>
 +<HTML>
 +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 +    <h1 style="margin: unset ! important; border: unset;">Willkommen auf meiner Webseite</h1>
 +    <p>Dies ist ein <em>einfacher</em> Absatz.</p>
 +    <h2 style="margin: unset ! important; border: unset;">Eine ungeordnete Liste:</h2>
 +    <ul>
 +        <li>Listenpunkt 1</li>
 +        <li>Listenpunkt 2</li>
 +        <li>Listenpunkt 3</li>
 +    </ul>
 +    <h2 style="margin: unset ! important; border: unset;">Ein Bild:</h2>
 +    <img src="https://sca.ksr.ch/lib/exe/fetch.php?w=400&tok=42c9d4&media=gf_informatik:tigerente.jpeg" alt="Mein Bild" width="200">
 +    <h2 style="margin: unset ! important; border: unset;">Ein Link:</h2>
 +    <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
 +  </div>
 +</HTML>
 +</WRAP>
 +</WRAP>
 +
 +
 +
 +==== HTML-Grundgerüst aus head und body ====
 +
 +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.:
 +       * `<meta charset="UTF-8">`: sorgt dafür, dass z.B. Umlaute ä,ö,ü richtig angezeigt werden.
 +       * `<title>Meine HTML-Seite</title>`: enthält den Titel der Seite (erscheint auf dem Tab im Browser).
 +
 +Der HTML-Körper beginnt mit dem Starttag `<body>` und endet mit dem Endtag `</body>`. Dazwischen befindet sich der **Inhalt** der Website, also das, was im Hauptfenster des Browsers angezeigt wird.
 +
 +{{:gf_informatik:web_sca:html_tattoo_head_body.png?nolink&300|}}
 +
 +
 +==== HTML-Elemente ====
 +Es gibt zwei Arten von Elementen: **Block-Elemente** und **Inline-Elemente**. Einige Elemente haben **Attribute**.
 +
 +=== Block-Elemente ===
 +Block-Elemente werden typischerweise untereinander angeordnet und nehmen die ganze verfügbare Breite ein. Sie können Text, andere Block-Elemente oder Inline-Elemente enthalten. Die wichtigsten Block-Elemente sind:
 +
 +<WRAP group>
 +<WRAP column half>
 +<code html Blockelemente.html>
 +<h1>Header 1 (Überschrift 1)</h1> 
 +<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>
 +  <li>Listenpunkt in einer unnummerierten Liste</li>
 +  <li>Listenpunkt in einer unnummerierten Liste</li>
 +</ul>
 +<ol>
 +  <li>Listenpunkt in einer nummerierten Liste</li>
 +  <li>Listenpunkt in einer nummerierten Liste</li>
 +</ol>
 +</code>
 +</WRAP>
 +<WRAP column half>
 +<HTML>
 +  <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>Jeder Paragraph beginnt auf einer neuen Zeile.</p>
 +<ul>
 +  <li>Listenpunkt in einer unnummerierten Liste</li>
 +  <li>Listenpunkt in einer unnummerierten Liste</li>
 +</ul>
 +<ol>
 +  <li>Listenpunkt in einer nummerierten Liste</li>
 +  <li>Listenpunkt in einer nummerierten Liste</li>
 +</ol>
 +</div>
 +</HTML>
 +</WRAP>
 +</WRAP>
 +
 +=== Inline-Elemente ===
 +Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten **Inline-Elemente** sind:
 +
 +<WRAP group>
 +<WRAP column half>
 +<code html>
 +Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.
 +</code>
 +</WRAP>
 +<WRAP column half>
 +<HTML>
 +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 +Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.
 +</div>
 +</HTML>
 +</WRAP>
 +</WRAP>
 +
 +=== Elemente mit Attributen ===
 +Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können:
 +
 +**Hyperlinks** (Tag: `<a>` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*).
 +<WRAP group>
 +<WRAP column half>
 +<code html>
 +Dieser Text enthält einen 
 +<a href="http://ksr.ch">Link zur KSR</a>.
 +</code>
 +</WRAP>
 +<WRAP column half>
 +<HTML>
 +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 +Dieser Text enthält einen 
 +<a href="http://ksr.ch">Link zur KSR</a>.
 +</div>
 +</HTML>
 +</WRAP>
 +</WRAP>
 +
 +**Bilder** werden mit dem `<img>` Tag eingebettet, wobei der Dateiname bzw. Pfad((Mit dem Attribut *src* (source) gibt man den Pfad zum Bild an. Befindet sich das Bild *im gleichen Ordner* wie die `index.html` Datei, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise `.jpg` oder `.png`) angeben.)) des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wird der Tag gleich mit einem Schrägstrich geschlossen:
 +
 +<WRAP group>
 +<WRAP column half>
 +<code html>
 +<img src="tigerente.jpg" width="200" />
 +</code>
 +</WRAP>
 +<WRAP column half>
 +{{:gf_informatik:tigerente.jpeg?nolink&200 |}}
 +</WRAP>
 +</WRAP>
 +