[Tutorial]Wie schreibe ich eine Homepage?

[Jay Niize]

Hallo liebe Elite Deutschlands.

Heute mal wieder mit einem kleinen Tutorial, wie ihr eure eigene kleine Homepage coden könnt. Fangen wir mal an. Vorerst werde ich alles in HTML schreiben, später mit den Funktionen in PHP.

Inhalt:

1. Die Idee
2. Grob Umsetzen
3. Verfeinern
4. Das Menü
5. Schlusswort


1. Die Idee

Zuerst benötigen wir einwenig Fantasie um uns ein einfaches Design auszudenken. Ihr könnt Paint benutzen um eure Vorstellungen wahr werden zulassen. Es sollte nur ein grober Einblick sein. Das könnte z.B so aussehen :


2. Grob Umsetzen

Zuerst erstellen wir uns ein Stylesheet, eine *.css Datei. Diese könnt ihr beliebig nennen, ich nenne sie jetzt einfach mal style.css.

Fangen wir jetzt mal an. Also wie ihr oben gesehn habt, wollen wir den Hintergrund in einem netten Dunkelgrau haben. Ich habe den Wert herausgesucht, dieser ist : #464646. Dieser ist der allgemeine Hintergrund. legen wir ihn doch schonmal fest.

body //Ganze Seite (vordefiniert)
{ // Öffnen
background-color:#464646; // Hintergrund-Farbe: FARBCODE (Dunkelgrau)
}// Schließen

Der Hintergrund ist schonmal dunkelgrau, sehr schön.

Jetzt wollen wir noch den Contenthintergrund erstellen. Dieser ist eigentlich eine normale Box die wir nochmal in drei andere Bereiche unterteilen. Erstellen wir ersteinmal die Hauptbox.

body //Ganze Seite (vordefiniert)
{ // Öffnen
background-color:#464646; // Hintergrund-Farbe: FARBCODE (Dunkelgrau)
}// Schließen

#Hauptbox // Die Box (neudefiniert)
{// Öffnen
width: 900px;
position:relative; // Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben
left:50%; //Mittig
margin-left:-400px;//400px vom Rand entfernt
}// Schließen

Jetzt ist unsere Contentbox mittig, aber immer noch oben. Deshalb sollte man ein margin einbauen, um es ca. 200 Pixel von oben zu entfernen. Also fügen wir in unseren Quellcode noch margin-top:200px; in die Hauptbox. (noch vor dem }).

Uns fällt auch auf, das wir auf dem "Ideenblatt" die Ecken abgerundet haben. Also runden wir jetzt die Ecken ab. Zuerst mal brauchen wir einen Rahmen, den wir überhaupt "biegen" können. Also benutzen wir den Befehl border-radius:5px; um einen 5 Pixel Dicken Rahmen anzufertigen. Jetzt gibt es zwei Varianten um ihn zu biegen. Einmal mit khtml, welcher auf dem IE läuft und noch die MOZ-Variante, welche auf anderen Browsern gut läuft. Wir brauchen beide um möglichst viele Browser zu unterstützen.

border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;

Nun sieht unser Quellcode also so aus :

body 
{ 
background-color:#464646; 
}

#Hauptbox 
{
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}

Jetzt unterteilen wir unsere Hauptbox in 3 Abschnitte. Den Header, den Inhalt & die Info. Die unterteilten Bereiche nennt man auch Klassen.

Erstellen wir uns nun die Klasse Header. Dieser soll auch rund sein und ein Hellgrau hervorbringen. Im Endeffekt ist es egal, da man dort meistens das Logo unterbringt. Wenn aber der Header genauso rund ist, wie die Box sieht das leicht verwirrend aus, also biegen wir es um 10Pixel weniger. Nach unten hin soll es nicht gleich an dem Inhalt anstoßen, also bauen wir noch eine Funktion mit ein, welche 20 Pixel nach unten freilässt. -> Margin-bottom!

.header
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}

Nun brauchen wir noch den Inhalt, welcher, wie oben im "Ideenblatt" gezigt wurde, neben der Info links ist. Also brauchen wir aufjeden fall ein Float, welches nach links verweist. Zudem brauchen wir noch die Breite, da die Rechte Hälfte auch noch was braucht. 250 Pixel sollten für die Info reichen. Also 900px - 250px = 650px. Die restlichen Einstellung könnt ihr von oben übernehmen.

