Artículos según "HTML"
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes
 


El formulario que hemos visto anteriormente es muy sencillo ya que incluye sólo tres campos.
El que figura a continuación, sin embargo, es un módulo complejo, que retoma todo cuanto hemos expuesto en el capítulo "Las marcas". Si deseas profundizar en el tema, puedes volver a dicho capítulo.

Aquí tienes el código:

<FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST>

<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi segundo formulario">
<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm">

<font face=ARIAL>

<table border=0>
<tr><td align=right><B>Nombre</B></td><td><input type=text size=33 NAME=MAILFORM_NAME></TD></TR>
<tr><td align=right><B>Portada</B></td><td><input type=text name="portada" value="http://" size=33></TD></TR>
<tr><td align=right><B>Dirección e-mail</B></td><td><input type=text NAME=MAILFORM_FROM size=33></TD></TR>
<tr><td align=right><B>Ciudad</B></td> <td><input type=text name="ciudad" size=33></TD></TR>

<tr><td align=right><B>¿Tu calificación de esta guía?</B></td>
<td><SELECT size=1 cols=4 NAME="qué_piensas">
<OPTION selected Value=Ninguna>
<OPTION value=Excelenteo> Excelente
<OPTION value=Notable> Notable
<OPTION value=Buena> Buena
<OPTION value=Suficiente> Suficiente
<OPTION value=Mediocre> Mediocre
<OPTION value=Insuficiente> Insuficiente
</select></td></tr>

<tr><td align=right><B>¿Explicaciones claras?</B></td>
<td align=center>
<B>sí</B><input name="claras" type=radio>
<B>no</B><input name="no_claras" type=radio>
<B>no sé</B><input name="no_sé" type=radio>
</td></tr>

</table>

<BR><BR>

<CENTER><table border=0 width=450>

<tr>
<td width=450><B><CENTER>Comentarios sobre HTMLpoint</CENTER></B></td></tr>
<tr><td colspan=2><textarea cols=58 rows=8 size=200 WRAP=physical></textarea></td></tr>

</table></CENTER>

<BR>

<CENTER>
<INPUT TYPE="SUBMIT" VALUE="Envía el formulario">
</CENTER>
</FORM>
 Éste es el resultado práctico de lo visto hasta ahora:


Nombre
Portada
Dirección e-mail
Ciudad
¿Tu calificación sobre esta guía?
¿Explicaciones claras? sí no no sé



Comentarios sobre BlueMoonTV


Seguir leyendo

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes


Empecemos creando un formulario muy simple en el que figuren el nombre y apellidos, la dirección de correo electrónico y un comentario sobre el sitio. Para ello, introducimos el siguiente código:

<FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST>

<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer formulario">
<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm">

<B>Nombre y apellidos</B><BR>
<input type=text NAME=MAILFORM_NAME size=33><BR><BR>

<B>Dirección de correo electrónico</B><BR>
<input type=text NAME=MAILFORM_FROM size=33><BR><BR>

<B>Comentarios</B><BR>
<TEXTAREA NAME=MAILFORM_TEXT ROWS=10 COLS=42 WRAP></TEXTAREA><BR><BR>

<INPUT TYPE=SUBMIT VALUE="Envía"><INPUT TYPE=RESET VALUE="Cancela">

</FORM>

Veamos juntos qué campos personalizar y cuáles dejar, por el contrario, inalterados para un correcto funcionamiento del formulario.

<FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST>
Este campo debe permanecer inalterado dado que invoca el CGI presente en el servidor del servicio gratuito al que nos hemos suscrito anteriormente.

<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
Este campo se modifica sólo por lo que se refiere al código de identificación "Val_7743", que se sustituye con el comunicado por el servicio gratuito mediante correo electrónico. Este sencillo procedimiento es fundamental para que tu formulario llegue a tu buzón de correo y no al de otra persona.

<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer formulario">
Este campo define el asunto del mensaje que te llegará por correo electrónico en el momento del envío con el contenido del formulario. En lugar de "Mi primer formulario", puedes usar la frase que retengas más oportuna.

