Kennenlernen der wichtigsten HTML-Strukturierungselemente

Übersicht ()Testlinks zu Textmarken):

• Kommentare
• Horizontale Linien
• Überschriften 1-6
• Absätze
• Zeilenumbrüche
• Umlaute
• Sonderzeichen
• Zitate
• Aufzählungen
• Nummerierte Aufzählungen
• Wie erstellt man Hyperlinks zu externen Webseiten?
• Wie erstellt man Hyperlinks zu internen Webseiten?
• Wie erstellt man Hyperlinks zu Textmarken innerhalb einer Seite?
• Grafiken
• Grafiken mit Hyperlinks
• Tabellen
• Video
• Audio
• Container, Bereiche, Abschnitte
• Zum Seitenende

Testlinks zu Textmarken:

• Wie erstellt man Hyperlinks zu externen Webseiten?
• Wie erstellt man Hyperlinks zu internen Webseiten?
• Wie erstellt man Hyperlinks zu Textmarken innerhalb einer Seiten?

Nach oben ↑

HTML-Kommentare <!-- ... -->

Lorem ipsum dolor.

Nach oben ↑

Horizontale Linien <hr>

Achtung, jetzt kommt eine horizontal Linie: <hr>

Nach oben ↑

Überschriften <h1> <h2> <h3> <h4> <h5> <h6>

Es gibt bei HTML 6 Überschriftsebenen:

Überschrift 1. Ordnung

Überschrift 2. Ordnung

Überschrift 3. Ordnung

Überschrift 4. Ordnung

Überschrift 5. Ordnung

Überschrift 6. Ordnung

Nach oben ↑

Absätze <p>

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Nach oben ↑

Zeilenumbrüche <br>

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Nach oben ↑

Umlaute &auml; &ouml; &uuml; &Auml; &Ouml; &Uuml; &szlig;

Lorem ipsum dolor. a als Umlaut: ä
o als Umlaut: ö
u als Umlaut: ü
A als Umlaut: Ä
O als Umlaut: Ö
U als Umlaut: Ü
Scharfes s: ß

Nach oben ↑

Sonderzeichen &...;

Lorem ipsum dolor. ♥ € © ↑ ↓ ← → Ø

Nach oben ↑

Elemente für Zitate <q> <blockquote>

Lorem ipsum dolor. Unsere IT-Ausbildung absolvieren wir am Berufsförderungswerk Schömberg, im schönen Nordschwarzwald

Jetzt kommt ein Zitat über mehrere Zeilen von Rolf Kauka, einem deutschen Comicschriftsteller:

Mein Erfolgsrezept ist einfach:
10% Inspiration, 90% Transpiration.

Nach oben ↑

Aufzählungen <ul>

Lorem ipsum dolor. Wir ITler sind:

• edel,
• hilfreich und
• gut.

Nach oben ↑

Nummerierte Aufzählungen <ol>

Lorem ipsum dolor. Drei Dinge braucht der Mann:

1. Feuer
2. Pfeife
3. Stanwell

Nach oben ↑

Externe Hyperlinks <a href="http://...">sichtbarer Text</a>

Lorem ipsum dolor. Eine der bekanntesten Referenzseiten für HTML und CSS ist die (deutsche) Website SELFHTML.

Nach oben ↑

Interne Hyperlinks <a href="xxx.html">sichtbarer Text</a>

Lorem ipsum dolor. Na, waren Sie schon auf meiner Testseite? Nein? Dann wird´s aber Zeit. Klick mich!

Nach oben ↑

Hyperlinks zu Textmarken <a href="#name">sichtbarer Text</a>

Lorem ipsum dolor.

Nach oben ↑

Grafiken <img src="xxx.jpg" alt="Text" >

Lorem ipsum dolor.

Nach oben ↑

Grafiken mit Hyperlinks <a href="picbig.jpg" ><img src="picsmall.jpg" alt="Text"" ></a>

Lorem ipsum dolor.

Grafik mit Webseite als Ziel

Lorem ipsum dolor.

Grafikvorschaubild mit großem Bild als Ziel

Lorem ipsum dolor.

Nach oben ↑

Tabellen

Quick & dirty

Hier kommt eine 4-zeilige und 3-spaltige Tabelle:

Hier kommt eine kleine Adressenliste mit 6 Zeilen und 6 Spalten

Tabellenaufbau mit logischer Struktur:

Tabellenfunktion von Scriptly

Nach oben ↑

Video

Das nachfolgende Test-Video wurde freundlicherweise von camendesign.com zur Verfügung gestellt.

Nach oben ↑

Audio

Lorem ipsum dolor.

Nach oben ↑

Container, Bereiche, Abschnitte

Blockbereiche

Die nur 1x pro Seite vorkommen dürfen

Blockbereiche, die nur ein Mal auf der Seite vorkommen dürfen, werden mit "id" benannt. Nachfolgend ein Beispiel:

Blockbereiche, die mehrfach vorkommen dürfen

Lorem ipsum dolor.

Die mehrfach vorkommen dürfen

Lorem ipsum dolor.

Nach oben ↑

Inlinebereiche

Inlinebereiche, die nur 1x pro Seite vorkommen dürfen

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inlinebereiche, die mehrfach vorkommen dürfen

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nach oben ↑

Achtung! Sie haben das Seitenende erreicht! Weiterscrollen auf eigene Gefahr!