einfache Websiteprogrammierung


Kopiere dir einfach den Code der Website in dein Editor und Speicher diese in einen Ordner. In diesem erstellst Du noch einen Ordner, mit dem Namen ima und kopiere ein Hintergrundbild dort hinein ( Alternativ kann der Download benutzt werden ). Dann musst Du nur noch die index.html im Browser öffnen.

Projekt Download:

Download
Bastel Website.rar
Komprimiertes Dateiarchiv 144.3 KB

Video ( German ) zu dieser Bastel Website:


index.html


<!DOCTYPE html>

<html>

<head>

<title>Meine Website</title>

<link rel="stylesheet" type="Text/css" href="kasten.css">

</head>

<body>

<div id="oben" align="center"><h1>Meine &Uuml;berschrift</h1></div>

<div id="links" align="center">

<h2>Navigation</h2>

<a href="index.html" class="butt" target="_self">Home</a><br><br>

<a href="seite2.html" class="but" target="_self">Seite 2</a><br>

</div>

<div id="rechts"></div>

<div id="mitte" align="center">

Hallo, <br>

und Wilkommen auf meiner Website!

</div>

<div id="unten" align="center">

<a href="imp.html" class="butt" target="_self">Impressum</a>

</div>

</body>

</html>


kasten.css


html, body {

height: 100%;

width: 99%;

background: url(ima/hin.png);

}

#oben {

background: rgba(100,100,100,0.5);

border-top-left-radius: 20px;

border-top-right-radius: 20px;

}

#links {

background: rgba(100,100,100,0.5);

height: 80%;

width: 20%;

float: left;

}

#rechts {

background: rgba(100,100,100,0.5);

height: 80%;

width: 20%;

float: right;

}

#mitte {

background: rgba(100,100,100,0.5);

height: 80%;

width: 56%;

margin-left: 22%;

}

#unten {

background: rgba(100,100,100,0.5);

height: 5%;

width: 100%;

margin-top: 1%;

}

.but {

color: yellow;

background: gray;

text-decoration: none;

padding-left: 20px;

padding-right: 20px;

border-radius: 15px;

}

.butt {

color: yellow;

text-decoration: none;

}

.bilderliste {

list-style-type: none;

margin: 0;

padding: 0;

width: 100%;

}

.bilderliste li {

float:left;

border: 1px solid yellow;

width: 200px;

height: 180px;

margin: 5px;

padding: 3px;

}

img.zoom {

transition: transform 0.8s;

}

img.zoom:hover {

cursor: zoom-in;

transform: scale(1.8,1.8);

}


seite2.html


<!DOCTYPE html>

<html>

<head>

<title>Meine Website</title>

<link rel="stylesheet" type="Text/css" href="kasten.css">

</head>

<body>

<div id="oben" align="center"><h1>Galerie</h1></div>

<div id="links" align="center">

<h2>Navigation</h2>

<a href="index.html" class="but" target="_self">Home</a><br><br>

<a href="seite2.html" class="butt" target="_self">Seite 2</a><br>

</div>

<div id="rechts"></div>

<div id="mitte">

<ul class="bilderliste">

<li><img src="ima/hin.png" class="zoom" width="100%" height="100%"></li>

</div>

<div id="unten" align="center">

<a href="imp.html" class="butt" target="_self">Impressum</a>

</div>

</body>

</html>


imp.html


<!DOCTYPE html>
<html>
<head>
<title>Meine Website</title>
<link rel="stylesheet" type="Text/css" href="kasten.css">
</head>
<body>
<div id="oben" align="center"><h1>Impressum</h1></div>
<div id="links" align="center">
<h2>Navigation</h2>
<a href="index.html" class="butt" target="_self">Home</a><br><br>
</div>
<div id="rechts"></div>
<div id="mitte">
Name: bla bla
</div>
<div id="unten" align="center">
<a href="seite2.html" class="butt" target="_self">Impressum</a>
</div>
</body>
</html>


Umlaute & Sonderzeichen


Leider müssen Umlaute und Sonderzeichen extra angegeben werden, da sonst nicht alle Browser den Text korrekt anzeigen.

Wenn Du also einen Text schreibtst, dann nicht bsp.  Ä  sondern &Auml;.

Beispiel: Wir müssen dich Ärgern.

Im korrekten Code: Wir m&uuml;ssen dich &Auml;rgern.

Umlaute

 

Ä - &Auml;

ä - &auml;

Ë - &Euml;

ë - &euml;

Ï - &Iuml;

ï  -  &iuml;

Ö - &Ouml;

ö  - &ouml;

Ü - &Uuml;

ü  - &uuml;

Ÿ  - &Yuml; 

ÿ  - &yuml;

 

Wichtig

 

Absatz - <p>Testschrift</p>

Größe - <h1>Überschrift</h1>

Zeilenumbruch - <br>

Sonderzeichen

 

&  -  &amp;

ß  -  &szlig;

©  -  &copy;

®  -  &reg;

™  -  &trade;

«  -  &laquo;

»  -  &raquo;

•  -   &bull;

·   -  &middot;

¨  -  &uml;

…  -  &hellip;

¡   -  &iexcl;

¿ -  &iquest;

¦  -  &brvbar;

§  -  &sect;

º  -  &ordm;

ª  -  &ordf; 

¯   -  &macr;

¶ -  &para;

†  -  &dagger;

‡  -  &Dagger;

°  -  &deg;

 



Du besitzt nun eine einfache Html Website. Um die Seite online zu bringen, benötigst du einen kostenlosen Hostservice der allerdings Werbung beinhaltet. Es gibt auch die Möglichkeit selbst zu Hosten, allerdings solltest du dann einen Rechner/Server im Dauerbetrieb halten. Du solltest dabei beachten das die Stromkosten dafür nicht zu verachten sind. Natürlich kannst du auch etwas Geld in die Hand nehmen und einen Hoster bezahlen, der dann ohne Werbung ect. deine Seite online bringt und hält.

Unser Favorite ist Jimdo denn nicht nur der Service ist super, auch die Werbung in der Subdomain ist sehr Diskret.