Tipps & Kurse

Website erstellen

Website erstellen

Mit Hilfe dieser Anleitung erstellen Sie eine professionelle Website mittels HTML und CSS.

Ein professionelles Internetprojekt mit HTML und CSS erstellen

Arbeitsschritte:

  1. Erstellung eines funktionalen und übersichtlichen Layouts
  2. Das Design
  3. Musterseite mit HTML und CSS erzeugen (strikte Trennung zwischen Gerüst der Seite und Formatierung)
  4. Test
  5. Die gewünschten Seiten erzeugen und untereinander verlinken
  6. Seiten mit Inhalte füllen
  7. Optimierung der Seiten für Suchmaschinen
  8. Test
  9. Der Upload
  10. Test
  11. Suchmaschinenregistrierung
  12. Marketing

Erstellung eines funktionalen und übersichtlichen Layouts

Wir skizzieren auf einem Blatt Papier in realistischen Proportionen die Bereiche unseres Internetprojektes. Wichtig dabei ist folgende Überlegungen zu berücksichtigen:

  1. Funktionale und übersichtliche Navigation
  2. Ein Aufbau, welcher auch für die verschiedensten Bildschirmauflösungen geeignet ist
  3. Entscheidung: absolute Breite oder dynamische Breite

Ergebnis:

kursunterlagen/websiteerstellen/skizze.gif

Das Design

Wir überlegen uns was wir mit dem Internetprojekt bewirken wollen, welche Zielgruppe wir ansprechen wollen, was wir marketingtechnisch umsetzen wollen, was die Kernaussage unseres Internetprojektes ist. Daraus und mit Hilfe geeigneter Tools leiten wir ein Farbschema für unser Design ab.

Hilfen: www.wellstyled.com/tools (Tools zum Finden von Farbkombinationen)

Nun kombinieren wir Farbschema, Logos und design- und/oder marketingtechnisch wichtige Produktfotos mit dem Layout zu einem fertigen Entwurf.

Ergebnis:

kursunterlagen/websiteerstellen/design.jpg

Musterseite mit HTML und CSS erzeugen (strikte Trennung zwischen Gerüst der Seite und Formatierung)

Das Grundgerüst mit HTML

Wir erstellen eine Textdatei mit Hilfe eines Texteditors oder eines WYSIWYG-Editors wie z.B. Frontpage. Diese Datei speichern wir mit dem Namen musterseite.html in einen Order z.B. www ab. Dieser Ordner soll ab jetzt alle Dateien zum Projekt aufnehmen.

Hilfen: http://de.selfhtml.org (Deutsche HTML und CSS Dokumentation)

Textdatei Inhalt:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
„http://www.w3.org/TR/html4/loose.dtd“>

<html>

<head>
<meta http-equiv=“Content-Language“ content=“de“>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1252″>
<meta name=“description“ content=“Kurze Zusammenfassung des Inhalts“>
<meta name=“keywords“ content=“Stichwort1, Stichwort2″>
<title>Bezeichnung der Seite</title>

</head>

<body>

<table id=“gesamt“>
<tr>
<td colspan=“2″ id=“logo“>&nbsp;</td>
<td colspan=“2″ id=“slogan“>Wasser Quell des Lebens</td>
</tr>
<tr>
<td colspan=“2″ id=“balken“>&nbsp;</td>
<td colspan=“2″ id=“navigationhorizontal“>Home | Kontakt | Anfahrt | Impressum | Privacy | DE | IT | EN</td>
</tr>
<tr>
<td id=“streifen“>&nbsp;</td>
<td id=“navigationvertikal“>
<p>Produkte</p>
</p>Leistungen</p>
<p>Referenzen</p>
<p>Partner</p>
</td>
<td id=“inhalt“>
<h1>Überschrift</h1>
<h2>Untertitel oder Teaser</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</td>
<td id=“infos“>Infos</td>
</tr>
</table>

</body>

</html>

