3. [HTML] Codigos utiles en HTML
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
« anterior próximo »
Páginas: [1]   Ir Abajo

[HTML] Codigos utiles en HTML

  • 0 Respuestas
  • 1981 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5462
  • Actividad:
    15%
  • Reputación 35
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de

[HTML] Codigos utiles en HTML

« en: Febrero 24, 2010, 11:52:00 am »
Aqui posteare bastantes ejemplos de CODIGO HTML
Espero os guste...:D


Documento BASICO con DTD

HTML BASICO

Código: HTML5
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3.  
  5.  
  7. <title>HTML Básico</title>
  8. </head>
  9.  
  11.  
  12. <h1>HTML Básico</h1>
  13.  
  14. <hr>
  15.  
  16. <p>Esto es un párrafo, con un
  17. salto<br>de línea, precedido de una
  18. línea horizontal.</p>
  19.  
  20. <p align="right">Esto es otro párrafo
  21. alineado a la derecha.      Los
  22. separadores     extra   se ignoran.</p>
  23.  
  24. </body>
  25. </html>

Cabecera de TITULOS.

Código: HTML5
  3.  
  4. <h1>Cabecera h1</h1>
  5. <h2>Cabecera h2</h2>
  6. <h3>Cabecera h3</h3>
  7. <h4>Cabecera h4</h4>
  8. <h5>Cabecera h5</h5>
  9. <h6>Cabecera h6</h6>
  10.  
  11. </body>
  12. </html>

INSERCION de COMENTARIOS

Código: HTML5
  3.  
  4. <script type="text/javascript">
  5. <!--
  6. function saluda (texto)
  7. {
  8.  window.alert(texto);
  9. }
  10. //-->
  12.  
  13. </head>
  15.  
  16. <!-- Esto es un comentario
  17.     y no se visualizará. -->
  18.  
  19. <p>Los comentarios, además de servir
  20. como texto aclaratorio en los
  21. documentos, también se utilizan para
  22. evitar que el contenido correspondiente
  23. a elementos no reconocidos por algún
  24. navegador (o alguna versión anterior
  25. del mismo) se muestre de forma literal.
  26. Por ejemplo, en estilos y scripts.</p>
  27.  
  28. <script type="text/javascript">
  29. <!--
  30. saluda("Ejemplo de JavaScript");
  31. //-->
  33.  
  34. </body>
  35. </html>
  36. [/cose]
  37.  
  38. [color=red][b]METAINFORMACION[/b][/color]
  39.  
  40. [code=html5]
  42.  
  44.   <meta name="Description"
  45.  content="HTML,CSS,JavaScript,DHTML">
  46.   <meta content="text/html;
  47.  charset=UTF-8">
  48.   <meta http-equiv="Refresh" content="6;
  49.  url=/aii/">
  50. </head>
  51.  
  53.  
  54. <h2>Está página ha sido movida</h2>
  55.  
  56. <p>Serás redirigido a<br><a href="/aii/"><b>
  57. http://www.inforg.uniovi.es/aii/</b></a>
  58. <br>en 6 segundos.
  59. </p>
  60.  
  61. </body>
  62. </html>
  63.  

FORMATEO

Texto FORMATEADO

Código: HTML5
  3.  
  4. <p>Esto es un texto no formateado.</p>
  5.  
  6. <p>El siguiente texto está formateado: <br>
  7.  
  8. <b>Este texto está en negrita</b> <br>
  9.  
  10. <i>Este texto está en cursiva</i> <br>
  11.  
  12. <em>Texto enfatizado</em> <br>
  13.  
  14. <strong>Texto destacado</strong> <br>
  15.  
  16. <big>Texto grande</big> <br>
  17.  
  18. <small>Texto pequeño</small> <br>
  19.  
  20. Texto con <sup>superíndice</sup> <br>
  21.  
  22. Texto con <sub>subíndice</sub> <br></p>
  23.  
  24. </body>
  25. </html>
  26.  

Texto PREFORMATEADO

Código: HTML5
  3.  
  4. <p>
  5. El texto preformateado permite mostrar
  6. el texto tal cual se escribe, respetando
  7. todos los separadores. Habitualmente, el
  8. texto se mostrará con algún tipo de letra
  9. de ancho fijo.</p>
  10.  
  11. <pre>     Este texto está
  12.   preformateado
  13.  
  14. y se <b>verá</b>     igual que
  15.                         aquí.
  16.  
  17. Obsérvese que se interpreta el
  18. código HTML.</pre>
  19.  
  20. </body>
  21. </html>
  22.  

Texto COMPUTACIONAL

Código: HTML5
  3.  
  4. <p>
  5. <b>&lt;code&gt;</b> Define el texto como código para la computadora.</p>
  6.  
  7. <pre>
  8.   <code>
  9.   int s=0;
  10.   for (int i=0; i&lt;n; i++)
  11.     s+=i;
  12.   </code>
  13. </pre>
  14.  
  15. <p>
  16. <b>&lt;kbd&gt;</b>
  17. <kbd> Define texto a introducir por
  18. teclado</kbd>
  19. <br>
  20.  
  21. <b>&lt;samp&gt;</b>
  22. <samp>Código de computadora corto</samp>
  23. <br>
  24.  
  25. <b>&lt;tt&gt;</b>
  26. <tt>Define el tipo teletexto</tt>
  27. <br>
  28.  
  29. <b>&lt;var&gt;</b>
  30. <var>Define una variable</var>
  31. </p>
  32.  
  33. </body>
  34. </html>
  35.  

Texto MODIFICADO

Código: HTML5
  3.  
  4. <p>Para indicar las modificaciones
  5. en los documentos se indican las
  6. palabras borradas e insertadas.</p>
  7.  
  8. <p>Esta <del>palabra</del> está
  9. borrada y las palabras siguientes
  10. <ins>son nuevas</ins></p>
  11.  
  12. </body>
  13. </html>
  14.  

