comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[HTML] Codigos utiles en HTML

  • 0 Respuestas
  • 1809 Vistas

0 Usuarios y 3 Visitantes están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5409
  • Actividad:
    18.33%
  • Reputación 33
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« 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.  
  4.  
  5. <title>HTML Básico</title>
  6. </head>
  7.  
  8.  
  9. <h1>HTML Básico</h1>
  10.  
  11. <hr>
  12.  
  13. <p>Esto es un párrafo, con un
  14. salto<br>de línea, precedido de una
  15. línea horizontal.</p>
  16.  
  17. <p align="right">Esto es otro párrafo
  18. alineado a la derecha.      Los
  19. separadores     extra   se ignoran.</p>
  20.  
  21. </body>
  22. </html>

Cabecera de TITULOS.

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

INSERCION de COMENTARIOS

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

FORMATEO

Texto FORMATEADO

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

Texto PREFORMATEADO

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

Texto COMPUTACIONAL

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

Texto MODIFICADO

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

CITAS

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

Abreviaturas y Acronimos

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

Direccion del TEXTO

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

LISTAS

Ejemplos de LISTAS

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

Listas ORDENADAS

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

Listas NO ORDENADAS

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

Listas ANIDADAS

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

Listas DESCRIPTIVAS

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

MARCOS

Marco VERTICAL

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

Marco en HORIZONTAL

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

Marcos y CONTENIDO ALTERNATIVO

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

Marcos en LINEA

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

HIPERVINCULOS

Ejemplos de HIPERVINCULOS

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

MARCADORES (fragmentos)

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

En VENTANA NUEVA

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

Fuera de MARCOS

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

Enlaces PARA ENVIOS DE MENSAJES

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

TABLAS

Ejemplos de TABLAS


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

Descripcion Y BORDES

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

Con CELDAS de CABECERA

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

Espaciados de CELDAS de la TABLA

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

Union de CELDAS de la TABLA

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

Tamaño y ALINEAMIENTO de la TABLA

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

Inclusion de ETIQUETAS

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

Alineamiento de CELDAS

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

Tamaños de las CELDAS

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

Color de FONDO

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

CELDAS con FONDO

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

Con CELDAS VACIAS

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

El ATRIBUTO FRAME

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

CABECERAS

Estilos INCRUSTADOS

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

Enlace a HOJAS DE ESTILO

Código: HTML5
  1.  
  2.  
  3. <link rel="stylesheet" type="text/css" href="estilos.css">
  4.  
  5. </head>
  6.  
  7.  
  8. <h1>Cabecera h1</h1>
  9. <h2>Cabecera h2</h2>
  10. <h3>Cabecera h3</h3>
  11.  
  12. <p><br></p>
  13.  
  14. <p>
  15. 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>.
  16. </p>
  17.  
  18. </body>
  19. </html>
  20.  

Destino de REFERENCIAS

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

SCRIPTING

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

FORMULARIOS

Campo de TEXTO

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

Opciones SIMPLES

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

Opciones EXCLUYENTES

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

Lista de OPCIONES

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

Area de TEXTO

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

Botones de ACCION

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

Etiquetas de CAMPOS de FORMULARIOS

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

Agrupacion de CAMPOS

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

TEXTO OCULTO

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

Cargar ARCHIVO

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

FORMULARIOS INTERACTIVOS

Metodo GET

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

metodo POST

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

IMAGENES

Documento con IMAGENES

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

Alineacion de ELEMENTOS

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

TAMAÑO

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

Texto ALTERNATIVO y TITULO

Código: HTML5
  1.  
  2. <h2>Imagen con texto alternativo</h2>
  3.  
  4. <p><br></p>
  5.  
  6. <p>Sitúa el cursor sobre la imagen
  7. <img src="rana.gif"
  8. alt="Imagen de una rana"
  9. title="Imagen de una rana"
  10. width="79" height="78">
  11. </p>
  12.  
  13. <p><br></p>
  14.  
  15. <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>
  16.  
  17. </body>
  18. </html>
  19.  

Bordes y MARGENES

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

Mapa de IMAGENES

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

===============================================================================
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 »


 

¿Te gustó el post? COMPARTILO!



Códigos .htaccess que siempre deberias saber

Iniciado por ANTRAX

Respuestas: 5
Vistas: 3784
Ú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: 994
Ú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: 1400
Ú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: 528
Ú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: 8349
Último mensaje Abril 01, 2018, 02:46:38 pm
por graphixx