Status servidor web!

Front-end
#1

Olá estou criando um website de um game e estou meio enrolado na parte de mostra o status do servidor ou seja se esta online ou offline, so que o codigo php fica mostrando direto e fica tudo bagunçado, não somente mostra se ta online ou offline .vou posta o codigo e uma imagem. queria que alguem me ajuda-se a organizar e sabe porque fica mostrando o codigo php direto no site.

  <div id="page" class="container">
    <div id="content">
      <div class="post">
        <iframe name="conteudo" id="conteudo" frameborder="0" scrolling="Auto" allowtransparency="true"  width="100%" height="565" src="home.php"></iframe>
      </div>
    </div>
    <div id="sidebar">
	<div id="box_rod4">
	  <?php
        $fp = @fsockopen("127.0.0.1", 2106, $errno, $errstr, 1);
        if($fp >= 1){
        echo '<h4>LOGIN SERVER: <img src="images/online.png" alt="" width="11" height="10" /></h4>';}
        else{ echo '<h4>LOGIN SERVER: <img src="images/offline.png" alt="" width="11" height="10" /></h4>'; }
        ?> </div>
						
		<div id="box_rod2">
		<?php
        $fp = @fsockopen("127.0.0.1", 7777, $errno, $errstr, 1);
        if($fp >= 1){
        echo '<h4>GAME SERVER: <img src="images/online.png" alt="" width="11" height="10" /></h4>';}
        else{ echo '<h4>GAME SERVER: <img src="images/offline.png" alt="" width="11" height="10" /></h4>';}
        ?></div>		
      <ul class="style3">
        <li></li>
      </ul>
      <p class="Estilo1">Fiquem atento as noticias de nosso servidor!</p>
      <p class="Estilo1">Em breve novos eventos, promoções e sorteios para animar a todos!<br />
      </p>
      <ul class="style3">
        <li></li>
        <a href="#"> </a><a href="#" target="conteudo"> </a>
      </ul>
 
      <p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/Facebook.png',1)"><img src="images/Facebook2.png" alt="" width="50" height="50" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/Orkut.png',1)"><img src="images/Orkut2.png" alt="" width="50" height="50" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/Twitter.png',1)"><img src="images/Twitter2.png" alt="" width="50" height="50" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/YouTube.png',1)"><img src="images/YouTube2.png" alt="" width="50" height="50" border="0" id="Image9" /></a></p>
      <p>&nbsp;</p>
      <p><br />
          <br />
        <br />
      </p>
      <p><br />
        <br />
</p>
    </div>
  </div>

#2