⇦ Anhang: Tastaturkommandos / Anhang: Syntaxübersicht ⇨
08.10.2014 11:05:28

Anhang: Beispiel

Von Dateiversion zu Dateiversion sind die Änderungen mit gelben Hintergrund gekennzeichnet. Sobald externes CSS / JS dazukommt, ist die jeweilige Datei hinten angehängt.

Beispiel 1

Editor - 01_visitenkarte.txt

Christian Hartnick
Dipl.-Wirtsch.-Inf.
Freier Berater

Sandweg 10
16727 Oberkrämer OT Bärenklau

-----------------------------

- Telefon 03304 5081620
- Fax     03304 5081621
- Mobil   01517 5081620

Email hilfe@hartnick.de
Web   http://hilfe.hartnick.de

Beispiel 2

Editor - 02_visitenkarte.html

Christian Hartnick
Dipl.-Wirtsch.-Inf.
Freier Berater

Sandweg 10
16727 Oberkrämer OT Bärenklau

-----------------------------

- Telefon 03304 5081620
- Fax     03304 5081621
- Mobil   01517 5081620

Email hilfe@hartnick.de
Web   http://hilfe.hartnick.de

Beispiel 3

Editor - 03_visitenkarte_p.html

<p>
  Christian Hartnick
  Dipl.-Wirtsch.-Inf.
  Freier Berater
</p>

<p>
  Sandweg 10
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon 03304 5081620
  - Fax     03304 5081621
  - Mobil   01517 5081620
</p>

<p>
  Email hilfe@hartnick.de
  Web   http://hilfe.hartnick.de
</p>

Beispiel 4

Editor - 04_visitenkarte_p_br.html

<p>
  Christian Hartnick <br />
  Dipl.-Wirtsch.-Inf. <br />
  Freier Berater
</p>

<p>
  Sandweg 10 <br />
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon 03304 5081620 <br />
  - Fax     03304 5081621 <br />
  - Mobil   01517 5081620
</p>

<p>
  Email hilfe@hartnick.de <br />
  Web   http://hilfe.hartnick.de
</p>

Beispiel 5

Editor - 05_visitenkarte_linked.html

<p>
  Christian Hartnick   <br />
  Dipl.-Wirtsch.-Inf. <br />
  Freier Berater
</p>

<p>
  Sandweg 10 <br />
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
  - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
  - Mobil   <a href="tel:015175081620">01517 5081620</a>
</p>

<p>
  Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
  Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
</p>

Beispiel 6

Editor - 06_visitenkarte.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>06 Meine Visitenkarte (Zwischenstand)</title>
  </head>

  <body>
    <p>
      Christian Hartnick   <br />
      Dipl.-Wirtsch.-Inf. <br />
      Freier Berater
    </p>

    <p>
      Sandweg 10 <br />
      16727 Oberkrämer OT Bärenklau
    </p>

    -----------------------------

    <p>
      - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
      - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
      - Mobil   <a href="tel:015175081620">01517 5081620</a>
    </p>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
      Web <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 7

Editor - 07_visitenkarte_kommentar.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>07 Visitenkarte (Kommentar)</title>
  </head>

  <!-- Dies ist ein Kommentar -->
  <!-- Kommentare sind Anmerkungen zum HTML-Text, die nicht im Browser erscheinen -->
  <!-- Mit Kommentaren können sie Tags auskommentieren: <p> erscheint nicht </p> -->

  <body>
    <p>
      Christian Hartnick   <br />
      Dipl.-Wirtsch.-Inf. <br />
      Freier Berater
    </p>

    <p>
      Sandweg 10 <br />
      16727 Oberkrämer OT Bärenklau

    -----------------------------

    <p>
      - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
      - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
      - Mobil   <a href="tel:015175081620">01517 5081620</a>
    </p>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
      Web <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 8

Editor - 08_visitenkarte_format.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>08 Meine Visitenkarte (formatiert)</title>
  </head>

  <body>
    <p>
      <b>Christian Hartnick</b><br />
      <span style="font-weight:bold;">Dipl.-Wirtsch.-Inf.</span><br />
      Freier Berater
    </p>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr style="width:300px; margin-left:0;" />

    <ul>
      <li>Telefon <a href="tel:033045081620">03304 5081620</a></li>
      <li>Fax     <a href="fax:033045081621">03304 5081621</a></li>
      <li>Mobil   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 9

