CAPITULO 2 Formateando el texto
En el capitulo anterior adquirimos los conocimientos necesarios para hacer esto :
<HTML> Indica que el inicio de un documento html
<HEAD> Comienzo de la cabecera
<TITLE>MI PRIMERA PAGINA</TITLE> Titulo. Debe de estár dentro del area de cabecera
</HEAD> Fin del area de la cabecera
<BODY> Comienzo del cuerpo
<H3><b><i>Pepito Perez</B></I></H3>
<H4><I>Director comercial</I></H4>
<H6>EmpresaBuena S.A.</I>		 Información que aparecerá en el area de página del navegador, en la que aparece texto en distintos tamaños y con distintos atributos. Observese que no pasa nada si se nos olvida alguna etiqueta de cierre de un cambio de tamaño......con otras etiquetas, un olvido puede hacer que no se muestre nada en el navegador!!.
</BODY> Fin del cuerpo
</HTML> Fin del documento html

Con lo que obtenemos en la pantalla de nuestro navegador lo siguiente :

Pepito Perez

Director comercial

EmpresaBuena S.A. 

Hoy aprenderemos a hacer esto :

Pepito Perez
Director comercial

EmpresaBuena S.A. 

Os habreis dado cuenta de que aunque coloquemos el texto en varias lineas en el bloc de notas (o el procesador de textos que estemos usando) en el navegador aparece todo en una misma linea. Eso es devido a que el navegador coloca todo el texto seguido, hasta que encuentre una etiqueta que le haga hacer un cambio de linea, o de parrafo (como por ejemplo <Hx>)

Para hacer un salto de linea la etiqueta es <BR> y para hacer un salto de parrafo la etiqueta es <P> . Estas etiquetas en principio se usan sin su correspondiente cerrar, aunque puede haber casos en que si que interesa poner el cerrar parrafo. Probando el codigo siguiente :
Pepito Perez<BR>Director comercial<P>EmpresaBuena S.A
Conseguimos esto:

Pepito Perez
Director comercial

EmpresaBuena S.A.

Es igual si lo ponemos en una sola fila, o en varias. Y si la etiqueta de salto la repetimos varias veces, lograremos varios saltos :
Pepito Perez<BR><BR><BR>Director comercial<P><P><P>EmpresaBuena S.A

Pepito Perez


Director comercial

 

EmpresaBuena S.A.

El centrar el texto en la pantalla, es relativamente sencillo. Basta con colocar el texto que deseamos centrar entre dos etiquetas, una de apertura y otra de cierre (como casi siempre) que se diferencian sintacticamente en que una comienza con el caracter '/' (como siempre). Esta etiqueta es <center>. De tal manera que para conseguir lo anterior no hay más que hacer lo siguiente :

<center>
<H3>Pepito Perez</H3>
<H4>Director comercial</H4>
<H6>EmpresaBuena S.A.
</center>

Pepito Perez

Director comercial

EmpresaBuena S.A.

 

Por defecto todo texto está alineado a la izquierda, pero tambien se puede colocar a la derecha. NO hay una etiqueta <right> como pudieramos pensar, pero podemos definir como atributos de parrafo la alineación que deseamos. Por ejemplo en las etiquetas <P>
<P ALIGN='left'> Pepito Perez</P><P ALIGN='center'> Director Comercial</P><P ALIGN='right'>Empresabuena S.A.</P>

Hace aparecer en pantalla :

Pepito Perez

Director comercial

Empresabuena S.A.

Tambien se permite el atributo "ALIGN" en las etiquetas <Hx>. A partir de ahora llamaremos atributos a expresiones que van dentro de las etiquetas para modificar en algo la actuación de estas.

La etiqueta <BODY> tambien tiene atributos. hoy vamos a ver el atributo "bgcolor". Sirve para definir el color de fondo que tendrá la página web. Ese color se expresa en codigo RGB  (Red - Green - Blue) ( Rojo - Verde - Azul ). Hay que mezclar estos tres colores para obtener el color que queremos. Aquí os doy algunos colores con sus codigos, pero podeis obtener el codigo RGB del codigo que querais mezclando  valores del 0 a 255  para cada color y así obtener uno nuevo. Tambien podeis mirar el codigo RGB en algun programa de dibujo, en algun lugar del programa habrá algo que os indique el codigo RGB de el color que esteis usando, y si no.....Ser originales, extraer de la mezcla el color que os guste !!.

  000000   808000   FFFF00   C0C0C0
  FFFFFF   000080   00FF00   FF0000
  008000   800080   00FFFF   008080
  800000   808080   FF00FF   0000FF
  DE78E0   8AD088   9698FA   B60C69

Estareis pensando que no entendeis nada, que he dicho valores del 0 al 255 y ahi hay letras, etc,etc,etc. No os agovieis, estos valores se se ponen en Hexadecimal, y en exadecimal el rango 0-255 se expresa como 0-FF . Si no sabeis notación hexadecimal tampoco os preocupeis, basta con tener a mano una calculadora que haga conversiones decimal-hexadecimal (por ejemplo la que viene en windows).
Analicemos algunos colores. El primero de ellos, el negro su valor es 00 de rojo 00 de verde y 00 de azul, es decir 0 de todos los colores: ausencia de color: negro total. Por el contrario el blanco se obtiene a partir de poner el maximo valor a los tres colores primarios FF de rojo   (255 en decimal), FF de verde y FF de azul.
Fijaros tambien en los grises, todo color gris puro en cualquiera de sus tonalidades se obtiene mezclando la misma cantidad de los tres colores, en la tabla hay 2 grises uno es el 808080 y el otro el C0C0C0.

Ya podeis ir buscando hasta el proximo capitulo el color de fondo ideal de vuestra página, teneis  16.777.215 colores donde elegir. Lo unico que debeis de hacer es poner en la etiqueta <BODY> el atributo "bgcolor". Por ejemplo:
<BODY BGCOLOR='1A687C'>

Practique con todas estas etiquetas, y vuelva para el proximo capitulo que será publicado proximamente.

 

 

 

Capitulo anterior Curso Html Siguiente capitulo