TEXTO BÁSICO Y MARQUESINAS
Puedes configurar los estilos de texto tanto en [HTML] como en [CSS].
HTML es ideal para la estilización de palabras u oraciones, pero si lo que quieres es cambiar bloques más grandes de texto es mejor que utilices CSS, fácil de usar.
Si quieres cambiar el texto o links que estan en tu página de VF necesitarás poner etiquetas de HTML alrededor de ellos.
Estilizar el texto en HTML:
<i> Texto en cursiva </i>
<b> Texto en negrita </b>
<u> Texto subrayado </u>
<strike> Texto tachado</strike>
Para centrar el texto:
<div align="center"> Texto centrado </div>
Para cambiar el color del texto:
<font color="orange"> Texto naranja </font>
<font color="#990000"> Texto rojo en hexadecimal </font>
<font size="1"> Texto pequeño </font>
<font size="4"> Texto más grande </font>
<font face="Times New Roman, Times, Serif">Texto en Times New Roman </font>
Puedes probar cambiando los valores para obtener distintos resultados.
Combinar distintos códigos de fuente con HTML:
Si quieres cambiar el color, tamaño y/o fuente de letra, puedes hacerlo todo con la misma etiqueta:
<font size="1" color="red"> Texto rojo con tamaño 1 </font>
<font size="3" face="Georgia"> Texto Georgia con tamaño 3 </font>
<face="Courier" font size="1" color="orange"> Texto Courier de tamaño 1 en naranja </font>
Poner un enlace al texto:
Para poner un enlace a un texto necesitarás el [URL] de la página a la que quieres enlazar el texto y el código siguiente:
<a href="URL DE LA PÁGINA A ENLAZAR"> QUE QUIERES QUE PONGA EN EL LINK </a>
Estilizando el texto en CSS:
El estilo CSS utiliza una sintaxis distinta al HTML.
Así, utilizando CSS englobas dentro de una misma etiqueta un código que afecta a todo el texto de una parte de tu perfil. Para que tenga efecto en el texto de tu perfil en general, aplica el código a "html, body". Por ejemplo:
<style type="text/css">
html, body {
color: red;
font-family: Georgia;
font-size: 8pt;
font-weight: bold;
font-style: italic;
text-decoration: underline;
letter-spacing: 5px;
font-variant: small-caps;
}
</style>
Estilizando links con CSS:
Los Links tienen 3 estados diferentes: a:link (link por visitar), a:visited (link visitado) y a:hover (cuando el puntero del ratón se pone encima del link). Puedes utilizar CSS para cambiarlos separadamente si quieres:
<style type="text/css">
a:link { color: red; text-decoration: none; }
a:visited { color: green; text-decoration: overline; }
a:hover { color: orange; background: white; text-decoration: none; }
</style>
Marquesinas en movimiento:
Puedes utilizar marquesinas para hacer que el texto se mueva. También puedes utilizar las marquesinas para añadir en lugar de texto, imágenes.
También puedes cambiar la velocidad con "scrollamount:
"Scrolldelay" permite que tu marquesina se vaya parando en distinta posición:
IMÁGENES (inc fondos y banners)
El código básico para poner una imagen es: <img src="URL DE LA IMAGEN">
Puedes cambiar distintos atributos de la imagen como anchura, altura e incluso añadir un texto alternativo. Es una buena opción el configurar la anchura y la altura porque así le ordenas al navegador de internet cómo quieres que aparezcan las imagenes de tamaño, por el contrario, si no defines los atributos de la imagen, el navegador las cargará, por defecto, con el tamaño original de la imagen, lo cual a veces puede resultar incómodo ya que puede aparecer demasiado grande en el navegador. También es una buena idea poner un texto alternativo, de este modo los usuarios sabrán de que trata la imagen en cso de que ésta no se cargue.
Una etiqueta más completa para definir estos atributos sería:
<img src="URL DE LA IMAGEN" width="100px" height="120px" alt="¡Yo en la playa!">
La URL de la imagen que pongas en este código debe proceder de algún servidor. Hay varios servidores de internet gratuitos y de muy buen uso donde puedes subir tus imagenes, como: [ Tinypic ] o [ Photobucket ]. El motivo de subirlas a un servidor es que el resto de gente no pueden ver las imágenes que tienes en tu disco duro, por lo cual al subirlas a la red podrán ser vistas por cualquier usuario navegante. Estos servidores gratuitos te permiten compartir tus imágenes online ¡a cambio de nada! y te suministran una dirección http:// con la ubicación en la que están colgadas, de hecho, en los servidores podrás ver la URL de la imagen y así sólo tendrás que copiarla y pegarla cómodamente. Ésa es la dirección que tienes que sustituir en el código para que tu imagen se muestre.
Fondos:
Puedes poner un fondo a toda tu página o en cualquier caja.
Una vez que tengas la URL de la imagen que quieras colocar de fondo, este es el código que necesitas para poner un fondo en tu página:
<style type="text/css">
html, body { background: url('URL DE LA IMAGEN'); }
</style>
Banners:
Los Banners son básicamente imágenes clickeables. Necesitarás la URL del banner (lee arriba si no estás familiarizado con la forma de subir imágenes a internet) y también necesitas la URL del Cult o Perfil al cual quieres enlazar el banner:
<a href="URL DE LA PÁGINA QUE QUIERES ENLAZAR"><img src="URL DEL BANNER" border="0"></a>
Al poner el valor border="0" evitas que aparezca un borde de color alrededor de la imagen, lo cual afea la imagen, asi que te recomendamos que utilices este valor.
NICK BANNER
¿Cómo reemplazar tu nick en tu perfil con un banner?
Primero busca o haz tu banner. No necesitas ningún software caro para hacerlo, puedes encontrar una larga lista de programas gratuitos o demos.
Os recomendamos [ Serif PhotoPlus ] o, si tienes algo más de experiencia, [ The GIMP ].
Cuando hayas hecho tu banner tendrás que subirlo a un servidor. [ Tinypic ] o [ Photobucket ] son dos servidores gratuitos y fáciles de manejar.
Finalmente necesitarás poner la URL de la imagen subida al servidor que elijas en el siguiente código:
<style type="text/css">
.profilename {
color: #000000;
font-size: 0px;
text-align: left;
background: url('URL DE LA IMAGEN');
height: ALTURA DE LA IMAGENpx;
width: ANCHURA DE LA IMAGENpx;
}
</style>
