En esta lección y en las siguientes solo escribiré lo que esta adentro de las etiquetas: no escribiré en las etiquetas
Debes recordar que tienes que mantener todas las etiquetas en tu página
Ahora escribe algo bonito.Algo bonito
 |
| Algo bonito |
Cada vez que agregues algo a tu página tienes que guardarlo con la opción guardar o "save it" y después presionar el botón de actualizar(reload) de tu Navegador o web browser, de esta manera, podrás ver como va cambiando la página.
Nota: hay ocasiones en que las páginas no se actualizan correctamente, para arreglar esto, puedes presionar la tecla ñ (shift) en tu teclado simultáneamente a la tecla de actualizar (reload) de tu navegador "browser", esto casi siempre arregla ese pequeño problema, si el problema continua, entonces cierra esa ventana completamente y vuélvela abrir, esto lo arreglará del todo, pero si aún el problema continua posiblemente tienes un error en tu código.
Lo primero que aprenderas en la lección 2 es a cambiar el color de las páginas.
Se tiene el siguiente código:
< body bgcolor="#FFFFFF" >
Algo bonito.
Algo bonito.
bgcolor dentro de body cambia el color del fondo de la página, los colores se indican en hexadecimal y bajo el formato RGB (Red, Green, Blue).
Si ejecutas el programa en el browser obtendrás la siguiente respuesta:
|
| Algo bonito |
Observa que el fondo de la página es FFFFFF, color blanco:
Si quieres más información sobre el código de los colores posiciona tu mouse aquí o entra a la página COLORES.HTM.
También puedes poner una imagen de fondo por medio de background dentro de body, por ejemplo:
< body background="gotas.jpg">
Al poner estas ordenes en el browser y actualizar la página veras como resultado la siguiente figura:
|
 |
¿No tienes la Imagen?
No te preocupes aquí esta.
¿Cómo puedes guardarla?
La imagen puedes guardarla de la siguiente manera:
1.- debes colocar el puntero del ratón (mouse) sobre la figura.
2.- has un clic sobre ella con el botón de la derecha de tu ratón(mouse)
3.- Al aparecer el menú, selecciona Guardar imagen como… (save image as…) y almacénala en el mismo folder donde esta la página que estas creando.
El navegador o web browser repite esta imagen muchas veces para llenar la página. Si tu tuvieras una imagen delgada se vería algo así:
|
 |