<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm">
Este campo indica la página web que deberá visualizarse tras pulsar el botón "Envía". En este ejemplo hemos insertado un documento presente en el servidor de HTMLpoint que puedes sustituir con una página presente en tu servidor.

<input type=text NAME=MAILFORM_NAME size=33>
Este campo debe permanecer inalterado (no por lo que respecta a las dimensiones, obviamente) ya que introduce en el mensaje que nos llegará por correo electrónico ese nombre en el campo del remitente.

<input type=text NAME=MAILFORM_FROM size=33>
Este campo debe permanecer invariado (no por lo que respecta a las dimensiones, obviamente) ya que permite obtener en el "reply-to" del mensaje que el formulario envía, la dirección de quien ha rellenado la plantilla.

<INPUT TYPE=SUBMIT VALUE="Envía">
Este campo es necesario para expedir el módulo, pero no se sale de las reglas generales de los formularios.

He aquí el resultado que obtenemos con el código que hasta ahora hemos examinado (el formulario llegará a HTMLpoint, por lo que agradeceríamos nos enviaras tus comentarios y sugerencias sobre esta guía):

Nombre y apellidos


Dirección de correo electrónico


Comentarios


Seguir leyendo

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes






Veamos ahora, con detalle, todas las marcas que para la elaboración de formularios prevé HTML 5.0.

<FORM></FORM>

Esta marca abre y cierra la plantilla y recoge el contenido de la misma, que puede variar según una serie de marcas que veremos más adelante. No es posible insertar una plantilla dentro de otra. Dicho de otro modo, los formularios no permiten anidamientos.

La sintaxis usual de las marcas citadas es la siguiente:

<FORM method="get|post" action="http://www.tuosito.com/cgi-bin/nome_script.cgi">

Si METHOD está impostado como GET los datos se envían al servidor y se separan en dos variables.
Para este método el número máximo de caracteres que puede contener el formulario es de 255.
Utilizando "method=post", el script CGI recibe directamente los datos sin un proceso previo de descodificación. Esta característica hace que el script pueda leer una cantidad ilimitada de caracteres.

Una vez impostada la primera marca <FORM> de la plantilla, es posible, siempre y cuando el script CGI lo permita, crear algunos elementos que resultan de gran utilidad para una adecuada gestión de los datos:

<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Asunto del formulario">

Este código determina el asunto (subject) del mensaje que recibirás por correo electrónico con el contenido del formulario. Es muy útil que los mensajes recibidos lleven especificado el asunto, no sólo para quienes usan filtros de selección del correo, sino también para ordenar la correspondencia.

<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.tuosito.it">

Este código es muy útil ya que, una vez rellenado y enviado correctamente, el formulario responde con una página HTML sucesiva, dentro de la cual es posible incluir cualquier tipo de comentario. Lo más normal es visualizar una página de confirmación "Tu formulario ha sido enviado correctamente", pero se puede también mandar directamente a la portada del sitio. Se trata de comandos no estándar que varían según el CGI utilizado. Por tanto, el código antes descrito no funciona en todos los casos, sino únicamente con el ejemplo práctico que os mostraremos más adelante.

La marca de base para la definición de los elementos de un formulario es <INPUT>, que se utiliza para agregar botones, menús de selección, contraseñas, etc. A <INPUT> se le pueden asignar los 8 valores que analizamos a continuación.




type="TEXT"

<INPUT type="TEXT" name="nombre" maxlength="40" size="33" value="Tu nombre">

Este valor crea los típicos campos de texto, en los que generalmente se solicitan datos tales como el nombre o la dirección de correo electrónico. Es un valor usado sobre todo para informaciones no predefinidas, que cambian cada vez. TEXT tiene tres atributos opcionales, presentes también en el ejemplo: maxlength (el número máximo de caracteres que puede ser introducido en el campo y que no es posible superar), size (la anchura de la cadena dentro de la página) y value (visualiza un texto por defecto dentro de la cadena).

EJEMPLO


type="PASSWORD"

<INPUT type="PASSWORD" name="nombre" maxlength="40" size="33">

