HTML 5 Tutorial – (2) Überschriften, Absätze, Bilder

HTML 5 Tutorial Teil 2

Im ersten Teil dieser Artikelreihe hast du deine erste Webseite angelegt und die Bereiche eines Webdokuments kennengelernt. In diesem Artikel wirst du Überschriften und Absätze mit HTML ausgeben. Legen wir also los 🙂

Das wirst du in diesem Artikel lernen:

  • Überschriften mit HTML ausgeben und richtig einsetzen
  • Absätze in HTML ausgeben
  • Bilder in deine Webseite einbinden


Eine Überschrift mit HTML ausgeben

Überschriften werden mit dem h-Tag definiert. Diese werden von h1-h6 gegliedert. Dazu kommen wir aber gleich noch. Nun zu deiner ersten Ausgabe. Öffne deine index.html in deinem Projektordner und füge folgenden Code ein. Beachte das du ihn im Body Bereich der Webseite einfügst, also zwischen <body> und </body>.

<h1> Ich bin die Hauptüberschrift </h1>

Eine Hauptüberschrift (<h1>) solltest du nur einmal pro HTML Dokument definieren.

Wie du Überschriften gliederst erfährst du im folgenden.


Gliederung von Überschriften in HTML 5

Dein Browser kann Überschriften von unterschiedlicher Wichtigkeit darstellen. Die wichtigste von allen hast du bereits ausgegeben.

Alle weiteren Überschriften deiner Seite werden mit <h2> bis <h6> gegliedert. Diese können auch mehrfach in einem Webdokument vorkommen. Erweitere deinen Code mit folgenden Angaben und öffne deine Webseite.

<h2> Ich bin die Unterüberschrift </h2>
<h3> Ich bin eine Überschrift dritter Ordnung </h3>

Wenn alles geklappt hat, bekommst du folgendes Ergebnis:



Wir wollen natürlich noch mehr auf einer Webseite sehen. Wir kommen nun zum Fließtext deiner Webseite, zu den Absätzen 🙂


Absätze mit HTML ausgeben

Absätze werden in HTML 5 mit dem p-Tag für paragraph definiert. Um genügend Text für unseren Absatz zu erhalten, besuche die Seite lorem ipsum. Hier bekommst du Fülltext für deine Projekte. Das sieht dann in etwa so aus:

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</p>

Füge den oberen Code deiner Webseite hinzu. Zum Beispiel unter deine Unterüberschrift. Du kannst deine Überschriften bereits sinnvoll benennen. Es sollte nun etwa so aussehen wenn du deine Seite öffnest:


Da du bisher nur Text auf deiner Webseite hast, wirkt alles etwas eintönig. Daher fügst du gleich dein erstes Bild hinzu.


Bilder mit HTML ausgeben

Grafiken und Fotos werden in HTML 5 mit <img> ausgegeben. Das besondere an diesem Tag ist, das es kein schließendes Tag dafür gibt. Es wird also in sich selbst geschlossen. Außerdem musst du hier ein paar Attribute hinzufügen. Das sieht dann so aus:

<img src="" alt="" />

Das Attribut src steht für source. Hier gibst du das Quellverzeichnis deines Bildes angeben. Also den Pfad zu deinem Zielordner. Navigiere nun in deinen Projektordner. Lege dort einen weiteren Ordner an. Diesen nennst du images oder img. Hier hinterlägst du ein Foto oder eine Grafik deiner Wahl. Dein Pfad sollte in etwa so aussehen:

<img src="/img/grafik.jpg" alt="" />

Es handelt sich hierbei um einen relativen Pfad innerhalb deines Projektes. Ein absoluter Pfad würde dagegen so aussehen:

<img src="C://dein-Projekt/img/grafik.jpg" alt="" />

Für deine Webseite wird beides funktionieren. Wenn alles reibungslos geklappt hat, erhälst du in etwa folgendes:



Es fehlt jetzt noch eine sehr wichtige Angabe. Diese gibst du im alt Attribut an. Hier legst du ein Alternativtext für dein Bild fest. Beschreibe hier also kurz was das Bild ausdrücken soll.

Warum ist diese Angabe so wichtig? Der Alternativtext wird immer dann angezeigt wenn die Grafik beschädigt ist oder nicht gefunden wird. Außerdem wird er sehbehinderten Besuchern deiner Webseite vorgelesen. Er darf also in keinem Fall fehlen und somit sieht deine Codezeile nun etwa so aus:

<img src="/img/grafik1.jpg" alt="Strand mit Muscheln" />

Herzlichen Glückwunsch, da ist bereits einiges zu sehen auf deiner Webseite 🙂

Im nächsten Teil wirst du deiner Webseite etwas Leben einhauchen. Du wirst Videos und Audiodateien hinzufügen.

Bleib also am Ball, bis dann 😉



2 thoughts on “HTML 5 Tutorial – (2) Überschriften, Absätze, Bilder

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.