[HTML] Codigos utiles en HTML

ANTRAX · Febrero 24, 2010, 11:52:00 AM

Aqui posteare bastantes ejemplos de CODIGO HTML
Espero os guste...

Documento BASICO con DTD

HTML BASICO

Código: html5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>HTML Básico</title>
</head>

<body>

<h1>HTML Básico</h1>

<hr>

<p>Esto es un párrafo, con un
salto<br>de línea, precedido de una
línea horizontal.</p>

<p align="right">Esto es otro párrafo
alineado a la derecha.      Los
separadores     extra   se ignoran.</p>

</body>
</html>

Cabecera de TITULOS.

Código: html5

<html>
<body>

<h1>Cabecera h1</h1>
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<h4>Cabecera h4</h4>
<h5>Cabecera h5</h5>
<h6>Cabecera h6</h6>

</body>
</html>

INSERCION de COMENTARIOS

Código: html5


<html>
<head>

<script type="text/javascript">
<!--
function saluda (texto)
{
  window.alert(texto);
}
//-->
</script>

</head>
<body>

<!-- Esto es un comentario
     y no se visualizará. -->

<p>Los comentarios, además de servir
como texto aclaratorio en los
documentos, también se utilizan para
evitar que el contenido correspondiente
a elementos no reconocidos por algún
navegador (o alguna versión anterior
del mismo) se muestre de forma literal.
Por ejemplo, en estilos y scripts.</p>

<script type="text/javascript">
<!--
saluda("Ejemplo de JavaScript");
//-->
</script>

</body>
</html>
[/cose]

[color=red][b]METAINFORMACION[/b][/color]

[code=html5]
<html>

<head>
  <meta name="Description"
  content="HTML,CSS,JavaScript,DHTML">
  <meta content="text/html;
  charset=UTF-8">
  <meta http-equiv="Refresh" content="6;
  url=/aii/">
</head>

<body>

<h2>Está página ha sido movida</h2>

<p>Serás redirigido a<br><a href="/aii/"><b>
http://www.inforg.uniovi.es/aii/</b></a>
<br>en 6 segundos.
</p>

</body>
</html>

FORMATEO

Texto FORMATEADO

Código: html5


<html>
<body>

<p>Esto es un texto no formateado.</p>

<p>El siguiente texto está formateado: <br>

<b>Este texto está en negrita</b> <br>

<i>Este texto está en cursiva</i> <br>

<em>Texto enfatizado</em> <br>

<strong>Texto destacado</strong> <br>

<big>Texto grande</big> <br>

<small>Texto pequeño</small> <br>

Texto con <sup>superíndice</sup> <br>

Texto con <sub>subíndice</sub> <br></p>

</body>
</html>

Texto PREFORMATEADO

Código: html5


<html>
<body>

<p>
El texto preformateado permite mostrar
el texto tal cual se escribe, respetando
todos los separadores. Habitualmente, el
texto se mostrará con algún tipo de letra
de ancho fijo.</p>

<pre>     Este texto está
  preformateado

y se <b>verá</b>     igual que
                        aquí.

Obsérvese que se interpreta el
código HTML.</pre>

</body>
</html>

Texto COMPUTACIONAL

Código: html5


<html>
<body>

<p>
<b>&lt;code&gt;</b> Define el texto como código para la computadora.</p>

<pre>
  <code>
  int s=0;
  for (int i=0; i&lt;n; i++)
    s+=i;
  </code>
</pre>

<p>
<b>&lt;kbd&gt;</b>
<kbd> Define texto a introducir por
teclado</kbd>
<br>

<b>&lt;samp&gt;</b>
<samp>Código de computadora corto</samp>
<br>

<b>&lt;tt&gt;</b>
<tt>Define el tipo teletexto</tt> 
<br>

<b>&lt;var&gt;</b>
<var>Define una variable</var>
</p>

</body>
</html>

Texto MODIFICADO

Código: html5


<html>
<body>

<p>Para indicar las modificaciones
en los documentos se indican las
palabras borradas e insertadas.</p>

<p>Esta <del>palabra</del> está
borrada y las palabras siguientes
<ins>son nuevas</ins></p>

