Instala tu página en la WEB:
Para ver tu página en la WEB, luego de diseñarla con HTML, cárgala a un servidor web, usando un servicio de hospedaje ( hosting ) o espacio web donde subiras tus archivos.
Con este fin, debes:

1. Adoptar un hospedaje web(hosting) para alojarar el sitio web:
   Si el cliente que te contrata para hacer su sitio web:
   • No tiene un servicio de hospedaje web contratado, deberás, seleccionarar a tu proveedor de confianza o recurrir a la Guía de Proveedores de Hospedaje web.
   • Si ya tiene un servicio de hospedaje web contratado donde instalaras su sitio. En tal caso, dependeras del actual proveedor de hospedaje y por tanto asegurate que tal hosting soporte el tipo de software de programación y de datos que usaste en el diseño de la page.
   • Ya tiene un servicio de hospedaje web contratado, pero le aconsejas cambiar a otro, ten en cuenta las alternativas anteriores

2. Subir el sitio al hospedaje elegido:
   Luego de optar por hospedaje web, ya puedes subir el sitio al servidor correspondiente.
   Si aun tu cliente no posse un Dominio, puedes pedirle al proveedor de hospedaje que te asigne:
   • Un dominio alternativo o la dirección IP del servidor
   • Las claves de FTP para subir los archivos del sitio web.
   Luego, debes descargar e instalar un programa FTP (Ejemplo: Filezilla que es gratuito), el cual para conextarte al servidor te pedirá:
   • URL del servidor,
   • Nombre de usuario y
   • Contraseña.
   Finalmente, para subir tus archivos, solo "arrastra" desde la ventana de tu sistema operativo a la ventana del programa FTP.

3. Registra el nombre de dominio:
   Gestiona el nombre, siguiendo las normas formales de la zona donde estes localizado o sencillamente, recurre a tu proveedor de hospedaje web, para encargarle la gestión de registrar el dominio.

4. Apunta el dominio al servidor que aloja al sitio web
   Una vez registrado el dominio, direcciona al servidor, "apuntándolo" a los servidores DNS del proveedor de hospedaje web.
   Para ello, solicita a tu proveedor de hospedaje web que te proporcione las direcciones de los servidores DNS primario y secundario que le corresponden a tu dominio, luego:
   • Pide a tu proveedor de registro de dominios que "apunte" el dominio a los servidores DNS. Caso contrario:
   • Apunta tu mismo, accediendo al Panel de control, que tu proveedor de registro de dominio te proporcionará.

PARADIGMA: Las computadoras no causan problemas
..hasta que las enciendes..!! ( Wilucha )

ETIQUETAS:
O Marcas o Tags, son elementos que dan forma a la webpage, mediante ETIQUETAS de:

• APERTURA y CIERRE: Son dos marcas que limitan el principio y el fin de una pagina:
  - < html > : Principio de page
  - < / html > : Fin de page

• CABECERA: Son dos marcas que limitan el principio y el fin de la cadecera de una pagina, que se usa para indicar el titulo de la página < title > y los metavínculos
  - < head > : Principio de cabecera de la page
  - < / head > : Fin de la cabecera de page

• CUERPO: Son dos marcas que limitan el principio y el fin del cuerpo de una pagina, donde se escriben todos los elementos que tu visitante podrá ver.
  - < body > : Principio del cuerpo de la page
  - < / body > : Fin del cuerpo de la page

Así, toda pagina web tiene las siguientes partes o estructura sintáctica básica:

		< html >
		 < head >
		       < title>PARADIGMAS< /title>
		 < /head >
		 
		 < body>
		   . . . . . .En esta zona escribes todos los mensajes de tu page
		
		 < /body>
		
		< / html >

Diseñemos tu PRIMERA VEZ !!:
Vamos al grano y como ocurre con cualquier lenguaje de programación, tu 1ra vez será hacer una page que diga solamente:

• Activa o abre el editor BLOC de NOTAS:
  Escribe en tu bloc de notas, textualmente los siguientes renglones:

  		< html>
  		 < head>
  			< title>MI PRIMERA VEZ< /title>
  		 < /head>
  		 
  		 < body>
  		  
  		   Hola Mundo..!!
  		
  		 < /body>
  		
  		< /html>
  

  En tu editor bloc de notas deberás ver algo así... Fijate bien y nota que no debes dejar espacio en blanco despues de cada signo "<"

  