.inhalt
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}

Für die Info können wir das jetzt vom Inhalt übernehmen, bloß die 250 Pixel anpassen und es auf rechts schieben.

.info
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

Nun sollte der Gesamte Css Code so aussehen :

body 
{ 
background-color:#464646; 
}

#Hauptbox 
{
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

Jetzt kommen wir zum HTML (später PHP)

Wir brauchen einen Kopf, der Informationen enthält. Der Titel heißt dort dann z.B "Zeraki Tutorial". Auch müssen wir im Kopf angeben wovon wir den "Style" haben. Diesen haben wir ya von unserer Css Datei. Und es ist ein Style, keine Funktion also brauchen wir für den Ref "Stylesheet". Auch ist es kein Javascript oder ähnliches, nein, es ist Css, also brauchen wir dort "text/css" Unser Kopf, also Head-Bereich sieht also so aus :

<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Jetzt brauchen wir den Body Bereich, den wir vorhin ya mit der Farbe Dunkelgrau versehen haben. In diesem Bereich ist nun unsere Box, mit den 3 Klassen. In dieser Box sind die Klassen, deshalb müssen wir auch die Klassen in die Box schreiben. Das sähe so aus. Am Schluss, wie gehabt unser Copyright.

<body>

<div id="Hauptbox">

<div class="header">
Hier kommt der Header rein. Egal ob Bild oder ähnliches.
</div>

<div class="inhalt">
Hier der Inhalt, oder die News, je nachdem.(:
</div>
<div class="info">
Dort ist die Info.
</div>
Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten. (Euer Copyright)
</div>

</body>

Glückwunsch! Ihr habt das "Grundgerüst" selbst programmiert. So sieht es bei mir aus :


3. Verfeinern
Da das noch nicht wirklich wie eine Homepage aussieht, geben wir der Homepage noch einen kleinen Feinschliff.

Wir sehen, es ist gar kein Rand da, sondern alles nur so eklig draufgeklatscht. Das ändern wir natürlich mit Padding. Mit 20 Pixel Abstand sollte es funktionieren. Also schreiben wir in unsere Hauptbox das hier : padding:20px;

In den anderen Boxen ist es auch so nah am Rand, also fügen wir auch dort das Padding ein, aber mit 10 -15 Pixeln, da es sonst zu breit wird.
Jetzt sieht es doch schon ordentlicher aus. Was aber doch noch fehlt ist eine gescheite Schriftart, Arial. Doch wenn wir einfach nur Arial nehmen ist sie zu groß. Also schrumpfen wir die Größe auf 10-12px. Das fügen wir in unseren Body-Tag :

font-size:12px;
font-family: "Arial", Verdana, sans;

Nun fügen wir das Copyright unten mal in die Mitte, da es sonst etwas "unbeholfen", will ich sagen, aussieht.
Also Centern wir es mit, wer hätte es gedacht <center>.

Das sieht in unserer HTML Datei dann so aus :

<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>

Die Überschriften wollen wir auch noch ändern, da diese uns nicht gefallen. Wir legen die h1 auf 17px fest und gehen dann immer einen 2px Schritt nach unten.

h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}

Jetzt sieht die Überschrift auch annehmbar aus.

Was wir jetzt reinhauen ist ein kleines Feature, damit ihr bei viel Text nicht 3 Kilometer lange Seiten habt. Es ist eine Art Textarea (große Textbox) welche wir modifizieren. Es wird wie oben in einer Div geschrieben,also nenne ich sie mal Scrolldiv.

.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}

Sieht schon gut aus. Jetzt braucht ihh nur noch einen Header (Bild), einen Server & News und dann könnt ihr aus diesem Thread, viele Funktionen einbauen :


Style.css

body 
{ 
font-size:12px;
font-family: "Arial", Verdana, sans;
background-color:#464646; 
}

#Hauptbox 
{
overflow:auto;
padding:20px;
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}


.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}

Index.html :

<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Hauptbox">