</body>
</html>

CITAS

Código: html5


<html>
<body>

<h4>Una cita corta:</h4>
<p>
<q>Si uno no sabe historia, no sabe
nada.</q>
<br>
<em>Edward Johnston, 1990</em>
</p>

<p><br></p>

<h4>Una cita larga:</h4>
<blockquote>
<p>
La mayoría de las ideas fundamentales de
la ciencia son esencialmente sencillas y, 
por regla general pueden ser expresadas
en un lenguaje comprensible para todos.
<br>
<em>Albert Einstein</em>
</p>
</blockquote>

</body>
</html>
[/code=html5]

[color=red][b]DIRECCIONES[/b][/color]

[code=html5]
<html>
<body>

<p>
Con la etiqueta <b>&lt;address&gt;</b>
se indican los datos del autor
del documento (u otras direcciones):
</p>

<p><br></p>

<address>
&copy; 2000, Juan Fernández<br>
Spain
</address>

</body>
</html>

Abreviaturas y Acronimos

Código: html5


<html>
<body>

<p><br>
<abbr title="Abreviatura">
UN
</abbr></p>

<p>
<acronym title="World Wide Web">
WWW
</acronym></p>

<p>
En las versiones actuales de los
navegadores el valor de la propiedad
<b>title</b> se utiliza como elemento
informativo, mostrándose dicho valor
en una etiqueta al situar el ratón
sobre el elemento.</p>

</body>
</html>

Direccion del TEXTO

Código: html5


<html>
<body>

<p>La etiqueta <b>&lt;bdo&gt;</b> permite
indicar la dirección del texto.<br>
El atributo <b>dir</b> es obligatorio y
puede tomar los valores:<br>
- ltr (de izquierda a derecha)<br>
- rtl (de derecha a izquierda)</p>

<p><br></p>

<p><bdo dir="rtl">
Derecha a izquierda<br>
Dabale arroz a la zorra el abad
</bdo></p>

</body>
</html>

LISTAS

Ejemplos de LISTAS

Código: html5


<html>
<body>

<h4>Una lista ordenada</h4>
<ol>
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
</ol>

<h4>Una lista desordenada</h4>
<ul>
  <li>Asturias</li>
  <li>Cantabria</li>
  <li>Galicia</li>
</ul>

<p><br>La lista ordenada se utiliza
cuando los elementos de la misma se
citan según un orden que es relevante.
</p>

</body>
</html>

Listas ORDENADAS

Código: html5


<html>
<body>

<p>Se puede elegir el tipo de numeración
de las listas ordenadas mediante el
atributo <b>type</b> que puede tomar los
valores: 1, a, A, i, I. </p>

<ol type="a">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
</ol>

<ol type="I">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
</ol>

</body>
</html>

Listas NO ORDENADAS

Código: html5


<html>
<body>

<p>Se puede elegir el tipo de viñeta
de las listas no ordenadas mediante el
atributo <b>type</b> que puede tomar los
valores: disc, square, circle.</p>

<ul type="square">
  <li>Asturias</li>
  <li>Cantabria</li>
  <li>Galicia</li>
</ul>

<ul type="circle">
  <li>Asturias</li>
  <li>Cantabria</li>
  <li>Galicia</li>
</ul>

</body>
</html>

Listas ANIDADAS

Código: html5


<html>
<body>

<p>Cualquier elemento de una lista
puede a su vez ser otra lista y así
sucesivamente. De esta forma tenemos
lo que se denomina listas anidadas.<br>
No hay ninguna restricción en cuanto
a la forma de anidamiento, pudiéndose
mezclar ambos tipos de listas.</p>

<h4>Una lista anidada</h4>

<ol>
  <li>uno</li>
  <li>dos
    <ul type="square">
      <li>Asturias</li>
      <li>Cantabria</li>
      <li>Galicia</li>
    </ul>
  </li>
  <li>tres</li>
</ol>

</body>
</html>

Listas DESCRIPTIVAS

Código: html5


<html>
<body>

<p>Las listas descriptivas están
formadas por términos a definir junto
con las correspondientes definiciones.</p>

<h4>Una lista descriptiva</h4>

