Eine HTML-Demo-Seite

Ein Beispieltexte in Paragraphen und Linking

Dies ist der Text, der zeigen soll, wie man Texte in Absätze (Paragraph, daher das "p") gliedern kann und was passiert, wenn man den Browser in seiner Größe ändert und welche Auswirkungen dies auf den Textumbruch der Darstellung hat. Umlaute: äöüß ÖÄÜ werden manchmal nicht richtig dargestellt, daher muss man einen Zeichensatz wie z.B. UTF-8 vereinbaren (siehe Header). Falls es nicht anders geht kann man ein ä auch als ä schreiben.

Hier geht es nach unten. Klick mich

Dieser Hyperlink geht zur Seite der DHBW-Heidenheim. Hyperlinks werden mit dem Anchor-Tag "A" realisiert

Hier ein bisschen Code mit dem Preformatted-Tag:

        quadrat(int i){
            return( i*i );
        }
        /* Dies ist ein Kommentar */
        <html>
        ßöäüÖÄÜ

Arbeiten mit CSS-Festlegungen

Auch dieser Text gehört zur Klasse "blablabla", deren Design in einer CSS-Datei definiert wurde.

Dies ist der Text, der in einem P-Tag steht aber nicht einer CSS-Designklasse zugehört. Es ist aber möglich, Festlegungen für P-Tags allgemein zu definieren.

Dieser Textblock gehört zur Designklasse "blablabla" und zeigt die Wiedervewendbarkeit des Designs. Die Ausrichtung wurde zusätzlich mit einem umgebenden DIV rechtsbündig gemacht. Vorzugsweise wird die Anwendung von Style-Attributen per DIV realisiert.

Listen

Der erste Punkt
Der zweite Punkt
Cheese
- Blue cheese
- Feta
Der dritte Punkt
Der vierte Punkt

Spezielle Hervorhebungen

Zunächst ein Horizonal Ruler HR mit 600 Pixel in der Breite

Mit HR kann man Texte optisch gegeneinander trennen und diese somit auch hervorheben.

Die BLOCKQUOTE-Anweisung kann auch allgemein zur Texthervorhebung benutzt werden. Dies ist ein Beispiel für einen speziellen Absatz, der seitlich eingezogen und zentriert dargestellt wird. In Verbindung mit kursiv-italics (Tag i) wirkt es wie ein Zitat.

Achtung, hier endet der Teil, der die Idee von Blockquotes darstellt.

Zerntrierte Dartstellung: Wasser ist H₂O

Links können auch auf Bildern liegen. Damit kann man ansprechende Navigation gestalten. Dieses Beispiel ändert die Anzeigegröße des Bilds per JavaScript, sobald der Mauszeiger auf das Bild kommt. Bei Klick, nacigiert der Browser, weil um das Bild ein Anchor-Tag (a) gelegt wurde.

Bild:

Links können auch auf bestimmte Bereiche eines Bilds definiert werden: Die violette Fläche führt auf die Informatik-Seiten der DHBW-Heidenheim:

Tabellen

Kleines Feld	Erste Zeile
2. Zeile	Dies ist ein breiter Inhalt
Letzte Zeile ohne Zweiteilung

Java-Script in Formularen

Nun kommt eine Demo für ein Formular.

action="javascript:void(0);"

ist notwenig, weil Formulare eigentlich dazu gedacht sind, Daten an den Server zu schicken und normalerweise steht hier dann eine URL.

-nix-