Zum Inhalt

Inhaltsverzeichnis • Anhang • Anhang: Allgemein • Anhang: Beispiel
⇦ Anhang: Tastaturkommandos / Anhang: Syntaxübersicht ⇨
08.10.2014 12:05:28

Anhang: Beispiel

Beispiel 1Beispiel 2Beispiel 3Beispiel 4Beispiel 5Beispiel 6Beispiel 7Beispiel 8Beispiel 9Beispiel 10HTMLCSSBeispiel 11HTMLBeispiel 12HTMLJSBeispiel 13HTMLJSDOMBeispiel WebpräsenzHTMLHTML KopfHTML MenuCSS

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

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