• Graba como PrimeraVez.html:
  Cada page tiene un nombre y un "apellido". Al nombre se lo pones vos, elige uno que no tenga mas de 10 letras, por ejemplo "PrimeraVez" y el apellido que es "html" lo escribes a continuación, sin dejar espacios en blanco, separado por un punto "." de manera que al final queda como "PrimeraVez.html".

  Recuerda que siempre que grabas algo en tu máquina, lo guardas en algún lugar, por ahora te recomiendo que lo guardes en la carpeta "Mis Documentos"

  Cliquea en la parte suprerior del editor en "Archivo", se abre una ventana y en el cliquea en "Guardar como" y donde dice nombre escribe PrimeraVez.html, luego cliquea "Aceptar"

  Acabas de generar tu primera pagina web cuyo nombre de bautismo es: PrimeraVez.html

  El html que escribiste despues del punto, le indica a la máquina que tu obra es una page..!!

• Activa o abre tu Explorador de Windows:
  Ojo..!! no confundas el Explorador cuyo ícono es una lupa sobre una carpeta.
  Sobre el haz click.. luego ubica Mis Documentos y en el encontraras el documento: PrimeraVez.html, que es la page que acadas de crear.

• Cliquea el documento: PrimeraVez.html:
  En el Explorer aparecerá tu page:

  

FORMATO TEXTO DE PAGINA WEB:
Para manejar el tamaño, el color y formato de los textos, usa las siguientes etiquetas:

• TAMAÑO de LETRAS:
  El tamaño se maneja con la instrución SIZE, así:

  < font size = "3" >

• COLOR de LETRAS:
  El color se maneja con la instrución COLOR: < font color = "Olive" >

  El color y el tamaño: < font color = "Olive" size = "3">

• TIPOS de LETRAS:
  Atributo que define un tipo de letra.
  Ejemplo: <font face="Times New Roman">Este texto tiene otra tipografía</font>

  Que se visualizaría así en la página web: Este texto tiene otra tipografía

• FORMATOS de LETRAS:
  • Negrita: Para escribir texto en negrita usa la etiqueta: <b> y </b>.
    Escribiendo un código de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita

  • Itálica: Tiene formato de texto inclinado, usa la etiqueta: <i> y </i> Escribiendo un código de este tipo: <i>Texto en italica</i> Obtenemos este resultado: Texto en italica

  • Subrayado: Usamos las etiquetas: <u> y </u> Por ejemplo: <i>Texto subrayado</i>Obtenemos este resultado:Texto subrayado

  • Subíndices y Supraíndices: Las etiquetas utilizadas son:
    - Supra indice: ^y
    - Subíndice: _y
    Ejemplo: La¹⁴CC₄H₄ClNOS es un heterociclo alergeno enriquecido
    Genera: La ¹⁴CC₄H₄ClNOS es un heterociclo alergeno enriquecido

FORMATO del CUERPO DE LA PAGINA WEB:
Para personalizar el aspecto podemos usar atributos, como el color de fondo, el color del texto o de los enlaces, definidos en la etiqueta <body>.
Los más usados son:

• ATRIBUTOS de FONDO DE PAGINA
  - bgcolor: Especifica un color de fondo para la pagina, es un color plano, el mismo para toda la superficie del navegador.

  - background: Permite colocar una imagen como fondo de pagina. Ejemplo: El siguiente fondo de página se logró insertando la imagen llamada: fondo.jpg, , registrada en el mismo directorio de la pagina:
  Con la etiqueta: <body background="fondo.jpg">.

  

• MARGENES: Otros atributos de la etiqueta <body> pueden asignar espacios de margen en las paginas, util para eliminar los margenes en blanco que aparecen a los lados, arriba y abajo de la pagina. Son:

  - leftmargin: Indica el margen a los lados de la pagina. Valido para internet explorer.

  - topmargin: Indica el margen arriba y debajo de la pagina. Valido para internet explorer.