Erklärung:

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

  1. Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  2. Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)
  3. Body (Körper – anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Im Körper erstellen wir eine Tabelle, welche wir mit einer eindeutigen Benennung (id) kennzeichnen. Die einzelnen Zellen der Tabelle kennzeichnen wir ebenfalls mit eindeutigen Ids. Über diese Kennzeichnungen können wir später Elemente die Formatierung festlegen.

Aufgepasst: Auf keinen Fall irgend welche Formatierung vornehmen, da wir die gesamte Formatierung über eine zentrale CSS-Datei steuern möchten.

Die Formatierung mit CSS

Wir erstellen eine Textdatei mit Hilfe eines Texteditors oder eines WYSIWYG-Editors wie z.B. Frontpage. Diese Datei speichern wir mit dem Namen format.css wiederum im Ordner www ab.

Hilfen: http://de.selfhtml.org  (Deutsche HTML und CSS Dokumentation)

Textdatei Inhalt:

#gesamt {
margin: auto;
border-collapse:collapse;
background-color: #B1D3EC;
}

#gesamt td {
border: 1px solid #808080;
}

#logo {
width: 200px;
height: 130px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
}

#slogan {
width: 600px;
height: 130px;
}

#balken {
width: 200px;
height: 35px;
background-color: #819AAC;
}

#navigationhorizontal {
width: 600px;
height: 35px;
background-color: #819AAC;
}

#streifen {
width: 12px;
}

#navigationvertikal {
width: 188px;
vertical-align: top;
background-color: #6CAAD9;
}

#inhalt {
width: 450px;
vertical-align: top;
}

#infos {
width: 150px;
vertical-align: top;
}

body {
font-family: tahoma, arial;
}

h1 {
color: #906A60;
font-size: 130%;
font-variant:small-caps
}

h2 {
color: #607C90;
font-size: 110%;
}

Kombination HTML und CSS

Nun referenzieren wir mit folgender Zeile, im Kopfbereich der HTML-Datei, die eben erstellte CSS-Datei:

<link rel=“stylesheet“ type=“text/css“ href=“format.css“>

Test

Es ist sehr wichtig dauernd zu testen. Wir öffnen die Musterseite mit verschiedenen Browsern (Internet Explorer, Firefox, usw.) und schalten zwischen verschiedenen Schriftgrößen im Browser und Bildschirmauflösungen (800×600, 1024×768, 1280×768, usw.) im Betriebssystem um. Ideal wäre wenn man dies auch mit verschiedenen Betriebssystemen und Browserversionen machen könnte. Außerdem testen wir wie sich unser Layout verhält, wenn in den verschiedenen Bereichen (Kopfbereich, Navigationsbereich, Inhaltsbereich viel Text  und große Bilder eingefügt werden.

Hilfen: www.lipsum.com (Generator für Platzhaltertexte)

Validieren!

Die gewünschten Seiten erzeugen und untereinander verlinken

Bevor wir aus der Musterseite die gewünschten Seiten unseres Internetprojektes erzeugen, überlegen wir uns für jede gewünschte Seite einen Dateinamen. Achtung dabei sollte man auf Sonderzeichen verzichten und am besten alles Kleinbuchstaben verwenden (Unix-Server machen zwischen Groß- und Kleinbuchstaben einen Unterschied). Außerdem ist zu berücksichtigen, dass die Startseite index.html heißen muss, damit der Web-Server diese als solche erkennt.

Nun erzeugen wir aus den Menüpunkten in den Navigationsbereichen Hyperlinks und achten darauf, dass wir die zuvor überlegen Dateinamen exakt einhalten!

Die einzelnen Seiten unseres Internetprojektes erzeugen wir, indem wir jeweils eine Kopie der Datei musterseite.html anlegen. Diese Kopien müssen exakt die Dateinamen, welche wir uns zuvor überlegt haben, erhalten und im Ordner www abgelegt werden.

Selbstverständlich sollten wir alle Verlinkungen im Browser testen. Eventuell können wir nun auch noch die Formatierung der Hyperlinks in der CSS-Datei format.css ändern:

a {
text-decoration: none;
color: #FFFFFF;
}

a:hover {
color: #000000;
}

#navigationvertikal a {
font-size: 110%;
}

#navigationvertikal p {
border: 1px solid #819AAC;
margin: 5px;
padding: 5px;
}

