hallo liebe epvper und hartz4-hater.
Heute zeige ich euch mit mein paar html/php/css kentnissen wie ihr euch eine eigene kleine homepage zusammen basteln könnt!:)
Was brauchen wir ?
•Einen verschnellerten metin2-server
•Scriptly(der editor) [*download*]
•einen browser der unter umständen HTML5 lesen muss(google chrome 13, Firefox 6)
•ein bisschen
•ein paar english-kenntnisse um auch zu verstehn was man macht ;)
Zuerst öffnen wir den editor klicken auf neu wählen PHP aus den öffnet sich so ein dukument:
das editieren wir zu so einen dukument:
[PHPH]
<!DOCTYPE html>
<html>
<head>
<title>Dein serverName</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
</body>
</html>[/PHP]
soweit sogut.
nun schreiben wir folgendes in den "Body" bereich also zwischen <body></body> :
mh.. wie wir am html-tag erkennen hat es also was mit den header zu tun...
oke! also gehn wir oben auf Datei->neu->css und schreiben als erstes rein:
das steht für die "standartwerte".
so nun dadrunter schreiben wir nun :
}
header h1 {
font-style: italic;
font-family: Verdana;
color: white;
font-size: 30pt;
text-align: left;
padding-left: 50px;
padding-top: 25px;
text-shadow: black 1px 1px 4px;
}
header h2 {
font-style: italic;
font-family: Verdana;
color: white;
font-size: 16pt;
text-align: left;
padding-left: 480px;
text-shadow: black 0px 0px 8px;
}
kleine erklärung :
height:höhe background-color: hintergrundfarbe des headers (das ist hellblau)
border-radius: abrundung 15px
so nun wieder in die index.php switchen.
nun kommen wir zum menü!
naja natürlich hat es auch ein html tag..^^
also tragen wir nun wieder im body ein:
erklärung:
<a></a>=anker tag href :link <nav>=navigation.
und im css tragen wir nun ein :
gut. das menü ist nun auch fertig!
nun kommen wir zu den "news"
dazu verlassen wir den body und gehn zwischen </body> und </html> und schreiben dort rein:
wen ihr mehrere news wollt einfach immer wieder :
<section>
<article>
<h2>News </h2>
<p>Foqwfgegffgwfgwfw</p>
</article>
</section> neu reinschreiben
sooo...
nun wieder zur css
soo nun ist die index.php schon fertig!:)
nun zur registrierung!
zunechst kopieren wir die "index.php"
und bennen die kopie in "regi1.php" um (SONST GEHT DIE REGI NICHT!!)
so nun öffnen wie die regi1.php mit scriptly.
Und scrollen zum bereich der section (zwischen </body> und </html>)
und löschen die news raus und den <h2>News</h2> benenen wir IN registration um.
<><><><><><><><><><><><><><><><><><><><><><><><><> <><><><><><>
und fügen anstadt die news volgendes ein :
und speichern es ab!
nun öffnen wir ein neues php dukument und nenen es regi.php und schreiben rein:
so gut.
nun öffnen wir wieder ein neues php dukument und nenen es "config.php"
und schreiben rein:
und tada... fertig!
und für die anderen pages wie download immer index kopieren und den sections beeich bearbeiten!:)
Viel spaß und bitte ein thx darlassen, demnächst kommt noch mehr !
Heute zeige ich euch mit mein paar html/php/css kentnissen wie ihr euch eine eigene kleine homepage zusammen basteln könnt!:)
Was brauchen wir ?
•Einen verschnellerten metin2-server
•Scriptly(der editor) [*download*]
•einen browser der unter umständen HTML5 lesen muss(google chrome 13, Firefox 6)
•ein bisschen
•ein paar english-kenntnisse um auch zu verstehn was man macht ;)
Zuerst öffnen wir den editor klicken auf neu wählen PHP aus den öffnet sich so ein dukument:
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>Dein serverName</title>
<meta charset="ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
</body>
</html>
[PHPH]
<!DOCTYPE html>
<html>
<head>
<title>Dein serverName</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
</body>
</html>[/PHP]
soweit sogut.
nun schreiben wir folgendes in den "Body" bereich also zwischen <body></body> :
PHP Code:
<header>
<h1>SERVERNAME</h1>
<h2>slogan </h2>
</header>
oke! also gehn wir oben auf Datei->neu->css und schreiben als erstes rein:
PHP Code:
* {
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, sans-serif;
}
so nun dadrunter schreiben wir nun :
PHP Code:
header {
height: 100px;
background-color: #7FFFFF;
padding-bottom: 15px;
border-radius: 15px;
header h1 {
font-style: italic;
font-family: Verdana;
color: white;
font-size: 30pt;
text-align: left;
padding-left: 50px;
padding-top: 25px;
text-shadow: black 1px 1px 4px;
}
header h2 {
font-style: italic;
font-family: Verdana;
color: white;
font-size: 16pt;
text-align: left;
padding-left: 480px;
text-shadow: black 0px 0px 8px;
}
kleine erklärung :
height:höhe background-color: hintergrundfarbe des headers (das ist hellblau)
border-radius: abrundung 15px
so nun wieder in die index.php switchen.
nun kommen wir zum menü!
naja natürlich hat es auch ein html tag..^^
also tragen wir nun wieder im body ein:
PHP Code:
<nav>
<ul>
<a href="index.php"><li>Home</li></a>
<a href="regi.php"><li>Register</li></a>
<a href="download.php"><li>Downloads</li></a>
<a href="/board"><li>Forum</li></a>
</ul>
</nav>
<a></a>=anker tag href :link <nav>=navigation.
und im css tragen wir nun ein :
PHP Code:
nav {
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
background-color: black;
border-radius: 10px;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
margin-right: 40px;
padding-right: 35px;
padding-left: 35px;
padding-top: 3px;
padding-bottom: 3px;
border-radius: 5px;
font-weight: bold;
cursor: default;
background-color: #7FFFFF;
border: #C0C0C0 3px outset;
}
nav li:hover {
border: #C0C0C0 3px inset;
}
nav a {
text-decoration: none;
color: white;
text-shadow: gray 0px 0px 4px;
}
nav a:hover {
color: #808080;
text-shadow: none;
}
nun kommen wir zu den "news"
dazu verlassen wir den body und gehn zwischen </body> und </html> und schreiben dort rein:
PHP Code:
<section>
<article>
<h2>News </h2> <!-- title der news -->
<p>hir die news reinschreiben<p>
</article>
</section>
<section>
<article>
<h2>News </h2>
<p>Foqwfgegffgwfgwfw</p>
</article>
</section> neu reinschreiben
sooo...
nun wieder zur css
PHP Code:
section {
background-color: black;
width: 575px;
float: right;
}
article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
}
article h2 {
font-size: 14pt;
color: white;
padding-bottom: 10px;
letter-spacing: 1px;
font-weight: bold;
}
nun zur registrierung!
zunechst kopieren wir die "index.php"
und bennen die kopie in "regi1.php" um (SONST GEHT DIE REGI NICHT!!)
so nun öffnen wie die regi1.php mit scriptly.
Und scrollen zum bereich der section (zwischen </body> und </html>)
und löschen die news raus und den <h2>News</h2> benenen wir IN registration um.
<><><><><><><><><><><><><><><><><><><><><><><><><> <><><><><><>
und fügen anstadt die news volgendes ein :
PHP Code:
<div id="Felder">
<form action="regi.php" method="post" >
Benutzername<br />
<input type="text" name="username" size="30" /><br />
Passwort<br />
<input type="password" name="passwd" size="30" /><br />
Passwort Wiederholen<br />
<input type="password" name="passwd2" size="30" /><br />
Name<br />
<input type="text" name="rl_name" size="30" /><br />
Email<br />
<input type="text" name="email" size="30" /><br />
Löschcode<br />
<input type="text" maxlength="7" name="social_id" size="30" /><br />
<br />
<input type="submit" name="submit" value="Register" />
</form>
</div>
nun öffnen wir ein neues php dukument und nenen es regi.php und schreiben rein:
PHP Code:
<?php
include('config.php');
mysql_connect($dbhost,$dbuser,$dbpass);
if(isset($_POST['submit']) && $_POST['submit'] == 'Register') {
$username = mysql_real_escape_string($_POST['username']);
$passwd = mysql_real_escape_string($_POST['passwd']);
$passwd2 = mysql_real_escape_string($_POST['passwd2']);
$rl_name = mysql_real_escape_string($_POST['rl_name']);
$email = mysql_real_escape_string($_POST['email']);
$social_id = mysql_real_escape_string($_POST['social_id']);
if($passwd == $passwd2) {
$sql = "INSERT INTO account SET login = '".$username."', password = PASSWORD('".$passwd."'), real_name = '".$rl_name."', email = '".$email."', social_id = '".$social_id."'";
$result = mysql_query($sql);
if($result) { echo "<font color=\"green\"><b>Sie haben erfolgreich einen Account erstellt!</b></font>"; } else { echo "<font color=\"red\"><b>Registrierung Fehlgeschlagen!</b></font>"; }
}
}
?>
<a href="index.php">HOME</a>
so gut.
nun öffnen wir wieder ein neues php dukument und nenen es "config.php"
und schreiben rein:
PHP Code:
<?php
$dbhost = "localhost"; //ServerDB Host
$dbuser = "root"; //Datenbank Benutzer
$dbpass = ""; //Passwort
$mysql_db = "account";
?>
und für die anderen pages wie download immer index kopieren und den sections beeich bearbeiten!:)
Viel spaß und bitte ein thx darlassen, demnächst kommt noch mehr !