• FORMATO DE PARRAFO: La etiqueta <p>, introduce un salto y deja una linea en blanco antes de continuar con el resto del documento. La etiqueta de cierre </p> que es opcional. Otras etiquetas son:
  - <HR>: Inserta una linea horizontal.
  - <BR>: Define un salto de linea dentro del mismo parrafo
  Los párrafos delimitados por etiquetas <p> pueden justificarse a la izquierda, centro o derecha, especificando la etiqueta el atributo o paràmetro align.
  Ejemplo: Para introducir un texto alineado a la izquierda escribimos: <p align="left">
  Texto alineado a la izquierda El resultado seria:

  Texto alineado a la izquierda

  Para justificar al centro: <p align="center">Texto alineado al centro quedaría:

  Texto alineado al centro

  Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto es:

  Texto alineado a la derecha:

  El atributo align toma determinados valores que son escritos entre comillas. Podemos especificar atributos para funcionamiento de la etiqueta, o el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

  Para evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. que por si sola no sirve, pues debe ir acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera deseada. Así, el código:

      <p align="left">Parrafo1</p> 
  		<p align="left"> Parrafo4</p> 
  		<p align="left"> Parrafo2</p> 
  	

  Es equivalente a:

     <div align="left"> 
  	   <p>Parrafo1</p> 
  	   <p>Parrafo2</p> 
  	   <p>Parrafo4</p> 
  	   </div>
  	   

  Las etiquetas <pre> y </pre> permiten escribir en cualquier lugar de la pagina, dependiendo de donde se encuentra el cursor

• FORMATO DE ENCABEZADO:
  Para definir párrafos especiales, llamados encabezados o Header en inglés, estàn las etiquetas que formatean el texto como un titular, que asignan un tamaño mayor de letra y colocan el texto en negrita.
  Existen varios tipos de encabezados, diferenciados en el tamaño de letra que utilizan. La etiqueta es: <h1>, para encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.
  Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente. Algunos encabezados:

  <h1>Encabezado de nivel 1</h1>: Mostrará en la página: Encabezado de nivel 1

  Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Ejemplo de encabezado de nivel 2 alineado al centro: <h2 align="center">Encabezado de nivel 2</h2> Mostrará en la página:

  Encabezado de nivel 2:

  Una página web que contenga todos los encabezados posibles seria:

  <html> 
  	<head> 
  	<title>Todos los encabezados</title> 
  	</head> 
  	<body> 
  	<h1>Encabezado de nivel 1</h1> 
  	<h2>Encabezado de nivel 2</h2> 
  	<h3>Encabezado de nivel 3</h3> 
  	<h4>Encabezado de nivel 4</h4> 
  	<h5>Encabezado de nivel 5</h5> 
  	<h6>Encabezado de nivel 6</h6> 
  	</body> 
  	</html> 

  La pagina de muestra seria:

  

PARADIGMA: La lógica es un método sistemático que puede generar con confianza..
... la conclución erronea..!! ( Wilucha )

• LISTAS ORDENADAS: O VIÑETAS,
  para ello, solo insertamos elementos a la lista, coloca entre las etiquetas <OL> y </OL>, y dentro de ellas van los distintos elementos, de la siguiente forma: <LI>Texto</LI>; aunque la etiqueta de cierre es opcional.
  Ejemplo:

   
  	<ol> 
  	  <li>Actividad fisica 
  	  <li>Alimentacion saludable 
  	  <li>Actividad laboral 
  	</ol> 
  

  Produce:
  1. Actividad fisica
  2. Alimentacion saludable
  3. Actividad laboral
  Con el atributo type, situado dentro de la etiqueta </OL>, puede modificarse el estilo de la lista, mediante valores:

  1- Para ordenar por números
  a- Por letras del alfabeto
  A- Por letras mayúsculas del alfabeto
  i- Ordenación por números romanos en minúsculas
  I- Ordenación por números romanos en mayúsculas

  El atributo, start, cuyo valor numérico por defecto es 1, corresponde al valor a partir del cual comenzamos a definir una lista, así podemos comenzar a enumerar por un número o letra que no sea el primero de todos.

  Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. Ejemplo:

  <b>Ordenamos por numeros</b> 
  <ol type="1"> 
  <li>Elemento 1 
  <li> Elemento 2 
  </ol> 
  
  	<b>Ordenamos por letras</b> 
  	<ol type="a"> 
  	<li>Elemento a 
  	<li> Elemento b 
  	</ol> 
  
  			<b>Ordenamos por números romanos empezando por el 10</b> 
  			<ol type="i" start="10"> 
  			<li>Elemento x 
  			<li> Elemento xi 
  			</ol> 

  El resultado es:

  Ordenamos por números

  1. Elemento 1
  2. Elemento 2

  Ordenamos por letras

  1. Elemento a
  2. Elemento b

  Ordenamos por numeros romanos empezando por el 10

  10. Elemento x
  11. Elemento xi