Almacenala en tu disco y trata de incluir la imágen en tu página.
Se pueden hacer que las letras y los números se vean gruesas o en negritas(bold)
< body bgcolor="#FFFFFF" >
algo < b >bonito< /b > < /body >
< body bgcolor="#FFFFFF" >
algo < b >bonito< /b > < /body >
|
| algo bonito |
Lo que le estamos diciendo al browser es que haga las palabras en negritas después de la etiqueta < b > , escriba bonito y termine de hacer las palabras gruesas cerrando con < /b >
El mismo principio se aplica para las letras < i >cursivas< /i > o < i >italics < /i >
< body bgcolor="#FFFFFF" >< i >algo < b >bonito< /b >< /i >
< /body >
< body bgcolor="#FFFFFF" >< i >algo < b >bonito< /b >< /i >
< /body >
|
| algo bonito |
Y para < u > subrayado...< / u >
< body bgcolor="#FFFFFF" >< u >< i >algo< /i > < b >bonito< /b >< /u > < /body >
< body bgcolor="#FFFFFF" >< u >< i >algo< /i > < b >bonito< /b >< /u > < /body >
|
| Algo bonito |
Como te habrás dado cuenta puedes usar las etiquetas en combinación. Te recomiendo que siempre sigas una regla muy importante que por falta de saber como explicarla lo trataré de hacer visualmente.
Las etiquetas deben estar en orden........SIEMPRE,
< UNO >< DOS > < /UNO > < /DOS > ======= INCORRECTO
< UNO >< DOS >< /DOS >< /UNO > ======= CORRECTO
Observa que la primera etiqueta que abras debe ser la última que cierres y la última que abras sea la primera que cierres.
Un efecto curioso es el del Tele Type también conocido como mono-espacio-separado.
< tt >algo bonito.< /tt >
< tt >algo bonito.< /tt >
Sin el efecto ================= algo bonito
Con el efecto ====================algo bonito
|
| algo bonito |
Interesante ¿no crees?
¿Que tal si cambiamos el tamaño de las letras? Realmente es fácil y también puede ser divertido
Primero tenemos que agregar la etiqueta < font > y después especificamos el atributo del tamaño size dentro de font. Por ejemplo:
< body >
algo < font size=4 >bonito< /font >
< /body >
Las letras vienen en 7 tamaños del 1 al 7 en algunos editores utilizan valores desde -2 hasta +4.< body >
algo < font size=4 >bonito< /font >
< /body >
Cuando corras el programa en tu navegador te darás cuenta que la palabra bonito aumento de tamaño.
|
| algo bonito |
Me gustaría explicarte algo antes de seguir:
Primero: Las < etiquetas > le dicen al browser que haga algo y el atributo le dice como hacerlo. Todos los browser tienen un valor predeterminado para todo. El tamaño de la letra o font tiene un valor de 3 en "Netscape" y en "Microsoft Internet Explorer" no importa si te jalas el pelo, le pegues a la persona mas cerca de ti o le hagas mil muecas a tu pantalla , siempre será 3 hasta que tu le cambies elatributo
Segundo: Los diferentes estilos de letra solo podrán ser vistos si las personas tienen ese particular estilo de letras en su computadora. Si la persona que mira estas páginas no tienen estos tipos de letras solo podrán ver los estilos predeterminados por el navegador. Tu puedes decidir el mejor tipo de estilo al especificar dos o mas tipos de letras, solo has algo así....
< FONT FACE="ARIAL, HELVETICA, LUCIDA SANS" >bonito< /FONT >.
El browser busca el primer tipo de letra por ARIAL, si lo encuentra , lo usará, si no, buscará HELVETIC, si no la encuentra, buscara LUCIDA SANS. y si no la encuentra escribirá el texto con letras predeterminadas.
También podemos cambiar el color de las letras mediante el uso de < font color="color" > por ejemplo:< body bgcolor="#FFFFFF" >
< br >
algo < font color="#00FF00" >bonito < /font>
< /body >
Al escribir estas instrucciones en tu página y actualizarla veras algo parecido a:
|
| algo bonito |
Y por supuesto podemos combinar los atributos.
< body bgcolor="#FFFFFF" >
algo < font color="#00FF00" face="impact" size=6>bonito
< /body >
< body bgcolor="#FFFFFF" >
algo < font color="#00FF00" face="impact" size=6>bonito
< /body >
|
| algo bonito |
Aquí algo más.
< body bgcolor="#FFFFFF" >
algo < i >< b >< font color="#00FF00" face="impact" size=6 >
bonito< /font >< /b >< /i > < /body >
< body bgcolor="#FFFFFF" >
algo < i >< b >< font color="#00FF00" face="impact" size=6 >
bonito< /font >< /b >< /i > < /body >
|
| Algo bonito |
Realmente no importa que etiqueta esta primero lo que si importa es que estén en orden.
Pero aún hay más
< body bgcolor="#FFFFFF" >< sup >algo< /sup > < s >< sub >bonito< /sub >< /s > < /body >
< body bgcolor="#FFFFFF" >< sup >algo< /sup > < s >< sub >bonito< /sub >< /s > < /body >
|
| algo |
Creo que se explica por si solo, pero si lo entiendes, esto es lo que le estamos haciendo: la etiqueta SUP indica superíndicela etiqueta Sindica texto rayado o con una línea en el medio y la etiqueta SUBindica subíndice.
NOTA: Una apropiada manipulación de las letras y sus diferentes estilos te dará gran flexibilidad en el diseño de tus páginas.
No hay comentarios:
Publicar un comentario