Seiten mit Inhalte füllen

Nun kann jede einzelne HTML-Datei mit den entsprechenden Inhalten gefüllt werden. Achtung: Bilder düfen nicht breiter als die Inhaltsspalte sein, da diese sich sonst verbreitert! Außerdem sollte jede Datei, auch die Bilddateien, im Ordner www oder in einem Unterordner landen und es muss darauf geachtet werden, dass bei der Referenzierung relative Pfade entstehen, da andernfalls nach erfolgten Upload die Verlinkungen nicht mehr funktionieren werden. Hier ist peinliche Sorgfalt unbedingt angebracht!

Optimierung der Seiten für Suchmaschinen

Nun da alle Seiten mit den richtigen Inhalten gefüllt wurden überlegen wir uns für jede Seite zwei bis drei charakteristische Kernwörter und optimieren den Inhalt und die Programmierung (Meta Tags) bzgl. dieser Wörter.

Test

Bevor wir das Internetprojekt abschließen, testen wir es nochmals auf Herz und Nieren und nehmen eventuell noch Änderungen in der Formatierung und im Inhalt vor.

Endergebnis:

kursunterlagen/websiteerstellen/ergebnis.jpg

HTML:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
„http://www.w3.org/TR/html4/loose.dtd“>

<html>

<head>
<meta http-equiv=“Content-Language“ content=“de“>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1252″>
<meta name=“description“ content=“Kurze Zusammenfassung des Inhalts“>
<meta name=“keywords“ content=“Stichwort1, Stichwort2″>
<title>Wasser Quell des Lebens</title>
<link rel=“stylesheet“ type=“text/css“ href=“format.css“>
</head>

<body>

<table id=“gesamt“>
<tr>
<td colspan=“2″ id=“logo“>&nbsp;</td>
<td colspan=“2″ id=“slogan“>Wasser Quell des Lebens</td>
</tr>
<tr>
<td colspan=“2″ id=“balken“>&nbsp;</td>
<td colspan=“2″ id=“navigationhorizontal“>
<a href=“index.html“>Home</a> |
<a href=“kontakt.html“>Kontakt</a> | <a href=“anfahrt.html“>Anfahrt</a> |
<a href=“impressum.html“>Impressum</a> | <a href=“privacy.html“>Privacy</a> |
<a href=“index.html“>DE</a> | <a href=“index-it.html“>IT</a> |
<a href=“index-en.html“>EN</a>
</td>
</tr>
<tr>
<td id=“streifen“>&nbsp;</td>
<td id=“navigationvertikal“>
<p><a href=“produkte.html“>Produkte</a></p>
<p><a href=“leistungen.html“>Leistungen</a></p>
<p><a href=“referenzen.html“>Referenzen</a></p>
<p><a href=“partner.html“>Partner</a></p>
</td>
<td id=“inhalt“>
<h1>Willkommen</h1>
<h2>bei Wasser Quell des Lebens GmbH. Produkte rund ums Trinkwasser.</h2>
<p>Große Teile der Erde sind vom Wasser bedeckt, wobei dies besonders
auf der Südhalbkugel der Fall ist und sich als Extrem an der
Wasserhalbkugel zeigt. Die Versorgung der Weltbevölkerung mit hygienisch
und toxikologisch unbedenklichem Trinkwasser, sowie einer ausreichenden
Menge Nutzwasser, stellt eine der größten Herausforderungen der
Menschheit in den nächsten Jahrzehnten dar.<p class=“Bemerkung“>(Auszug aus
<a target=“_blank“ href=“http://de.wikipedia.org/wiki/Wasser“>Wikipedia</a>,
der freien Enzyklopädie)</p>
<h2><img class=“Bild“ src=“wasser.jpg“ alt=“Wasserblasen“>Rund ums Trinkswasser</h2>
<p>Unser Sortiment an Produkten macht es möglich
das köstliche Nass jederzeit zu genießen. Befreien Sie das Wasser aus
Ihrer Leitung von Verunreinigungen chemischer und biologischer Natur…
[<a href=“produkte.html“>weiterlesen</a>]</p>
</td>
<td id=“infos“>
<p>Infos</p>
<p>Am 10.12.2005 kommt der Neue!</p>
<p>Besuchen Sie uns am 15.12.2005 auf der Messe Berlin. Stand 13A, Halle 7.</p>
<p>Wir suchen Partner fürs Online-Marketing. Wenn Sie an einer
gegenseitigen Verlinkung interessiert sind, Ihren und unseren PageRank
zu verbessern, dann kontaktieren Sie uns.</p>
</td>
</tr>
</table>
</body>