CITAS

Código: HTML5
  3.  
  4. <h4>Una cita corta:</h4>
  5. <p>
  6. <q>Si uno no sabe historia, no sabe
  7. nada.</q>
  8. <br>
  9. <em>Edward Johnston, 1990</em>
  10. </p>
  11.  
  12. <p><br></p>
  13.  
  14. <h4>Una cita larga:</h4>
  16. <p>
  17. La mayoría de las ideas fundamentales de
  18. la ciencia son esencialmente sencillas y,
  19. por regla general pueden ser expresadas
  20. en un lenguaje comprensible para todos.
  21. <br>
  22. <em>Albert Einstein</em>
  23. </p>
  25.  
  26. </body>
  27. </html>
  28. [/code=html5]
  29.  
  30. [color=red][b]DIRECCIONES[/b][/color]
  31.  
  32. [code=html5]
  35.  
  36. <p>
  37. Con la etiqueta <b>&lt;address&gt;</b>
  38. se indican los datos del autor
  39. del documento (u otras direcciones):
  40. </p>
  41.  
  42. <p><br></p>
  43.  
  45. &copy; 2000, Juan Fernández<br>
  46. Spain
  48.  
  49. </body>
  50. </html>
  51.  

Abreviaturas y Acronimos

Código: HTML5
  3.  
  4. <p><br>
  5. <abbr title="Abreviatura">
  6. UN
  7. </abbr></p>
  8.  
  9. <p>
  10. <acronym title="World Wide Web">
  11. WWW
  12. </acronym></p>
  13.  
  14. <p>
  15. En las versiones actuales de los
  16. navegadores el valor de la propiedad
  17. <b>title</b> se utiliza como elemento
  18. informativo, mostrándose dicho valor
  19. en una etiqueta al situar el ratón
  20. sobre el elemento.</p>
  21.  
  22. </body>
  23. </html>
  24.  

Direccion del TEXTO

Código: HTML5
  3.  
  4. <p>La etiqueta <b>&lt;bdo&gt;</b> permite
  5. indicar la dirección del texto.<br>
  6. El atributo <b>dir</b> es obligatorio y
  7. puede tomar los valores:<br>
  8. - ltr (de izquierda a derecha)<br>
  9. - rtl (de derecha a izquierda)</p>
  10.  
  11. <p><br></p>
  12.  
  13. <p><bdo dir="rtl">
  14. Derecha a izquierda<br>
  15. Dabale arroz a la zorra el abad
  16. </bdo></p>
  17.  
  18. </body>
  19. </html>
  20.  

LISTAS

Ejemplos de LISTAS

Código: HTML5
  3.  
  4. <h4>Una lista ordenada</h4>
  5. <ol>
  6.   <li>uno</li>
  7.   <li>dos</li>
  8.   <li>tres</li>
  9. </ol>
  10.  
  11. <h4>Una lista desordenada</h4>
  12. <ul>
  13.   <li>Asturias</li>
  14.   <li>Cantabria</li>
  15.   <li>Galicia</li>
  16. </ul>
  17.  
  18. <p><br>La lista ordenada se utiliza
  19. cuando los elementos de la misma se
  20. citan según un orden que es relevante.
  21. </p>
  22.  
  23. </body>
  24. </html>
  25.  

Listas ORDENADAS

Código: HTML5
  3.  
  4. <p>Se puede elegir el tipo de numeración
  5. de las listas ordenadas mediante el
  6. atributo <b>type</b> que puede tomar los
  7. valores: 1, a, A, i, I. </p>
  8.  
  9. <ol type="a">
  10.   <li>uno</li>
  11.   <li>dos</li>
  12.   <li>tres</li>
  13. </ol>
  14.  
  15. <ol type="I">
  16.   <li>uno</li>
  17.   <li>dos</li>
  18.   <li>tres</li>
  19. </ol>
  20.  
  21. </body>
  22. </html>
  23.  

Listas NO ORDENADAS

Código: HTML5
  3.  
  4. <p>Se puede elegir el tipo de viñeta
  5. de las listas no ordenadas mediante el
  6. atributo <b>type</b> que puede tomar los
  7. valores: disc, square, circle.</p>
  8.  
  9. <ul type="square">
  10.   <li>Asturias</li>
  11.   <li>Cantabria</li>
  12.   <li>Galicia</li>
  13. </ul>
  14.  
  15. <ul type="circle">
  16.   <li>Asturias</li>
  17.   <li>Cantabria</li>
  18.   <li>Galicia</li>
  19. </ul>
  20.  
  21. </body>
  22. </html>
  23.  

Listas ANIDADAS

Código: HTML5
  3.  
  4. <p>Cualquier elemento de una lista
  5. puede a su vez ser otra lista y así
  6. sucesivamente. De esta forma tenemos
  7. lo que se denomina listas anidadas.<br>
  8. No hay ninguna restricción en cuanto
  9. a la forma de anidamiento, pudiéndose
  10. mezclar ambos tipos de listas.</p>
  11.  
  12. <h4>Una lista anidada</h4>
  13.  
  14. <ol>
  15.   <li>uno</li>
  16.   <li>dos
  17.     <ul type="square">
  18.       <li>Asturias</li>
  19.       <li>Cantabria</li>
  20.       <li>Galicia</li>
  21.     </ul>
  22.   </li>
  23.   <li>tres</li>
  24. </ol>
  25.  
  26. </body>
  27. </html>
  28.  

Listas DESCRIPTIVAS

