Tutorialbeschreibung

Homepage mit HTML und CSS

Homepage mit HTML und CSS

Vorabinfos:
Ich weiß, dieses Tutorial enthält ziemlich viel Text und wenig Bilder.
Ich hoffe, dass ihr trotzdem nicht den Überblick verliert.
Die Erstellung der grafischen Elemente wird nicht erklärt.

Der von mir vorgegebene Code ist nur als Beispiel gedacht. Seid kreativ, passt ihn selbst an.

Schritt 1:
Zuerst erstellen wir in einem Verzeichnis die Dokumente und Ordner:
- index.html
- style.css
- Ordner: "images"
Da nicht alle Webspace mit PHP haben, halte ich dieses Tutorial nur in HTML.

Schritt 2:
Jetzt geht es darum, zu überlegen, wie die Seite später einmal ungefähr aussehen soll. Dazu am besten eine Skizze erstellen. Inspirationen könnt ihr zB auf dieser Seite finden:
HomepageDiscounter.de
Hier ist meine Skizze:
Bilder

Die Skizze muss natürlich nicht perfekt sein. Es geht nur darum, immer vor Augen zu haben, wie die Seite am Ende aussehen soll.

Schritt 3:
Jetzt solltet ihr entscheiden, in welchem Farbstil die Seite gehalten werden soll.
Eine Große Hilfe dabei ist www.colormatch.dk (nur mit dem Internet Explorer benutzbar!) Ich habe mich in Sachen Farben für Rot-Weiß entschieden. Das bleibt aber jedem selbst überlassen.

Schritt 4:

Die schon erwähnten Dokumente „index.html“ und „style.css“ öffnet ihr jetzt mit dem Editor oder einem HTML-Editor.
index.html:
Hier erstellen wir erstmal das Grundgerüst:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

 


<html>

 


 
<head>

 


  
<title>///Titel der Seite///</title>
   
<link rel="stylesheet" type="text/css" href="style.css"> /// Link zu dem Stylesheet

 


   
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

 


 
</head>
 
<body>
 
</body>
</html>
Erläuterungen:
Der obere Teil ist die Dokumenttyp-Deklaration.
Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen.
In den Bereich zwischen den beiden Tags <head> und </head> werden die Kopfdaten notiert. (Titel, Stylesheet, ...)
Anschließend kommt der <body>-Bereich, in den der Inhalt der Seite kommt.

style.css:
body{
font-family: Arial;
font-size: 10pt;
background-image: url(images/body_bg.gif);
oder

 


background-color: #FFFFFF;

 


color: black;

 


}

 

a:link {

 


text-decoration:underline;

 


color: black;

 


}

 

a:visited {

 


text-decoration:underline;

 


color: black;

 


}

 

a:active {

 


text-decoration:underline;

 


color: black;

 


}

 



a:hover {

 


text-decoration:underline;

 


color: #660000;
}

Erläuterungen:
Im Body-Bereich werden sämtliche html-weiten Einstellungen zusammengefasst, d.h. diese EInstellungen gelten für das gesamte Dokument.
font-family: Schriftart
font-size: Schriftgröße
background-image bzw background-color: Hintergrundbild / Hintergrundfarbe
color: Schriftfarbe
Auch die Standard-Links werden definiert.
text-decoration: Textdekoration

Bisher brauchen wir noch keine grafischen Elemente, außer dem Hintergrundbild, falls eines verwendet wird.
Mein Hintergrundbild:
Bilder


Schritt 5:
Realisierung des Grundaufbaus:
Um unseren Grundaufbau umzusetzen brauchen wir fast nur das CSS-Dokument.
Wir erstellen in dem CSS-Dokument erstmal die „Hauptbox“:
#box{

 


width: 80%;

 


margin: 0px auto;

 


padding: 10px;

 


background-color: white;

 


border: 1px solid black;
}

Erläuterungen:
CSS ermöglicht das Layouten von Webseiten ohne Tabellen bzw. Frames. Es gilt heute als moderner.
#box{ - hier wird der Name des div-Containers festgelegt.
width - breite
margin: Außenabstand
padding: Innenabstände
background-color: Hintergrundfarbe (alternative: Hintergrundbild (background-image: url(images/body_bg.gif))
border: Kontur

Nun erstellen wir noch den Header:
#header{
margin: 0px auto;

 


background-image: url(images/header.png);

 


background-repeat: no-repeat;

 


height: 80px;

 


border: 1px solid black;
}