Este campo de texto funciona como el anterior, pero con una pequeña diferencia que su propio nombre indica: cuando se escribe dentro del cajetín blanco, no se ven los caracteres sino los clásicos asteriscos de las contraseñas. En realidad, los datos no se codifican de ningún modo por lo que esta marca no consigue eliminar la inseguridad de fondo.

EJEMPLO


type="CHECKBOX"

<INPUT type="CHECKBOX" name="edad" value="sí" checked>

Este atributo se utiliza para representar datos de tipo "sí/no" y "verdadero/falso". Crea pequeñas casillas cuadradas que hay que puntear o dejar en blanco. Si la casilla está punteada, INPUT restituye un valor al CGI; en caso contrario, no restituye ningún valor. Value impostado en "sí" significa que por defecto la casilla está punteada. Checked controla el estado inicial de la casilla, en el momento de cargar la página.

EJEMPLO


type="RADIO"

<INPUT type="RADIO" name="calificación" value="suficiente">
<INPUT type="RADIO" name="calificación" value="bueno">
<INPUT type="RADIO" name="calificación" value="excelente">


Este atributo tiene funciones similares al visto anteriormente, pero contiene más posibilidades de selección. Seleccionando una de las voces presentes, y siempre y cuando tengan todas un valor "name" idéntico, las restantes se deseleccionan automáticamente.

SUFICIENTE
BUENO
EXCELENTE


type="SUBMIT"

<INPUT type="SUBMIT" value="Envía">


El clásico botón de envío que remite el formulario con todo su contenido. La dimensión del botón depende de la longitud del texto.

EJEMPLO


type="RESET"

<INPUT type="RESET" value="Reinicio">


Botón que vuelve a impostar todo el formulario eliminando los datos introducidos.

EJEMPLO


type="IMAGE"

<INPUT type="IMAGE" src="pulsante.gif">


Función similar a la de la tecla "ENVÍA" pero con la diferencia de que en lugar del botón de la opción por defecto, aparece una imagen.

EJEMPLO


TEXTAREA

<TEXTAREA cols=40 rows=5 WRAP="physical" name="comentario"></textarea>


TEXTAREA se utiliza para introducir comentarios o campos que prevén muchas líneas de texto. La anchura se imposta con "cols" y la altura con "rows". WRAP="physical" establece que, en el caso de que el texto introducido supere la anchura de la ventana, salte de línea automáticamente.

EJEMPLO


SELECT

<SELECT size=1 cols=4 NAME="calificación">
<OPTION selected value=ninguna>
<OPTION value=bueno> Bueno
<OPTION value=suficiente> Suficiente
<OPTION value=excelente> Excelente
</select>


SELECT es un elemento que permite la creación de listas con varias posibilidades de selección. En nuestro ejemplo, hemos hipotizado que se solicita una calificación sobre un sitio web.

EJEMPLO



Seguir leyendo

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes




Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las páginas.
Una buena solución es crear una versión con marco y una versión sin marco (como esta misma guía ha hecho).
¿Cómo se crean los marcos?
Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.


N2.0 Documento Marco <FRAMESET></FRAMESET> (en lugar de <BODY>)
N2.0 altura en filas <FRAMESET ROWS=,,,></FRAMESET> (píxel ó %)
N2.0 altura en filas <FRAMESET ROWS=*></FRAMESET> (* = tamaño relativo)
N2.0 anchura en columnas <FRAMESET COLS=,,,></FRAMESET> (píxel ó %)
N2.0 anchura en columnas <FRAMESET COLS=*></FRAMESET> (* = tamaño relativo)
N3.0b anchura del borde <FRAMESET BORDER=?>  
N3.0b borde <FRAMESET FRAMEBORDER="yes|no">  
N3.0b color del borde <FRAMESET BORDERCOLOR="#$$$$$$">  
N2.0 Definición del marco <FRAME> (contenido de cada uno de los recuadros)
N2.0 documento que se debe mostrar <FRAME SRC="URL">  
N2.0 denominazione del frame <FRAME NAME="***"|_blank|_self| _parent|_top>  
N2.0 anchura de los márgenes <FRAME MARGINWIDTH=?> (margen izquierdo y derecho)
N2.0 altura de los márgenes <FRAME MARGINHEIGHT=?> (margen superior e inferior)
N2.0 barra de desplazamiento o no <FRAME SCROLLING="YES|NO|AUTO">  
N2.0 no redimensionable <FRAME NORESIZE>  
N3.0b borde <FRAME FRAMEBORDER="yes|no">  
N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$">  
N2.0 contenido en ausencia de marco <NOFRAMES></NOFRAMES> (para navegadores antiguos)