Código: HTML5
  3.  
  4. <p>Las listas descriptivas están
  5. formadas por términos a definir junto
  6. con las correspondientes definiciones.</p>
  7.  
  8. <h4>Una lista descriptiva</h4>
  9.  
  10. <dl>
  11.   <dt>HTML</dt>
  12.   <dd><i>HyperText Markup Language</i> es
  13.   la lengua franca para publicar
  14.   hipermedia en el World Wide Web.
  15.   </dd>
  16.   <dt>DHTML</dt>
  17.   <dd>HTML Dinámico. ¡ Esto si que es
  18.   díficil de definir!.<br>En realidad
  19.   es un conjunto de tecnologías.
  20.   </dd>
  21. </dl>
  22.  
  23. </body>
  24. </html>
  25.  

MARCOS

Marco VERTICAL

Código: HTML5
  2.  
  3. <frameset cols="30%,40%,30%">
  4.  
  5.   <frame src="ejframe1.html">
  6.   <frame src="ejframe2.html">
  7.   <frame src="ejframe3.html">
  8.  
  9. </frameset>
  10.  
  11. </html>
  12.  

Marco en HORIZONTAL

Código: HTML5
  2.  
  3. <frameset rows="30%,40%,30%">
  4.  
  5.   <frame src="ejframe1.html">
  6.   <frame src="ejframe2.html">
  7.   <frame src="ejframe3.html">
  8.  
  9. </frameset>
  10.  
  11. </html>
  12.  

Marcos y CONTENIDO ALTERNATIVO

Código: HTML5
  2.  
  3. <frameset cols="50%,50%">
  4.  
  5. <frame src="ejframe1.html">
  6.  
  7. <frameset rows="60%,40%">
  8.   <frame src="ejframe2.html">
  9.   <frame src="ejframe3.html">
  10. </frameset>
  11.  
  12. <!-- Contenido alternativo para
  13. navegadores que no admiten marcos -->
  14.  
  15. <noframes>
  17.   <h3>Su navegador no admite marcos</h3>
  18. </body>
  19. </noframes>
  20.  
  21. </frameset>
  22.  
  23. </html>
  24.  

Marcos en LINEA

Código: HTML5
  2. <body bgcolor="yellow">
  3.  
  4. <iframe width="300" height="275"
  5. src="http://www.uniovi.es/">
  7.  
  8. </body>
  9. </html>
  10.  

HIPERVINCULOS

Ejemplos de HIPERVINCULOS

Código: HTML5
  3.  
  4. <p>Las referencias a páginas del
  5. mismo web pueden ser absolutas o
  6. relativas.<br>
  7.  
  8. <a href="../index.php">Esto es un
  9. enlace</a> a una página de éste web.
  10. (URL relativa)
  11. </p>
  12.  
  13. <p>Las referencias a páginas de otros
  14. webs sólo pueden ser absolutas (si están en la misma máquina) o URLs completas.<br>
  15.  
  16. <a href="http://www.w3.org/">Esto es
  17. un enlace</a> a otra web y en otra máquina.</p>
  18.  
  19. </body>
  20. </html>
  21.  

MARCADORES (fragmentos)

Código: HTML5
  3.  
  4. <p>También se pueden hacer referencias
  5. a otras partes de la página identificadas
  6. mediante un marcador.<br></p>
  7.  
  8. <p><br>
  9. <a href="#linea15">Haz click aquí</a>
  10.  para ir a la línea 15.<br>
  11. 01<br>
  12. 02<br>
  13. 03<br>
  14. 04<br>
  15. 05<br>
  16. 06<br>
  17. 07<br>
  18. 08<br>
  19. 09<br>
  20. 10<br>
  21. 11<br>
  22. 12<br>
  23. 13<br>
  24. 14<br>
  25. <a name="linea15">15</a><br>
  26. 16<br>
  27. 17<br>
  28. 18<br>
  29. 19<br>
  30. 20<br>
  31. 21<br>
  32. 22<br>
  33. 23<br>
  34. 24<br>
  35. 25<br>
  36. 26<br>
  37. 27<br>
  38. 28<br>
  39. 29<br>
  40. 30<br>
  41. 31<br>
  42. 32<br>
  43. 33<br>
  44. 34<br>
  45. 35<br>
  46. 36<br>
  47. 37<br>
  48. 38<br>
  49. 39<br>
  50. 40<br>
  51. 41<br>
  52. 42<br>
  53. 43<br>
  54. 44<br>
  55. 45<br>
  56. 46<br>
  57. 47<br>
  58. 48<br>
  59. 49<br>
  60. </p>
  61.  
  62. </body>
  63. </html>
  64.  

En VENTANA NUEVA

Código: HTML5
  3.  
  4. <p>También se pueden referenciar,
  5. directamente, marcadores de otras páginas
  6. del web o de otros webs.</p>
  7.  
  8. <p>
  9. <a href="http://www.uniovi.es/" target="_blank">
  10. Esto es un enlace</a> a una página de otro web.
  11. </p>
  12.  
  13. <p><br>Mediante el atributo <b>target</b> se
  14. especifica donde se visualiza el contenido
  15. de la página referenciada.<br>
  16. Si el valor del atributo es <b>_blank</b>
  17. se muestra en una nueva ventana.</p>
  18.  
  19. </body>
  20. </html>
  21.  

Fuera de MARCOS

Código: HTML5
  2. <body> <!-- mostrar en marco -->
  3.  
  4. <p>
  5. Cuando se utilizan marcos (frames) las
  6. páginas referenciadas se muestran en éstos
  7. (como ocurre con el ejemplo). Si se quiere
  8. mostrar un documento fuera de los marcos
  9. debe especificarse el valor <b>_top</b>
  10. para el atributo <b>target</b>.
  11. </p>
  12.  
  13. <p>
  14. <a href="http://web.uniovi.es/"
  15. target="_top">Haz click aquí</a>
  16. </p>
  17.  
  18. </body>
  19. </html>
  20.  

