Category Archives: HTML & CSS

Wertigkeit (Spezifität) von CSS-Selektoren (Klassen und IDs)

Wer ist nicht schon daran verzweifelt: Sie ändern eine Eigenschaft in Ihrer CSS-Datei und nichts passiert / ändert sich im Design oder Layout Ihrer Webseite. Anscheinend gibt es eine Art Hierarchie die Änderungen niedriger Ordnung ignorieren.

Es ist tatsächlich so, dass es eine Art Hierarchie für CSS-Selektoren (Klassen und IDs) im CSS gibt. Diese ist abhängig von der Gewichtung, dem Ursprung, der Spezifität und der Reihenfolge in der CSS-Eigenschaften ausgeführt werden.

Demnach kommen Style-Sheet-Dateien in folgender Reihenfolge und Gewichtung zum Einsatz:

  1. Benutzer-Stylesheet mit !Important-Anweisungen
  2. Autoren-Stylesheet mit !Important-Anweisungen
  3. Autoren-Stylesheet
  4. Benutzer-Stylesheet
  5. Browser-Stylesheet

Die höhere Priorität der Benutzer-Stylesheet mit !Important-Anweisungen liegt in der Tatsache, dass so Menschen mit körperlichen Defiziten (Barrierefeiheit) auf diese Weise „das letzte Wort“ darüber haben, wie eine Internetseite auf dem Bildschirm nun dargestellt werden soll.

Innerhalb von Stylesheet-Dateien weisen Selektoren (Klassen und IDs) unterschiedliche hohe Spezifitäten auf. Die Ermittlung der jeweiligen Spezifität ist denkbar einfach: Selektoren werden in vier verschiedene Gruppen unterschieden. Jede Gruppe hat eine bestimmte Wertigkeit (Spezifität) wie in der folgenden Tabelle dargestellt.

Gruppe Selektortyp Beispiel Wertigkeit (Spezifität)
A Attribut style=”…” <p style=”color: red;”> 1000
B ID #wrapper 100
C Klasse .info 10
D einfacher Selektor <div> 1

Wertigkeits-Beispiele ausgewählter CSS-Eigenschaften:

Beispiel-Selektor A B C D
<p style=”color: red;”>roter Text</p> 1 0 0 0
#wrapper #info .fehler {color:red;} 0 2 1 0
body #wrapper div#left p{color:red;} 0 2 0 3
#wrapper p.info {color:red;} 0 1 1 1
p.red {color:red;} 0 0 1 1
p {color:red;} 0 0 0 1

CSS-Eigenschaften mit einer niedrigeren Spezifität werden von höherwertigen Eigenschaften „überschrieben“. Die höchste Wertigkeit (Gruppe A) ist jedoch aus praktischer Sicht für die Gestaltung und Pflege einer Internetseite nicht zu empfehlen. Insbesondere, da dies nicht mehr dem Prinzip von HTML und CSS, also der Trennung von Inhalt und Design, entspricht.

So richten Sie Google Analytics ein

Wenn Sie auf der Suche nach einem kostenlosen aber dennoch leistungsstarken Statistik-Tool für Ihre Internetseite sind, dann sei Ihnen an dieser Stelle Google Analytics empfohlen. Mit diesem Tool können Sie umfangreiche Auswertungen zu Ihrer Internetseite erhalten. Auf Basis dieser Daten sind Sie in der Lage Ihre Internetseite hinsichtlich Nutzerfreundlichkeit (Usability) zu optimieren.

In diesem Video gehe ich mit Ihnen Schritt für Schritt die Einrichtung des Statistik-Tools durch. Danach steht Ihnen der Analyse des Besucherverhaltens Ihrer Internetseite nichts mehr im Wege und können unter anderen folgende Dinge auswerten:

  • Anzahl Besucher in einem frei wählbaren Zeitraum
  • Anzahl Seitenaufrufe pro Besuch und Zeitraum
  • Durchschnittliche Verweildauer der Besucher auf einer Internetseite
  • Detaillierte Angaben über die Besucher
    • Herkunft (Stadt, Land, Kontinent)
    • Suchmaschine, Suchbegriff
    • Verlinkte Internetseite
    • Browser, Betriebssystem, Bildschirmauflösung, etc.
  • Beliebteste Inhalte / Internetseiten und Absprungraten
  • Häufigste Ausstiegspunkte
  • Und vieles mehr

