HTML versus CSS - Webseitenbau

2.3.8 HTML versus CSS

1 Verwendung von Anführungszeichen
- a) Allgemein
2 Formatierung mit HTML (Angabe im Textbereich des HTML-Dokumentes)
- a) Beispiel 1
- b) Beispiel 2
3 Formatierung mit CSS (Angabe im Stylesheet)
- a) Beispiel 1
- b) Beispiel 2
4 Unterschied der Formatierung von Tabellen mit HTML und CSS
- a) Beispiel 1: Breite und Höhe mit HTML formatieren
- b) Beispiel 2: Breite und Höhe mit CSS formatieren

⇧ 1 Verwendung von Anführungszeichen

a) Allgemein

↑ 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
b) Beispiel 2

↑ 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
b) Beispiel 2

↑ 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)

Subotnik: Keine Anführungszeichen in Style-Deklarationen

⇧ 4 Unterschied der Formatierung von Tabellen mit HTML und CSS

Beispiel 1: Breite und Höhe mit HTML formatieren
Beispiel 2: Breite und Höhe mit CSS formatieren

↑ 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

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

SELFHTML: Breit und hoch mit HTML resp. CSS

HTML: Tabellen (table)

↑