HPCO   HTML,
  PHP,
    CSS – ORGANISIERT 		  Beta3 – April 2006

Einige Tipps

Hier sind einige Tipps und Tricks aufgelistet, die im Zuge der Erstellung der Sites hilfreich waren. Da es (leider) keine "Bibel für Alles" gibt, stimmen diese Angaben hier nicht immer mit den Angaben in der Literatur überein, sind jedoch allesamt überprüft worden. Die Tipps sind allgemeingültig, d.h. auch unabhängig von den HPCO-Sites. Für Profis sind diese Tipps eher uninteressant, da sie für Ein- und Aufsteiger verfasst worden sind.

Diese Seite ist aufgegliedert in
  1. Tipps zu HTML
  2. Tipps zu PHP
  3. Tipps zu CSS
  4. Tipps zur Organisation
  5. Literatur

A. HTML

1. Keine Formatierung in den HTML-Dateien

Generell sollte auf Formatierungsanweisungen in HTML-Dateien verzichtet werden. Sämtliche Formatierungen lassen sich über CSS bewerkstelligen. Leider sind die meisten Beispiele in der SELFHTML-Referenz mit direkter Formatierung versehen. Bitte davon Abstand nehmen.

2. Kommentare

Kommentare in HTML werden immer mit <!-- begonnen und durch -> beendet. 
     <!-- Ein Kommentar in HTML ->

3. Verschachtelte Listen

Zur Darstellung mehrstufiger Menüs werden gerne verschachtelte Listen herangezogen. Dabei ist zu beachten, dass bei Beginn einer Unterverschachtelung das einzelne Listenelement nicht geschlossen wird.

Falsch ist also: 
   <ul> 
      <li>Punkt 1</li> 
         <ul>
            <li>Unterpunkt</li>
         </ul>
      <li>Punkt 2</li>       
   </ul>

Richtig ist hingegen:

   <ul>
      <li>Punkt 1
         <ul>
            <li>Unterpunkt</li>
         </ul>
      </li>
      <li>Punkt 2</li>
   </ul>

Einbinden von Dateien

Das Unterteilen von HTML-Dateien (in kleinere Dateien) und Einbinden mit include o.ä. ist im Sprachumfang von HTML nicht vorgesehen. Dazu müssen Sie dann PHP benutzen.

B. PHP

1. Umschalten in den PHP-Modus

Das Umschalten vom HTML- in den PHP-Modus erfolgt durch 
 <?php
und zurück mit 
 ?>

2. Das Einbinden von Dateien

Dateien werden einfach über 
  include dateiname
eingebunden. Dabei gelten die normalen Referenzierungsregeln.

X. Weiteres

Schlagworte: Querystring, Session, Cookies, ... Wer möchte hier was schreiben?

C. CSS

Hier die CSS-Tipps zusammengefasst. Diese Tricks & Tricks stammen aus der Praxis (und stimmen daher nicht unbedingt mit den offiziellen Angaben überein).

1. Unterschiedliche Randeinstellungen der Browser

Um von vorneherein die unterschiedlichen Randeinstellung der Browser zu umgehen, sollte man zu Beginn der CSS-Datei die Ränder und Wattierungen (Margins und Paddings) auf Null setzen. 
  body {
      margin: 0px;
      padding: 0px;
    }

2. Einbinden weiterer CSS-Dateien (Aufteilen einer CSS-Datei)

Falls die css-Datei zu groß werden sollte, so kann man sie aufteilen und innerhalb der CSS-Datei weitere Dateien einbinden: 
   @import url(hpcobase.css);

3. Einstellen der Ränder mit einer Anweisung

Die Ränder können ja einzeln mit margin-left, margin-right, margin-top, und margin-bottom eingestellt werden etc. eingestellt werden. Die Reihenfolge lautet oben-rechts-unten-links! 
 margin: 0px 5px 8px 12px;
Diese Anweisung legt den Rand folgendermaßen fest: Die gleiche Reihenfolge gilt auch für 
 padding

4. Kommentare

Kommentare in CSS werden immer durch /* begonnen und durch */ beendet. Leider gibt es keine Möglichkeit Kommentare zu schachteln. 
 /* Ein Kommentar in CSS */

5. Das Nachbilden von Tabellen-Eigenschaften

Möchte man die Eigenschaften der Tabellen auf einer Site definieren, so führt man am besten eine eigene Klasse ein – hier std-tbl (für Standardtabelle) genannt. Leider werden damit auch die Eigenschaften der Tabellen-Zellen mit umdefiniert: es geht der Tiefeneffekt (der meisten Browser) verloren, der auf der unterschiedlichen Farbgebung der Umrandung der Zellen basiert. Diesen Effekt kann man jedoch durch die Definition der Farben erzielen. 

.std-tbl {
   border: 1px solid silver;
   width: 90%;
 }

.std-tbl td {
   border-width: 1px;
   border-style: solid;
   border-color: gray silver silver gray;
 }

6. Berechnete Werte

Obwohl es "eigentlich" nicht funktionieren dürfte, können bei Breitenangaben auch arithmetische Ausdrücke verwendet werden.

   {width: 100% -5px}
funktioniert, obwohl es nicht korrekt sein dürfte.

7. Ausdrucke

Möchte man einen eigenen Stil für den Ausdruck verwenden, so genügt es, eine weitere Style-Datei zu erstellen und in der index-Datei unterzubringen. Dies geschieht in etwa so: 

   <link rel="stylesheet" href="_css/hpco.css" type="text/css" media="screen">
   <link rel="stylesheet" href="_css/hpcoprint.css" type="text/css" media="print">

Die CSS-Print-Datei wird dann beim Ausdruck automatisch anstatt der CSS-Screen-Datei durch den Browser aufgerufen.

Was muss nun bei der CSS-Print-Datei verändert werden? Schriftarten können ggf. angepasst werden und die Links sollten auf einheitlich auf ein Format gesetzt werden, d.h. die Unterscheidung ob besucht oder nicht, entfällt. Hintergrundfarben sollten wegfallen (der Toner wird´s danken). Blöcke, die nicht mitgedruckt werden sollen (wie der Banner- oder der Navigationsbereich), werden über display:none in der CSS-Print-Datei einfach ausgeblendet:

  #banner{display:none;}

D. Organisation

1. Festlegen eines Projektkürzels

Generell ist es hilfreich, gleich zu Beginn ein Projektkürzel (bis zu 4 Buchstaben) auszuwählen, welches dann durchgängig verwendet werden kann. Das Projektkürzel für diese Site lautet "hpco".

2. Dateinamen und -kürzel

Alle Dateinamen sollten generell durchgängig klein geschrieben werden. Sonderzeichen oder Umlaute sind nicht erlaubt, dafür ist die Dateinamenlänge nicht beschränkt.

3. Erstellen einer Bilderliste

Selbst bei kleinen Webprojekten kommen schnell einige, spezifische eingebundene Bilder zusammen. Diese sollten in einer separaten Liste erfasst werden.

4. Die gezippte Projektdatei

5. Verwendung eines Offline-Readers

E. Literatur

Leider gibt es nicht ein Buch, welches alle Fragen der Website-Erstellung beantwortet. Die hier aufgeführten Bücher sind zwar nicht fehlerfrei, geben aber einen guten Einblick in die Möglichkeiten der Website-Erstellung.

Letzte Aktualisierung: 12.03.2006 © HPCO, 2006-2018