Code zur Einbindung von Google-Analytics:

<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript"></script>
<script type="text/javascript">
   _uacct = "UA-xxxxxx-x";
   urchinTracker();
</script>

“UA-xxxxxx-x” ist Ihre Nutzer- bzw. Statistik-ID und muss durch Ihre eigene ersetzt werden!

15 – Grundlagen HTML & CSS: Eine Kontaktformular mittels PHP verschicken

Das ist die letzte Video-Lektion der Reihe „Grundlagen HTML & CSS“. In diesem abschließenden Video-Tutorial zeige ich Ihnen, wie Sie Ihr Kontaktformular mittels PHP funktionsfähig machen. So müssen die Inhalte der Formularfelder in Variablen übergeben und verarbeitet werden. Mit der PHP-Funktion „mail()“ generieren wir eine Email für den Absender und den Empfänger des Kontaktformulars.

Damit das Kontaktformular richtig verarbeitet wird, kommt es auf die richtige Reihenfolge der PHP-Anweisungen an. In diesem Video gehe ich auf diesem Problem kurz ein. Am Ende haben Sie steht Ihnen ein einfaches, funktionierendes, auf PHP basierendes Kontaktformular zur Verfügung.

Diesen einfachen Quelltext für ein Kontaktformular stelle ich Ihnen hier noch einmal kostenlos zur Verfügung. Das HTML-Gerüst für das Formular ist wie folgt aufgebaut:

<form method="post" action="kontakt.php">
  <table border="0">
  <tr>
    <td>Anrede:</td>
    <td>
      Herr: <input type="radio" value="Herr" name="anrede">
      Frau: <input type="radio" value="Frau" name="anrede">
    </td>
  </tr>
  <tr>
    <td>Vorname:</td>
    <td><input type="text" name="name"></td>
  </tr>
  <tr>
    <td>Nachname:</td>
    <td><input type="text" name="nachname"></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="mail"></td>
  </tr>
  <tr>
    <td>Ihre Nachricht an uns:</td>
    <td>
      <textarea name="nachricht" cols="45" rows="15">
      </textarea>
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="submit" value="abschicken!!!">
      <input type="reset" value="DATEN L&Ouml;SCHEN">
    </td>
  </tr>
  </table>
</form>

Das PHP-Skript für die Verarbeitung des Kontaktformulars sieht wie folgt aus:

<?php
$anrede    = $_REQUEST['anrede'];
$mail        = $_REQUEST['mail'];
$name        = $_REQUEST['name'];
$nachname        = $_REQUEST['nachname'];
$nachricht        = $_REQUEST['nachricht'];

$empfaenger = "info@gordon-adams.com";
$absender = $mail;

$betreffwebmaster = "Kontaktanfrage ($name $nachname)";
$koerperwebmaster = "$name $nachname hat &uuml;ber die
Webseite http://www.gordon-adans.com/blog folgende
Kontaktanfrage gestellt: \n\n" .
"\n\n
Kontaktdaten: \n
\tName:    $anrede $name $nachname \n
\teMail:   $mail \n
\n\n" .
$nachricht;

$betreffkunde = "Ihre Kontaktanfrage bei gordon-adams.com/blog";
$koerperkunde = "Sie ($name $nachname) haben &uuml;ber die
Webseite http://www.gordon-adans.com/blog folgende
Kontaktanfrage gestellt: \n\n" .
"\n\n
Kontaktdaten: \n
\tName:    $anrede $name  $nachname \n
\teMail:   $mail \n
\n\n" .
$nachricht;

$abgesandt = "<br /><h1>Kontaktbest&auml;tigung</h1>
<p>Vielen Dank f&uuml;r Ihre Anfrage. Wir werden uns in
K&uuml;rze bei Ihnen melden.<br><br>Thank you for your
inquiry. We will get back in touch with you shortly!</p>";

mail("$empfaenger",
     "$betreffwebmaster",
     "$koerperwebmaster\n",
     "FROM: $absender\n");
mail("$mail",
     "$betreffkunde",
     "$koerperkunde\n",
     "FROM: $absender\n");
echo $abgesandt;
?>

