HTML Beispielcode

HTML Beispielcode. Darstellung von 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&auml;che</b></p> Fläche
<p><b>F&ouml;rderung</b></p> Förderung
<p><b>Fr&uuml;hst&uuml;ck</b></p> </body> </html> Frühstück
<span style="letter-spacing:0.3em; margin-left:0.3em; margin-right:0.3em;">gesperrter Text</span>
gesperrter Text
<span style="letter-spacing:0.6em; margin-left:0.6em; margin-right:0.6em;">sehr gesperrter Text</span>
sehr gesperrter Text
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/

Mehr Tipps: Sprungmarken definieren

Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nach oben Sitemap
Impressum & Kontakt