<dl>
  <dt>HTML</dt>
  <dd><i>HyperText Markup Language</i> es
  la lengua franca para publicar
  hipermedia en el World Wide Web.
  </dd>
  <dt>DHTML</dt>
  <dd>HTML Dinámico. ¡ Esto si que es
  díficil de definir!.<br>En realidad
  es un conjunto de tecnologías.
  </dd>
</dl>

</body>
</html>

MARCOS

Marco VERTICAL

Código: html5


<html>

<frameset cols="30%,40%,30%">

  <frame src="ejframe1.html">
  <frame src="ejframe2.html">
  <frame src="ejframe3.html">

</frameset>

</html>

Marco en HORIZONTAL

Código: html5


<html>

<frameset rows="30%,40%,30%">

  <frame src="ejframe1.html">
  <frame src="ejframe2.html">
  <frame src="ejframe3.html">

</frameset>

</html>

Marcos y CONTENIDO ALTERNATIVO

Código: html5


<html>

<frameset cols="50%,50%">

<frame src="ejframe1.html">

<frameset rows="60%,40%">
  <frame src="ejframe2.html">
  <frame src="ejframe3.html">
</frameset>

<!-- Contenido alternativo para
navegadores que no admiten marcos -->

<noframes>
<body>
  <h3>Su navegador no admite marcos</h3>
</body>
</noframes>

</frameset>

</html>

Marcos en LINEA

Código: html5


<html>
<body bgcolor="yellow">

<iframe width="300" height="275"
src="http://www.uniovi.es/"> 
</iframe>

</body>
</html>

HIPERVINCULOS

Ejemplos de HIPERVINCULOS

Código: html5


<html>
<body>

<p>Las referencias a páginas del
mismo web pueden ser absolutas o
relativas.<br>

<a href="../index.php">Esto es un
enlace</a> a una página de éste web.
(URL relativa)
</p>

<p>Las referencias a páginas de otros
webs sólo pueden ser absolutas (si están en la misma máquina) o URLs completas.<br>

<a href="http://www.w3.org/">Esto es
un enlace</a> a otra web y en otra máquina.</p>

</body>
</html>

MARCADORES (fragmentos)

Código: html5


<html>
<body>

<p>También se pueden hacer referencias
a otras partes de la página identificadas
mediante un marcador.<br></p>

<p><br>
<a href="#linea15">Haz click aquí</a>
 para ir a la línea 15.<br>
01<br>
02<br>
03<br>
04<br>
05<br>
06<br>
07<br>
08<br>
09<br>
10<br>
11<br>
12<br>
13<br>
14<br>
<a name="linea15">15</a><br>
16<br>
17<br>
18<br>
19<br>
20<br>
21<br>
22<br>
23<br>
24<br>
25<br>
26<br>
27<br>
28<br>
29<br>
30<br>
31<br>
32<br>
33<br>
34<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
41<br>
42<br>
43<br>
44<br>
45<br>
46<br>
47<br>
48<br>
49<br>
</p>

</body>
</html>

En VENTANA NUEVA

Código: html5


<html>
<body>

<p>También se pueden referenciar,
directamente, marcadores de otras páginas
del web o de otros webs.</p>

<p>
<a href="http://www.uniovi.es/" target="_blank">
Esto es un enlace</a> a una página de otro web.
</p>

<p><br>Mediante el atributo <b>target</b> se
especifica donde se visualiza el contenido
de la página referenciada.<br>
Si el valor del atributo es <b>_blank</b>
se muestra en una nueva ventana.</p>

</body>
</html>

Fuera de MARCOS

Código: html5


<html>
<body> <!-- mostrar en marco -->

<p>
Cuando se utilizan marcos (frames) las
páginas referenciadas se muestran en éstos
(como ocurre con el ejemplo). Si se quiere
mostrar un documento fuera de los marcos
debe especificarse el valor <b>_top</b>
para el atributo <b>target</b>.
</p>

<p>
<a href="http://web.uniovi.es/"
target="_top">Haz click aquí</a>
</p>

</body>
</html>

Enlaces PARA ENVIOS DE MENSAJES

Código: html5


<html>
<body>