</html>

CSS:

#gesamt {
margin: auto;
width: 800px;
border-collapse:collapse;
background-color: #B1D3EC;
}

#gesamt td {
border: 1px solid #808080;
}

#logo {
width: 200px;
height: 130px;
background-image:url(logo.jpg);
background-repeat:no-repeat;
}

#slogan {
width: 600px;
height: 130px;
font-family: Comic Sans MS;
font-size: 160%;
color: #FFFFFF;
}

#balken {
width: 200px;
height: 35px;
background-color: #819AAC;
}

#navigationhorizontal {
width: 600px;
height: 35px;
background-color: #819AAC;
}

#streifen {
width: 12px;
}

#navigationvertikal {
width: 188px;
vertical-align: top;
background-color: #6CAAD9;
}

#inhalt {
width: 430px;
vertical-align: top;
padding: 10px;
}

#infos {
width: 150px;
vertical-align: top;
padding-left: 2px;
color: #607C90;
font-size: 80%;
}

body {
font-family: tahoma, arial;
}

h1 {
color: #906A60;
font-size: 130%;
font-variant:small-caps
}

h2 {
color: #607C90;
font-size: 110%;
}

a {
text-decoration: none;
color: #FFFFFF;
}

a:hover {
color: #000000;
}

#navigationvertikal a {
font-size: 110%;
}

#navigationvertikal p {
border: 1px solid #819AAC;
margin: 5px;
padding: 5px;
}

.Bemerkung {
font-size: 90%;
text-align: right;
font-style: italic;
}

.Bild {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
}

Fertiges Beispiel: www.compusol.it/wasserquelldeslebens

Der Upload

Jetzt muss der Inhalt des Ordners www ins Internet in einem so genannten Webspace (Speicherplatz auf einem Web-Server) abgelegt werden. Hierfür benutzen wir einen Freeware FTP-Client wie z.B. FileZilla (http://www.filezilla.de/)

In FileZilla muss folgendes eingestellt werden:

  • Host (FTP-Server)
  • Benutzername
  • Passwort

Nach erfolgter Verbindung können wir einfach die Dateien aus dem Order www in den Webspace „uploaden“ indem wir Sie einfach vom linken Fenster ins rechte Fenster ziehen.

Test

Nun sollten wir das gesamte Internetprojekt nicht nur Online testen, sondern eventuell auch eine HTML-Validierung unter http://validator.w3.org/ und eine CSS-Validierung unter http://jigsaw.w3.org/css-validator vornehmen. Sollte die HTML-und die CSS-Datei Fehler aufweisen korrigieren wir sie. Durch diesen Vorgang gewährleisten wir eine korrekte HTML- und CSS-Syntax.

Suchmaschinenregistrierung

Nun registrieren wir unser Projekt bei den bekanntesten Suchmaschinen. Leider gibt es keine Garantie, dass die Registrierung auch eine Aufnahme in den Index bewirkt. Viele Suchmaschinen achten weniger auf eine manuelle Registrierung, sondern vielmehr darauf, dass es im Internet Hyperlinks gibt, welche auf das neue Projekt zeigen. Darum bemühen wir uns Partner zu finden, welche bereit sind eine Verlinkung zu unserem Internetprojekt in Ihr Internetprojekt einzubauen.

Marketing

Nun können wir uns noch überlegen ob wir Werbeschaltungen (Banner oder Content-Werbung) in unsere Internetprojekt aufnehmen wollen um damit ein zwei Euro zu verdienen oder um durch die Gegenleistung einer Verlinkung unser PageRank zu verbessern.