• LISTAS NO ORDENADAS:
  Son viñetas armardas, mediante las etiquetas <UL> y <LI>.
  Si no usas <UL>, la lista no aparecera sangrada. Ejemplo:

   
     <ul> 
         <li>Argentina 
         <li>Perú 
         <li>Chile 
     </ul> 
  

  El resultado es:
  • Argentina
  • Perú
  • Chile

  El tipo de viñeta de cada elemento, usa el atributo type incluido dentro de la etiqueta de apertura <ul>, para que el estilo sea válido para toda la lista, o dentro de la etiqueta <li> si queremos hacerlo específico de un solo elemento.
  La sintaxis es: <ul type="tipo de viñeta">, donde tipo de viñeta puede ser:
  - circle
  - disc
  - square
  Ejemplo:

  	<ul type="square"> 
  	<li>Elemento 1 
  	<li>Elemento 2 
  	<li>Elemento 3 
  	<li type="circle">Elemento 4 
  	</ul> 

  Resultado:
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

• LISTAS DE DEFINICIONES:
  Diccionario o glosario, generado por etiqueta: <dl> y </dl>.
  Las etiquetas del elemento y su definicion son <dt> y <dd> respectivamente. Ejemplo:

   
  			<dl> 
  			    <dt>Brujula 
  			    
  			<dd>Señórula montada en una escóbula 
  			    
  			<dt>Oreja 
  			    <dd>Sesenta minutejos 
  			</dl> 

  Producirá:

  Brujula

  Señórula montada en una escóbula

  Oreja

  Sesenta minutejos

  Nota que cada línea <dd> esta desplazada hacia la izquierda.

  Ejemplo el código:

  <dl> 
  			<dd>Primer nivel de desplazamiento 
  			    <dl> 
  			       
  			<dd>Segundo nivel de desplazamiento 
  			       <dl> 
  			          <dd>Tercer nivel de desplazamiento 
  			       </dl> 
  			    </dl> 
  			</dl>

  Resultado:

  Primer nivel de desplazamiento

  Segundo nivel de desplazamiento

  Tercer nivel de desplazamiento

PARADIGMA: Cuando veas un hombre bueno ..trata de imitarlo..!!
..cuando veas un hombre malo, examinate a ti mismo..!! ( Confucio )

HIPERVINCULO o LINK o VINCULO:
Es un elemento de la página WEB que permite abrir un nuevo documento con solo clickear en cierto texto que aparece subrayado, mediante la etiqueta <A>, con un atributo que determina el destino del link con href, que puede ser:
- Una pagina,
- Un correo electronico o
- Un archivo.

Se puede incluir hipervínculos en:
- Texto: <A href="destino">Texto del hipervínculo</A>
- Imagen: <A href="destino"><img src="imagen.jpg" alt="Imagen"></A>

El atributo: target, permite definir la ventana o el marco destino donde se abrirá un hipervínculo. Para ello, especificamos:
- target="_blank" Para abrir la pagina de destino en una ventana nueva.
- target="nuevaVentana" Para abrir la página un deternimado destino de ventana.

En función del destino los enlaces pueden ser:

• Locales:
  Se dirigen a otras páginas del mismo sitio web, así, relacionan los distintos documentos HTML que componen un sitio Web. Para crearlos, usamos una etiqueta:
  <a href="archivo.html">contenido</a>

  Cuando los sitios WEB se ordenan por directorios, que contienen diferentes secciones de la página, imágenes, sonidos, debemos especificar el nombre del archivo y el directorio donde archivo.html esta alojado. Si el documento está en nivel de directorio:

  • INFERIOR: Indicaremos la ruta a partir del directorio en que nos encontramos.
    Ejemplo: Si la pagina origen esta en: /Sitios/MiSitio y el documento de destino esta en: /Sitio/MiSitio/Downloads/Wallpapers, debemos especificar: href="Downloads/Wallpapers/paisaje04.jpg".
  • SUPERIOR: Especificamos el vínculo: href="../pagina1.html", así accederíamos al documento pagina1.html del directorio inmediatamente superior.
    Así, para subir un nuevo nivel agregaremos: ../ otra vez.
    Ejemplo: href="../../index.html".