Editor - 09_visitenkarte_css_inline.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>09 Meine Visitenkarte (css inline)</title>
    <style type="text/css">
      #Name   { font-weight: bold; } 
      #Grad   { font-size:   small; } 
      .Beruf  { font-style:  italic; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr style="width:300px; margin-left:0;" />

    <ul>
      <li>Telefon <a href="tel:033045081620">03304 5081620</a></li>
      <li>Fax     <a href="fax:033045081621">03304 5081621</a></li>
      <li>Mobil   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 10

HTML

Editor - 10_visitenkarte_css.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>10 Meine Visitenkarte (css datei)</title>
    <link rel="stylesheet" type="text/css" href="10_visitenkarte.css" />
    <style type="text/css">
      address { font-style:normal; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span> <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

CSS

Editor - 10_visitenkarte.css

/* Formatvorlage "Name" für Tag mit Attribut id="Name" */
#Name    { font-weight:bold; }
/* Formatvorlage "Grad" für Tag mit Attribut id="Grad" */
#Grad    { font-size: small; }
/* Formatvorlage "Beruf" für Tag mit Attribut class="Beruf" */
.Beruf   { font-style: italic; }
/* Formatvorlage für das Tag <a> */
a        { text-decoration:none; color:WindowText;}
/* Formatvorlage für den Platz vor dem Tag <a> */
a:before { content:"→"; color: blue; }
/* Formatvorlage für das Tag <a> wenn die Maus darüber ist */
a:hover  { color: blue; }
/* Formatvorlage für Tag <hr> */
hr       { width: 300px; margin-left: 0; }
/* Einheitliche Breite für Label (Bezeichner) */
.label   { display: inline-block; width: 3em; }

Beispiel 11

HTML

Editor - 11_visitenkarte_js_inline.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>11 Meine Visitenkarte (js inline)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span>
      <script type="text/javascript">
        var name   = "hilfe"; 
        var domain = "hartnick"; 
        var tld    = "de"; 
        document.write('\n<a href=\"mailto:' + name + '@' + domain + '.' +tld + '\">' + name + '@' + domain + '.' +tld + '<\/a>'); 
      </script>
      <noscript> hilfe_at_hartnick_._de </noscript><br />
      <span class="label">Web</span> <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

Beispiel 12

HTML

Editor - 12_visitenkarte_js.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>12 Meine Visitenkarte (js extern)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
    <script src="12_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span>
      <script type="text/javascript">
        insertEmail("hilfe","hartnick","de")
      </script>
      <noscript> hilfe_at_hartnick_._de </noscript><br />
      <span class="label">Web</span> <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

JS

Editor - 12_visitenkarte.js

  // insertEmail fügt als Spamschutz an der Aufrufstelle einen Email-Adress-Link (name@domain.tld) ein
  function insertEmail(name,domain,tld) {
    document.write('\n<a href=\"mailto:'+name+'@'+domain+'.'+tld+'\">'+name+'@'+domain+'.'+tld+'</a>');
  }

Beispiel 13

HTML

Editor - 13_visitenkarte_js_dom.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>13 Meine Visitenkarte (js dom)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
    <script src="13_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body onload="convertEmail('Email')">
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

  <ul>
    <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
    <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
    <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
  </ul>

    <p>
      <span class="label">Email</span> <a class="Email" href="mailto:em1_at_domain_dot_de">em1_at_domain_dot_de</a><br />
      <span class="label">Email</span> <a class="Email" href="mailto:em2_at_domain_dot_de">em2_at_domain_dot_de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

JS

Editor - 13_visitenkarte.js

// convertEmail(Klasse) konvertiert bestehende Email-Links mit dem Attribut <a class="Klasse" ...>
// Aufbau des href: <a href="mailto:name_at_domain_dot_tld">beliebiger Text</a>

function convertEmail(ClassName) {
  var adresse,name,domain,tld,temp;
  var anker;
  var i;

  i = 0;

  while (document.getElementsByClassName(ClassName)[i]) {
    anker   = document.getElementsByClassName(ClassName)[i];
    adresse = anker.href;

    temp   = adresse.split("_at_");
    name   = temp[0];
    domain = temp[1];

    temp   = domain.split("_dot_");
    domain = temp[0];
    tld    = temp[1];

    adresse = name + "@" + domain + "." + tld;
    anker.href = adresse;
    anker.firstChild.nodeValue = adresse.substr(7,255);

    i++;
  }
}

DOM

<html>
- <head>
- <body onload="convertEmail('Email')>"
  - <p>
    - Christian Hartnick
    - <br>
    - …
  - …
  - <p>
    - <a class="Email" href="...">
      - em1_at_domain_dot_de
    - <br>
    - <a class="Email" href="...">
      - em1_at_domain_dot_de
    - <a href="http://...">
  - …

Beispiel Webpräsenz

HTML

Editor - kontakt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta content="author" name="Fügen sie hier ihren Namen ein" />
  <title>Christian Hartnick - Kontakt</title>

  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <style type="text/css">
    /* Interne CSS-Formatvorlagen */
  </style>
  <script type="text/javascript" src="js/funktionen.js"></script>
</head>

<body onload="convertEmail('Email')">
  <div id="KopfDiv">
    <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1>
    </iframe>
  </div>

  <div id="MenuDiv">
    <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <a class="Menue" href="iframes/menu.html">Sitemap</a>
    </iframe>
  </div>

  <div id="InhaltDiv">
    <p>
      <span id="Name">Christian Hartnick</span> <br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>
    </p>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li> <span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a> </li>
      <li> <span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a> </li>
      <li> <span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a> </li>
    </ul>

    <p>
      <!-- Alle Email-Links sind mit class="Email" zum Konvertieren gekennzeichnet! -->
      <span class="label">Email</span> <a class="Email" href="mailto:hilfe_at_hartnick_dot_de">hilfe_at_hartnick_dot_de</a><br />
      <span class="label">Email</span> <a class="Email" href="mailto:christian_at_hartnick_dot_de">christian_at_hartnick_dot_de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </div>
</body>
</html>

HTML Kopf

Editor - iframes/kopf.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Kopf</title>
  <link rel="stylesheet" type="text/css" href="../css/layout.css" />
</head>

<body class="KopfFrame">
  <p class="Kopf">
    <a href="http://hilfe.hartnick.de" target="_top">
      <img class="Kopf" src="../bilder/logo.png" alt="logo hilfe.hartnick.de" />
    </a>
  </p>
</body>
</html>

HTML Menu

Editor - iframes/menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Sitemap</title>
  <link rel="stylesheet" type="text/css" href="../css/layout.css" />
</head>

<body class="MenuFrame">
  <h1 class="Menu">Menü</h1>
  <ul class="Menu">
    <li class="Menu"><a class="Menu" href="../index.html" target="_top">Start</a>
      <ul class="Menu">
        <li class="Menu"><a class="Menu" href="../kontakt.html" target="_top">Kontakt</a></li>
        <li class="Menu"><a class="Menu" href="../impressum.html" target="_top">Impressum</a></li>
      </ul>
    </li>
    <li class="Menu"><a class="Menu" href="http://de.selfhtml.org" target="_top">SelfHTML</a></li>
    <li class="Menu"><a class="Menu" href="http://www.drweb.de" target="_top">Dr. Web</a></li>
  </ul>
</body>
</html>

CSS

Editor - vorlagen/layout.css

/* Allgemeine Definitionen */
body     { background-color: #000040; font-family: "Arial",Helvetica,sans-serif;}
h1       { font-size: x-large; color: darkblue; }
h2       { font-size: large;   color: darkblue; }
p        { font-size: medium; }
#Name    { font-weight: bold; }
#Grad    { font-size: small; }
.Beruf   { font-style: italic; }
a        { text-decoration: none; color: WindowText;}
a:hover  { color: blue; }
hr       { width: 300px; margin-left: 0; }
address  { font-style: normal; }
.label   { display: inline-block; width: 3.5em; }

/* Definitionen für den Kopf der Webpräsenz */
/* Hintergrundfarbe hier und bei .KopfFrame muss gleich sein! */
#KopfDiv { background-color: #88f; border: 0; padding: 2pt;
           position: absolute; left: 2%; top: 0px; width: 95%; height: 100%; z-index: 1; }
.KopfFrame{background-color: #88f;}
p.Kopf   { text-align:center; }

/* Definitionen für das Menü der Webpräsenz */
/* Hintergrundfarbe hier und bei .MenueFrame muss gleich sein! */
#MenuDiv { background-color: #44f; border: 0; padding: 2pt;
           position: fixed; left: 0px; top: 95px; width: 200px; height: 300px; z-index: 2; }
.MenuFrame{background-color: #44f; overflow: hidden; }

ul.Menu  { padding-left: .5em; }
li.Menu  { list-style: none; margin: 3px }
a.Menu   { display: inline-block; width: 7em;
           padding: 1px; padding-left: 1em; border: 1px solid gray; background-color: silver; }

/* Definitionen für den Inhalt der Webpräsenz */
#InhaltDiv { background-color: #eee; border: .5em ridge #fff; padding: 1em;
             position: absolute; left: 210px; top: 95px; min-width: 50%; min-height: 50%; z-index: 3; }

⇦ Anhang: Tastaturkommandos / Anhang: Syntaxübersicht ⇨
Nach oben