Enlaces PARA ENVIOS DE MENSAJES

Código: HTML5
  3.  
  4. <h4>Mensaje</h4>
  5.  
  6. <p><a href="mailto:nadie@xxx.es">Envía
  7. un E-mail</a></p>
  8.  
  9. <h4>Mensaje con título</h4>
  10.  
  11. <p><a href="mailto:nadie@xxx.es?Subject=
  12. Hola de nuevo">Envía un E-mail</a></p>
  13.  
  14. <h4>Mensaje con título y contenido</h4>
  15. <p><a href="mailto:nadie@xxx.es?Subject=
  16. Hola de nuevo&amp;Body=Escribe algo aquí">
  17. Envía un E-mail</a></p>
  18.  
  19. </body>
  20. </html>
  21.  

TABLAS

Ejemplos de TABLAS


Código: HTML5
  3.  
  4. <p>
  5. La tabla está constituida por
  6. filas de datos.
  7. </p>
  8.  
  9. <table border="1">
  10. <!-- Primera fila -->
  11. <tr>
  12.   <td>Dato 1</td>
  13.   <td>Dato 2</td>
  14.   <td>Dato 3</td>
  15. </tr>
  16. <!-- Segunda fila -->
  17. <tr>
  18.   <td>Dato 4</td>
  19.   <td>Dato 5</td>
  20.   <td>Dato 6</td>
  21. </tr>
  23.  
  24. </body>
  25. </html>
  26.  

Descripcion Y BORDES

Código: HTML5
  3.  
  4. <p>Con la etiqueta <b>&lt;caption&gt;
  5. </b>se describe la tabla.</p>
  6.  
  7. <table border="1">
  8. <caption>Borde normal</caption>
  9. <tr>
  10.   <td>Primera</td>
  11.   <td>fila</td>
  12. </tr>
  13. <tr>
  14.   <td>Segunda</td>
  15.   <td>fila</td>
  16. </tr>
  18.  
  19. <p><br></p>
  20.  
  21. <table border="10">
  22. <caption>Borde grueso</caption>
  23. <tr>
  24.   <td>Primera</td>
  25.   <td>fila</td>
  26. </tr>
  27. <tr>
  28.   <td>Segunda</td>
  29.   <td>fila</td>
  30. </tr>
  32.  
  33. </body>
  34. </html>
  35.  

Con CELDAS de CABECERA

Código: HTML5
  3.  
  4. <p>
  5. La etiqueta <b>&lt;th&gt;</b> permite
  6. indicar las celdas cabecera de la tabla.
  7. <br></p>
  8.  
  9. <h4>Con cabeceras horizontales</h4>
  10. <table border="0">  <!-- Sin bordes -->
  11. <tr>
  12.   <th>Encabezado 1</th>
  13.   <th>Encabezado 2</th>
  14.   <th>Encabezado 3</th>
  15. </tr>
  16. <tr>
  17.   <td>Dato 1</td>
  18.   <td>Dato 2</td>
  19.   <td>Dato 3</td>
  20. </tr>
  21. <tr>
  22.   <td>Dato 4</td>
  23.   <td>Dato 5</td>
  24.   <td>Dato 6</td>
  25. </tr>
  27.  
  28. <p><br></p>
  29.  
  30. <h4>Con cabeceras verticales</h4>
  31. <table border="1">
  32. <tr>
  33.   <th>Encabezado 1</th>
  34.   <td>Dato 1</td>
  35.   <td>Dato 2</td>
  36. </tr>
  37. <tr>
  38.   <th>Encabezado 2</th>
  39.   <td>Dato 3</td>
  40.   <td>Dato 4</td>
  41. </tr>
  43.  
  44. </body>
  45. </html>
  46.  

Espaciados de CELDAS de la TABLA

Código: HTML5
  3.  
  4. <p>
  5. Para indicar margenes de separación en
  6. una tabla se utilizan los atributos:<br>
  7. <b>cellpadding</b>: espacio dentro de las
  8. celdas (entre borde y contenido).<br>
  9. <b>cellspacing</b>: espacio entre celdas.
  10. <br></p>
  11.  
  12. <p>Tabla con cellpadding="10"</p>
  13. <table border="1" cellpadding="10">
  14. <tr>
  15.   <td>---- Primera</td>
  16.   <td>fila ----</td>
  17. </tr>
  18. <tr>
  19.   <td>---- Segunda</td>
  20.   <td>fila ----</td>
  21. </tr>
  23.  
  24. <p><br>Tabla con cellspacing="10"</p>
  25. <table border="1" cellspacing="10">
  26. <tr>
  27.   <td>---- Primera</td>
  28.   <td>fila ----</td>
  29. </tr>
  30. <tr>
  31.   <td>---- Segunda</td>
  32.   <td>fila ----</td>
  33. </tr>
  35.  
  36. </body>
  37. </html>
  38.  

Union de CELDAS de la TABLA

Código: HTML5
  3.  
  4. <p>
  5. Se puede conseguir cualquier forma de
  6. tabla uniendo celdas horizontal o
  7. verticalmente. La unión de celdas se
  8. indica mediante los atributos:<br>
  9. <b>colspan</b> para unir celdas de una
  10. misma fila  <br>
  11. <b>rowspan</b> para unir celdas de una
  12. misma columna  <br><br>
  13. En ambos casos el valor del atributo es
  14. el número de celdas a unir.
  15. <br></p>
  16.  
  17. <table border="1">
  18. <tr>
  19.   <td>Uno</td>
  20.   <td>Dos</td>
  21.   <td>Tres</td>
  22.   <td rowspan="3">Cuatro</td>
  23. </tr>
  24. <tr>
  25.   <td rowspan="2">Cinco</td>
  26.   <td colspan="2">Seis</td>
  27. </tr>
  28. <tr>
  29.   <td>Siete</td>
  30.   <td>Ocho</td>
  31. </tr>
  33.  
  34. <p>Obsérvese que al unir celdas éstas sólo se declaran en la primera fila o columna de la unión.</p>
  35.  
  36. </body>
  37. </html>
  38.  