Erläuterungen (oben bereits vorhandene Tags werden nicht erneut erläutert):
background-repeat: Hintergrund wiederholen
height: Höhe

In die HTML-Datei muss jetzt nur folgender Code rein;
<div id="box">
  <div id="header">
  </div>
</div>

Zum Header:
Der Header sollte schön breit sein, damit auch Besucher mit hohen Auflösungen keine Wiederholung des Headers haben.
Ich habe 1400px Breite, 80px Höhe benutzt. Die Höhe muss 80px betragen, da die Headerhöhe genau festgelegt ist.
Mein Header (klick to enlarge):
Bilder


Schritt 6:
Nun zum Menü:
Es gibt tausende Möglichkeiten, ein Menü zu erstellen. Hier erstellen wir ein simples horizontales Menü mit Textlinks.

In die CSS-Datei kommt dieser Code rein:
#menu{
font-size: 8pt;
font-weight: bold;
margin: 5px auto;
padding: 0px;
background-color: white;
border: 1px solid black;
}



a.menulink {
text-decoration:none;
color: #660000;
font-weight: bold;
}



a.menulink:link {
text-decoration:none;
color: #660000;
font-weight: bold;
}



a.menulink:visited {
text-decoration:none;
color: #660000;
font-weight: bold;
}



a.menulink:active {
text-decoration:none;
color: #660000;
font-weight: bold;
}



a.menulink:hover {
color: #333333;
text-decoration:none;
font-weight: bold;
}

Erläuterungen:
font-weight: Schriftgewicht (Schrift fett formatieren)
text-decoration: Textdekoration (unterstrichen, ...)

Im HTML-Code kommt nun nach dem Ende des Header-Containers dieser Code rein:
  <div id="menu">
<table width="100%">
        <tr>
           <td><a href="#" class="menulink">Menüpunkt 1</a></td>
           <td><a href="#" class="menulink">Menüpunkt 2</a></td>
           <td><a href="#" class="menulink">Menüpunkt 3</a></td>
           <td><a href="#" class="menulink">Menüpunkt 4</a></td>
           <td><a href="#" class="menulink">Menüpunkt 5</a></td>
           <td><a href="#" class="menulink">Menüpunkt 6</a></td>
           <td><a href="#" class="menulink">Menüpunkt 7</a></td>
           <td><a href="#" class="menulink">Menüpunkt 8</a></td>
        </tr>
      </table>
  </div>

Bei dem Menü helfen wir uns mit einer Tabelle. Tabellen haben auch Vorteile.

Erläuterungen:
class="menulink": hier wird der Link-Style aus dem CSS-Dokument den Menülinks zugeordnet.

Schritt 7:
Jetzt geht es an den Inhaltsteil.
Erstmal wollen wir eine schöne Überschrift, die sich vom restlichen Inhalt absetzt.
Dazu erstmal in den CSS-Code diesen Code einfügen:

#main{
margin: 5px auto;
padding: 5px;
background-color: white;
border: 1px solid black;
}



h1 {
font-size: 10pt;
font-weight: bold;
margin: 0px;
}

 



Erläuterung:
hi {: Hier wird unsere Überschrift "gestylet".

In den HTML Code muss wieder nur wenig:
<div id="main">
<h1>Überschrift</h1>
</div>

Da sich der Content vom restlichen absetzen soll, bekommt dieser nochmal einen eigenen div-Container:

#inhalt{
margin: 5px auto;
padding: 10px;
background-color: #993333;
color: white;
border: 1px solid black;
}

 



In den HTML-Code:
<div id="inhalt">
<span>
Hier könnt ihr jetzt euren Inhalt einfügen. Da keine Mindesthöhe festgelegt wurde, vergesst bei Seiten mit wenig Inhalt nicht, ein paar Zeilenumbrüche - <br> - zu setzen!
</span>
</div>

So, damit ist der Grundaufbau der Seite gemacht.
Wenn ihr nicht genau wisst, wo die Code-Teile hinkommen, schaut in meinem
Beispiel
nach.
Falls ein Tutorial darüber, wie ihr Inhalt usw einfügen könnt erwünscht ist, bitte schreibt mir.
Bei sonstigen Fragen, könnt ihr mir eine PM, eine eMail oder ein Kommentar schreiben, oder mich in ICQ adden (276-276-368)
Ich hoffe, euch hat das Tutorial gefallen, Kritik ist natürlich erwünscht.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.01.2007 - 00:05