<h4>Mensaje</h4>

<p><a href="mailto:[email protected]">Envía
un E-mail</a></p>

<h4>Mensaje con título</h4>

<p><a href="mailto:[email protected]?Subject=
Hola de nuevo">Envía un E-mail</a></p>

<h4>Mensaje con título y contenido</h4>
<p><a href="mailto:[email protected]?Subject=
Hola de nuevo&amp;Body=Escribe algo aquí">
Envía un E-mail</a></p>

</body>
</html>

TABLAS

Ejemplos de TABLAS

Código: html5

<html>
<body>

<p>
La tabla está constituida por
filas de datos.
</p>

<table border="1">
<!-- Primera fila -->
<tr>
  <td>Dato 1</td>
  <td>Dato 2</td>
  <td>Dato 3</td>
</tr>
<!-- Segunda fila -->
<tr>
  <td>Dato 4</td>
  <td>Dato 5</td>
  <td>Dato 6</td>
</tr>
</table>

</body>
</html>

Descripcion Y BORDES

Código: html5


<html>
<body>

<p>Con la etiqueta <b>&lt;caption&gt;
</b>se describe la tabla.</p>

<table border="1">
<caption>Borde normal</caption>
<tr>
  <td>Primera</td>
  <td>fila</td>
</tr>
<tr>
  <td>Segunda</td>
  <td>fila</td>
</tr>
</table>

<p><br></p>

<table border="10">
<caption>Borde grueso</caption>
<tr>
  <td>Primera</td>
  <td>fila</td>
</tr>
<tr>
  <td>Segunda</td>
  <td>fila</td>
</tr>
</table>

</body>
</html>

Con CELDAS de CABECERA

Código: html5


<html>
<body>

<p>
La etiqueta <b>&lt;th&gt;</b> permite
indicar las celdas cabecera de la tabla.
<br></p>

<h4>Con cabeceras horizontales</h4>
<table border="0">  <!-- Sin bordes -->
<tr>
  <th>Encabezado 1</th>
  <th>Encabezado 2</th>
  <th>Encabezado 3</th>
</tr>
<tr>
  <td>Dato 1</td>
  <td>Dato 2</td>
  <td>Dato 3</td>
</tr>
<tr>
  <td>Dato 4</td>
  <td>Dato 5</td>
  <td>Dato 6</td>
</tr>
</table>

<p><br></p>

<h4>Con cabeceras verticales</h4>
<table border="1">
<tr>
  <th>Encabezado 1</th>
  <td>Dato 1</td>
  <td>Dato 2</td>
</tr>
<tr>
  <th>Encabezado 2</th>
  <td>Dato 3</td>
  <td>Dato 4</td>
</tr>
</table>

</body>
</html>

Espaciados de CELDAS de la TABLA

Código: html5


<html>
<body>

<p>
Para indicar margenes de separación en
una tabla se utilizan los atributos:<br>
<b>cellpadding</b>: espacio dentro de las
celdas (entre borde y contenido).<br>
<b>cellspacing</b>: espacio entre celdas.
<br></p>

<p>Tabla con cellpadding="10"</p>
<table border="1" cellpadding="10">
<tr>
  <td>---- Primera</td>
  <td>fila ----</td>
</tr>
<tr>
  <td>---- Segunda</td>
  <td>fila ----</td>
</tr>
</table>

<p><br>Tabla con cellspacing="10"</p>
<table border="1" cellspacing="10">
<tr>
  <td>---- Primera</td>
  <td>fila ----</td>
</tr>
<tr>
  <td>---- Segunda</td>
  <td>fila ----</td>
</tr>
</table>

</body>
</html>

Union de CELDAS de la TABLA

Código: html5


<html>
<body>

<p>
Se puede conseguir cualquier forma de
tabla uniendo celdas horizontal o
verticalmente. La unión de celdas se
indica mediante los atributos:<br>
<b>colspan</b> para unir celdas de una
misma fila  <br>
<b>rowspan</b> para unir celdas de una
misma columna  <br><br>
En ambos casos el valor del atributo es
el número de celdas a unir.
<br></p>

