(X)HTML und CSS

Alexander zu Solms

Robotron

Definition HTML

Geschichte HTML

World Wide Web Consortium

Das erste HTML Dokument

<html>

 <head>
  <title>Webmaster</title>
 </head>

 <body>
  Willkommen bei den Webmastern!
 </body>

</html>

Beschreibung des ersten HTML Dokuments

Kommentare in (X)HTML

Formatierungs-Tags

Übung: Text-Formatierungen

Öffne einen Texteditor und schreibe die HTML-Struktur hinein. Schreibe einen Text mit den Formatierungen wie in dem Bild. Speichere Deine Datei mit der html Endung ab und öffne sie.

Listentypen in HTML

Tags für Listen

Tabellen in HTML

Tags für Tabellen

Einfügen von Bildern und Grafiken

Verweismöglichkeiten mit Links

Interne Navigation

Menü
<br />
<ul>
	 <li><a href="start.html">Start</a></li>
         <li><a href="news.html">News</a></li>
         <li><a href="kontakt.html">Kontakt</a></li>
         <li><a href="impressum.html">Impressum</a></li>
</ul>
-->

HTML Formularelemente

Aufbau von Formularen

Auswahl von HTML-Formularelementen

Eine Textarea

Auswahllisten definieren

<select name="pc" size="5" multiple="multiple">
    <option value="Prozessor">Prozessor</option>
    <option value="Karte">Karte</option>
</select>

Gruppierung von HTML-Formularelementen

<fieldset>
  <legend>Gruppenbezeichnung></legend>
  	Inhalte...
</fieldset>

Übung: Gestaltung eines Formulars

Document Type Definition

Damit Browser wissen, mit welcher Art von Dokument sie es zu tun haben, hat das W3C zusammen mit jeder neuen Entwicklung von HTML, XHTML oder XML die so genannten DTD's veröffentlicht. Die DTDs - Document Type Definitions - sind fester Bestandteil von HTML, XHTML und XML.

Aufbau eines validierbaren HTML Dokuments

ein validierbares HTML-Dokument besteht aus drei Bereichen

Struktur einer Webseite mit DTD

Markup Validation Service

HTML und XHTML validieren 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 	"http://www.w3.org/TR/html4/loose.dtd">
CSS validieren

Unicorn - Der Einheitsvalidator des W3C

Grundlagen XHTML

Die HTML DOCTYPE-Deklarationen

In validierbaren Webdokumenten muss am Anfang eine DOCTYPE-Deklaration stehen. Für XHTML verwenden Sie eine der zwei Möglichkeiten: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Die DOCTYPE-Deklaration für HTML5 
<!DOCTYPE html>

Unterschiede von XHTML zu HTML

Framesets

Mit einem Frameset wird das Browserfenster in mehrere Teilbereiche unterteilt. In jedem dieser Teilbereiche wird eine eigene Datei angezeigt.

Vorteile:

Nachteile:

-->

Definition Cascading Style Sheets

Die Einbindung von CSS in ein (X)HTML-Dokument

Einbinden des style-Attributs direkt in das Start-Tag des Elementes 
<p style="text-align:right; font-weight:bold">
Fetter und rechtsbündig ausgerichteter Text</p>
Einbinden des style-Elements in den Dokumentenkopf 
<style type="text/css">
      /* Stylesheet Angaben  */
</style>
Einbinden eines separaten Stylesheets per link-Element im Dokumentenkopf 
<link rel="stylesheet" href="stylesheets/default.css" type="text/css" />

Aufbau von CSS Selektoren

Verschiedene CSS Selektoren

Der Element-Selektor

p { color:orange; }

Farben in CSS definieren

Schriftarten- und Größe in CSS

Der Klassen-Selektor

Definition in der CSS Klasse 
.fehler { color:red; }
Aufruf in der (X)HTML Seite 
<p class="fehler">Dieser Text ist rot. </p>

Der ID-Selektor

Definition in der CSS Klasse 
#fehler { color: red; }
Aufruf in der (X)HTML Seite 
<p id="fehler">Dieser Text ist rot. </p>

Selektoren mit Operatoren (Leerzeichen)

Definition in der CSS Klasse 
p span { color: lime; }
Aufruf in der (X)HTML Seite 
<p><span>ich bin ein Zitronen-Absatz</span></p>

Selektoren mit Operatoren (Komma)

Definition in der CSS Klasse 
.fehler, .wichtig { color: red; }
Drei mögliche Aufrufe in der (X)HTML Seite 
<p class="fehler">Ich bin ein roter Fehler. </p>

<p class="wichtig">Ich bin ein roter Fehler </p>

<p class="fehler wichtig">Ich bin ein roter Fehler </p>

Selektoren mit Operatoren (Stern)

Definition in der CSS Klasse 
div * b { color:violet; }
Aufruf in der (X)HTML Seite 
<div>
	<b>ich bin nur fett </b>
	<p><b>ich bin violett und fett </b></p>
</div>

Selektoren mit Operatoren (Plus)

Definition in der CSS Klasse 
#banner + p { color: Red; }
Der Aufruf in der (X)HTML Seite 
<p id="banner">ich bin nicht rot </p>
<p>ich bin rot </p>

Selektoren mit Operatoren (Größer als)

Definition in der CSS Klasse 
div > p { color:blue; }
Der Aufruf in der (X)HTML Seite 
<div>
	<p>ich bin blau</p>
</div>
<p>ich bin nicht blau</p>

Pseudo-Klassen

Definition in der CSS Klasse 
a:hover
{
	color: red;
}
Aufruf in der (X)HTML Seite 
<a href="start.html">Start</a>

Mögliche Pseudo-Klassen

Pseudo-Elemente

Definition in der CSS Klasse 
p:first-line { color: Red; }
Der Aufruf in der (X)HTML Seite erfolgt mit jedem Absatz

Beeinflussbare Eigenschaften CSS

Layout Gestaltung mit CSS

Fertige CSS Layouts findet man z.B. unter:

Die Kaskadenreihenfolge der drei Stylesheet-Formen

  1. Autoren-Stylesheet
  2. Benutzer-Stylesheet
  3. Standard-Stylesheet des Browsers

Spezifität eines Selektors

  1. A wird auf 1 gesetzt für CSS-Regeln, die durch ein Attribut style im Quelltext definiert sind, ansonsten 0
  2. B ist die Anzahl der id-Attribute eines Selektors
  3. C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudo-Klassen innerhalb des Selektors
  4. D ist die Anzahl der Elementnamen und Pseudo-Elemente, die der Selektor beinhaltet

Beispiel für die Spezifität

<style type="text/css">
    b 			{ color: blue; }
    b, .farbe 		{ color: green; }
    p b			{ color: red; }
</style>

<body>
  <p>Absatz mit einem <b class="farbe">farbigen</b> Wort</p>
</body>