Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 3. 8 HTML versus CSS

2.3.8 HTML versus CSS

-

1 Verwendung von Anführungszeichen

-

a) Allgemein

Während man im HTML-Dokument um hexadezimale Farbangaben Anführungszeichen (") setzen muss, darf man es im CSS-Stylesheet nicht.

-

2 Formatierung mit HTML (Angabe im Textbereich des HTML-Dokumentes)

-

a) Beispiel 1

1) Angabe im Quelltext:

<p style="background-color:lightpink">
Dieser Hintergrund heisst:<p style="background-color:lightpink"
</p>

2) Anzeige im HTML-Dokument:

Dieser Hintergrund heisst:<p style="background-color:lightpink">

-

b) Beispiel 2

Der Wert eines HTML-Attributs muss in Anführungszeichen stehen, wenn er Sonderzeichen oder Leerzeichen enthält.

<BODY BGCOLOR="#ffffff"> ist richtig.
(<BODY BGCOLOR=#ffffff> ist falsch)

-

3 Formatierung mit CSS (Angabe im Stylesheet)

-

a) Beispiel 1

1) Angabe im Stylesheet:

h1 {color: #FFFFFF}

Bei Schriftarten die Leerzeichen im Namen tragen, sollte man immer Anführungszeichen setzen:

h1 {font-family:'Trebuchet MS','Myriad Web',
Geneva, Arial,sans-serif}

-

b) Beispiel 2

In Style-Deklarationen dürfen die Werte keine Anführungszeichen haben.

BODY {background-color: #CCFFCC} ist richtig.
(BODY {background-color: "#CCFFCC"} ist falsch)

-

4 Unterschied der Formatierung von Tabellen mit HTML und CSS

-

a) Beispiel 1: Breite und Höhe mit HTML formatieren

1) Angabe im Quelltext:

<table border="1" width="60%">
<tr>
 <th width="50%" height="100">Titel 1</th>
 <th>Titel 2</th>
 <td>Titel 3</td>
</tr>
<tr>
 <td>Text 1.1</td>
 <td>Text 2.1</td>
 <td>Text 3.1</td>
</tr>
<tr>
 <td>Text 1.2</td>
 <td>Text 2.2</td>
 <td>Text 3.2</td>
</tr>
</table>

2) Anzeige im HTML-Dokument:

Titel 1 Titel 2 Titel 3
Text 1.1 Text 2.1 Text 3.1
Text 1.2 Text 2.2 Text 3.2

Pfeil nach rechts (Icon)
      120 x 120 Pixel HTML: Tabellen (table)

-

b) Beispiel 2: Breite und Höhe mit CSS formatieren

1) Angabe im Quelltext:

<table border="1" style="width:60%">
<tr>
<th style="width:50%; height:100px">Titel 1</th>
  <th>Titel 2</th>
  <th>Titel 3</th>
</tr>
<tr>
 <td>Text 1.1</td>
 <td>Text 2.1</td>
 <td>Text 3.1</td>
</tr>
<tr>
 <td>Text 1.2</td>
 <td>Text 2.2</td>
 <td>Text 3.2</td>
</tr>
</table>

2) Anzeige im HTML-Dokument:

Titel 1 Titel 2 Titel 3
Text 1.1 Text 2.1 Text 3.1
Text 1.2 Text 2.2 Text 3.2

Pfeil nach rechts (Icon)
      120 x 120 Pixel HTML: Tabellen (table)