Tamaño y ALINEAMIENTO de la TABLA

Código: HTML5
  3.  
  4. <p>
  5. Atributos para establecer el tamaño y
  6. el alineamiento de la tabla:<br>
  7. <b>width</b> Fija la anchura de la
  8. tabla (en pixeles o porcentaje)<br>
  9. <b>align</b> Fija la posición de la
  10. tabla (<em>left</em>, <em>center</em> y <em>right</em>).
  11. <br></p>
  12.  
  13. <table border="1" align="center" width="70%">
  14. <tr>
  15.   <td>Uno</td>
  16.   <td>Dos</td>
  17.   <td>Tres</td>
  18. </tr>
  19. <tr>
  20.   <td>Cuatro</td>
  21.   <td>Cinco</td>
  22.   <td>Seis</td>
  23. </tr>
  25.  
  26. </body>
  27. </html>
  28.  

Inclusion de ETIQUETAS

Código: HTML5
  3.  
  4. <h4>Las celdas de una tabla pueden
  5. contener etiquetas HTML</h4>
  6.  
  7. <table border="3" width="80%">
  8. <tr>
  9.   <td>Uno</td>
  10.   <td>Dos<br>
  11.       <p>Esto es un párrafo</p>
  12.   </td>
  13.   <td>Tres<hr></td>
  14. </tr>
  15. <tr>
  16.   <td>Cuatro
  17.       <table border="1">
  18.       <tr>
  19.         <td><br></td>
  20.         <td><br></td>
  21.       </tr>
  22.       <tr>
  23.         <td><br></td>
  24.         <td><br></td>
  25.       </tr>
  26.       </table>
  27.   </td>
  28.   <td>Cinco</td>
  29.   <td><p>Seis</p>
  30.       <ul>
  31.         <li>Asturias</li>
  32.         <li>Cantabria</li>
  33.         <li>Galicia</li>
  34.       </ul>
  35.   </td>
  36. </tr>
  38.  
  39. </body>
  40. </html>
  41.  

Alineamiento de CELDAS

Código: HTML5
  3.  
  4. <p>
  5. Mediante los atributos <b>align</b> y
  6. <b>valign</b> se puede establecer el
  7. alineamiento horizontal y vertical para
  8. cada celda.</p>
  9. <p>También se puede fijar el alineamiento
  10. de una fila de la tabla con el atributo
  11. <b>align</b>.<br>
  12. </p>
  13.  
  14. <table border="1" width="60%">
  15. <tr align="center">
  16.   <td valign="top">Uno</td>
  17.   <td>Dos</td>
  18.   <td align="right">Tres<br><br></td>
  19. </tr>
  20. <tr>
  21.   <td>Cuatro<br><br></td>
  22.   <td valign="bottom">Cinco</td>
  23.   <td align="center">Seis</td>
  24. </tr>
  26.  
  27. </body>
  28. </html>
  29.  

Tamaños de las CELDAS

Código: HTML5
  3.  
  4. <table border="1" width="80%">
  5. <tr>
  6.   <td width="33%">Uno</td>
  7.   <td width="33%">Dos</td>
  8.   <td width="33%">Tres</td>
  9. </tr>
  10. <tr>
  11.   <td width="33%">Cuatro</td>
  12.   <td width="33%" height="120">Cinco</td>
  13.   <td width="33%">Seis</td>
  14. </tr>
  16.  
  17. </body>
  18. </html>
  19.  

Color de FONDO

Código: HTML5
  3.  
  4. <table bgcolor="red"
  5. border="1" width="80%">
  6. <tr>
  7.   <td>Uno</td>
  8.   <td>Dos</td>
  9.   <td>Tres</td>
  10. </tr>
  11. <tr>
  12.   <td>Cuatro</td>
  13.   <td>Cinco</td>
  14.   <td>Seis</td>
  15. </tr>
  17.  
  18. </body>
  19. </html>
  20.  

CELDAS con FONDO

Código: HTML5
  3.  
  4. <table border="1" width="80%" align="center">
  5. <tr bgcolor="yellow">
  6.  <td>Uno</td>
  7.  <td>Dos</td>
  8.  <td>Tres</td>
  9. </tr>
  10. <tr>
  11.  <td bgcolor="#DAA520">Cuatro</td>
  12.  <td>Cinco</td>
  13.  <td bgcolor="green">Seis</td>
  14. </tr>
  16.  
  17. </body>
  18. </html>
  19.  

Con CELDAS VACIAS

Código: HTML5
  3.  
  4. <table border="5" cellspacing="5"
  5. bgcolor="#DAA520">
  6. <tr>
  7.   <td>Uno</td>
  8.   <td></td>
  9.   <td>Dos</td>
  10. </tr>
  11. <tr>
  12.   <td>Tres</td>
  13.   <td>Cuatro</td>
  14.   <td>Cinco</td>
  15. </tr>
  17.  
  18. <p>Si se quieren dejar celdas vacías y
  19. que se vea el borde (y el fondo en algunos navegadores) es necesario poner un espacio
  20. en blanco: <b>&amp;nbsp;</b><br></p>
  21.  
  22. <table border="5" cellspacing="5"
  23. bgcolor="#DAA520">
  24. <tr>
  25.   <td>Uno</td>
  26.   <td>&nbsp;</td>
  27.   <td>Dos</td>
  28. </tr>
  29. <tr>
  30.   <td>Tres</td>
  31.   <td>Cuatro</td>
  32.   <td>Cinco</td>
  33. </tr>
  35.  
  36. </body>
  37. </html>
  38.  

