Primeros Pasos
Primero
y ante nada, deberemos abrir el bloc de notas para empezar a introducir
las etiquetas y tags, si no disponemos de algún otro editor de texto.
Como
vimos en la primera parte, deberemos ante nada introducir las etiquetas
principales para empezar a crear las páginas, están son <html>
, seguida de la etiqueta <head>
, donde poníamos él titulo entre la etiquetas <title>
</title>y cerrábamos solo </head>.
Tenga cuidado de no cerrar la etiqueta </html>,
por que no se vera nada en la página.
Ahora a continuación, colocamos la etiqueta <body>,
donde introduciremos nuestra página o sea será lo que verán
las personan que entren en nuestra página.
Hasta ahora nos quedara así:
<html>
<head>
<title>Nombre de la página</title>
</head>
<body>
</body>
</html>
BODY
Dentro
de este, es donde nosotros insertaremos el color de fondo de la página
o la imagen que quisiéramos, para ello deberemos insertar los parámetros,
que son: Bgcolor="#000000" para darle
el color a la página, Background="imagen.gif"
para colocar una imagen de fondo (respete las comillas), deberá
de tener la precaución de poner ambos TAG´s (bgcolor y background),
por que si el internauta que nos visita tiene deshabilitada la opción
de imágenes, el fondo de la página aparecerá en color
blanco y si usted tiene letras muy claras como en estas páginas,
la misma no se vera.
Con respecto a lo anterior, veremos que body se modificara por:
<body background="imagen.gif" bgcolor="#006666">
Si queremos que la imagen de fondo permanezca estática, deberemos agregar a BODY la etiqueta bgProperties="fixed".
<body background="imagen.gif" bgcolor="#006666" bgProperties="fixed">
Atributos
de body
Estos
atributos, nos sirven para darle color a la página o para indicarle
al navegador si ya visito alguna de nuestras páginas.
Estos atributos son:
text=Cambia
el color de todo el texto de la página. El código de colores
es igual que las demás etiquetas. text="#990000"
alink=Indica
el color del link o enlace, en el momento de presionar el mouse
link=Indica
el color de los link o enlace que tendrán el vinculo
vlink=Indica
el color del link o enlace que ya fue visitado, si no se pone ningún
color, por defecto el color es púrpura.
<body bgcolor="#0000ff" text="#ff5500" alink="#ffff00" link="#ff0000" vlink="#00ff00">
En este caso, aparecerá en pantalla el link con un color rojo, en el momento de presionar el link, el color cambiara a amarillo y después de que se vio el sitio y se vuelve a la pantalla donde esta el link, el color aparecerá de color verde.
Los
colores
Para una pantalla de fondo o para las letra se podrá
usar el código de colores.
Como ya hemos dicho anteriormente, para una pantalla de fondo deberá
de ser colocado en la etiqueta <body>, de la siguiente manera
<body bgcolor="#xxxxxx">,
donde xxxxxx es la combinación de colores.
Los colores podremos modificarlos, cambiando las xxxxxx por números
y letras.
Estos van Desde el mas oscuro al mas claro, en el siguiente orden: 0123456789ABCDEF,
siendo "#000000", el color blanco y "#FFFFFF"
el color negro
Tenga cuidado, que si utiliza el valor numérico, no utilice el
valor alfabética, use uno u otro.
Par que tenga una idea de como combinar colores, les presento la siguiente
tabla.
Colores con valores alfanuméricos |
Código de colores por nombre |
bgcolor="#00ddff" | bgcolor="aqua" |
bgcolor="#0000ff" | bgcolor="blue" |
bgcolor="#000099" | bgcolor="navy" |
bgcolor="#9900FF" | bgcolor="purple" |
bgcolor="#FF00FF" | bgcolor="fucshia" |
bgcolor="#990000" | bgcolor="maroon" |
bgcolor="#FF0000" | bgcolor="red" |
bgcolor="#00FF00" | bgcolor="lima" |
bgcolor="#009900" | bgcolor="green" |
bgcolor="#99AA00" | bgcolor="teal" |
bgcolor="#999900" | bgcolor="olive" |
bgcolor="#CCCCCC" | bgcolor="silver" |
bgcolor="#666666" | bgcolor="gray" |
bgcolor="#000000" | bgcolor="black" |
bgcolor="#ffffff" | bgcolor="white" |
Para
que no tenga que perder tiempo probando que color es mas conveniente
para su página, existen programas que lo ayudaran, mostrándole la combinación
de los colores ,con tres barras verticales.
Uno de estos programas es:
COLOR MANIPULATION, http://www.meat.com/software/cmd/
, por cierto es el que uso por acá, pero existen muchos mas en el mercado.
FUENTES
Para
las letras o números, el código de colores se introduce
en la etiqueta color, de la siguiente manera
<font color="#xxxxxx">
,siendo
xxxxxx el código de colores.
PÁRRAFOS
Esta
etiqueta, nos sirve para introducir textos, para ello introducimos o
bien <p></p>; <div></div>
La diferencia entre uno y el otro, es que con la etiqueta <p>,
crea un espacio entre líneas, que no lo hace <div>
Si queremos pasar de una línea a la otra, pero sin dejar un espacio
entre líneas, podemos utilizar la etiqueta <br>, este no
lleva ningún parámetro adicional.
ALINEADO
Podremos alinear los párrafos a nuestro gusto
de la siguiente manera:
<p
align="center"> = Centrado del texto
<p align="right">
= Alineado a la derecha
<p align="left">
= Alineado a la izquierda
<p align="justify">
= Justifica la pagina, muchos exploradores no lo reconocen.
También
pueden ser utilizados con <DIV>.
Coloque estos códigos en el bloc de notas, y vera como queda.
SALTO
DE LINEAS
En las páginas, los saltos de líneas se logran
con la etiqueta <BR>, esta siempre pasa de una línea a
la otra sin dejar espacios en blanco.
Si lo que queremos es hacer un salto de línea mayor, para ello utilizamos
la etiqueta <P>, esto creara un salto de línea con un espacio
entre línea y línea.
<html>
<head>
<title>Primera página</title>
</head>
<body bgcolor="#ff0000"
bgProperties="fixed">
<div align=justify><font color="#0000ff">Cuando
usted vea este texto en la pagina creada, la vera justificado. Es decir
alineada en ambos lados de la página, si usted no justifica la
página, esta aparecerá como un camino de hormigas.<br>
No olvide que en el block de notas, deberá guardarlo como un archivo
HTM o HTML, de lo contrario el explorador no lo recocerá, puede ponerle,
por ejemplo : <br>prueba.htm</div>
<p align=center>Texto Centrado</p>
<div align=right>Texto a la derecha</div>
</body>
</html>