Der Pc-Blog ist umgezogen. Du findest ihn ab jetzt unter www.meinpc-blog.de

Samstag, 23. April 2011

Tutorial: Homepages mit Html und Css in einer Stunde gestalten lernen


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>
style.css

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;
}

1 Kommentar:

  1. Tag-heiraten: Danke, du hast meinen Abschluss gerettet!! Liebe Grüße, Stella !!

    AntwortenLöschen