Para crear una página dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestión. Así pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los demás archivos que componen el marco.

Imaginemos que debemos crear una ventana dividida en marcos como la de la figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo "top.htm", que deberemos crear aparte) y un marco central (en el cual cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte) que cambiará según cual sea la página que deba mostrar. Como hemos señalado antes, la gestión de estos dos marcos correrá a cargo de un tercer archivo, el cual deberá invocarlos asignándoles una parte de la página. He aquí el código de esta página:



    <FRAMESET rows="80,*">
      <frame name="alto" src="top.htm">
      <frame name="central" src="central.htm">
    </FRAMESET>


Como podemos ver, el código del marco está encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>.
El tamaño de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la página, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 píxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habríamos podido expresar el tamaño de los marcos en tantos por ciento de esta manera:



<FRAMESET rows="20%,*">


Una vez impostados los dos parámetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que deberán invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deberá cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm".
Fíjate bien en lo importante que es la colocación dentro del código para una correcta interpretación por parte del navegador. Así, si se invirtiera el orden de esta manera:


    <FRAMESET rows="80,*">
      <frame name="central" src="central.htm">
      <frame name="alto" src="top.htm">
    </FRAMESET>

el navegador invertiría el orden de asignación y cargaría el archivo "central.htm" en el marco superior, y el archivo "top.htm" en el marco central.

Haz clic aquí para ver el resultado de este marco.


Para crear dos marcos verticales basta sustituir el término "rows" (filas) con el término "cols" (columnas):

    <FRAMESET cols="100,*">

    <frame name="sx" src="sx.htm">
    <frame name="central" src="central.htm">

    </FRAMESET>


Haz clic aquí para ver el resultado de este marco.



Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que se use uno de estos viejos programas para visualizar las páginas, es útil insertar un código que advierta de la presencia de marcos y de la imposibilidad de que el navegador los muestre. Éste es el código que debes incluir:


    <noframe>

    <HTML>
    <body>

    Atención. Tu navegador no soporta la opción de los marcos. Para ver estas páginas es necesario descargar un navegador que soporte dicha opción. Te aconsejo Netscape 3.0 o superior.

    </body>
    </html>

    </noframe>



Es posible adoptar simultáneamente una división tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Veamos cómo debemos intervenir en el código HTML del documento según el número y la posición de los marcos que queremos crear.

Haz clic aquí para ver el resultado de este marco.		 <frameset rows="100,*">
    <frame name="alto" src="top.htm">
<frameset cols="150,*">
    <frame name="sx" src="sx.htm.htm">
    <frame name="central" src="central.htm">
</frameset>

</frameset>






Haz clic aquí para ver el resultado de este marco.		 <frameset cols="120,*">
    <frame name="sx" src="sx.htm">
<frameset rows="100,*">
    <frame name="alto" src="top.htm">
    <frame name="central" src="central.htm">
</frameset>

</frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="120,*">
    <frame name="sx" src="sx.htm">
<frameset rows="20%,60%,20%,*">
    <frame name="alto" src="top.htm">
    <frame name="central" src="central.htm">
    <frame name="bajo" src="basso.htm">
</frameset>

</frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="75%,25%">

<frameset rows="20%,80%*">
    <frame name="alto" src="top.htm">
    <frame name="central" src="central.htm">
</frameset>
    <frame name="dx" src="dx.htm">
</frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="75%,25%">

<frameset rows="20%,80%*">
    <frame name="alto" src="top.htm">
<frameset cols="20%,80%*">
    <frame name="sx" src="sx.htm">
    <frame name="central" src="central.htm">
</frameset> </frameset>
    <frame name="dx" src="dx.htm">
</frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="75%,25%">

<frameset rows="20%,80%*">
    <frame name="alto" src="top.htm">
    <frame name="central" src="central.htm">