<table border="1">
<tr>
  <td>Uno</td>
  <td>Dos</td>
  <td>Tres</td>
  <td rowspan="3">Cuatro</td>
</tr>
<tr>
  <td rowspan="2">Cinco</td>
  <td colspan="2">Seis</td>
</tr>
<tr>
  <td>Siete</td>
  <td>Ocho</td>
</tr>
</table>

<p>Obsérvese que al unir celdas éstas sólo se declaran en la primera fila o columna de la unión.</p>

</body>
</html>

Tamaño y ALINEAMIENTO de la TABLA

Código: html5


<html>
<body>

<p>
Atributos para establecer el tamaño y
el alineamiento de la tabla:<br>
<b>width</b> Fija la anchura de la
tabla (en pixeles o porcentaje)<br>
<b>align</b> Fija la posición de la
tabla (<em>left</em>, <em>center</em> y <em>right</em>).
<br></p>

<table border="1" align="center" width="70%">
<tr>
  <td>Uno</td>
  <td>Dos</td>
  <td>Tres</td>
</tr>
<tr>
  <td>Cuatro</td>
  <td>Cinco</td>
  <td>Seis</td>
</tr>
</table>

</body>
</html>

Inclusion de ETIQUETAS

Código: html5


<html>
<body>

<h4>Las celdas de una tabla pueden
contener etiquetas HTML</h4>

<table border="3" width="80%">
<tr>
  <td>Uno</td>
  <td>Dos<br>
      <p>Esto es un párrafo</p>
  </td>
  <td>Tres<hr></td>
</tr>
<tr>
  <td>Cuatro
      <table border="1">
      <tr>
        <td><br></td>
        <td><br></td>
      </tr>
      <tr>
        <td><br></td>
        <td><br></td>
      </tr>
      </table>
  </td>
  <td>Cinco</td>
  <td><p>Seis</p>
      <ul>
        <li>Asturias</li>
        <li>Cantabria</li>
        <li>Galicia</li>
      </ul>
  </td>
</tr>
</table>

</body>
</html>

Alineamiento de CELDAS

Código: html5


<html>
<body>

<p>
Mediante los atributos <b>align</b> y
<b>valign</b> se puede establecer el
alineamiento horizontal y vertical para
cada celda.</p>
<p>También se puede fijar el alineamiento
de una fila de la tabla con el atributo
<b>align</b>.<br>
</p>

<table border="1" width="60%">
<tr align="center">
  <td valign="top">Uno</td>
  <td>Dos</td>
  <td align="right">Tres<br><br></td>
</tr>
<tr>
  <td>Cuatro<br><br></td>
  <td valign="bottom">Cinco</td>
  <td align="center">Seis</td>
</tr>
</table>

</body>
</html>

Tamaños de las CELDAS

Código: html5


<html>
<body>

<table border="1" width="80%">
<tr>
  <td width="33%">Uno</td>
  <td width="33%">Dos</td>
  <td width="33%">Tres</td>
</tr>
<tr>
  <td width="33%">Cuatro</td>
  <td width="33%" height="120">Cinco</td>
  <td width="33%">Seis</td>
</tr>
</table>

</body>
</html>

Color de FONDO

Código: html5


<html>
<body>

<table bgcolor="red"
border="1" width="80%">
<tr>
  <td>Uno</td>
  <td>Dos</td>
  <td>Tres</td>
</tr>
<tr>
  <td>Cuatro</td>
  <td>Cinco</td>
  <td>Seis</td>
</tr>
</table>

</body>
</html>

CELDAS con FONDO

Código: html5


<html>
<body>

<table border="1" width="80%" align="center">
<tr bgcolor="yellow">
 <td>Uno</td>
 <td>Dos</td>
 <td>Tres</td>
</tr>
<tr>
 <td bgcolor="#DAA520">Cuatro</td>
 <td>Cinco</td>
 <td bgcolor="green">Seis</td>
</tr>
</table>

</body>
</html>

Con CELDAS VACIAS

Código: html5


<html>
<body>

<table border="5" cellspacing="5"
bgcolor="#DAA520">
<tr>
  <td>Uno</td>
  <td></td>
  <td>Dos</td>