• Remotos:
  Para direccionar a otros sitios web, ubicados fuera del nuestro, colocamos en el atributo href de nuestra etiqueta <a> la URL o dirección de la página con la que queremos enlazar. Ejemplo:
  <a href="http://www.google.com">ir a google.com</a>

  Las direcciones web (URLs) empiezan por http://, que indica que el protocolo por el que se accede es HTTP, utilizado en la web. Sin http://, los enlaces se trataran como enlaces locales a nuestro sitio.

• Con direcciones de correo:
  Al clickearlos permiten abrir un nuevo mensaje de correo electrónico dirigido a una dirección de mail determinada, mediante un enlace dirigido hacia una dirección de correo: mailto: en el atributo: href del enlace, seguido de la dirección de correo a donde se dirigir el enlace.
  <a href="mailto:nacsan@yahoo.com">nacsan@yahoo.com</a>

  Podemos indicar en el enlace el asunto del mensaje, colocando después de la dirección de correo un interrogante, la palabra subject, un signo igual (=) y el asunto.
  <a href="malito:nacsan@yahoo.com?subject=para vos pepe">nacsan@yahoo.com</a>

• Con archivos:
  Para hacer download de ficheros, dirigidos hacia un archivo de otro tipo. Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la página el enlace será: <a href="mi_fichero.zip">Descarga mi_fichero.zip</a>
  Al clickear estos enlaces el navegador descargará el fichero, planteando la típica pregunta: "Qué queremos hacer con el archivo. Abrirlo o guardarlo en disco".

PARADIGMA: Hay ciertos defectos que bién manejados..
brillan más que la misma virtud..!! (Rochefocauld)

IMAGENES y MAPAS:
Para insertar imagenes en una pagina Web usamos la etiqueta: IMG, que no posee su cierre correspondiente y en ella especificaremos la dirección del archivo grafico mediante el atributo SCR.
Ejemplo: IMG SRC="../aFotos/aWilosTodos.jpg"

Ademas podemos incluir los siguientes atributos:

• alt: Define un texto alternativo para que se visualice en caso de que la imagen no se carge correctamente o para aquellos que utilizan un navegar que no puede ver imagenes. También es utilizado para mostrar un mensaje flotante al posicionar el puntero del mouse sobre la imagen.

• width: Especifica un ancho para la imagen. Si no se lo coloca toma el ancho estandar de la misma.

• height: Similar al atributo anterior solo que este especifica la altura.

• align: Determina la alineacion de la imagen. Los posibles valores que puede tomar son baseline (línea base), top (superior), middle (medio), botto. (inferior), texttop (sobre el texto), absmiddle (medio absoluto), absbottom (superior absoluto), left (izquierda) y right(derecha).

• border: Determina el espesor en pixeles del borde que rodea la imagen. si queremos que no aparezca borde debemos especificar border="0". sin embargo, el borde solo aparecerá si insertamos un hipervínculo sobre la imagen.

• hspace: Determina el espacio horizontal en pixeles alrededor de la imagen.

• vspace: Como el anterior para el caso del espacio vertical.

Ejemplo:
IMG SRC="../aFotos/aWilosTodos.jpg" ALT="Bienvenido al mundo paradigmático..!!" width="317" height="420" HSPACE=10 border="0" ALIGN=Right

Que muestra la imagen mía de la par y la de mis amados hijos.

PARADIGMA: Si la locura, si la pasión no pasaran alguna vez por las almas
¿Qué valdría la vida..? (Jacinto Benavente)

TABLAS:
Son una suerte de contenedores matriciales de información, definidas por las etiquetas <table> y </table>, dentro de ellas colocamos las otras etiquetas, textos e imágenes para dar forma y contenido a la tabla.
Las tablas son descritas por líneas que especifican las:
- COLUMNAS de la tabla: Usando el par de etiquetas: <tr> y </tr>
- FILAS de la tabla: Usando el par de etiquetas: <td> y </td>

Con estas formamos celdas, dentro de las cuales colocamos contenidos. Ejemplo:

		<table> 
		  <tr> 
		    <td> Celda 1</td> 
		    <td> Celda 2</td> 
		  </tr> 
		  <tr> 
		    <td> Celda 3</td> 
		    <td> Celda 4</td> 
		  </tr> 
		</table> 

El resultado sería:

Celda 1	Celda 2
Celda 3	Celda 4

ATRIBUTOS PARA FILAS Y COLUMNAS:
Los atributos para modificar una celda en concreto o toda una línea:

Aling	Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
Valign	Podemos elegir si queremos que el texto aparezca arriba(top), en el centro(middle) o abajo(bottom) de la celda.
bgcolor	Da color a la celda o línea elegida.
bordercolor	Define el color del borde.

Atributos para ser unicamente asignados a una celda y no al conjunto de celdas de una línea son:

background	Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height	Define la altura de la celda en pixeles o porcentaje.
width	Define el ancho de la celda en pixeles o porcentaje.
colspan	Expande una celda horizontalmente.
rowspan	Expande una celda verticalmente.

Ejemplo:
- <td width="80"> Define ancho de 80 pixeles a la celda.
- <td width="80%"> Define ancho a la celda del 80% del ancho de la tabla.

Los atributos rowspan y colspan Expanden celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas etiquetas es un número que es la cantidad de celdas a fusionar.
Así, <td colspan="2"> Fusionara la celda en cuestión con su vecina derecha.

Esta celda tiene un colspan="2"
Celda normal	Otra celda

Del mismo modo, <td rowspan="2"> Expandirá la celda hacia abajo fusionándose con la celda inferior.

Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo.	Celda Normal
	Otra celda normal

ATRIBUTOS DE LA TABLA

Aling	Alinea horizontalmente la tabla con respecto a su entorno.
background	Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor	Da color de fondo a la tabla.
border	Define el numero de pixeles del borde principal.
bordercolor	Define el color del borde.
cellpadding	Define en pixeles, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing	Define el espacio entre los bordes (en pixeles).
height	Define la altura de la tabla en pixeles o porcentaje.
width	Define el ancho de la tabla en pixeles o porcentaje.

TABLAS ANIDADAS:
Permiten insertar una tabla dentro de la celda de otra, tal muestra el código de anidación de tablas. Ejemplo:

Celda de la tabla principal

Tabla anidada, celda 1 Tabla anidada, celda 2 Tabla anidada, celda 4 Tabla anidada, celda 4

Cuyo código es:

<table cellspacing="4" cellpadding="8" border="4"> 
		<tr> 
		<td align="center"> 
		Celda de la tabla principal 
		</td> 
		 <td align="center"> 
		 <table cellspacing="1" cellpadding="4" border="1"> 
		<tr> 
		<td>Tabla anidada, celda 1</td> 
		<td>Tabla anidada, celda 2</td> 
		</tr> 
		<tr> 
		<td>Tabla anidada, celda 3</td> 
		<td>Tabla anidada, celda 4</td> 
		</tr> 
		</table> 
		</td> 
		</tr> 
		</table> 

PARADIGMA
Yo no sufro de locura, . . . lo disfruto..!!! : ( Wilucha )

Los MARCOS O FRAMES:
Permiten dividir una página en distintos sectores, cada uno ellos puede contener una página diferente e independiente; asì es posible colocar sectores de la página que permanezcan fijos y otros a actualizar su contenido.
Cada marco muestra una página HTML común y corriente; por lo tanto, en la pagina de marcos hay que indicar que documento debera mostrar en cada marco.

El conjunto de marcos no tiene información visible, solo describe como está organizada la disposición de los marcos componentes, que se crean utilizando las etiquetas <FRAMESET> y </FRAMESET> y para definir el numero de filas y/o columnas, se usan los atributos rows y cols.

Al definirlos el alto o el ancho de las filas o columnas van separados por una coma. El ancho puede colocarse en pixeles o en porcentaje.
Con un valor "comodín", el asteristo (*), se puede indicar que la columna o fila ocupe el "espacio restante". ( no tiene sentido colocar el asterisco solo ).
Ejemplo, se indica con:
- cols="20%,80%": Que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio total de la ventana y la de la derecha un 80%.
- rows="15%,60%,25%":
De tres filas, la de arriba va con un 15%, la del medio con 60% y la de abajo con un 25% del total. Total 100% del espacio de la ventana.
- cols="200,*":
Que la primera columna mide 200 pixels y que el resto del espacio disponible se asigna a la segunda columna.

El espacio reservado a cada una con la etiqueta <FRAMESET>, especificamos con la etiqueta <FRAME> la procedencia de cada uno de los frames de la ventana, mediante el atributo src, definido para cada una de las filas o columnas. De esta manera: <FRAME src="marco1.html">, para indicar que el frame contendrà la página marco1.html.

