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 v
amos
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://www.yomaster.com/
Algunas de
ellas te
ofrecen los
códigos en
un arc
hivo
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. Vamos a
abrir la
segunda
página y
pinchamos en
la sección
de efectos
que viene
siendo este
enlace:
http://www.yomaster.com/efectos.php
Selecciona
en la lista
de códigos
el siguiente
y pincha
sobre
<Puntos
volando
sobre el
puntero del
ratón.>. Al
salir la
página donde
viene el
código
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.
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 de
Diseño,
pones el
cursor
en
cualquier
lugar
del
documento,
es este
caso
puedes
hacerlo
al lado
de la
última
tabla
que
hiciste
y
pinchas
en la
vista
previa
para ver
el
resultado.
Hay
páginas
de
recursos
para
webmasters
que te
ofrecen
un
generador
de
Scrollbar,
pero a
veces te
hace
sólo la
lateral
y no la
inferior.
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í.
© Hacer una Web
con Geisa está bajo una
licencia de Creative Commons.