</tr>
<tr>
  <td>Tres</td>
  <td>Cuatro</td>
  <td>Cinco</td>
</tr>
</table>

<p>Si se quieren dejar celdas vacías y
que se vea el borde (y el fondo en algunos navegadores) es necesario poner un espacio
en blanco: <b>&amp;nbsp;</b><br></p>

<table border="5" cellspacing="5"
bgcolor="#DAA520">
<tr>
  <td>Uno</td>
  <td>&nbsp;</td>
  <td>Dos</td>
</tr>
<tr>
  <td>Tres</td>
  <td>Cuatro</td>
  <td>Cinco</td>
</tr>
</table>

</body>
</html>

El ATRIBUTO FRAME

Código: html5


<html>
<body>

<p>Se puede utilizar el atributo
<b>frame</b> de tablas para indicar que
partes del marco alrededor de la tabla
deben mostrarse.<br>
Los valores que puede tomar el atributo
son: <b>void</b>, <b>above</b>,
<b>below</b>, <b>hsides</b>, <b>lhs</b>,
<b>rhs</b>, <b>vsides</b>, <b>box</b> y
<b>border</b>.<br></p>

<table frame="vsides" border="10"
cellspacing="5" width="70%">
<tr>
  <td height="100">Uno</td>
  <td>Dos</td>
  <td>Tres</td>
</tr>
<tr>
  <td>Cuatro</td>
  <td height="100">Cinco</td>
  <td>Seis</td>
</tr>
</table>

</body>
</html>

CABECERAS

Estilos INCRUSTADOS

Código: html5


<html>

<head>

<style type="text/css">
<!--
  h1.rojo {color: red}
  h2.azul {color: blue}
  h3.verde {color: green}
-->
</style>

</head>

<body>

<h1 class="rojo">Cabecera h1</h1>
<h2 class="azul">Cabecera h2</h2>
<h3 class="verde">Cabecera h3</h3>

<p>El atributo <b>type</b> en el elemento de estilo (<b>style</b>) es obligatorio.</p>

</body>
</html>

Enlace a HOJAS DE ESTILO

Código: html5


<html>

<head>

<link rel="stylesheet" type="text/css" href="estilos.css">

</head>

<body>

<h1>Cabecera h1</h1>
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>

<p><br></p>

<p>
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>.
</p>

</body>
</html>

Destino de REFERENCIAS

Código: html5


<html>

<head>

<base href="http://validator.w3.org/">

</head>

<body>

<p>
<a href="file-upload.html">
Validación de archivos con código HTML</a>
</p>

<p><br></p>

<p>Si situas el cursor sobre el enlace y te fijas
en la barra de estado observaras que la URL
relativa de destino del enlace se resuelve con
respecto a la base dada.
</p>

</body>
</html>

SCRIPTING

Código: html5


<html>

<head>

<script type="text/javascript">
<!--
function msg ()
{
  window.alert("Hola a todos !");
}
//-->
</script>

</head>

<body>

<p>
<input type="button" value="Púlsame" onclick="msg()">
</p>

</body>
</html>

FORMULARIOS

Campo de TEXTO

Código: html5


<html>
<body>

<p>Nombre: 
<input type="text" name="nombre">
<br>Apellidos: 
<input type="text" size="35"
name="apellidos"></p>

</body>
</html>

Opciones SIMPLES

Código: html5


<html>
<body>

<p>Tienes televisión:
<input type="checkbox" name="ele" value="television"
checked="checked">
<br>
Tienes vídeo:
<input type="checkbox" name="ele" value="video">
<br>
Tienes DVD:
<input type="checkbox" name="ele" value="DVD"></p>

</body>
</html>

Opciones EXCLUYENTES

Código: html5


<html>
<body>

<p>Hombre:
<input type="radio" name="sexo" value="masc">
<br>
Mujer:
<input type="radio" name="sexo" value="fem"
checked="checked"></p>

</body>
</html>

Lista de OPCIONES

Código: html5


<html>
<body>

<p>Selecciona tu color preferido:<br>
<select name="color">
<option value="amarillo">Amarillo</option>
<option value="azul">Azul</option>
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="otro" selected="selected">
Otro</option>
</select>


