Tag Archives: HTML

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

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.

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.

07 – Grundlagen HTML & CSS: Der Unterschied zwischen Klassen und IDs (CSS)

Endlich ist die externe CSS-Datei eingebunden. In diesem Video erläutere ich den Unterschied zwischen Klassen und IDs, und wie man diese im HTML-Dokument einbettet  bzw. anwendet.

Der wesentliche Unterschied zwischen Klassen und IDs:

  • IDs sind eindeutig und dürfen innerhalb einer HTML-Datei nur einmal verwendet werden
  • Klassen dürfen im Gegensatz dazu mehrfach innerhalb eines HTML-Dokuments verwendet werden.

Dafür soll das im vorherigen Video erklärte Container-Box-Modell noch einmal herhalten. Die hier direkt im HTML eingefügten Style-Angaben werden durch Klassen und IDs ersetzt. Die angebundene CSS-Datei wird „mit Leben gefüllt“; enthält also die Style-Anweisungen.

Am Ende erhalten wir ein „bereinigtes“ HTML-Dokument, dass nur noch die reinen HTML-Angaben enthält; also die eigentlichen Inhalte. In der CSS-Datei befinden sich dann die reinen Style-Angaben, die für das Erscheinungsbild der HTML-Seite nachher verantwortlich sind. So haben wir den Schritt zur Trennung  von Inhalt (HTML) und Design (CSS) vollständig vollzogen.

Auch in Zukunft sollten Sie zwingend darauf achten KEINE Design-Anweisungen im HTML-Dokument einzubinden. Dieses Vorgehen hat folgende wesentliche Vorteile:

  • Designänderungen lassen sich schneller und einfacher umsetzen
  • Das HTML-Dokument ist kleiner (kb) und kürzer (Anzahl Zeichen und Zeilen)
  • Schnellere / bessere Ladezeiten der Internetseite insgesamt

06 – Grundlagen HTML & CSS: Das Container-Box-Modell endlich verstehen

Dieses Video ist existenziell wichtig für die Programmierung von Internetseiten und das Verständnis von der Trennung von Inhalt (HTML) und Design (CSS). Mittels CSS ist es möglich ein und dieselbe HTML-Datei unterschiedlich (Layout / Design) darzustellen. Alles dreht sich um das Container-Box-Modell. Ohne das Verständnis für dieses Box-Modell können Sie mit Hilfe von CSS nicht das Design oder Layout erstellen, dass Sie sich wünschen.

In diesem Video zeige ich Ihnen schematisch das CSS-Container-Box-Modell anhand meiner eigenen Internetseite. Der Schematische Aufbau einer beliebigen Internetseite ist häufig ähnlich: Es gibt die Container Header, Content (der zumeist wieder unterteilt ist) sowie einen Footer.  Im Anschluss experimentieren wir im HTML-Editor mit dem Einfluss von MARGIN und PADDING auf das Box-Modell.

Wie so oft führen viele Wege nach Rom. Auch im Einsatz von HTML und CSS, zur Umsetzung eines Designs, führen viele Wege zum gewünschten Ergebnis (Design / Layout). Wichtig ist jedoch nur, dass Sie dieses Container-Box-Modell verinnerlicht haben und anzuwenden wissen.

Am Ende dieser Video-Lektion binden wir erstmals eine externe CSS-Datei ein.

PS: Neben den beiden CSS-Anweisungen MARGIN und PADDING gibt es sicherlich noch weitere Anweisungen, die wesentlichen Einfluss auf das Modell / die Darstellung haben. Auf diese wird in diesem Video nicht eingegangen.

05 – Grundlagen HTML: Die wichtigesten Meta-Daten einer HTML-Seite

Im vorherigen Video bin ich bereits kurz auf Meta-Daten (Umstellung der Zeichencodierung) eingegangen. Bisher haben wir aber nicht geklärt, was und wofür Meta-Daten vor allem sind und welche Meta-Daten grundsätzlich gepflegt werden sollten, um von Suchmaschinen auch gelistet (auch indexiert genannt) wird.

Um es vorweg zu nehmen: Die wichtigsten Meta-Daten, die Sie in jedem Fall pflegen sollten, sind:

  • Keywords / Schlüsselwörter
  • Description / Beschreibung
  • Robots

Diese Meta-Daten werden wie folgt im Head-Bereich der HTML-Seite eingebunden:

<meta content="Suchbegriffe durch Komma getrennt ">
<meta content="Eine Beschribung der Seiteninhalte ">
<meta name="robots" content="index,follow">

Neben diesen drei Meta-Daten sollten Sie in jedem Fall auch den Titel einer Seite pfelgen. Dieser gehört nicht zu den Meta-Daten, wird aber ebenfalls im Head-Bereich der HTML-Seite eingetragen:

<title> Titel der Seite</title>

Warum man die Meta-Daten pflegen sollte und wo Sie bei den Suchmaschinen zum Tragen kommen, zeige ich Ihnen in dieser Video-Lektion.