Analog zu diesem Aufbau können Sie selbstverständlich weitere Felder einfügen oder ergänzen. Mit diesem Video-Tutorial ist diese Serie zu Ende.

Hinweis: Der gezeiget Code wurde an einigen Stellen für eine besser Anzeige umgebrochen. Entfernen Sie die Zeilenumbrüche, sodass die Anweisungen wieder in einer Zeile stehen. Dann wird das PHP-Skript wieder fehlerfrei ausgeführt!

14 – Grundlagen HTML & CSS: Erstellung eines einfachen Kontaktformulars

Unsere erste eigene Internetseite ist nun so gut wie fertig. Was noch fehlt ist ein Kontaktformular. In dieser Video-Lektion erstellen wir ein einfaches Formular. Nach dem Absenden des Formulars erhalten sowohl der Absender, als auch der Empfänger eine Email. Der Absender erhält in der Regel eine Bestätigungs-Email; der Empfänger eine Email mit allen Angaben des Formulars. Natürlich können Sie auch dem Absender alle gemachten Informationen in Kopie per Email zukommen lassen.

Neben dem versenden einer Bestätigungs-Email sollte dem Absender auch eine Bestätigung des erfolgreichen Versendens der Online-Anfrage am Bildschirm angezeigt werden. Der Grund dafür ist, dass der Versandt einer Email (auch der Bestätigungsemail) zeitlich verzögert erfolgen kann. D.h. nach dem absenden einer Anfrage, können durchaus fünf Minuten oder mehr vergehen, bis die Email endlich im Postfach eingeht. Die technischen Hintergründe dazu will ich an dieser Stelle nicht weiter erörtern. Wichtig ist nur, dass Ihnen diese Problematik bewusst ist.

Im Sinn der Nutzerfreundlichkeit / Usablity von Internetseiten ist es in jedem Fall wünschenswert, dem Benutzer einer Internetseite eindeutiges Feedback zu geben, ob etwas funktioniert hat und wenn nicht, was die Gründe dafür gewesen sind und wie dies behoben werden kann.

Die Nutzung von Kontaktformularen gegenüber einfachen Email-Adressen hat folgende Vorteile:

  • Auch Nutzer ohne eine eigene Email-Adresse können ein Formular ausfüllen und Ihnen somit eine Email zukommen lassen (sofern „Email“ kein Pflichtfeld ist)
  • Sie können Pflichtfelder vorgeben, also Angaben abfragen, die Sie in jedem Fall zur Bearbeitung und Beantwortung einer Anfrage benötigen. Bei einer einfachen Email sind Sie darauf angewiesen, dass der Absender von sich aus alle notwendigen Daten mitteilt.

In diesem Zusammenhang zeige ich Ihnen typische HTML-Formular-Felder. Dazu zählen unter anderen:

  • Input-Feld vom Typ „radio“
  • Input-Feld vom Typ „text“
  • Input-Feld vom Typ „submit“
  • Input-Feld vom Typ „reset“
  • HTML-TAG „Textarea“ für Nachrichteninhalte

13 – Grundlagen HTML & CSS: Pseudoklassen kennen und sinnvoll anwenden

Pseudoklassen wie :before, :after, :first-child oder :first-line können Ihnen helfen ein Design mit CSS entsprechend aufzubereiten bzw. umzusetzen. Die Verwendung dieser Pseudoklassen ist nicht immer sinnvoll. Trotzdem möchte ich Ihnen diese nicht vorenthalten. In diesem Video-Tutorial erkläre ich diese ausführlich und versuche sie auf unserer Homepage an sinnvollen Stellen zu verwenden und entsprechend zu formatieren.

So nutze ich die Pseudoklasse „:before“ und „:after“, um einen Absatz in grafischen Anführungszeichen zu setzen. Bei der Überschrift nutze ich „:first-line“ und „:first-child“, um bei einem Zeilenumbruch der Überschrift die zweite Zeile optisch etwas anders darzustellen.

Beispielhafte Anwendung der beiden Pseudoklassen „Frist-Child“ und „First-Line“:

#content h1:first-line {
  color: #ee7e1c;
  font-variant: small-caps;
  font-size: 150%;
}

#content h1:first-child {
  font-variant: small-caps;
}