<br><br>

Selecciona tus frutas predilectas:<br>
<select name="frutas" size="7" multiple="multiple">
<option value="melón">Melón</option>
<option value="piña">Piña</option>
<option value="uvas">Uvas</option>
<option value="pera">Pera</option>
<option value="manzana">Manzana</option>
<option value="naranja">Naranja</option>
<option value="plátano">Plátano</option>
</select></p>

</body>
</html>

Area de TEXTO

Código: html5


<html>
<body>

<p>
<textarea rows="10" cols="30" name="texto">
Aquí puedes escribir el texto que quieras.

El elemento &lt;textarea&gt; sólo puede
contener texto (incluido entidades).
</textarea>
</p>

<p><br>Los atributos <b>rows</b> y <b>cols</b>
del elemento <b>&lt;textarea&gt;</b> son
obligatorios.</p>

</body>
</html>

Botones de ACCION

Código: html5


<html>
<body>

<p>Un botón 
<input type="button" value="Inicial">
</p>

</body>
</html>

Etiquetas de CAMPOS de FORMULARIOS

Código: html5


<html>
<body>

<p>
<label>
<b>Etiqueta</b> 
</label>

<input type="text" name="nombre"
value="es un ejemplo" readonly>
</p>

</body>
</html>

Agrupacion de CAMPOS

Código: html5


<html>
<body>

<fieldset>
<legend>Ficha de compra</legend>
<label>Nombre</label>
<input type="text" name="nombre">
<br>
<label>Apellidos</label>
<input type="text" size="35"
name="apellidos">

<br><br>

<label>Televisión</label>
<input type="checkbox" name="TV">
<label>Vídeo</label>
<input type="checkbox" name="vídeo">
<label>DVD</label>
<input type="checkbox" name="DVD">
</fieldset>

</body>
</html>

TEXTO OCULTO

Código: html5


<html>
<body>

<p>
Contraseña: 
<input type="password" name="passw">
</p>

</body>
</html>

Cargar ARCHIVO

Código: html5


<html>
<body>

<p>
<label>Archivo</label>
<input type="file" name="fname">
</p>

</body>
</html>

FORMULARIOS INTERACTIVOS

Metodo GET

Código: html5


<html>
<body>

<form method="get"
action="formej1.php">
<fieldset>
<legend>Formulario</legend>
<label>Nombre</label>
<input type="text" name="nombre">
<br>
<label>Apellidos</label>
<input type="text" size="30"
name="apellidos">
<br><br>
<label>E-mail</label>
<input type="text" size="30"
name="email">

<br><br>

<h4>De que aparatos dispones:</h4>
<label>Televisión</label>
<input type="checkbox" name="aparatos[1]"
value="Televisión">
<label>Vídeo</label>
<input type="checkbox" name="aparatos[2]"
value="Vídeo">
<label>DVD</label>
<input type="checkbox" name="aparatos[3]"
value="DVD">

<br><br>

<input type="submit" value=" Enviar ">
<input type="reset" value="Restablecer">
</fieldset>
</form>

<p><br></p>

<p>El atributo <b>action</b> del
<b>form</b> es obligatorio.</p>

</body>
</html>

metodo POST

Código: html5


<html>
<body>

<form method="post"
action="formej2.php">
<fieldset>
<legend>Formulario</legend>
<label>Selecciona tus frutas predilectas</label><br>
<select name="frutas[]" size="7" multiple>
<option value="melón">Melón</option>
<option value="piña">Piña</option>
<option value="uvas">Uvas</option>
<option value="pera">Pera</option>
<option value="manzana">Manzana</option>
<option value="naranja">Naranja</option>
<option value="plátano">Plátano</option>
</select>

<br><br>

<label>Tus comentarios</label>
<textarea rows="5" cols="30"
name="comentarios">
Escribe aquí
</textarea>

<br><br>

<input type="submit" value=" Enviar ">
<input type="reset" value="Restablecer">
</fieldset>
</form>

<p>Observa que puedes seleccionar más de
una fruta manteniendo pulsada la tecla
<b>CTRL</b>.</p>

</body>
</html>

IMAGENES

Documento con IMAGENES

