Para mantener todo ordenado solo escribiré lo que esta adentro de las etiquetas:
<body> </body>
no escribiré las etiquetas
<html> </html>
<head> </head>
<title> </title>
Tienes que mantener todas las etiquetas en tu página
<body> </body>
| |
Como puedes ver esta un poco vacía!!
Ahora escribe algo bonito.
<body>
Algo bonito
</body>
| |
Algo bonito |
Cada vez que agregues algo a tu página tienes que guardarlo con la opción "guardar (save)" y después presionar el botón " actualizar (reload)" de tu web browser de esta manera podrás ver como estás progresando en tu página.
Nota
Hay ocasiones que las páginas no hacen el "actualizar
(reload)" correctamente para arreglar esto puedes presionar la tecla "shift"
en tu teclado simultáneamente a la tecla "actualizar (reload)" de tu
web browser, esto casi siempre arregla ese pequeño problema, si el problema
sigue entonces cierra esa ventana completamente y vuelve a abrirla, esto lo
arreglará del todo, pero si aún el problema continúa tienes
un error en como has escrito el código.
Lo primero que podemos aprender es cambiar el color del fondo de las páginas
<body bgcolor="#000000">
algo bonito.
</body>
| |
| algo
bonito |
También podemos poner una imagen de fondo.
<body background="gotas.jpg">
</body>
| |
|
¿No tienes la imagen?
No te preocupes aqui está.
Para guardar esta imagen haz un click sobre ella con el botón
de la derecha del mouse, te saldrá un menu selecciona "gurdar imagen
como... (save image as...)" y guardala en la misma carpeta donde esta la
página que estas creando.
El web browser repite esta imagen muchas veces para llenar la página, si tu tuvieras una imagen delgada se veria algo asi:
| |
 |
Aquí esta la imagen
Bueno regresemos a una página más simple..
<body bgcolor="#000000">
algo bonito.
</body>
| |
| algo
bonito |
Podemos hacer las letras y números gruesos (bold)
<body bgcolor="#000000">
algo <b>bonito</b>
</body>
| |
| algo
bonito |
Lo que le estamos diciendo al browser es que puede comenzar a hacer las palabras gruesas <b> y con esto le decimos que pare de hacer las palabras gruesas </b>
El mismo principio aplica para italics
<body bgcolor="#000000">
<i>algo></i>
<b>bonito</b>
</body>
| |
| algo
bonito |
Y para subrayado...
<body bgcolor="#000000">
<u><i>algo</i> <b>bonito</b>></u>
</body>
| |
| algo
bonito |
Como te habrás dado cuenta puedes usar las etiquetas en combinación pero siempre hay que seguir una regla muy importante: Que por para explicarla lo tratare de haceré visualmente.
Las etiquetas tienen que estar en orden........SIEMPRE
<AQUI> <ALLA> </AQUI> </ALLA> ======= MAL
<AQUI> <ALLA> </ALLA> </AQUI> ======= BIEN
Esto indica que las etiquetas siempre deben de ir anidadas.
Un efecto curioso es el del Teletype, también conocido como mono-espacio-separado.
<body>
<tt>algo bonito</tt>
</body>
Esto es sin el efecto ================= algo bonito
Así con el efecto ====================algo bonito
| |
| algo
bonito |
| Bueno ¿qué
te parece todo esto? hasta ahora no te me aburras solo piensa que falta poco y acabamos esta lección y comenzaremos otra :) |
Que tal si cambiamos el
tamañode
las letras?
y se hace así!!!
| |
| <FONT
FACE="Verdana">Quetal si cambiamos</FONT> <FONT SIZE=1>e</FONT><FONT SIZE=2>l</FONT><FONT SIZE=3>t</FONT><FONT SIZE=4>a</FONT><FONT SIZE=5>m</FONT><FONT SIZE=6>a</FONT><FONT SIZE=7>ñ</FONT><FONT SIZE=6>o</FONT><FONT SIZE=5>d</FONT><FONT SIZE=4>e</FONT> <FONT SIZE=3>l</FONT><FONT SIZE=2>a</FONT><FONT SIZE=1>s</FONT><FONT SIZE=2>l</FONT> <FONT SIZE=3>e</FONT><FONT SIZE=4>t</FONT><FONT SIZE=5>r</FONT><FONT SIZE=6>a</FONT><FONT SIZE=7>s</FONT><FONT SIZE=6>?</FONT> |
Realmente es fácil y también puede ser divertido!!!
Primero tenemos que agregar la etiqueta <font>
<body>
algo <font>bonito</font>
</body>
y después expecificamos el atributo del tamaño.
<body>
algo <font size=4>bonito</font>
</body>
| |
| algo
bonito |
Las letras vienen en 7 tamaños del 1 al 7 y también
se usan -1 -2 ... -7, +1 +2 ... +7. Si no se especifica ningún tamaño,
por defecto es 3.
Las <etiquetas> le dicen al browser que haga algo y el atributo le dice como
hacerlo. Todos los browser tienen un valor pre dispuesto (por defecto) para
todo!!! Para el <font> el valor es 3 en "NETSCAPE"
y "EXPLORER" y siempre será 3 hasta que
le cambies el atributo.
Los diferentes estilos de letra solo podran 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 podran ver los estilos ya pre dispuestos por el "browser"; entonces ten cuidado con tus elecciones.
Tu puedes decidir el mejor tipo de estilo al espicificar dos o más tipos de letras.
Solo has algo así .... <FONT
FACE="ARIAL, HELVETICA, LUCIDA SANS">bonito</FONT>.
Si no entiendes enseguida, esto es lo que está sucediendo: el browser
busca por ARIAL. Si lo encuentra, lo usará;
si no, buscara HELVETICA; si no encuentra
ese tipo tampoco, buscará LUCIDA
SANS. Y si no encuentra eso tampoco irá
a las letras predefinidas.
También podemos cambiar el color de las letras, (pero solo si tu quieres).
<body bgcolor="#000000">
algo <font color="#00FF00">bonito</font>
</body>
| |
| algo
bonito |
Y por supuesto podemos combinar las atributos.
<body bgcolor="#000000">
algo <font color="#00FF00" face="impact" size=6>bonito</font>
</body>
| |
| algo
bonito |
aquí algo más.
<body bgcolor="#000000">
algo <i><b><<font color="#00FF00" face="impact"
size=6>
bonito</font></b></i>
</body>
| |
| algo
bonito |
Realmente no importa que etiqueta está primero, lo que si importa es que estén en orden.
Pero aun hay más
<body bgcolor="#000000">
<sup>algo</sup>
<s><sub>bonito</sub></s>
</body>
| |
| algo
|
Creo que se explica solo pero si insistes esto es lo que le estamos haciendo.
La etiqueta <sup> es para
texto super escrito, <s> para texto rayado
o con una linea en el medio, <sub> y este
para texto sub escrito.
La apropiada manipulación de las letras y sus diferentes estilos te dará gran flexibilidad en el diseño de tus páginas.
BUENO DECLARO
ESTA LECCIÓN ACABADA SIGAMOS ADELANTE
