*
*
*
*
 

 

Efectos  HTML

 

El HTML es un lenguaje para darle forma a las páginas web. Se ha convertido en uno de los formatos más populares que existen para la construcción de documentos y también de los más fáciles de aprender.  Sí quieres saber algunas cosas más, pincha < < aquí >>. Vamos a trabajar con algunos códigos:

 

1.  Vamos a elaborar otra página. Para ello procedemos como se explica en en el  punto 11 del tutorial <Fondo de la Web> que puedes mirar pinchando aquí. Guardamos esa nueva página y le ponemos nombre de nuevo. Recuerda que pincha en cualquier punto de la página, seleccionas <Propiedades de la página> y en el Título colocas el de tu elección, he escogido para mi ejemplo el siguiente título: Ejercicios Sobre Efectos. Luego ponemos título a la página y aumentamos tres veces la  sangría; debe quedar como en la imagen:

 

 

2. Algunos efectos deben meterse dentro de una tabla, vamos a crearla dos  tablas: Una con borde y otra sin borde. Para eso vamos a la Barra Estándar y pinchamos sobre la figura de la tabla que muestro, como va a quedar muy ancha en Tabla seleccionamos Autoajustar al contenido y nos queda pequeña como se ve en la imagen:

 

 

Como puedes observar en la imagen ha quedado  un borde en la imagen superior...para eliminarlo y quede invisible, ubicados en el centro de la tabla vamos a Tabla/Propiedades de tabla/Tabla y en <Bordes< seleccionamos el número 1 y lo borramos sin dejar valor.

 

Como ejercicio vamos a hacer las dos tablas una encima de la otra, las seleccionamos las dos como se muestra en la imagen ...parte superior.. y luego reducimos dos sangría..parte inferior de la imagen:

 

 

 

En cualquier buscador como Google, se consiguen muchas páginas con efectos HTML como esta cuyas direcciones copio aquí:

 

http://yomaster.galeon.com/principal.htm

 

http://yomaster.galeon.com/efectos.htm

 

Algunas de ellas te ofrecen los códigos en un archivo comprimido. En caso de no saber descomprimirlos, puedes aprenderlo en el tutorial que consigues pinchando en la figura

 

3. Vamos a abrir la primera página que te propongo y pinchas sobre la sección de juegos, luego seleccionas el <Juego del 3 en raya>.  Observa que tienes dos grupos  de códigos En los superiores tienes un botón que debes pinchar para seleccionar todo...en otras páginas de recursos lo seleccionas de forma manual...luego sale la siguiente recomendación <Insertarlo dentro del <head> en vista HTML>; para hacerlo debemos seleccionar la Vista de Código y pegarlo dentro de esas dos palabras.  Veamos a  través de una imagen donde debes pegar el código que copiastes de Yomaster :

 

 

Ahora vas a colocar el cursor en la Vista diseño en el centro de la tabla y seguirás estas instrucciones: <Pegado especial como html en vista normal donde quieras>; pero te preguntarás ¿Cómo se hace el pegado especial?!...vas a Edición / Pegado especial , seleccionas la opción >No convertir>:

 

 

Mira ahora en la vista previa que lindo ha quedado el juego:

 

 

4. Ahora vamos a añadir un efecto llamado  <Puntos volando sobre el puntero del ratón.>. El código que vas a copiarlo consigues pinchando aqui.

 

 

Observa éstas recomendaciones:

 

- Recomendamos meterlo dentro de una celda para localizarlo mejor.

- Copia y Pega el código como "Pegado especial" como "Tratar como HTML" en la vista Normal

 

Así que colocas el cursor en el centro de la tabla invisible y pegas como <Pegado especial>:

 

 

Selecciona la vista Previa  y verás un poco de puntitos persiguiendo tu cursor:

 

 

5.  Vamos a ponerle un letrero a nuestra web debajo de la tabla invisible. He utilizado este que puedes obtener pinchando aquí. Ahora vas a observar que la tabla donde está nuestro juego quedó sin centrar. Para remediarlo vamos a poner el cursor en el centro de la tabla, al lado de la palabra juego, vamos a Tabla /Seleccionar /Tabla

 

 

6. Ahora vamos a aprender cómo se puede modificar un código que tomamos de cualquier página de Recursos para Webmasters. El siguiente ejercicio es para ponerle colores personalizados a la  Scrollbar de nuestra página web, OJO este efecto se puede observar solo con el explorador http://pspcongeisa.webcindario.com/explorer.png Explorer. En primer lugar vamos a observar las partes de esas barras en la siguiente imagen:

 

 

Ahora te copio el código que se va a utilizar en ésta oportunidad, el cual vas a copiar y pegar en el Bloc de Notas. Ten en cuenta que tal como está el código los tonos del la Scrollbar son blanco, gris y negro.

 

<style type="text/css">
html {
scrollbar-face-color: #C0C0C0 ; /*barra*/
scrollbar-arrow-color: #FFFFFF ; /*flecha*/
scrollbar-track-color: #959595 ; /*fondo*/
scrollbar-shadow-color: #7D997D ; /*sombra*/
scrollbar-highlight-color: #999900; /*sombra fondo*/
scrollbar-3dlight-color: #E8C8DF; /*sombra 3D*/
scrollbar-darkshadow-color: #000000 ; /*sombra fondo oscura*/
}
</style>

 

Cuando lo pegues en el Bloc de Notas lo vas a  modificar y pones los colores de tu gusto como he hecho en el ejemplo de arriba. Hay una tabla que tiene  los números del código hexadecimal HTM de los colores, los cuales puedes ver pinchando aqui.  Ese número es el que vamos a sustituir en el código de abajo.

 

<style type="text/css">
html {
scrollbar-face-color: #FF33FF ; /*barra*/
scrollbar-arrow-color: #999900; /*flecha*/
scrollbar-track-color: #856D54 ; /*fondo*/
scrollbar-shadow-color: #E8C8DF; /*sombra*/
scrollbar-highlight-color: #999900; /*sombra fondo*/
scrollbar-3dlight-color: #FF66FF ; /*sombra 3D*/
scrollbar-darkshadow-color: #666600; /*sombra fondo oscura*/
}
</style>

 

Una vez listo vas a la Vista Previa y verás el resultado. Es importante tener en cuenta que siempre verás el Scrollbar vertical, para ver el Scrollbar horizontal, debe tener la Web contenidos anchos, para los que se necesite tener esa barra horizontal que permita ver todo el contenido de la Web. Hay páginas de recursos para webmasters que te ofrecen un generador de Scrollbar, pero con este en español tienes una guía más sencilla para saber dónde va cada color.

 

7. Guarda y cuelga la página en tu espacio web. La página debe tener un aspecto parecido al que verás pinchando aquí.

 

 

 Creative Commons License
© Hacer una Web con Geisa está bajo una
licencia de Creative Commons.