| Quelltext | |
| |
| |
| Quelltext | Ergebnis |
| <html><head><title>Das ist mein Dokument</title></head> | |
| <body bgcolor="#ffff00#"><p><h1>Das ist meine Website...</h1></p> | Das ist meine Website... |
| <p>Das ist ein neuer Absatz</p> | Das ist ein neuer Absatz |
| <br>Dies ist eine Leerzeile</br> | Dies ist eine Leerzeile |
| <p><br><br>Absatz mit zwei Leerzeilen</br></br> </p> | Absatz mit zwei Leerzeilen |
| <p><em>kursiver Text</em></p> | kursiver Text |
| <! Dies ist ein Kommentar > | |
| <p><strong>fetter Text</strong></p> | fetter Text |
| <p><i>kursiver Text</i></p> | kursiver Text |
| <p><b>fetter Text</b></p> | fetter Text |
| <p>Heute <strike>schrebie</strike> schreibe ich <u>alles</u> falsch.</p> | Heute schrebie schreibe ich alles falsch. |
| <p><u>unterstrichener Text</u></p> | unterstrichener Text |
| <p>Text normal<sub>Text tief</sub></p> | Text normalText tief |
| <p>Text normal<sup>Text hoch</sup></p> | Text normalText hoch |
| <p><h1>Überschrift</h1></p> | Überschrift |
| <p><center>Text zentriert</center></p> | Text zentriert |
| <p><blockquote> Text wird hervorgehoben </blockquote> </p> | Text wird hervorgehoben |
| <p><b><pre> Das ist ein fetter | Das ist ein fetter |
| Text ! ! ! </pre></b></p> | Text ! ! ! |
| <p> <center> <h1> Zentrierte Überschrift </h1> </center> </p> | Zentrierte Überschrift |
| <p><font size=1> kleiner Text </font></p> | kleiner Text |
| <p><font face="Arial" size=5> formatierter Text </font></p> | formatierter Text |
| <p><center><blink>Blinktext zentriert</blink></center></p> | Blinktext zentriert |
| <p><b>Fläche</b></p> | Fläche |
| <p><b>Förderung</b></p> | Förderung |
| <p><b>Frühstück</b></p> </body> </html> | Frühstück |
| |
| Bei der Gestaltung einer Webseite gilt: | |
| Möglichst ein DIV-Layout entwerfen, das (bei einem Standardlayout) in folgender Reihenfolge im HTML-Quellcode |
| steht, und sich daher auch in dieser Reihenfolge im Browser lädt: |
| 1. Seitenhead / Logo | |
| 2. Content Mitte | |
| 3. Navigation links | |
| 4. Content rechts | |
| 5. Werbeblöcke | |
| |
| Weiteres: | |
| - CSS-Aufruf stets im Header aufrufen | |
| - CSS-Ausdrücke im Quellcode vermeiden | |
| - H2-Tags für Titel verwenden | |
| - Scripte am Seitenende aufrufen | |
| - Grafiken kleiner gestalten, bzw. komprimieren (jpg, gif) | |
| |
| Lösungen mit einem Layout einer 100%-Bildschirmbreite sind schlecht. Grund: viele User haben Breitbild- |
| Monitore; das bedeutet: Texte sind schwer leserlich! | |
| |
| Ein gutes Website Performance Tool mit Speed Analysis findet man hier: |
| http://www.websiteoptimization.com/services/analyze/ | |
| |
zurück