Aqui posteare bastantes ejemplos de CODIGO HTML
Espero os guste...:D
Documento BASICO con DTDHTML BASICO
<!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.<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
<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
<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
<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
<html>
<body>
<p>
<b><code></b> Define el texto como código para la computadora.</p>
<pre>
<code>
int s=0;
for (int i=0; i<n; i++)
s+=i;
</code>
</pre>
<p>
<b><kbd></b>
<kbd> Define texto a introducir por
teclado</kbd>
<br>
<b><samp></b>
<samp>Código de computadora corto</samp>
<br>
<b><tt></b>
<tt>Define el tipo teletexto</tt>
<br>
<b><var></b>
<var>Define una variable</var>
</p>
</body>
</html>
Texto MODIFICADO
<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
<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><address></b>
se indican los datos del autor
del documento (u otras direcciones):
</p>
<p><br></p>
<address>
© 2000, Juan Fernández<br>
Spain
</address>
</body>
</html>
Abreviaturas y Acronimos
<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
<html>
<body>
<p>La etiqueta <b><bdo></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
<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
<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
<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
<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
<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
<html>
<frameset cols="30%,40%,30%">
<frame src="ejframe1.html">
<frame src="ejframe2.html">
<frame src="ejframe3.html">
</frameset>
</html>
Marco en HORIZONTAL
<html>
<frameset rows="30%,40%,30%">
<frame src="ejframe1.html">
<frame src="ejframe2.html">
<frame src="ejframe3.html">
</frameset>
</html>
Marcos y CONTENIDO ALTERNATIVO
<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
<html>
<body bgcolor="yellow">
<iframe width="300" height="275"
src="http://www.uniovi.es/">
</iframe>
</body>
</html>
HIPERVINCULOS
Ejemplos de HIPERVINCULOS
<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)
<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
<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
<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
<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&Body=Escribe algo aquí">
Envía un E-mail</a></p>
</body>
</html>
TABLAS
Ejemplos de TABLAS<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
<html>
<body>
<p>Con la etiqueta <b><caption>
</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
<html>
<body>
<p>
La etiqueta <b><th></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
<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
<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
<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
<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
<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
<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
<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
<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
<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>&nbsp;</b><br></p>
<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>
</body>
</html>
El ATRIBUTO FRAME
<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
<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
<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
<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
<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
<html>
<body>
<p>Nombre:
<input type="text" name="nombre">
<br>Apellidos:
<input type="text" size="35"
name="apellidos"></p>
</body>
</html>
Opciones SIMPLES
<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
<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
<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
<html>
<body>
<p>
<textarea rows="10" cols="30" name="texto">
Aquí puedes escribir el texto que quieras.
El elemento <textarea> sólo puede
contener texto (incluido entidades).
</textarea>
</p>
<p><br>Los atributos <b>rows</b> y <b>cols</b>
del elemento <b><textarea></b> son
obligatorios.</p>
</body>
</html>
Botones de ACCION
<html>
<body>
<p>Un botón
<input type="button" value="Inicial">
</p>
</body>
</html>
Etiquetas de CAMPOS de FORMULARIOS
<html>
<body>
<p>
<label>
<b>Etiqueta</b>
</label>
<input type="text" name="nombre"
value="es un ejemplo" readonly>
</p>
</body>
</html>
Agrupacion de CAMPOS
<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
<html>
<body>
<p>
Contraseña:
<input type="password" name="passw">
</p>
</body>
</html>
Cargar ARCHIVO
<html>
<body>
<p>
<label>Archivo</label>
<input type="file" name="fname">
</p>
</body>
</html>
FORMULARIOS INTERACTIVOS
Metodo GET
<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
<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
<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
<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
<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
<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
<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
<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&codigo=HTML">
<area shape="rect"
coords="105,110,155,135"
alt="Tutorial de CSS"
href="/aii/ejemplos.php?id_codigo=2&codigo=CSS">
<area shape="rect"
coords="105,140,155,165"
alt="Tutorial de DOM"
href="/aii/ejemplos.php?id_codigo=4&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