El ATRIBUTO FRAME

Código: HTML5
  3.  
  4. <p>Se puede utilizar el atributo
  5. <b>frame</b> de tablas para indicar que
  6. partes del marco alrededor de la tabla
  7. deben mostrarse.<br>
  8. Los valores que puede tomar el atributo
  9. son: <b>void</b>, <b>above</b>,
  10. <b>below</b>, <b>hsides</b>, <b>lhs</b>,
  11. <b>rhs</b>, <b>vsides</b>, <b>box</b> y
  12. <b>border</b>.<br></p>
  13.  
  14. <table frame="vsides" border="10"
  15. cellspacing="5" width="70%">
  16. <tr>
  17.   <td height="100">Uno</td>
  18.   <td>Dos</td>
  19.   <td>Tres</td>
  20. </tr>
  21. <tr>
  22.   <td>Cuatro</td>
  23.   <td height="100">Cinco</td>
  24.   <td>Seis</td>
  25. </tr>
  27.  
  28. </body>
  29. </html>
  30.  

CABECERAS

Estilos INCRUSTADOS

Código: HTML5
  2.  
  4.  
  5. <style type="text/css">
  6. <!--
  7.  h1.rojo {color: red}
  8.  h2.azul {color: blue}
  9.  h3.verde {color: green}
  10. -->
  12.  
  13. </head>
  14.  
  16.  
  17. <h1 class="rojo">Cabecera h1</h1>
  18. <h2 class="azul">Cabecera h2</h2>
  19. <h3 class="verde">Cabecera h3</h3>
  20.  
  21. <p>El atributo <b>type</b> en el elemento de estilo (<b>style</b>) es obligatorio.</p>
  22.  
  23. </body>
  24. </html>
  25.  

Enlace a HOJAS DE ESTILO

Código: HTML5
  2.  
  4.  
  5. <link rel="stylesheet" type="text/css" href="estilos.css">
  6.  
  7. </head>
  8.  
  10.  
  11. <h1>Cabecera h1</h1>
  12. <h2>Cabecera h2</h2>
  13. <h3>Cabecera h3</h3>
  14.  
  15. <p><br></p>
  16.  
  17. <p>
  18. En este caso los colores de las cabeceras se han establecido con una hoja de estilos en cascada enlazada mediante el elemento de cabecera <b>link</b>.
  19. </p>
  20.  
  21. </body>
  22. </html>
  23.  

Destino de REFERENCIAS

Código: HTML5
  2.  
  4.  
  5. <base href="http://validator.w3.org/">
  6.  
  7. </head>
  8.  
  10.  
  11. <p>
  12. <a href="file-upload.html">
  13. Validación de archivos con código HTML</a>
  14. </p>
  15.  
  16. <p><br></p>
  17.  
  18. <p>Si situas el cursor sobre el enlace y te fijas
  19. en la barra de estado observaras que la URL
  20. relativa de destino del enlace se resuelve con
  21. respecto a la base dada.
  22. </p>
  23.  
  24. </body>
  25. </html>
  26.  

SCRIPTING

Código: HTML5
  2.  
  4.  
  5. <script type="text/javascript">
  6. <!--
  7. function msg ()
  8. {
  9.  window.alert("Hola a todos !");
  10. }
  11. //-->
  13.  
  14. </head>
  15.  
  17.  
  18. <p>
  19. <input type="button" value="Púlsame" onclick="msg()">
  20. </p>
  21.  
  22. </body>
  23. </html>
  24.  

FORMULARIOS

Campo de TEXTO

Código: HTML5
  3.  
  4. <p>Nombre:
  5. <input type="text" name="nombre">
  6. <br>Apellidos:
  7. <input type="text" size="35"
  8. name="apellidos"></p>
  9.  
  10. </body>
  11. </html>
  12.  

Opciones SIMPLES

Código: HTML5
  3.  
  4. <p>Tienes televisión:
  5. <input type="checkbox" name="ele" value="television"
  6. checked="checked">
  7. <br>
  8. Tienes vídeo:
  9. <input type="checkbox" name="ele" value="video">
  10. <br>
  11. Tienes DVD:
  12. <input type="checkbox" name="ele" value="DVD"></p>
  13.  
  14. </body>
  15. </html>
  16.  

Opciones EXCLUYENTES

Código: HTML5
  3.  
  4. <p>Hombre:
  5. <input type="radio" name="sexo" value="masc">
  6. <br>
  7. Mujer:
  8. <input type="radio" name="sexo" value="fem"
  9. checked="checked"></p>
  10.  
  11. </body>
  12. </html>
  13.  

Lista de OPCIONES

Código: HTML5
  3.  
  4. <p>Selecciona tu color preferido:<br>
  5. <select name="color">
  6. <option value="amarillo">Amarillo</option>
  7. <option value="azul">Azul</option>
  8. <option value="rojo">Rojo</option>
  9. <option value="verde">Verde</option>
  10. <option value="otro" selected="selected">
  11. Otro</option>
  13.  
  14.  
  15. <br><br>
  16.  
  17. Selecciona tus frutas predilectas:<br>
  18. <select name="frutas" size="7" multiple="multiple">
  19. <option value="melón">Melón</option>
  20. <option value="piña">Piña</option>
  21. <option value="uvas">Uvas</option>
  22. <option value="pera">Pera</option>
  23. <option value="manzana">Manzana</option>
  24. <option value="naranja">Naranja</option>
  25. <option value="plátano">Plátano</option>
  26. </select></p>
  27.  
  28. </body>
  29. </html>
  30.  

Area de TEXTO

