Codingstyle

Inhalt:

  1. Alles in einer Zeile (So wird's nicht gemacht)
     
  2. Ohne Einrücken (So bitte auch nicht)
     
  3. Ein Tag pro Zeile + Einrücken (So wird's gemacht!)
     
  4. Und so für CSS-Code

Beim Schreiben von HTML-und CSS-Code ist es wichtig, dass das Geschriebene ein einheitliches Erscheinungsbild hat. Eine gleichbleibende Struktur erleichtert das interpretieren von HTML und CSS Befehlen für Andere und sich selber.

Hier ein Beispiel:

1. Unstrukturiert:

<html><head><body><title>Titel der Seite</title>
</head><body><table><tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr></table></body></html>

 

2. Ein Tag pro Zeile:

<html>
<head>
<body>
<title>Titel der Seite</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>

 

3. Ein Tag pro Zeile + eingerückt:

<html>
 <head>
	<title>Titel der Seite</title>
 </head>
 <body>
	<table>
	 <tr>
		<td>1</td>
		<td>2</td>
	 </tr>
	 <tr>
		<td>3</td>
		<td>4</td>
	 </tr>
	</table>
 </body>
</html>

 

4. Bei CSS-Code könnte das wie folgt aussehen:

* h1 {
		font-family : Arial;
		font-size : 1.1em;
		color : #809044;
}

* strong {
		color : #848457;
		font-size : 0.9em;
}

#center {
		position : relative;
		text-align : center;
		margin : auto;
}

Mit wenig Aufwand lässt sich Code so strukturieren, dass man sich schnell zurechtfindet. Eine Faustregel ist dass Anfangs-und Endtag denselben Abstand vom linken Rand haben. So kann man schnell Anfang und Ende zuordnen. Den Abstand von Links kann man mit der Leertaste machen, oder auch wie es meistens gemacht wird mit dem Tabulator.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.