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 15:27] – hofgf_informatik:web:html [2025-10-24 09:51] (aktuell) – [Elemente mit Attributen] hof
Zeile 1: Zeile 1:
 ====== HTML ====== ====== HTML ======
  
-==== 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. 
  
 Die **Struktur** einer Webseite legst du mit **HTML** fest. Mit **CSS** kann du das **Erscheinungsbild** dieser Struktur anpassen. Die **Struktur** einer Webseite legst du mit **HTML** fest. Mit **CSS** kann du das **Erscheinungsbild** dieser Struktur anpassen.
  
-==== 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 ====
 Eine sehr einfache HTML-Datei sieht zum Beispiel so aus: Eine sehr einfache HTML-Datei sieht zum Beispiel so aus:
  
Zeile 38: Zeile 39:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column half>+<WRAP column half code>
 <HTML> <HTML>
 +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
     <h1 style="margin: unset ! important; border: unset;">Willkommen auf meiner Webseite</h1>     <h1 style="margin: unset ! important; border: unset;">Willkommen auf meiner Webseite</h1>
     <p>Dies ist ein <em>einfacher</em> Absatz.</p>     <p>Dies ist ein <em>einfacher</em> Absatz.</p>
Zeile 52: Zeile 54:
     <h2 style="margin: unset ! important; border: unset;">Ein Link:</h2>     <h2 style="margin: unset ! important; border: unset;">Ein Link:</h2>
     <a href="https://www.example.com">Besuchen Sie diese Webseite</a>     <a href="https://www.example.com">Besuchen Sie diese Webseite</a>
 +  </div>
 </HTML> </HTML>
 </WRAP> </WRAP>
Zeile 58: Zeile 61:
  
  
-=== 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.:
Zeile 71: Zeile 74:
  
  
-=== HTML-Elemente ===+==== HTML-Elemente ====
 Es gibt zwei Arten von Elementen: **Block-Elemente** und **Inline-Elemente**. Einige Elemente haben **Attribute**. Es gibt zwei Arten von Elementen: **Block-Elemente** und **Inline-Elemente**. Einige Elemente haben **Attribute**.
  
-== Block-Elemente ==+=== 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: 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:
  
Zeile 80: Zeile 83:
 <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>
Zeile 96: Zeile 99:
 <WRAP column half> <WRAP column half>
 <HTML> <HTML>
-<p>Das Paragraph-Element dient zur Darstellung von Paragraphen (Absätzen).</p> +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
-<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>
Zeile 108: Zeile 112:
   <li>Listenpunkt in einer nummerierten Liste</li>   <li>Listenpunkt in einer nummerierten Liste</li>
 </ol> </ol>
 +</div>
 </HTML> </HTML>
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-== Inline-Elemente ==+ 
 +=== Inline-Elemente ===
 Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten **Inline-Elemente** sind: Inline-Elemente fügen sich in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Die wichtigsten **Inline-Elemente** sind:
  
Zeile 122: Zeile 128:
 <WRAP column half> <WRAP column half>
 <HTML> <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. Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden. Der entsprechende Text wird kursiv bzw. fett dargestellt.
 +</div>
 </HTML> </HTML>
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-== Elemente mit Attributen ==+ 
 +=== Elemente mit Attributen ===
 Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können: Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können:
  
Zeile 139: Zeile 148:
 <WRAP column half> <WRAP column half>
 <HTML> <HTML>
 +  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 Dieser Text enthält einen  Dieser Text enthält einen 
 <a href="http://ksr.ch">Link zur KSR</a>. <a href="http://ksr.ch">Link zur KSR</a>.
 +</div>
 </HTML> </HTML>
 </WRAP> </WRAP>
Zeile 150: Zeile 161:
 <WRAP column half> <WRAP column half>
 <code html> <code html>
-<img src="tigerente.jpg" />+<img src="tigerente.jpg" width="200" />
 </code> </code>
 </WRAP> </WRAP>
Zeile 158: Zeile 169:
 </WRAP> </WRAP>
  
 +=== Weiterführende Links === 
 +  * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials|HTML Tutorials auf SelfHTML]]
  • gf_informatik/web/html.1698161273.txt.gz
  • Zuletzt geändert: 2023-10-24 15:27
  • von hof