Código: HTML5
  3.  
  4. <p>
  5. <textarea rows="10" cols="30" name="texto">
  6. Aquí puedes escribir el texto que quieras.
  7.  
  8. El elemento &lt;textarea&gt; sólo puede
  9. contener texto (incluido entidades).
  11. </p>
  12.  
  13. <p><br>Los atributos <b>rows</b> y <b>cols</b>
  14. del elemento <b>&lt;textarea&gt;</b> son
  15. obligatorios.</p>
  16.  
  17. </body>
  18. </html>
  19.  

Botones de ACCION

Código: HTML5
  3.  
  4. <p>Un botón
  5. <input type="button" value="Inicial">
  6. </p>
  7.  
  8. </body>
  9. </html>
  10.  

Etiquetas de CAMPOS de FORMULARIOS

Código: HTML5
  3.  
  4. <p>
  6. <b>Etiqueta</b>
  8.  
  9. <input type="text" name="nombre"
  10. value="es un ejemplo" readonly>
  11. </p>
  12.  
  13. </body>
  14. </html>
  15.  

Agrupacion de CAMPOS

Código: HTML5
  3.  
  5. <legend>Ficha de compra</legend>
  6. <label>Nombre</label>
  7. <input type="text" name="nombre">
  8. <br>
  9. <label>Apellidos</label>
  10. <input type="text" size="35"
  11. name="apellidos">
  12.  
  13. <br><br>
  14.  
  15. <label>Televisión</label>
  16. <input type="checkbox" name="TV">
  17. <label>Vídeo</label>
  18. <input type="checkbox" name="vídeo">
  19. <label>DVD</label>
  20. <input type="checkbox" name="DVD">
  22.  
  23. </body>
  24. </html>
  25.  

TEXTO OCULTO

Código: HTML5
  3.  
  4. <p>
  5. Contraseña:
  6. <input type="password" name="passw">
  7. </p>
  8.  
  9. </body>
  10. </html>
  11.  

Cargar ARCHIVO

Código: HTML5
  3.  
  4. <p>
  5. <label>Archivo</label>
  6. <input type="file" name="fname">
  7. </p>
  8.  
  9. </body>
  10. </html>
  11.  

FORMULARIOS INTERACTIVOS

Metodo GET

Código: HTML5
  3.  
  4. <form method="get"
  5. action="formej1.php">
  7. <legend>Formulario</legend>
  8. <label>Nombre</label>
  9. <input type="text" name="nombre">
  10. <br>
  11. <label>Apellidos</label>
  12. <input type="text" size="30"
  13. name="apellidos">
  14. <br><br>
  15. <label>E-mail</label>
  16. <input type="text" size="30"
  17. name="email">
  18.  
  19. <br><br>
  20.  
  21. <h4>De que aparatos dispones:</h4>
  22. <label>Televisión</label>
  23. <input type="checkbox" name="aparatos[1]"
  24. value="Televisión">
  25. <label>Vídeo</label>
  26. <input type="checkbox" name="aparatos[2]"
  27. value="Vídeo">
  28. <label>DVD</label>
  29. <input type="checkbox" name="aparatos[3]"
  30. value="DVD">
  31.  
  32. <br><br>
  33.  
  34. <input type="submit" value=" Enviar ">
  35. <input type="reset" value="Restablecer">
  37. </form>
  38.  
  39. <p><br></p>
  40.  
  41. <p>El atributo <b>action</b> del
  42. <b>form</b> es obligatorio.</p>
  43.  
  44. </body>
  45. </html>
  46.  

metodo POST

Código: HTML5
  3.  
  4. <form method="post"
  5. action="formej2.php">
  7. <legend>Formulario</legend>
  8. <label>Selecciona tus frutas predilectas</label><br>
  9. <select name="frutas[]" size="7" multiple>
  10. <option value="melón">Melón</option>
  11. <option value="piña">Piña</option>
  12. <option value="uvas">Uvas</option>
  13. <option value="pera">Pera</option>
  14. <option value="manzana">Manzana</option>
  15. <option value="naranja">Naranja</option>
  16. <option value="plátano">Plátano</option>
  18.  
  19. <br><br>
  20.  
  21. <label>Tus comentarios</label>
  22. <textarea rows="5" cols="30"
  23. name="comentarios">
  24. Escribe aquí
  26.  
  27. <br><br>
  28.  
  29. <input type="submit" value=" Enviar ">
  30. <input type="reset" value="Restablecer">
  32. </form>
  33.  
  34. <p>Observa que puedes seleccionar más de
  35. una fruta manteniendo pulsada la tecla
  36. <b>CTRL</b>.</p>
  37.  
  38. </body>
  39. </html>
  40.  

IMAGENES

Documento con IMAGENES

Código: HTML5
  3.  
  4. <p>Esto es una imagen:
  5. <img src="rana.gif" width="79"
  6. height="78" alt="fija">
  7. </p>
  8.  
  9. <p><br></p>
  10.  
  11. <p>Esto es una imagen en movimiento
  12. (un <i>gif</i> animado):
  13. <img src="agolpes.gif" width="140"
  14. height="104" alt="animada">
  15. </p>
  16.  
  17. <p><br></p>
  18.  
  19. <p>Los atributos <b>src</b> y <b>alt</b>
  20. son obligatorios.</p>
  21.  
  22. </body>
  23. </html>
  24.  

Alineacion de ELEMENTOS