<div class="header">
Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein 

Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein 

Bild, oder ein Slogan.<p>
</div>

<div class="inhalt">
<h1>.:News - Flyff Server:.</h1>
<div class="scrolldiv">
Langer Text.
</div>
</div>
<div class="info">
<h1>Info</h1><hr> Infos kommen hierrein, bro!
</div>
<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>
</div>

</body>

Idee :


Ergebnis :


Und so kann man dann mit den PHP Skripten aufbauen.
4. Das Menü

Originally Posted by Vacation.

Hi :>
Erstmal: Danke, sehr nice Tutorial! :3 Das einzigste was fehlt, ist das Menü. Ja ich weis, dass wurde schon gepostet, dass das fehlt So jetzt meine Frage: Fügst du das noch ein, wenn du Zeit hast? Weil hab' alles mögliche probiert, bin eindeutig zu dämlich Das ist dann immer alles verschoben usw.
Danke schonmal im vorraus ;D

Das Menü ist eigentlich recht simpel aufgebaut. Das Menü an sich besteht aus reinem HTML, nur das Design werden wir mit CSS machen. Fangen wir an :
Da unser Menü nicht so SP-Like werden soll, machen wir ein recht simples Menü, welches auch zum Design passt.

<a href="LINK">TEXT</a>

So sieht ein normaler Link aus, welchen wir auch in einem Menü finden. Nun werden wir mehrere Links horizontal erstellen & mit dem | Zeichen trennen. Das könnte dann so aussehen :

<a href="#">HOME</a>|<a href="#">REGISTER</a>|<a href="#">RANK</a>|<a href="#">TEAM</a>|<a href="#">FORUM</a>

Wenn wir dies jetzt in unsere Index.html, zwischen dem Headerdiv und dem Inhaltsdiv, werden wir schnell merken, dass es ein wenig Buggy aussieht, da das Menü nun über der Infodiv ist. Also centern wir es, damit es in der Mitte steht.

<center>
<a href="#">HOME</a>|<a href="#">REGISTER</a>|<a href="#">RANK</a>|<a href="#">TEAM</a>|<a href="#">FORUM</a>
</center>

Nun ist das Menü eigentlich schon funktionsfähig, aber das Design sieht schrecklich aus, hässliches blau. Wir ändern es also in unserer css-Datei so, dass die Immer die gleiche Farbe haben, außer sie werden mit der Maus berührt. Es soll natürlich nur ein Text sein und keine Verzierungen, wie Unterstrichen oder Fett. Also Text-decoration:none;

a:link{
color:#464646;
text-decoration: none
}
a:visited{
color:#464646;
text-decoration: none
}
a:hover{color:#B4B4B4;
text-decoration: none
}
a:active{color:#464646;
text-decoration: none
}

Jetzt sieht es doch schon annehmbar aus. Was uns aber stört ist, dass zwischen den Trennlinien und den Links gar kein Platz ist, was etwas, ich sage mal beschämend aussieht. Also schmieren wir ein bisschen, was den Code angeht und erstellen eine neue Div in eurer Css-Datei. Meine sieht so aus :

#menu {
word-spacing: 3px;
}

Und das Menü fügt ihr wie oben schon dutzende mal erwähnt zwischen <div id ="menu"> und </div> ein.

So und um das Chaos noch zu vervollständigen, legt ihr in eurer CSS-Datei im Menüdiv noch float:right; fest, und löscht in eurer HTML Datei das Center. Jetzt sieht es doch annehmbar aus, nicht?

CSS CODE :

body 
{ 
font-size:12px;
font-family: "Arial", Verdana, sans;
background-color:#464646; 
}

#Hauptbox 
{
overflow:auto;
padding:20px;
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}


.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}


a:link{
color:#464646;
text-decoration: none
}
a:visited{
color:#464646;
text-decoration: none
}
a:hover{color:#B4B4B4;
text-decoration: none
}
a:active{color:#464646;
text-decoration: none
}

#menu {
float:right;
word-spacing: 3px;
}

HTML CODE :

<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Hauptbox">

<div class="header">
Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein 

Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein 

Bild, oder ein Slogan.<p>
</div>

