<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Standardbefehl für responsive Seiten -->
    <style>
    <!--
    /* normale styles */
        body  {
	font-family: "Calibri"; 
	font-size: 12pt;
               width:50%;
        }            	
       BIG {font-family: "Calibri"; 
		font-size:14pt; 
		color: 000000;
		text-align:justify;  
		text-decoration: none;
		}
            H1 {
		font-family: "Calibri"; 
		font-size:16pt; 
		font-weight: bold; 
		text-align:center; 
            	background-color: #ddddff;
		}

    .bordergrau {
            	text-align:justify; 
                background-color:#eeeeee;
		border-style: solid;
                border-width:1px;
		border-spacing: 4px;
		padding:4px;
                }
     .borderflieder {
		background-color:#ccccff;
		border-style: solid;
		border-width:1px;
		padding:5px;
		}

      --> 
      </style>
   </head>
   <body>
              <h1>Ein Logo innerhalb des Rahmens</h1>
      <div class="bordergrau">
        Der Rahmen unter der Titelzeile ist in Wirklichkeit ein Rahmen oben im Menü. 

         <img src="bus.gif" style="float:right;width:156px;height:50px;padding:2px;" alt="Logo" title="Bus">
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam
<br />
      </div>

         <h1>Ein Logo unterbricht den Rand</h1>
         Wichtig sind float: und clear -Anweisungen.
         Der Trick besteht zusätzlich darin, ein Break <br >) zwischen dem Logo und 	dem Rahmen einzufügen.
	<div>
        <img src="drucker.gif" style="float:left;height:50px;clear:left;" alt="Logo" title="Drucker">

  <br />  <!--Dieses Break ist wichtig, um das Logo auf die Borderlinie zu bringen -->
         <div class="borderflieder">

Ein Pangramm (von griechisch πᾶν γράμμα pan gramma, jeder Buchstabe‘) oder holoalphabetischer Satz ist ein Satz, der alle Buchstaben des Alphabets enthält.
<br /><br />
Als echt werden Pangramme bezeichnet, in denen jeder Buchstabe genau einmal vorkommt, die also gleichzeitig Isogramme sind. Echte Pangramme mit den 26 lateinischen Buchstaben sind sehr schwer zu erzielen; es gibt keine Sprache, für die eines – mit nur natürlichen Wörtern in lateinischer Schrift – bekannt ist.
<br /><br />
Pangramme wurden früher häufig zum Testen von Fernschreibverbindungen und Schreibmaschinen genutzt, heute werden sie überwiegend als Blindtext oder zur Darstellung von Schriften eingesetzt.
<br />

         </div>
 
         </div>

         <br />
     
   </body>
</html>