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)
  • 30.10.2007 - 17:14

jap mir auch top arbeit ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.10.2007 - 20:59

Super Tutorial, hat mir sehr geholfen, danke!

Portrait von Dani123
  • 02.10.2007 - 15:48

zum einstieg ganz hilfreich, thx =)

Portrait von aku28
  • 02.09.2007 - 02:49

Das Tutorial hat mir sehr geholfen. Danke

Portrait von SND-Syndrome
  • 27.08.2007 - 20:41

Danke....ist ein sehr guter Einstieg;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.08.2007 - 15:57

jop stimmt, echt gut für einstieger

Portrait von Makaveli2k6
  • 16.08.2007 - 23:58

Super Tutorial. Perfekt für CSS Einsteiger.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.08.2007 - 05:10

Das Tutorial hilft einen sehr

Portrait von Noob01
  • 12.07.2007 - 14:58

super hilfreich
danke

Portrait von cristensen
  • 01.07.2007 - 00:24

afr0kalypse warum versuchst du es nicht mal mit listen darzustellen? Was ist dabei der unterschied? bin ein noob !
finde das tutorial ganz gut beschrieben !

Portrait von afr0kalypse
  • 13.06.2007 - 11:44

hi^^ schönes tutorial. ABER nur 3 * weil: barrierefreiheit ist zZ ein ziemlich wichtiges thema im internet. daher soll man ja auch mit css arbeiten anstatt direkt in html das design zu machen. zudem gibts noch so sachen wie 'listen anstatt tabellen' so lange es sich vermeiden lässt. hier hätte ich gerne zB ne liste in deinem menü gesehen.

trotzdem schönes tutorial.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.05.2007 - 18:57

es ist gut beschrieben und ich werde mich nun
auch mal an HTML drantrauen und es probieren

Portrait von ZackBag
  • 05.05.2007 - 21:01

Hey, cool, genau sowas brauch man hier :) ...
Von mir 5 Sterne!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.04.2007 - 16:32

Super 5 Sterne von mir

Portrait von wurst725
  • 12.03.2007 - 21:43

Super verständlich, auch für Laien. Weiter so.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.04.2007 - 20:16

Das tut ist echt super es hat mir sehr Geholfen weiter so!!

Portrait von razerv3
  • 20.02.2007 - 13:10

Super Tut hast dir echt mühe gegeben 5 Punkte

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.02.2007 - 14:50

danke, werde bestimmt mal brauchen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.01.2007 - 18:11

woaw!
hast du schön gemacht ^^
bei mir klappts fast genau so, wie dus beschrieben hast, aber nur fast... zuerst dachte ich ich habe mich verschrieben und habe dannach deine Codes (?) kopiert und bei mir eingefügt, aber irgendwie klappts net ganz so wie auf deiner beispiel seite... hmmm...
4/5

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.01.2007 - 02:19

echt genial..
hat mir sehr geholfen !
weiter so ! werde mich daran setzten und auch rumprobieren ! :D

Mehr anzeigen

x
×
×