<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title> Semantische Tag's </title>
    <meta name="author" content="Administrator"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"
      href="html5_semant-basis3.css" title="style1"/>

 <script type="text/javascript">
     "use strict"
    function details(sId) {
     "use strict"
   var element = document.getElementById(sId);
   if ( element.style.display == 'none' )
     element.style.display = 'block';
   else
     element.style.display = 'none';
  }  // fb
  </script>

  </head>
    
<body>
  <h1>Semantischen Tag</h1>
  <article >
    <header></header>
    <section>
      <aside>
        <h3>Seitenleiste</h3>
        <ul>
          <li>Menü1</li>
          <li>Menü2</li>
          <li>Menü3</li>
        </ul>
      </aside>
      <h1>Hauptüberschrift</h1>
      <p>CSS mit den semantischen Tag ist nicht ganz leicht</p>
      <p>Aber die Studenten sind <em>sehr</em> lernfähig</p>
      <p>Das Layout ist momentan noch überschaubar</p>
      <p>In den nächsten Beispielen wird es schwerer</p>
      <img src="Detail-white.png" alt="Version of the detail-element" border="0" onmousedown="details('idDetail');"  /> Details<br />
	<div id="idDetail" style="display:none"> 
	Diese Summary/Details-Technik wurde über Java-Skript realisiert. <br />
	hier ist der HTML:Quellcode:<br />
      &#60;img src="Detail-white.png" alt="Version of the detail-element" border="0" onmousedown="details('idDetail');"  /&#62; Details&#60;br /&#62;<br />
	&#60;div id="idDetail" style="display:none"&#62; 
	</div>
    </section>
    
    <section>
      <aside>
        <h3>2. Seitenleiste</h3>
        <ul>
          <li>Menü4</li>
          <li>Menü5</li>
          <li>Menü6</li>
        </ul>
      </aside>
      <h1>2. Hauptüberschrift</h1>
      <p>CSS mit den semantischen Tag ist nicht ganz leicht</p>
      <p>Aber die Studenten sind <em>sehr</em> lernfähig</p>
      <p>Das Layout ist momentan noch überschaubar</p>
      <p>In den nächsten Beispielen wird es schwerer</p>
    </section>
    <footer>
      Copyright &#169; by Michael Wilhelm
    </footer>

    <section>
      <h1>3. Java-Skript-Code</h1>
     <samp>
    &#60;script type="text/javascript"&#62;<br />
&#160;"use strict"<br />
&#160;function details(sId) {<br />
&#160;&#160;"use strict"<br />
&#160;&#160;var element = document.getElementById(sId);<br />
&#160;&#160;if ( element.style.display == 'none' )<br />
&#160;&#160;&#160;element.style.display = 'block';<br />
&#160;&#160;else<br />
&#160;&#160;&#160;element.style.display = 'none';<br />
&#160;}  // details<br />
  &#60;/script&#62;<br />
     </samp>
    </section>
     
  </article>



  
</body>


</html>