Código: html5


<html>
<body>

<p>Esto es una imagen:
<img src="rana.gif" width="79"
height="78" alt="fija">
</p>

<p><br></p>

<p>Esto es una imagen en movimiento
(un <i>gif</i> animado):
<img src="agolpes.gif" width="140"
height="104" alt="animada">
</p>

<p><br></p>

<p>Los atributos <b>src</b> y <b>alt</b>
son obligatorios.</p>

</body>
</html>

Alineacion de ELEMENTOS

Código: html5


<html>
<body>

<p>
Esto es un párrafo con una imagen
<img src="ranita.gif" align="left"
width="55" height="55" alt=""> a la
izquierda del texto (la imagen flotará a
la izquierda del párrafo).
</p>

<p>
<img src="ranita.gif" align="right"
width="55" height="55" alt="">
Esto es un párrafo con una imagen a la
derecha del texto (la imagen flotará a
la derecha del párrafo).
</p>

<p>
<img src="ranita.gif" width="55"
height="55" alt="">
Una imagen antes del texto.
</p>

<p>
Una imagen después del texto
<img src="ranita.gif" align="top"
width="55" height="55" alt="">
</p>

<p>
Esto es una imagen incluida
<img src="ranita.gif" align="middle"
width="55" height="55" alt=""> 
en el texto.
</p>

</body>
</html>

TAMAÑO

Código: html5


<html>
<body>

<p>Variando los valores de los atributos
<b>width</b> y <b>height</b> se puede
ampliar o redurcir una imagen.</p>

<p><br></p>

<p>Esto es una imagen normal:
<img src="rana.gif" width="79"
height="78" alt="">
</p>

<p><br></p>

<p>Esto es una imagen ampliada:
<img src="rana.gif" width="150"
height="150" alt="">
</p>

<p><br></p>

<p>Esto es una imagen reducida:
<img src="rana.gif" width="50"
height="40" alt="">
</p>

</body>
</html>

Texto ALTERNATIVO y TITULO

Código: html5


<html>
<body>

<h2>Imagen con texto alternativo</h2>

<p><br></p>

<p>Sitúa el cursor sobre la imagen
<img src="rana.gif"
alt="Imagen de una rana"
title="Imagen de una rana"
width="79" height="78">
</p>

<p><br></p>

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

</body>
</html>

Bordes y MARGENES

Código: html5


<html>
<body>

<table border="1">
<tr>
  <td>
  <img src="rana.gif"
  border="2" width="79" height="78"
  alt="rana">
  </td>
</tr>
</table>

<p><br></p>

<table border="1">
<tr>
  <td>
  <img src="rana.gif"
  border="2" hspace="40" vspace="60"
  width="79" height="78" alt="rana">
  </td>
</tr>
</table>

</body>
</html>

Mapa de IMAGENES

Código: html5


<html>
<body>

<p>
<map name="prueba">
<area shape="circle" coords="60,60,40"
alt="La página del WWW" 
href="/aii/tutorial.php">
<area shape="rect"
coords="105,78,155,100"
alt="Tutorial de HTML" 
href="/aii/ejemplos.php?id_codigo=1&amp;codigo=HTML">
<area shape="rect"
coords="105,110,155,135"
alt="Tutorial de CSS" 
href="/aii/ejemplos.php?id_codigo=2&amp;codigo=CSS">
<area shape="rect"
coords="105,140,155,165"
alt="Tutorial de DOM" 
href="/aii/ejemplos.php?id_codigo=4&amp;codigo=DHTML">
</map>
</p>

<h1>Ejemplo de mapa</h1>

<p><br>La imagen tiene cuatro zonas activas.
Haz click sobre ellas:<br><br>
<img src="mapa.jpg" border="0"
usemap="#prueba" width="176"
height="185" alt="mapa">
</p>

</body>
</html>

===============================================================================
Me llevo toda la tarde acomodarlo y re hacerlo, asi que espero os guste.... By: Mainfox

[HTML] Codigos utiles en HTML

ANTRAX

Febrero 24, 2010, 11:52:00 AM Ultima modificación: Abril 18, 2014, 11:38:18 AM por Expermicid