Es bieten sich viele verschiedene Möglichkeiten um Pseudoklassen zu nutzen. Experimentieren Sie am besten einfach mal selbst, was man damit alles machen kann. Das gezeigte in der Video-Lektion soll grundsätzlich erste einmal die Funktionsweise aufzeigen. Wie und in welchem Umfang Sie davon an welcher Stelle Gebrauch machen können und sollten, ist Ihnen überlassen.

12 – Grundlagen HTML & CSS: So richten Sie ein Untermenü mit einem Listen-Element ein

In dieser Video-Lektion fügen wir unserer Internetseite ein Untermenü ein. Dies geschieht durch die Verschachtelung von Listen. Ob diese Verschachtelung später in einem horizontalen oder vertikalen Klappmenü oder einem einfachen (offenen) Navigationsaufbau endet spielt dabei erst einmal keine Rolle. Die Entscheidung der Darstellung geschieht erst in der CSS-Datei. Hier müssen dann die richtigen CSS-Eigenschaften verwendet werden, um zum Beispiel ein Klappmenü zu realisieren.

Der Grundsätzliche Aufbau einer verschachtelten Navigation sieht im HTML wie folgt aus:

<ul>
  <li><a href="#.html"> Menü 1. Ebene</a></li>
  <li><a href="#.html"> Menü 1. Ebene </a>
    <ul>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
    </ul>
  </li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
</ul>

Wichtig ist hierbei zu erkennen, dass das innere ul-Element Inhalt eines li-Elements ist und erst nach einem geschlossenen Anker des li-Elements eingefügt wird. Mittels CSS und der Verwendung von Klassen und IDs auf einzelne HTML-Elemente kann die Navigation so aufbereitet werden, dass zum Beispiel ein Klappmenü realisiert werden kann.

In dieser Video-Lektion wird noch kein Klappmenü realisiert, da es tiefere Kenntnisse in CSS erfordert. Zum jetzigen Zeitpunkt tut es eine einfache, vertikale Navigation, die die nächste Ebene der Navigation komplett öffnet. In einer separaten Lektion werde ich die Funktionsweise und CSS-Aufbereitung für ein Klappmenü noch einmal ausführlich erklären. Vielleicht finden Sie ja einen entsprechenden Beitrag schon in diesem Blog? Die Suchfunktion kann Ihnen hier weiterhelfen!

11 – Grundlagen HTML & CSS: Optimierung des HTML-Grundgerüsts (flexible DIV-Conatainer)

Nun ist es endlich so weit: Ein Logo wird eingefügt und mit der Startseite verlinkt. Die Verlinkung des Logos mit der Startseite der Homepage gehört mittlerweile zum guten Ton und Standard. D.h. Internet-User haben sich daran gewöhnt, dass ein Klick auf ein Seiten-Logo zurück zur Startseite führt. So kann man sich den Menüpunkt „Startseite“ oder „Home“ eigentlich auch sparen!

In dieser Video-Lektion stellen wir das HTML-Grundgerüst noch einmal um, sodass die Container Navigation und Content immer „gleich lang“ sind. Dafür wird ein DIV-Container Inhalt des anderen. Wächst der innere DIV-Container, wächst der äußere automatisch mit. Dieser Abschnitt soll Ihnen Anregungen geben, wie man DIV-Container ineinander verschachteln kann und ggf. muss, um bestimmte komplexere Designs realisieren zu können.

10 – Grundlagen HTML & CSS: Das Design einer Internetseite per CSS verbessern

Auf dem vorherigen Video aufbauend, wird am Design der Internetseite weiterhin per CSS gefeilt. Am Ende dieser Video-Lektion ist die erste einfache Homepage, zumindest die Basis dafür, fertig. In den weiteren verbleibenden Tutorials wird das Design / Erscheinungsbild immer weiter optimiert.

Die Hintergrundfarben der DIV-Container, die uns die Struktur der Internetseite besser veranschaulichen sollten, können wir langsam aber sicher auskommentieren und durch endgültige Anweisungen bzw. Inhalte ersetzen. So ist im Kopfbereich der Seite (Header) eine Grafik eingefügt, die die Internetseite erstmals gefällig erscheinen lässt – Was für eine Kraft Bilder doch haben!