FRAMES:
Ejemplo de creación de una estructura simple

		<html> 
		<head>  
		<title>Definición de Frames</title> 
		</head> 
		<frameset rows="15%,*,75"> 
		    <frame src="pagina1.html"> 
		    <frame src="pagina2.html"> 
		    <frame src="pagina4.html"> 
		</frameset> 
		</html>

Para dirigir enlaces en FRAMES:
Cada enlace actualiza el frame donde está colocado, luego, si tenemos enlaces en la parte inferior de la ventana, en el espacio correspondiente al tercer marco, actualizarán los contenidos del tercer frame, que es donde están situados los enlaces.
Al pulsar sobre un enlace de la barra de navegación actualicemos el frame principal, que es donde habíamos planeado colocar los contenidos, en lugar del frame donde colocamos la barra de navegación, que debería mantenerse fija. Para conseguir se debe:
- Darle un nombre al frame que deseamos actualizar
- Dirigir los enlaces hacia ese frame

Después de darle un nombre al frame principal, nuestra declaración de frames quedaría:

		
					<frameset rows="15%,*,75"> 
					<frame src="pagina1.html"> 
					<frame src="pagina2.html" name="principal"> 
					<frame src="pagina4.html"> 
					</frameset>
			

		<a href="pagina2.html" target="principal">Portada</a>  
		<a href="productos.html" target="principal">Productos</a>  
		<a href="contacto.html" target="principal">Contacto</a>

_blank	Para hacer que el enlace se habra en una ventana aparte.
_self	Se actualiza el frame donde esta situado el enlace.Es el valor por defecto.
_parent	El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si es que no hay un padre.
_top	La página se carga a pantalla completa, es decir, eliminando todos los frames que pudiera haber.

Anidar FRAMES: Para crear estructuras de marcos donde se mezclen filas y columnas debemos anidar etiquetas <FRAMESET> , empezando por la partición de frames más general, colocamos dentro las particiones de frames más pequeñas, indicando tal muestra el ejemplo.

Primero definimos una estructura de frames en dos columnas y dentro de la primera columna colocamos otra partición de frames en dos filas. El código serà:

		<frameset cols="200,*"> 
		<frameset rows="170,*"> 
		<frame src="pagina1.html"> 
		<frame src="pagina2.html"> 
		</frameset> 
		<frame src="pagina4.html"> 
		</frameset> 

PARADIGMA: Cualquier paradigma que dependa de la fiabilidad humana..no es fiable..!! ( Wilucha )

FORMULARIOS: Útiles cuando se trabaja con páginas dinámicas en lenguajes PHP o ASP, para enviar valores al servidor. A tal fin, para definir un formulario:
1.- Crearla utilizando las etiquetas <FORM> y </FORM>
2.- Incluir los elementos componentes que pueden ser campos de texto, listas de selección, botones de opción, casillas de verificación, botones, etc.

Atributos definidos en las etiquetas:
1.- ACTION: Define el tipo de acción a llevar a cabo con el formulario. Las posibilidades son:

• El formulario es enviado a una dirección de correo electrónico: El contenido del formulario es enviado a la dirección de correo electrónico especificada por medio de una sintaxis de este tipo: <form action="mailto:direccion@correo.com" ...>

• El formulario es enviado a un programa o script que procesa su contenido: Para que el formulario sea procesado por un programa, especificaremos la dirección del archivo que contiene dicho programa.
  La etiqueta es de la siguiente forma: <form action="dirección del archivo" ...>

• post: Los datos son enviados a través de las cabeceras HTTP y son invisibles para el usuario.
• get: Los datos del formulario son enviados por la URL del navegador.

<FORM name="formulario_datos" action="dar_de_bajas.php" method="post">

				<!-- Elementos del Formulario --!>

				...

			</FORM>

• TEXTO CORTO: Las cajas de texto son colocadas mediante la etiqueta <input>. Dentro de esta se especifica el valor de dos atributos: type y name.
  Así con la etiqueta: <input type="text" name="nombre"> , creamos una caja de texto cuyo contenido será llamado nombre y su formato será:

  El atributo:
  - size Define el tamaño de la caja en numeros de caracteres con: maxlength como el tamaño maximo del texto del formulario.
  - value asigna un valor pre definido al campo en cuestión. Ejemplo: <input type="text" name="nombre" value="Boca Juniors"> , genera un campo:

• TEXTO LARGO: Para escribir sobre un espacio compuesto de varias líneas, usamos la etiqueta: <textarea> y su cierre correspondiente.
  Para definir las dimensiones del campo mediante las etiquetas:
  - rows que define el número de líneas del campo de texto y
  - cols que define el número de columnas del campo de texto.
  Ejemplo:
  <textarea name="comentario" rows="10" cols="40"></textarea>
  Produce:

PARADIGMA: No hay tonto más molesto
que el ingenioso..!! ( Wilucha )

LISTAS DE OPCIONES:
Son del tipo de menús desplegables que permiten elegir una (o varias) de las múltiples opciones propuestas, generada por: <select>; dentro de ella definimos su nombre con el atributo name.
Cada opción es incluida la línea precedida de la etiqueta <option>. Ejemplo:

<select name="estacion"> 
			<option>Primavera</option> 
			<option>Verano</option> 
			<option>Otoño</option> 
			<option>Invierno</option> 
			</select> 

Esta estructura puede modificarse con los atributos: size, que indica el numero de valores mostrados en la lista y multiple, que permite la seleccion de varios elementos de la lista.

BOTONES DE RADIO: Para obligar al internauta a elegir únicamente una de las opciones que se le proponen, usamos la etiqueta: <input> con el atributo type para tomar el valor radio. Ejemplo:

<input type="radio" name="estacion" value="1">Primavera 
<br>
<input type="radio" name="estacion" value="2">Verano 
<br>
<input type="radio" name="estacion" value="4">Otoño 
<br>
<input type="radio" name="estacion" value="4">Invierno

		Primavera
		Verano
		Otoño 
		Invierno 

<input type="radio" name="estacion" value="2" checked>Verano Que produce:

Primavera 
Verano 
Otoño 
Invierno 

BOTON DE ENVIO: Para construir un boton usamos la sintaxis: <input type="submit" value="Enviar"> Que genera:

BOTON DE BORRADO: Permite borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su sintáxis es: <input type="reset" value="Borrar"> Como el botón de borrado es optativo, no conviene ubicarlo cerca del botón de envío para distinguir el uno del otro.

ETIQUETA LABEL: Crea una etiqueta para un campo de un formulario, para un elemento de formulario determinado mediante las propiedades id, en el elemento, y for, en la etiqueta. <input type="checkbox" name="preferencia" value="Pintura" id="idPintura"> <LABEL for="idPintura">Pintura</LABEL>

El resultado:

EJEMPLO: Creación de un formulario que consulta el grado de satisfacción de usuarios de una línea de autobuses ficticia. Los datos, registrados se enviaran por correo electrónico a un buzón determinado.

Grado de satisfacción de usuarios de autobuses Nombre Email Población Sexo Hombre Mujer Frecuencia de los viajes Varias veces al diaUna vez al diaVarias veces a la semanavarias veces al mes Comentarios sobre su satisfacción personal Deseo recibir notificación de las novedades en las líneas de autobuses.

El código fuente de este formulario:

	<form action="mailto:colabora@desarrolloweb.com" method="post" enctype="text/plain"> 
		Nombre <input type="text" name="nombre" size="40" maxlength="100"> 
		<br> 
		Email <input type="text" name="email" size="25" maxlength="100" value="@"> 
		<br> 
		Población <input type="text" name="poblacion" size="20" maxlength="60"> 
		<br> 
		Sexo 
		<br> 
		<input 
		type="radio" name="sexo" value="Varon" checked> Hombre 
		<br> 
		<input type="radio" name="sexo" value="Hembra"> Mujer 
		<br> 
		<br> 
		Frecuencia de los viajes 
		<br> 
		<select name="utilizacion"> 
		    <option value="1">Varias veces al dia 
		    <option value="2">Una vez al dia 
		    <option value="3">Varias veces a la semana 
		    <option value="4">varias veces al mes 
		</select> 
		<br> 
		<br> 
		Comentarios sobre su satisfacción personal 
		<br> 
		<textarea cols="40" rows="7" name="comentarios"></textarea> 
		<br> 
		<br> 
		<input type="checkbox" name="recibir_info" checked> Deseo recibir notificación de las novedades en las líneas de autobuses. 
		<br> 
		<br> 
		<input type="submit" value="Enviar formulario"> 
		<br> 
		<br> 
		<input type="Reset" value="Borrar todo"> 
	</form> 

	Paradigmas I M P R E S O S:
	Lenguajes	Gramáticas	Autómatas	Series
	Laplace	Ecuación	Operador	Compilador