Dies ist der Text, der zeigen soll, wie man Texte in Absätze 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 dargestllt, daher muss man einen Zeichensatz wie z.B. UTF-8 vereinbaren (siehe Header).
Dieser Text sollzeigen, dass egal wie der Quellcode umgebrochen wird und ganz egal wieviele Leerzeichen oder Zeilenumbrüche hier sind: Der Browser hat seine eigene Auffassung wie Texte erscheinen sollen.
quadrat(int i){
return( i*i );
}
Tags wie z.B. <html> werden aber immer noch
interpretiert und müssen daher anders geschrieben werden.
Alle Buchstaben sind gleich breit. z.B.:
iiii
oooo
Außerhalb von pre sind die Buchstaben nicht gleich breit:Informationen zur DHBW-Heidenheim finde ich auf deren WWW-Server wo sich alle Studiengänge präsentieren Demo der Kurzadressierung: zu einer anderen Seite
Bilder auf Webseiten haben eine eigene URL. Ein Bild kann mit dem IMG-Tag mit Nennung der URL eingefügt werden:
Die Nennung der ganzen URL hat aber Nachteile. Sollte sich der Host inder URL ändern müssten alle Image-Urls geändert werden. Deshalb ist sinnvoll die Image-URL abzukürzen. Hiezu nochmal das selbe Bild, aber mit einer abgekürzten Adressierung:
Beginnt die Adresse mit einem "/", geht der Browser davon aus, dass das Bild auf dem selben Server liegt wie da, wo die HTML-Seite hergekommen ist. Eine weitere Abkürzung der URL ist möglich: Wird nur der Dateiname ohne Verzeichnis angegeben, geht der Browser davon aus, dass dich die Bildatei im selben Verzeichnis befindet, von wo auch die HTML-Seite geladen wurde.
Neben den gängigen Rastergafikformaten wie JPG, PNG, GIF usw. Wird SVG immer beliebter. Hierbei sind Vektorgrafiken möglich, welche sich ohne Qualitätsprobleme beliebig skalieren lassen und welche auch mit sehr kleinen Speichergrößen auskommen. SVG gehört ab HTML5 zum Web-Standard. Hierzu als Beispiel das DHBW-Logo, das auf den DHBW-Seiten als SVG-Datei vorgehalten wird und nur 19kB groß ist:
Klicken Sie auf folgendes Bild. Ein Event-Handler "onClick" ist hier angegeben, dessen Code genau dann ausgeführt wird, wenn das Bild angeklickt wird. this.src repräsentiert hierbei die URL des IMG-Tags, welche per JavaScript geändert werden kann. In der Variable i ist eine Zahl gespeichert, die mit jedem Klick hochgezählt wird und die in den Ddateinamen der URL eingehängt wird. /wuerfel/W1.gif ... /wuerfel/W6.gif werden so durchgewechselt. Die Variable i ist im Headerbereich dieser HTML-Seite zuvor eingerichtet und mit dem Wert 1 vorbelegt worden.
Dieser Absatz ist per CSS speziell hervorgehoben. Es gibt auf dieser HTML-Seite viele P-Tags (Absätze), aber dieser ist per class speziell gekennzeichnet.
Damit kann man die speziellen Hervorhebungen auch mehrfach benützen.
| 1. Zeile | Erste Zeile zweite Spalte gaaaaaannnnnzzz breit geworden |
| 2. Zeile ist ausnahmsweise per "colspan" durchgehend und hat nur ein TD | |
| 3. Zeile | |
| 4. Zeile | Vierte Zeile, zweite Spalte |
| 5. Zeile ohne Zweiteilung aber ohne colspan | |
|
Letzte Zeile, zweite Spalte |
Dies ist der Text, der zeigen soll, dass div-Bereiche mehrere Tags umfassen können, um Stylings festzulegen. Das div-Tag selber ist aber unsichtbar und dient nur zur Festlegung von Format/Style-Information.
Alles ist hier rechtsbündig
Außerhalb der div-Umklammerung ist alles wieder normal linksbündig.