Html-Grundlagen - für SchülerInnen

Auf dieser Seite erfährst du, wie du Überschriften, Absätze, Listen und Bilder in eine Webseite einbauen kannst.
Beachte dabei, dass alle Inhalte innerhalb der beiden "body-TAGS" stehen müssen.
Probiere selbst aus, einen kleinen Text zu schreiben mit mindestens

Zwei Überschriften mit unterschiedlichen Größen (Ordnungen)
Zwei Absätzen
Einer geordneten oder ungeordneten Liste

Wenn du es schaffst, dann versuche auch die Einbindung eines Bildes, aber vielleicht brauchst du dafür auch weitere Hilfe.

Eine Überschrift einfügen

Du kannst deiner Webseite eine Überschrift geben (Überschrift erster Ordnung) und auch den verschiedenen Teilen innerhalb deiner Webseite eigene Zwischenüberschriften (zweiter, dritter, ... sechster Ordnung).


<h1>Hier deine Überschrift (erster Ordnung)</h1>
<h2>Hier deine Überschrift (zweiter Ordnung)</h2>
<h3>Hier deine Überschrift (dritter Ordnung)</h3>

Einen Abschnitt einfügen

Du kannst lange Texte in Absätze gliedern, damit nicht zu viel Text auf einmal da steht.

            
<p>Hier der Inhalt deines Abschnitts</p>

Eine Liste einfügen

Du kannst Listen/ Aufzählungen in deine Webseite einfügen, ungeordnete und geordnete:

Eine ungeordnete Aufzählung einfügen

            
<ul>
   <li>Erstes Element deiner Liste</li>
   <li>Zweites Element deiner Liste</li>
   <li>Drittes Element deiner Liste</li>
</ul>

Eine geordnete Aufzählung einfügen

Suche den Unterschied - es kommt manchmal auf jeden Buchstaben an! ;-)

Hinweis: auf Englisch heißt geordnet "ordered".

            
<ol>
   <li>Erstes Element deiner Liste</li>
   <li>Zweites Element deiner Liste</li>
   <li>Drittes Element deiner Liste</li>
</ol>

Ein Bild einfügen

            
<img src="pfad_zu_deinem_bild" height="300px" width="300px" />

Das Einfügen eines Bildes ist schon ein bisschen schwieriger.
Deshalb hier ein paar zusätzliche Hinweise:

Finde ein Bild auf deinem Gerät dass du verwenden möchtest.
Kopiere das Bild in dasselbe Verzeichnis, in dem auch deine .html - Datei liegt.
Ersetze im Code "pfad_zu_deinem_bild" mit dem Namen des Bildes.
Achte dabei auch auf das Ende des Dateinamens: das, was hinter dem "." kommt, z. B. ".png", ".jpg". Auch das muss mit angegeben werden.
Ändere bei Bedarf die Größe deines Bildes.
Dafür ist "height" (Englisch für Höhe) und "width" (Englisch für Breite) da.
Du gibst beides in "px" an, was für Pixel (Bildpunkte) steht.
Wenn du nicht weißt, wie groß dein Bild in Pixel ist, probiere es aus, und beobachte die Effekte!