Zum Anderen gehe ich in diesem Video kurz auf die relative und absolute Positionierung von Objekten ein. Durch die absolute Positionierung eines Objekts mittels CSS, kann dieses an eine beliebige Stelle im Design positioniert werden.

Wichtig ist der Hinweis, dass ein absolut positioniertes Element / Objekt, sich immer am ihm umschließenden und zuletzt relative positionierten Objekt orientiert. Eine anschauliche Demonstration dieser Bedingung zeige ich in diesem Video in dem eine Überschrift absolut über ein Bild positioniert werden soll.

Relativ positionierte Objekte orientieren sich ebenfalls an dem sie umschließenden Objekt, können jedoch nur innerhalb des umschließenden Objektes positioniert werden.

Zu diesem Thema(„Positionierung von Objekten“) wird es in diesem Video-Blog noch einmal einen gesonderten Video-Beitrag geben.

Folgende wichtige CSS-Anweisungen werden in diesem Video genutzt:

  • Border: 1px dotted black;
  • Text-align: center;
  • Position: absolute;
  • Position: relative;
  • Vererbung von CSS-Eigenschaften

09 – Grundlagen HTML & CSS: Deklaration und Formatierung der CSS-Klassen und -IDs

Deklaration und Formatierung der Klassen und IDs (wrapper, header, content, navigation und footer) in der CSS-Datei für das HTML-Dokument. Durch die farbige Hervorhebung der Container, entweder durch eine Hintergrundfarbe (background-color) oder eines farbigen Rahmens (border), kann man die Anordnung der Container zueinander veranschaulichen. Es ist also ein legitimes Hilfsmittel zur Orientierung welche Auswirkungen die CSS-Anweisungen auf das Erscheinungsbild der HTML-Struktur haben.

Wichtig ist dabei zu wissen, dass es bei der Verwendung der Auszeichnung / Hervorhebung mittels Rahmenfarben (border) zu Verschiebungen der Container / des Designs kommen kann. Dies ist insbesondere dann der Fall, wenn man Pixelgenau arbeitet; also zum Beispiel jedes Pixels einer zur Verfügung stehenden Breite verwendet; wobei die Breite eines Containers mit CSS fixiert wurde. Ein ähnlicher Effekt entsteht bei der Verwendung von PADDING auf einen Container mit einer festen / fixen Breite.

Folgende wichtige CSS-Anweisungen werden in diesem Video genutzt:

  • Float: left;
  • Clear: both;
  • Display: block;
  • Margin und Padding: Angaben in Pixel;
  • Text-align: justify; (Blocksatz)
  • Line-height: Angabe in Pixel;

08 – Grundlagen HTML & CSS: Schritt für Schritt zur ersten Homepage (Vom Konzept bis zur Umsetzung)

Nachdem in den ersten sieben Video-Lektionen (Tutorials) Grundlagen in den Bereichen HTML und CSS vermittelt wurden, erstellen wir in diesem Video Schritt für Schritt unsere erste eigene Homepage. Das grundsätzliche Vorgehen dieses Videos:

  • Überlegung eines Homepage-Konzept
  • Ableitung des HTML-Aufbaus
  • Erstellung des HTML-Grundgerüsts
  • Formatierung des HTML-Grundgerüsts mittels CSS

Wichtiger Hinweis: Sofern Sie Fragen zum Video-Inhalt haben, sollten Sie sich zuvor unbedingt die vorherigen sieben Video-Lektionen anschauen. Ab diesem Video wird bestimmtes Wissen, sowohl in HTML und CSS, als auch im Umgang mit dem HTML-Editor, vorausgesetzt. Dementsprechend werden Inhalte schneller abgehandelt!

Im Ergebnis erhalten Sie eine einfache Internetseite – nichts spektakuläres. Diese Basis werden wir in weiteren sieben Video-Lektionen (Grundlagen HTML & CSS – Lektionen 09 bis 15) Schritt für Schritt erweitern und verbessern. Die finale Internetseite wird eine verschachtelte Navigation (Untermenü), ein funktionsfähiges Kontaktformular (mit Antwort-Email bzw. Bestätigungs-Email für den Absender), ein mit der Startseite verlinktes Logo sowie diverse nützliche Pseudoklassen enthalten.