Código: HTML5
  3.  
  4. <p>
  5. Esto es un párrafo con una imagen
  6. <img src="ranita.gif" align="left"
  7. width="55" height="55" alt=""> a la
  8. izquierda del texto (la imagen flotará a
  9. la izquierda del párrafo).
  10. </p>
  11.  
  12. <p>
  13. <img src="ranita.gif" align="right"
  14. width="55" height="55" alt="">
  15. Esto es un párrafo con una imagen a la
  16. derecha del texto (la imagen flotará a
  17. la derecha del párrafo).
  18. </p>
  19.  
  20. <p>
  21. <img src="ranita.gif" width="55"
  22. height="55" alt="">
  23. Una imagen antes del texto.
  24. </p>
  25.  
  26. <p>
  27. Una imagen después del texto
  28. <img src="ranita.gif" align="top"
  29. width="55" height="55" alt="">
  30. </p>
  31.  
  32. <p>
  33. Esto es una imagen incluida
  34. <img src="ranita.gif" align="middle"
  35. width="55" height="55" alt="">
  36. en el texto.
  37. </p>
  38.  
  39. </body>
  40. </html>
  41.  

TAMAÑO

Código: HTML5
  3.  
  4. <p>Variando los valores de los atributos
  5. <b>width</b> y <b>height</b> se puede
  6. ampliar o redurcir una imagen.</p>
  7.  
  8. <p><br></p>
  9.  
  10. <p>Esto es una imagen normal:
  11. <img src="rana.gif" width="79"
  12. height="78" alt="">
  13. </p>
  14.  
  15. <p><br></p>
  16.  
  17. <p>Esto es una imagen ampliada:
  18. <img src="rana.gif" width="150"
  19. height="150" alt="">
  20. </p>
  21.  
  22. <p><br></p>
  23.  
  24. <p>Esto es una imagen reducida:
  25. <img src="rana.gif" width="50"
  26. height="40" alt="">
  27. </p>
  28.  
  29. </body>
  30. </html>
  31.  

Texto ALTERNATIVO y TITULO

Código: HTML5
  3.  
  4. <h2>Imagen con texto alternativo</h2>
  5.  
  6. <p><br></p>
  7.  
  8. <p>Sitúa el cursor sobre la imagen
  9. <img src="rana.gif"
  10. alt="Imagen de una rana"
  11. title="Imagen de una rana"
  12. width="79" height="78">
  13. </p>
  14.  
  15. <p><br></p>
  16.  
  17. <p>El texto alternativo, dado mediante el atributo <b>alt</b> debe permitir interpretar la misión de la imagen aún en el caso de que ésta no sea visible.</p>
  18.  
  19. </body>
  20. </html>
  21.  

Bordes y MARGENES

Código: HTML5
  3.  
  4. <table border="1">
  5. <tr>
  6.   <td>
  7.   <img src="rana.gif"
  8.  border="2" width="79" height="78"
  9.  alt="rana">
  10.   </td>
  11. </tr>
  13.  
  14. <p><br></p>
  15.  
  16. <table border="1">
  17. <tr>
  18.   <td>
  19.   <img src="rana.gif"
  20.  border="2" hspace="40" vspace="60"
  21.  width="79" height="78" alt="rana">
  22.   </td>
  23. </tr>
  25.  
  26. </body>
  27. </html>
  28.  

Mapa de IMAGENES

Código: HTML5
  3.  
  4. <p>
  5. <map name="prueba">
  6. <area shape="circle" coords="60,60,40"
  7. alt="La página del WWW"
  8. href="/aii/tutorial.php">
  9. <area shape="rect"
  10. coords="105,78,155,100"
  11. alt="Tutorial de HTML"
  12. href="/aii/ejemplos.php?id_codigo=1&amp;codigo=HTML">
  13. <area shape="rect"
  14. coords="105,110,155,135"
  15. alt="Tutorial de CSS"
  16. href="/aii/ejemplos.php?id_codigo=2&amp;codigo=CSS">
  17. <area shape="rect"
  18. coords="105,140,155,165"
  19. alt="Tutorial de DOM"
  20. href="/aii/ejemplos.php?id_codigo=4&amp;codigo=DHTML">
  21. </map>
  22. </p>
  23.  
  24. <h1>Ejemplo de mapa</h1>
  25.  
  26. <p><br>La imagen tiene cuatro zonas activas.
  27. Haz click sobre ellas:<br><br>
  28. <img src="mapa.jpg" border="0"
  29. usemap="#prueba" width="176"
  30. height="185" alt="mapa">
  31. </p>
  32.  
  33. </body>
  34. </html>
  35.  

===============================================================================
Me llevo toda la tarde acomodarlo y re hacerlo, asi que espero os guste.... By: Mainfox
« Última modificación: Abril 18, 2014, 11:38:18 am por Expermicid »
En línea

Páginas: [1]   Ir Arriba
« anterior próximo »
 

¿Te gustó el post? COMPARTILO!



Códigos .htaccess que siempre deberias saber

Iniciado por ANTRAX

 Respuestas: 5
Vistas: 4026 		Último mensaje Noviembre 04, 2014, 11:11:47 pm
por DeBobiPro
[HTML][BASICO] Script ''Haga desfilar un texto mediante la etiqueta <marquee>''

Iniciado por ANTRAX

 Respuestas: 0
Vistas: 1112 		Último mensaje Febrero 24, 2010, 11:15:37 am
por ANTRAX
[HTML][MEDIO] Crea un banner con luces LED para tus perfiles con Mint Profile

Iniciado por godmurdoc

 Respuestas: 0
Vistas: 1591 		Último mensaje Julio 04, 2011, 04:04:02 pm
por godmurdoc
Curso: Diseño Web: [HTML y CSS Desde Cero] [Convierte tus diseños en sitios web]

Iniciado por Mr.Kratos

 Respuestas: 0
Vistas: 1376 		Último mensaje Julio 27, 2018, 01:20:17 pm
por Mr.Kratos
[VIDEOTUTORIAL] Full Stack Developer - Desde HTML hasta PYTHON - 15 GB

Iniciado por graphixx

 Respuestas: 5
Vistas: 9593 		Último mensaje Abril 01, 2018, 02:46:38 pm
por graphixx