In diesem Video zeige ich euch, wie ihr euch eine eigene Homepage in einer Stunde mit Html und CSS gestalten könnt.
Download Scriptly:
Quellcode:
index.html
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> | |
| <head> | |
| <title>Meine Erste Homepage</title> | |
| <link rel="stylesheet" href="design/style.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div id="Main"> | |
| <div id="Head"> | |
| <span id="Ueberschrift">Meine erste Homepage</span> | |
| </div> | |
| <div id="navi"> | |
| <a href="index.html">Startseite</a> | |
| <a href="http://www.google.de">Google</a> | |
| </div> | |
| <div id="content"> | |
| <h2>123</h2> | |
| <p>hALLO UND WILKOMMENVLAUIUVFIQLBFIUSBS <a href="http://www.google.de">zu Google</a> | |
| </p> | |
| <img src="http://www.google.de/logos/2011/earthday11-hp-r.gif" /> | |
| </div> | |
| <div id="seitenleiste"> | |
| <h3>Meistbesuchteste Seiten</h3> | |
| <ul> | |
| <li>Google</li> | |
| <li>Facebook</li> | |
| <li>Youtube</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
body
{
font-family: Arial;
background-color: #E8E8E8;
}
h1
{
font-size: 20pt;
}
h2
{
font-size: 18pt;
}
p
{
font-size: 14pt;
}
#Main
{
background-color: Red;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#Head
{
background-image: url(headimg.png);
height: 70px;
padding: 40px;
}
#navi
{
background-color: #3D37B1;
height: 20px;
padding-left: 30px;
}
#navi a
{
color: White;
}
#navi a:visited
{
color: White;
}
#content
{
background-color: White;
width: 500px;
position: absolute;
padding: 5px;
}
#seitenleiste
{
background-color: #554EE2;
width: 300px;
float: right;
}
#Ueberschrift
{
color: White;
font-size: 20pt;
}