</frameset> <frameset rows="24%,76%">
    <frame name="top" src="top2.htm"> <frame name="dx" src="dx.htm">
</frameset> </frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="25%,75%">

<frameset rows="80%,20%">
    <frame name="alto" src="top.htm">
    <frame name="bajo" src="basso.htm">
</frameset>
    <frame name="central" src="central.htm">
</frameset>

Haz clic aquí para ver el resultado de este marco.		 <frameset cols="20%,60%,20%">
    <frame name="sx" src="sx.htm">
    <frame name="central" src="central.htm">
    <frame name="dx" src="dx.htm">
</frameset>



Haz clic aquí para ver el resultado de este marco.		 <frameset cols="20%,60%,20%">
    <frame name="sx" src="sx.htm">
    <frame name="central" src="central.htm">
    <frame name="dx" src="dx.htm">
</frameset>




Para eliminar el borde gris de los marcos, se debe insertar el siguiente código: <frameset cols="20%,60%,20%" border=0>

Para impedir que los marcos sean redimensionados por el visitante:
 <frame name="alto" src="top.htm" noresize>

Para eliminar siempre las barras de desplazamiento (scrollbars):
<frame name="alto" src="top.htm" scrolling="no">

 Para mostrarlas siempre:
 <frame name="alto" src="top.htm" scrolling="yes">

 Para mostrarlas sólo cuando son necesarias:
 <frame name="alto" src="top.htm" scrolling="auto">

 Para regular la distancia del contenido del marco al margen superior (marginheight) y a los márgenes izquierdo y derecho (marginwidth):
 <frame name="alto" src="top.htm" marginheight=2 marginwidth=5>





Por lo que se refiere a los enlaces dentro de los marcos (es decir, cómo cargar una página en un marco diverso de aquél en que se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en la fase de realización. Este nombre no se refiere al archivo sino a lo que aparece escrito después de "name=". Por ejemplo, en este caso:
 <frame name="alto" src="top.htm">

 el nombre asignado es "alto".

 Tomemos la siguiente página subdividida en marcos:


<frameset cols="20%,60%,20%">
    <frame name="sx" src="sx.htm">
    <frame name="central" src="central.htm">
</frameset>

Pongamos que de un enlace presente en "SX" tengamos que cargar otra página en el marco "central".
 Si el enlace presente en el marco "SX", fuera simplemente:

 <A HREF="nuova.htm">Haz clic</A>

la página se cargaría dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas específicas el navegador interpreta que debe cargar la nueva página en el mismo marco en que está presente el enlace.

 El código exacto sería:

 <A HREF="nuova.htm" TARGET="central">Haz clic</A>

Haz clic aquí para probar.

Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra página, la cual se visualizará ocupando la pantalla completa y eliminando todos los marcos preexistentes.
 Aquí está el código:

 <A HREF="nuova.htm" TARGET="_parent">Haz clic</A>

Haz clic aquí para probar.

Si insertas el código:

 <base target="_top">

a la cabeza del documento HTML todos los enlaces presentes en las páginas eliminarán los marcos existentes, sin necesidad de ir enlace por enlace.


Es posible también que queramos cargar, con un solo clic, dos o más marcos (naturalmente, la ventana tiene que estar dividida por lo menos en tres marcos).
 Tomemos una página subdividida como en la figura:

<frameset cols="120,*">
    <frame name="sx" src="sx.htm">
<frameset rows="100,*">
    <frame name="alto2" src="top.htm">
    <frame name="centrale3" src="central.htm">
</frameset>

</frameset>


Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultáneamente dos páginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas líneas con código JavaScript. La primera parte del código va insertada entre <HEAD></HEAD>:
 <HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
    parent.alto2.location.href=page2;
    parent.centrale3.location.href=page3;
}
// -->
</script>
</HEAD>

 mientras que la segunda parte deberá quedar comprendida entre <BODY></BODY>, donde se quiere insertar el enlace:

 <BODY>
<FORM NAME="buttons">
    <INPUT TYPE="button" VALUE="Haz clic"
    onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
</FORM>
</BODY>

Haz clic aquí para probar.
Seguir leyendo

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes



La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página: <TABLE WIDTH=500>
</TABLE>

En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si se elige esta opción, sea cual sea la resolución con la que venga vista la página, la medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de 500 píxel.
No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un porcentaje: <TABLE WIDTH=50%>
</TABLE>

En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo del usuario.
Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.
En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.

Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imágenes:


Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

<TABLE BORDER=1 WIDTH=300>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

</TABLE>


prueba prueba prueba


En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:




Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:

<TABLE BORDER=1 WIDTH=300>

<TR>
<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>
</TR>

<TR>
<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>

<TD WIDTH=100>
</TD>
</TR>

</TABLE>


prueba prueba prueba
prueba prueba prueba


El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel):

<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>

La colocación del texto y de las imágenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras:


<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 VALIGN=TOP>
prueba </TD>

<TD WIDTH=100 VALIGN=BOTTOM>
prueba </TD>

<TD WIDTH=100 VALIGN=MIDDLE>
prueba </TD>

</TABLE>
prueba prueba prueba






<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 ALIGN=RIGHT>
prueba </TD>

<TD WIDTH=100 ALIGN=CENTER>
prueba </TD>

<TD WIDTH=100 ALIGN=LEFT>
prueba </TD>

</TABLE>
prueba prueba prueba





Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las páginas web normales (los fondos pueden ser sustituidos con GIF animadas):



<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 BGCOLOR="red">
prueba </TD>

<TD WIDTH=100 BGCOLOR="yellow">
prueba </TD>

<TD WIDTH=100 BGCOLOR="gray">
prueba </TD>

</TABLE>
prueba prueba prueba






<TABLE WIDTH=300 HEIGHT=230>

<TD width=100 BACKGROUND="sfondo15.jpg">
prueba </TD>

<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
prueba </TD>

<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
prueba </TD>

</TABLE>
fondo15 fondo26 fondo61
Seguir leyendo

Lee Rockwell en
Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes



Habrás oído muchas veces hablar de hipertextos y de cómo éstos sustenten el web. Un hipertexto es un modo de formatear documentos de manera no secuencial. Para comprender esta característica, podemos pensar en un libro impreso en papel cuya estructura fuera índice, capítulos y glosario. Dicha estructura es secuencial en el sentido de que se lee el índice para pasar después a los capítulos (yendo del primero al último) y acabar con el glosario de términos. Al lector, en este caso, se le marca un recorrido que le lleva a leer el primer capítulo para llegar al último. Con el hipertexto esta estructura secuencial desaparece gracias a los enlaces hipertextuales, que permiten leer el documento sin seguir necesariamente un orden predeterminado. La peculiaridad de saltar de un punto a otro del documento es típica del WWW, donde a menudo siguiendo un documento saltamos de un sitio a otro.

Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los hiperenlaces o anclajes, cuya marca específica es <A>.
<A HREF>

