Habe was im Internet (http://www.w3schools.com) entdeckt, was sich prima für dieses
Man kann sich mit Copy & Paste die Auswirkungen der Code-Änderung ansehen, indem man auf dieser Website
Einfach hier unten den Code mit Apfel-C rauskopieren und in jene Website links ins Fenster klicken, mit Apfel-A den alten Text markieren und mit Apfel-V ihn durch den neuen ersetzen.
Jetzt nur noch oben auf "Edit the text and click me" klicken. Schon sieht man das Ergebnis im rechten Fenster(-Frame)
Dazu habe jetzt den CSS-Code der bisherigen Beispiele in den HTML-Head eingefügt.
Code von Teil 4 (bzw. Teil 3):
<html>
<head>
<title>Meine erste Website</title>
<style type="text/css">
body { background-color:yellow; color:darkgrey; font-family:Arial; font-size:14px; }
h1 { background-color:white; font-family: Georgia; font-size:18px;
color:black; letter-spacing: 1em; font-weight:bold }
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }
p:first-letter { font-size:2em; color:red }
.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }
a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }
</style>
</head>
<body>
<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>
<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>
<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die
<a href="http://www.mactechnews.de"> MTN-Website</a>.</p>
<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten
des eigenen Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>
<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>
</div>
</body>
</html>
<html>
<head>
<title>Meine erste Website</title>
<style type="text/css">
body { background-color:rgb(255, 255, 230);
color:darkgrey; font-family:Arial; font-size:14px; }
h1 { text-align:center; padding:5px; margin-left: 40px; margin-right: 40px;
border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:20px;
letter-spacing: 1em; font-weight:bold; }
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }
p:first-letter { font-size:2em; color:red }
.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }
a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }
</style>
</head>
<body>
<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>
<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>
<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die
<a href="http://www.mactechnews.de"> MTN-Website</a>.</p>
<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten
des eigenen Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>
<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>
</div>
</body>
</html>
Natürlich kann man darin jetzt selbst nach belieben rumpfuschen...