klasse sache!!! echt 5punkte wert.
man kann sofort durchsteigen und man checkt, dass der einstieg überahupt nicht so kopliziert ist wie des zb. bei self-html rüberkommt

Portrait von jus
jus
  • 02.01.2007 - 13:26

einfahc super tut!!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.12.2006 - 14:45

Echt wirklich ein nice Tut, gefällt mir sehr 5Pkt!^^.
Ich habe das mal nachgebaut mit dem code und so, aber ich komme auf den fehler das die Box ganz am hintergrund nur oben im header bleibt, und wenn ich die von der höhe erweitern will nach unten, damit sie die ganze page einrahmt zieht sich die ganze page nach unten, und ich finde den fehler net weiß wer weiter?

Portrait von halligalli
  • 03.12.2006 - 13:45

wirklich sehr gut beschrieben und erläutert, 1-2 bilderchen würden nicht schaden ;)

Portrait von Batman06
  • 08.11.2006 - 13:26

Sehr schönes Tutorial.
Wird alles gut auf einen Punkt gebracht und hat echt schöne Ansätze

Portrait von kev52
  • 13.09.2006 - 12:06

net übel thx war sehr hilfreich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.09.2006 - 18:01

einwandfrei. wirklich gut erklärt.
wenn nur alle tuts so wären

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.09.2006 - 19:35

geilo... ein HTML Tut



mehr als 5 Punkte wert...

Portrait von Bargo
  • 06.09.2006 - 12:56

Echt super das tut nur funktioniert der Beispiel link bei mir nicht. und am Schluss hättest noch mal den code des css DAtei im ganzen reinstellen können

trotzdem super gemacht und 5 Punkte

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.08.2006 - 19:25

Finde euch, dass das ein verdammt gutes Tut ist.
Es ist nicht all zu lang und enthält alles Wichtige für den Grundaufbau.

Portrait von crazy_freestyle
  • 18.07.2006 - 13:03

Super Tut, einfach und klar. Werde ich öfter darauf zurückgreifen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.05.2006 - 20:19

Nettes Tut! 5 Punkte.

Portrait von Troete
  • 26.05.2006 - 09:59

perfekt ! ... genau so etwas suche ich schon ewigkeiten !! ... aber hättest du auch nochmal lust n bisschen näher auf php einzugehen ? ... also ich fänd es sehr interressant z.b. ein gästebuch einzubinden (also wie man das schreibt kann man ja auch in den referenzquellen erfahren, aber diesen code dann mit einzubinden fände ich interressant icon_smile.gif)

sonst natürlich 5 punkte alle super klasser erklärt, viel besser gehts kaum icon_smile.gif 5pkt#

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.05.2006 - 12:25

Super echt da ich aber leider noch nicht so viel über html weis sieht das alles echt kompliziert aus ich werde mich aber dransetzen und alles mal machen^^

Danke echt gute Arbeit!

Portrait von dute
  • 18.05.2006 - 11:56

Gut gemacht, ein leichter Einstig für mich um nicht durch tausende selfhtml Seiten zu klicken.

Gruß dute

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.04.2006 - 11:45

nice tut die Grundlagen werden schön erläutert ob jeder div besser ist wie table kann man wieder streiten is einfach nur ansichtssache in meinen augen

Portrait von mobi
  • 06.04.2006 - 11:41

Super Tut gut erklärt full points

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.04.2006 - 17:21

Richtig gut beschrieben, hab auch gerade damit bearbeitet, die Grundlagen werden daraus denk ich mal deutlich!

Portrait von SparkAmandil
  • 20.03.2006 - 00:42

Sehr gut und ausführlich.
Deine Entschuldigung von wegen wenigen Bildern kann ich nur beschwichtigen. Ich wüsste nicht wo man da noch mehr Bilder einbringen sollte. Ist auf jedenfall sehr gut gemacht und dafür gebe ich wirklich gerne die vollen Punkte :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.03.2006 - 13:13

Achso! Das ist als background-image.
dann nehm ich den vorherigen kommentar zurück.
Mein Fehler.

Mehr anzeigen

x
×
×