[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]

Tutorial HTML
5. Funciones Especiales


5.1. Tamaños de letra
5.2. Definición del cuerpo de la página (colores y fondos)
5.3. Formularios para la captura de datos

5.1. Tamaños de letra

Los tamaños de letra puede variarse a lo largo de una página con la orden:

<font size="n">.....texto.....</font>

donde n es un número entre 1 y 7, siendo 1 el tamaño menor y 7 el mayor:

Código HTML
<font size="1">Tamaño de letra 1</font><font size="2"> Tamaño de letra 2</font><BR>
 <font size="3">Tamaño de letra 3</font><BR>
 <font size="4">Tamaño de letra 4</font><BR>
 <font size="5">Tamaño de letra 5</font><BR>
 <font size="6">Tamaño de letra 6</font><BR>
 <font size="7">Tamaño de letra 7</font><BR>
Visualización
Tamaño de letra 1 Tamaño de letra 2
Tamaño de letra 3
Tamaño de letra 4
Tamaño de letra 5
Tamaño de letra 6
Tamaño de letra 7


Sin embargo, el tamaño de letra tamién puede moficarse incrementando o disminuyendo el tamaño que ese momento tenga la letra. Así, la orden:

<FONT SIZE="+1">..... texto .....</FONT>

incrementa en un tamaño el tamaño actual.

De la misma forma, la orden:

<FONT SIZE="-1">..... texto .....</FONT>

disminuye un tamaño.

Código HTML
Los tamaños <FONT SIZE="+1">de letra </FONT><FONT SIZE="+2">pueden variarse </FONT><FONT SIZE="+3"> a voluntad </FONT><FONT SIZE="+4">incrementádolos o </FONT><FONT SIZE="-1"> disminuyéndolos</FONT>
Visualización
Los tamaños de letra pueden variarse a voluntad incrementádolos o disminuyéndolos


El tamaño utilizado por defecto es el 3.

5.2. Definición del cuerpo de la página (colores y fondos) [T][I]

El aspecto de una página puede modificarse definiendo los colores del tipo de letra, del fondo de la página, de los enlaces, etc. También puede especificarse una imagen de fondo.

La definción de estos aspectos se realiza en la orden BODY. Recuerda que esta orden es una de las que definen la estructura básica del documento HTML, como expusimos en los conceptos básicos.

La orden <BODY> puede incluir alguno de los siguientes parámetros:

La expresión #RRGGBB indica el color en formato RGB. Todo color es una combinación de los tres colores básicos: rojo (R), verde (G) y azul (B). En este formato, cada uno de los colores puede expresesarse desde la ausencia de color (valor 0) a saturación de color (255). El problema es que hay expresar un número comprendido entre estos dos valores en forma hexadecimal, pero no es mucho problema. El valor mínimo (0) se expresa como 00, y el máximo (255) como FF. Así, las siguientes expresiones indican: De esta forma puedes definir en base a los colores básicos una gama de diferentes colores. Si quieres utilizar toda la gama, te propongo el siguiente truco:

Utiliza el accesorio PAINT, en concreto puedes picar en uno de los colores de la tabla de colores para desplegar sus características (colores personalizados). Podrás comprobar qué valores adoptan los colores básicos. Imaginemos que estos valores son: Ahora accede a la calculadora de WINDOWS, y en el menu VER, selecciona calculadora científica. Asegúrate de que está en forma decimal (DEC). Introduce uno de los números y pica después la opción para formato hexadecimal (HEX). Ya tienes el formato hexadecimal que buscabas.

Con todo esto, la orden:

<BODY BACKGROUND="fondo.gif" TEXT="#000000" LINK="#FF0000" VLINK="#00FF00">

utiliza la imagen "fondo.gif" como fondo de la página, en la que el texto se visualizará en negro, los enlaces en rojo y los enlaces visitados en verde.

5.3. Formularios para la captura de datos [T][I]


Un recurso interesante de las páginas WEB es la captura de infomación que se envía a una dirección de correo particular.

La definición de un formulario está contenida entre las ordenes:

<FORM ACTION="dirección e-mail" METHOD="POST"
....
</FORM>

El contenido del formulario serán campos que el usuario debe rellenar. La identificación de un campo requiere un nombre y un tamaño, mediante la orden:

Campo de ejemplo: <INPUT NAME="nombre del campo" size="30">

que crea un campo con el nombre especificado y una longitud de 30 caracteres.

Código HTML
<FORM ACTION="jjloga@fcu.um.es" METHOD="POST"
Campo de ejemplo: <INPUT NAME="nombre del campo" size="30">
</FORM>
Visualización

Campo de ejemplo:


Además de campos de texto pueden definirse Areas de Texto; campos que ocupan más de una línea. La definición de un área de texto sigue la siguiente estructura:

Área de texto: <TEXTAREA NAME="nombre del campo" ROWS="n de filas" COLS="n de columnas"></TEXTAREA>

Otro recurso de los formularios son las listas desplegables, que definen campos con valores predefinidos. Por ejemplo, la secuencia:

<SELECT NAME="nombre del campo">
<OPTION>Si
<OPTION>No
<OPTION>Regular
</SELECT>

crea un campo de selección con tres valores, que se desplegarán al picarlo.

Por último, para gestionar el envío de la información, se utilizan las siguientes órdenes:

<INPUT TYPE="SUBMIT" VALUE="texto del botón de enviar datos">
para definir un botón que al picarlo envía el formulario a la dirección e-mail especificada.
<INPUT TYPE="RESET" VALUE="texto del botón de borrar datos">
para definir un botón que al picarlo borra el texto de los campos sin enviarlo.

Resumo estos datos en el siguiente ejemplo:

Código HTML
<FORM ACTION="mailto:jjloga@fcu.um.es" METHOD="POST"
Nombre: <INPUT NAME="nombre" size="30"><BR>
 Te ha parecido interesante este tutorial: <SELECT NAME="interes">
<OPTION>Si
<OPTION>No
<OPTION>Regular
</SELECT><BR>
 Comentario: <TEXTAREA NAME="comentario" ROWS="5" COLS="30"></TEXTAREA><BR>
 <INPUT TYPE="SUBMIT" VALUE="Enviar datos"> <INPUT TYPE="RESET" VALUE="Borrar datos">
</FORM>
Visualización 

Nombre: 
Te ha parecido interesante este tutorial: 
Comentario:



[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]
(c) JuanJo López (4-96) - Facultad de Psicología - Universidad de Murcia (España)