<div id="menu">
<a href="#">HOME</a> | <a href="#">REGISTER</a> | <a href="#">RANK</a> | <a href="#">TEAM</a> | <a 

href="#">FORUM</a>
</div>

<div class="inhalt">
<h1>.:News - Flyff Server:.</h1>
<div class="scrolldiv">
Langer Text.
</div>
</div>
<div class="info">
<h1>Info</h1><hr> Infos kommen hierrein, bro!
</div>
<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>
</div>

</body>

Jetziges Ergebnis :

 Spoiler

5. Schlusswort
Ich hoffe es hat euch gefallen + geholfen. Bei fragen einfach Feedback + Frage geben und dann passt des.

~Greetings

[Deda94]

Nettes Tutorial, jetzt nurnoch Erweitern und es wäre Optimal

[Lucky´s]

Sehr schönes Tutorial!

MfG Lucky´s

[Rakinzon]

Gefällt mir, auch für die die nicht so fit in Html und CSS sind

[Jay Niize]

@Toxic : Inwiefern Erweitern? Neue Funktionen? Skripts? Was denn?

[dennisdra]

Vielleicht meint er die inkludierung Von php skripten etc

[©ross]

wenn ich an dein erstes tut denke... wow hast dich gemacht^^

Aufgrund dieser Vorlage, bzw aufgrund dieses HTML-Gerüstes kann man viel bewerkstelligen.

Klar, manche werden sagen das es eine "oft gesehenes" Struktur ist aber das ist nebensächlich da jeder das Gerüst selbst noch modifizieren kann.

Für HTML/PHP Quereinsteiger könntest du noch Links anhängen wie zb zu oder aber
Ebenso zu CSS-Tutorialen (spez: -moz_* / -khtml_* etc also den Browserspezifizierungen)

Finde es ehrlichgesagt das jemand, neben dem sinnfreien geflame hier auf epvp, noch etwas nützliches für unsere Neueinsteiger zeigt.


So ihr dürft diesen post nun mit steinen bewerfen das ich quark rede und es kacka ausschaut ABER es ist meine Meinung und nicht die eure

[Deda94]

Originally Posted by .Zeraki'

@Toxic : Inwiefern Erweitern? Neue Funktionen? Skripts? Was denn?

Mehr in PHP eingehen, paar Skripte als Beispiele.

[©ross]

@Toxic: Vom prinzip her ist es ja:
Script A in datei B unter /script/
in der index.php (hier muss bzw sollte die dateiendung geändert werden)
an der stelle wo man die ausgabe haben möchte ein:

PHP Code:

include("/script/b.php"); 


und fertig währe es.

Aber ich weis was du meinst bzw worauf du hinaus möchtest^^ Sollte nur ein beispiel sein wie man es sich als anfänger logisch nachvollziehbar machen kann

[yannickFlyff]

Sollte geclosed werden.

Was ist der Unterschied zwischen einer Flyff homepage und einer Metin2 Homepage? Rein vom HTML / CSS / PHp Code her? Gibt keinen!

Gehört in den Web Programmierungsbereich.

[Jay Niize]

@Yannick : Das hier ist nur nen normaler Thread. Schau mal im Main Forum nach, da is nen Thread wie man die SuFu benutzt & der is sticked Oo

@Topic : Falls ich demnächst mal Zeit habe, werde ich auch auf die PHP Skripte näher zugehen. Danke schonmal für euer Feedback.

btw. Ich seh' grad ich hab des Menü vergessen hab. ;p

[.Akiro™]

Super Tutorial!

Mfg .Akiro™.

[.Twiz]

Wirklich gutes Tutorial , schön dass sich jemand noch so die Mühe für etwas gibt

[xFruchti.]

Mal jmd der nix releast oder was macht um anzugeben ;D

Villt könntes du das mit dem #slider u.s.w zeigen das ist doch auch nicht schwer

[Jay Niize]

So.. Ich hab das Menü mal mit rein geschrieben, ich werde bald auch noch ne kleine Einführung in PHP machen. Bitte Feedback geben.

@Tremby : Der Slide bezieht sich ja hauptsächlich auf Javaskript, was ich nur in kleinen Mengen behersche.