El elemento <A> (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
Para que funcione, el elemento <A> debe estar asociado a otros atributos. De éstos, el más importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde ir. La sintaxis es:

<A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A>

En el código antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo HREF.

Es posible sustituir el texto con una imagen obteniendo un efecto idéntico.

HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros documentos de la misma dirección. Por ejemplo, si nos encontraramos en la página 1.htm y quisiéramos incluir un enlace a la página 2.htm presente en la misma carpeta, el código correcto sería:

<A HREF="2.htm">Haz clic aquí para llegar a la nueva página</A>
TARGET

TARGET es un atributo implementado por exigencias relacionadas con la gestión de los marcos. En una página dividida en marcos, este atributo indica en cuáles de ellos debe quedar visualizado el documento. No entraremos aquí en detalles sobre los marcos ya que comentaremos este tema más adelante.

Sin embargo, sí nos ocuparemos aquí de otro uso de este atributo: gracias a TARGET podemos cargar una página asociada a HREF en otra ventana del navegador usando la siguiente sintaxis:

<A HREF="http://www.htmlpoint.com" TARGET="_new">Visita HTMLpoint</A>

Aquí tienes el ejemplo práctico: Visita HTMLpoint

El atributo TARGET="_new" indica al navegador que debe cargar el enlace con http://www.htmlpoint.com en una nueva (_new) ventana.

El empleo de distintas ventanas para cada enlace es muy útil cuando se manda a recursos externos ya que nos permite no perder al visitante: el usuario de este modo tendrá abiertas dos ventanas y no dejará de tener disponible nuestra página.
TITLE

Al igual que para el elemento IMG, también en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace. La sintaxis es:

<A HREF="http://www.htmlpoint.com" TITLE="El sitio italiano sobre el web publishing">Visita HTMLpoint</A>

Aquí tienes el ejemplo práctico: Visita HTMLpoint

MAILTO (enlace a e-mail)

Es posible asimismo incluir enlaces con direcciones de correo electrónico utilizando una sintaxis algo distinta de la indicada para los URL. El código es:

<A HREF="mailto:webmaster@html.it">Escribe a HTMLpoint</A>

Aquí tienes ejemplo práctico: Escribe a HTMLpoint

Haciendo clic en este enlace se abre automáticamente tu programa de correo electrónico predefinido con el campo TO ya impostado en webmaster@html.it.

Enlaces con partes de un mismo documento

Hasta ahora hemos analizado los enlaces con recursos externos o con páginas diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con puntos específicos de un mismo documento gracias al código <A NAME="ancora">. En otras palabras, si con los enlaces examinados hasta ahora llegamos a un documento, con <A NAME> llegamos a una parte concreta del documento.
A continuación, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento:

  • Inserta la marca <A NAME="ancora"> en el punto del documento al que quieres que se llegue (.ANCORA es un identificador del punto en el que el navegador deberá visualizar la página. Obviamente puedes sustituirlo con otros términos).


  • En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis: <A HREF="#ancora">Visita HTMLpoint</A>

    La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma página, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiéramos llegar a un punto concreto de un documento externo, la sintaxis correcta sería: <A HREF="nome_file.htm#ancora">Visita HTMLpoint</A>, donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento.

    Haciendo clic en el enlace que aparece a continuación, visualizarás un punto de este mismo documento. Para probar, haz clic aquí. 
    • Seguir leyendo

    Lee Rockwell en
    Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes

    Internet, que sólo en los últimos 10 años se ha afirmado como medio de comunicación de masa, durante mucho tiempo fue un sistema de comunicación utilizado exclusivamente por el mundo militar, primero, y por el universitario, después. Es fácil imaginar la escasa inclinación hacia el diseño y la estética mostrada por estos primeros navegantes de la red. A finales de los años 80, Internet sufrió una transformación radical que condujo hasta las "autopistas telemáticas" a un público de masa, con exigencias diversas de las militares o académicas. Con la transformación de la red, se ha impuesto la necesidad de poner a disposición instrumentos de navegación más fáciles de usar ("user friendly") y no sólo para el estudio o la investigación. Así, en 1989 nace el WWW, que gracias al primer navegador de la historia, Mosaic, transforma el texto blanco sobre fondo negro en el actual web, hecho de color e interactividad.

    La revolución de la imagen (criticada por algunos puristas académicos que vieron en el Internet de masa el fin del sistema de comunicación) fue también mérito de una marca hoy muy común <IMG>, esto es, el elemento necesario para invocar imágenes dentro de la página.


    <IMG>

    Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.

    La marca <IMG> no necesita cierre y su sintaxis correcta es:

    <IMG SRC="immagine.gif">

    donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.



    Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato: PNG (Portable Network Graphics).

    El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.

    ALT

    El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:

  • algunos navegadores pordrían estar impostados para no invocar las imágenes;
  • los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario;
  • es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.

    En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:

    <IMG SRC="immagine.gif" ALT="Obra de K. Haring">


    Para comprobar sus efectos, pasa el ratón por encima de la imagen del ejemplo.

    WIDTH y HEIGHT

    En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:

    <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">

    donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

    Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
    BORDER

    Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:

    <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">


    HSPACE y VSPACE

    Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.

  • HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).

  • VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es

    <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

    Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.

    ALIGN

    El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:

  • ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
    Para un ejemplo práctico, haz clic aquí.

  • ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
    Para un ejemplo práctico, haz clic aquí.

  • ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
    Para un ejemplo práctico, haz clic aquí.

  • ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
    Para un ejemplo práctico, haz clic aquí.



  • ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.
    Para un ejemplo práctico, haz clic aquí.
    • Seguir leyendo

    Lee Rockwell en
    Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes



    Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
    HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.


    Listas ordenadas

    Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:

     <OL>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </OL>
    En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto de línea, dado que está automáticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuación), el tipo de lista ordenada que el navegador visualiza está numerada (es decir, la lista consta de una serie de números que parte del 1 y va aumentando progresivamente). Las últimas versiones de HTML prevén la posibilidad de listas ordenadas que contengan un sistema de ordenación diverso del numérico antes citado:

     Ordenación con letras mayúsculas:

     <OL TYPE=A>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </OL>
     Ordenación con letras minúsculas:

     <OL TYPE=a>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </OL>
     Ordenación con números romanos en mayúscula:

     <OL TYPE=I>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </OL>
     Ordenación con números romanos en minúscula (romanitos):

     <OL TYPE=i>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </OL>

    Listas desordenadas

    Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

     Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:

     <UL>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </UL>
    Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
     Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:

     Los círculos sólidos de la lista anterior se obtienen con disc:

     <UL TYPE=disc>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </UL>
     El atributo circle imposta circunferencias:

     <UL TYPE=circle>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </UL>
     El atributo square imposta listas definidas por cuadrados sólidos:

     <UL TYPE=square>
    <LI> Primera voz del menú
    <LI> Segunda voz del menú
    <LI> Tercera voz del menú
    </UL>
    Seguir leyendo

    Lee Rockwell en
    Blog sobre redes sociales y diseño web Ciencia Religión Tecnología Programación desde cero Noticias impactantes




    En la leccion anterior hemos visto como formatear un sencillo texto en HTML. Ahora nos centraremos en cómo disponer, dividir y colocar el texto y demás objetos de una página HTML dentro del documento.


    Crear párrafos con <P>

    La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos específicos:

    <P ALIGN=left>
    Define un párrafo y alinea el texto a la izquierda(left).

    <P ALIGN=right>
    Define un párrafo y alinea el texto a la derecha (right).

    <P ALIGN=center>
    Define un párrafo y centra el texto (center).





    Salto de línea con <BR>

    <BR> es una marca de interrupción de línea. Tiene un funcionamiento similar a la marca de párrafo vista anteriormente, pero se diferencia porque no indica el inicio de un nuevo párrafo.
    Dicho de otro modo, su función es parecida a la de la tecla "enter" del teclado.
    Se usa sin marca de cierre.

    Disponer el texto con <DIV ALIGN> y <CENTER>

    El elemento <DIV> se utiliza para alinear horizontalmente el texto a la izquierda, a la derecha o en el centro de la página. El atributo ALIGN es fundamental a este respecto.

    <DIV ALIGN=left>Texto e imágenes a la izquierda</DIV>
    Mueve a la izquierda los elementos contenidos dentro de sus marcas.

    <DIV ALIGN=right>Texto e imágenes a la derecha</DIV>
    Mueve los elementos a la derecha.

    <DIV ALIGN=center>Texto e imágenes centrados</DIV>
    Centra los elementos.


    La marca <CENTER> tiene un funcionamiento idéntico al de <DIV ALIGN=center> pero su uso ha sido depreciado por el estándar 4 de HTML. El uso de <CENTER> fue introducido por Netscape, justo cuando el HTML preveía la salida de DIV. La enorme difusión inicial de Netscape ha hecho que el uso de esta marca esté también muy difundido, por lo que todavía los navegadores la utilizan y reconocen (incluido MsIe). El uso de <CENTER> es muy simple:

    <CENTER>Texto para centrar</CENTER>


    Líneas horizontales con <HR>

    Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente:

    <HR align="CENTER" size="2" width="400" color="Red" noshade>

    La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos:

  • aling="CENTER": define la alineación de la línea (center, right, left).

  • size="2": define el grosor, en píxel, de la línea.

  • width="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%.

  • color="RED": define el color de la línea.


    • Para un ejemplo práctico, haz clic aquí
    Seguir leyendo
    Suscribirse a: Entradas (Atom)