Willkommen!
Link - Kursiver Text - Fetter Text
Dein Text
Überschrift
Dein Text
Markiere ihn und drücke Strg+C, dann gehst du auf diese Seite, wählst die Petpage aus und fügst das ganze mit Strg+V in das HTML-Feld ein.
Gut, jetzt musst du nur noch einige Dinge ersetzen, vor allem HEX-Codes, das sind Codes, die Farben angeben. Der HEX-Code für weiß ist zum Beispiel #FFFFFF, der für rot #FF0000, der für pink #FF0055 und so weiter und so fort. Such einfach bei Google nach HEX-Codes, klicke auf ein Ergebnis und du hast gleich eine Menge Farbcodes vor deiner Nase, die du einfügen kannst. ^^
Oben im Code habe ich bei allen HEX-Codes, die du ersetzen kannst, einfach #FFFFFF eingegeben, damit du es gleich siehst.
body {
background: #FFFFFF; Hintergrundfarbe der Page
color: #FFFFFF;Textfarbe
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
h1, h2 {
color: #FFFFFF; Textfarbe der Überschriften
text-align: center;
font-weight: normal;
}
a {
color: #FFFFFF; Textfarbe der Links
text-decoration: none; Weiter unten erfährst du mehr über text-decoration!
}
a:hover {
color: #FFFFFF; Textfarbe der Links, wenn man mit der Maus darüber fährt
text-decoration: none; Weiter unten erfährst du mehr über text-decoration!
}
i {
color: #FFFFFF; Textfarbe von kursivem Text
}
b {
color: #FFFFFF; Textfarbe von fettem Text
}
.mitte {
text-align: center;
}
#all {
background: #FFFFFF; Hintergrundfarbe des Textfeldes
border: 2px solid #FFFFFF; Farbe des Rahmens
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
width: 500px;
}
Super, das wäre erledigt x)
Jetzt erzähle ich dir noch etwas über text-decoration. Mit text-decoration kannst du deine Links ein wenig anders gestalten.
Du kannst den Standard none so ändern:
underline: Text unterstreichen
overline: Text überstreichen
underline overline: Text unter- und überstreichen
line-through: Text durchstreichen
blink: Der Text blinkt, was von vielen Usern als nervend empfunden wird. Netscape 4 und Internet Explorer unterstützen blink nicht.
Gut, jetzt hast du das Layout fertig gecodet! :)
Natürlich kannst du auch noch alles mit Bildern und anderen Dingen verschönern, falls du dazu in der Lage bist.
Wenn du jetzt Text einfügen willst, ist es eigentlich ganz einfach:
Viel Spaß mit deinem Layout! ;]