Fil dels
Apunts
Comentaris

HTML

Crear un bloc en html i php

Categories: HTML Data: mar 8th, 2010

Consta de tres fitxers ubicats a la mateixa carpeta (bloc_html_php):

  • bloc.htm
  • nova_entrada.htm
  • escriu_entrada.php

bloc.htm

HTML:
  3.       <meta name="robots" content="noindex, nofollow">
  4.       <meta http-equiv="Content-Language" content="ca">
  5.       <title>Bloc de notes en htm/title </title>
  6.  </head>
  7. <body style="background-image: url('bloc_entrades.htm')">
  8. <table style="width: 500px; background-color: #C0C0C0; background-image: url('images/cuaderno.jpg');" align="center">
  9.     <tr>
  10.         <td style="text-align: center; font-weight: 700" colspan="2">Bloc de notes en html</td>
  11.     </tr>
  12.     <tr>
  13.         <td style="text-align: center" colspan="2">&nbsp;</td>
  14.     </tr>
  15.     <tr>
  16.         <td style="text-align: center" colspan="2">
  17.         <a href="nova_entrada.htm" style="font-size: large; font-weight: 700; color: #FF0000">Entrar
  18.         anotació</a></td>
  19.     </tr>
  20.     <tr>
  21.         <td colspan="2">&nbsp;</td>
  22.     </tr>
  23.     <tr>
  24.         <td style="text-align: justify; width: 40px;">
  25.        
  26.         &nbsp;
  27.        
  28.         &nbsp;</td>
  29.         <td style="background-position: 0px 0px; text-align: justify; background-repeat: repeat; background-attachment: scroll; height: 24px;">
  30. <!--begin-->
  31. <br></td>
  32.     </tr>
  33. </table>
  34. </body>
  35. </html>

Nova_entrada:

HTML:
  2.  
  4. <meta http-equiv="Content-Language" content="ca">
  5. <meta name="GENERATOR" content="Microsoft FrontPage 12.0">
  6. <meta name="ProgId" content="FrontPage.Editor.Document">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <title>nova_lectura</title>
  9.  
  10.  <script type language="javascript">
  11. function func()
  12. {
  13.     c= document.form_entrada.CH.value
  14.   // alert (c)
  15.    if(c=="5"){
  16.      
  17.        document.form_entrada.submit()
  18.  
  19.       }
  20.    else{
  21.    alert ("suma be. aixo es per intetar evitar els espams")
  22.  
  23.    }   
  24. }
  25.     </script>
  26.  
  27. </head>
  28.  
  30.  
  31.   <form  action="escriu_entrada.php" method="post" name="form_entrada">
  32. <table style="width: 500px; background-color: #C0C0C0" align="center">
  33.     <tr>
  34.         <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td>
  35.         <td>&nbsp;</td>
  36.     </tr>
  37.     <tr>
  38.         <td>&nbsp;</td>
  39.         <td>
  40.         <p>Nova entrada:&nbsp;
  41.    
  42. &nbsp;&nbsp;<textarea name="entrada" rows="2" style="width: 575px"></textarea><p>Pregunta anti-spasm: 2+3 =&nbsp;
  43. <input type="text" id="CH" name="SPASM" size="15">
  44.         <p>
  45. <input type="button" id="b" value="Entrar"  onclick="func();"> &nbsp;&nbsp;
  46. <input type="reset" value="Borrar">
  47.         </td>
  48.     </tr>
  49.     <tr>
  50.         <td>&nbsp;</td>
  51.         <td>&nbsp;</td>
  52.     </tr>
  53. </table>
  54.  
  55. </form>
  56. </body>
  57. </html>

escriu_entrada.php:

HTML:
  3. <meta http-equiv="Content-Language" content="ca">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. </head>
  7. <?php
  8. $begin= "<!--begin-->";
  9. $begin .=chr (13).chr(10);
  10. $data= gmdate("d-m-Y h:i:s"); 
  11. $anotacio ="<br>". $data. " " .  $_POST["entrada"]. "<br>" ;
  12. $lineas = file("bloc_entrades.htm");
  13. $fp = fopen("bloc_entrades.htm", "w");
  14. foreach ($lineas as $linea_num => $linea) {
  15.       if ($linea == $begin) {
  16.              $lineas[$linea_num+1]= $anotacio . $lineas[$linea_num+1];
  17.       }
  18. }
  19. ob_start();
  20. foreach ($lineas as $linea_num => $linea) {
  21. echo  ($linea);
  22. }
  23. $html = ob_get_contents();
  24. ob_end_clean();
  25. fwrite($fp, $html);
  26. fclose($fp);
  27. echo "Has afegit la següent entrada: " . "<br>";
  28. ECHO $anotacio . "<br>";
  29. ?>
  30. <meta http-equiv="refresh" content="0; URL= http://www.beseit.net/aplicacions/bloc_html/bloc_entrades.htm">
  31. </body>
  32. </html>

deixar un comentari /editar »

Html. Marcs utilitzats al bloc

Categories: Bloc de Notes, HTML, Word Press Data: gen 28th, 2010

M’ha semblat útil fer algunes parts del bloc en marcs. Especialment les que recullen enllaços a altres webs, per exemple el marc de diaris. Això permet navegar còmodament per tots els sense abandonar la finestra principal.
Com s’aconsegueix això? Simplement es crea una pagina de definició de marcs. Aquesta pàgina indica al navegador que ha de dividir la pantalla en dues parts (o les que siguin) anomenades marcs, i que a cada una ha de mostrar una pàgina html diferent.
Pagina de definició de marcs (per example index.html)

HTML:
  3. <title>diaris</title>
  4. </head>
  5.  
  6. <frameset cols="22%,*">
  7. <frame name="diaris"  src="diaris.htm" >
  8. <frame name="principal" src="principal.htm">
  9. </frameset>
  10.  
  13.  
  14. </body>
  15. </noframes>
  16.  
  17. </html>

Marc esquerr (diaris.html)

HTML:
  3. <title>llistat de diaris</title>
  4. </head>
  6. <p><a href="http://www.beseit.net/" target="_top">home</a></p>
  7. <p><a href="http://www.avui.cat" target="principal">avui</a></p>
  8. </body>
  9. </html>

Marc dret (area reservada per a mostrar el diari escollit)

HTML:
  3. <title>principal</title>
  4. <style type="text/css">
  5. .style1 {
  6.     font-size: large;
  7.     color: #0000FF;
  8.     text-align: center;
  9. }
  10. .style2 {
  11.     font-size: x-large;
  12.     color: #0000FF;
  13.     text-align: center;
  14. }
  15. </style>
  16. </head>
  18. <p class="style1">&nbsp;</p>
  19. <p class="style1">&nbsp;</p>
  20. <p class="style1">&nbsp;</p>
  21. <p class="style2"><strong>Punxa a la esquerra lo diari que vulguis fullejar. </strong></p>
  22. </body>
  23. </html>

deixar un comentari /editar »

Html. iframe

Categories: Bloc de Notes, HTML Data: gen 28th, 2010

HTML:
  1. <iframe src="http://www.gilpo.com/html/frame.html" width="600" height="700" scrolling="yes" frameborder="0"></iframe>

Exemple:

deixar un comentari /editar »

Tabla d’ample fixa de 500px, alineada al centra

Categories: Bloc de Notes, HTML Data: gen 26th, 2010




Tabla de ample fixa de 500px alineada al centra


HTML:
  3. <style type="text/css">
  4. .style1 {
  5.     border: 1px solid #00FF00;
  6. }
  7. </style>
  8. </head>
  10. <table style="width: 500px" align="center" class="style1">
  11.     <tr>
  12.         <td>Tabla de ample fixa de 500px alineada al centra</td>
  13.     </tr>
  14. </table>
  15.  
  16. </body>
  17.  
  18. </html>

deixar un comentari /editar »