jueves, 21 de agosto de 2008

Manejo de Etiquetas para Parrafos en HTML



Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.

Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes:

<p align="left"> Párrafo... </p> Alinea a la izquierda.

<p align="center"> Párrafo... </p> Realiza un centrado.

<p align="right"> Párrafo... </p> Alinea a la derecha.

Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>.

Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es <HR>


Etiquetas para darle formato al texto:

Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color

Formato:

<B> y </B> Sirve para colocar un texto en Negrita.

<U> y < /U> Sirve para subrayar un texto

<STRIKE> y </STRIKE> Sirve para tachar un texto.

<STRONG> y </STRONG> Cumple la misma función que <B>

<I> y <I> Para colocar un texto en cursiva.

<EM>texto con énfasis</EM>  texto con énfasis

<CITE>citación</CITE>  citación

<DFN>definición</DFN> definición

<KBD>teclado</KBD>  teclado

<SAMP>ejemplo</SAMP>  ejemplo

SIZE: Regula el tamaño de los caracteres.

Ejemplo:<FONT SIZE="3"> texto... </FONT>.

FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.

Ejemplo:

<FONT FACE=”ARIAL”> texto…</FACE>

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:

1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul)

2. Mediante la especificación del nombre del color en ingles

Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF
<FONT COLOR="BLACK">Negro</FONT> Negro #000000
<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000
<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00
<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF
<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00
<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF
<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web.

Si especificamos el nombre del color, podemos evitar la definición del color en forma hexadecimal que es un poco más difícil. Actualmente están estandarizados tan sólo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web.

Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras para la definición del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 últimas el valor azul.
Las cifras hexadecimales son:

0 (corresponde al decimal 0)
1 (corresponde al decimal 1)
2 (corresponde al decimal 2)
3 (corresponde al decimal 3)
4 (corresponde al decimal 4)
5 (corresponde al decimal 5)
6 (corresponde al decimal 6)
7 (corresponde al decimal 7)
8 (corresponde al decimal 8)
9 (corresponde al decimal 9)
A (corresponde al decimal 10)
B (corresponde al decimal 11)
C (corresponde al decimal 12)
D (corresponde al decimal 13)
E (corresponde al decimal 14)
F (corresponde al decimal 15)

Para ponerle color de fondo a la página escribir:

<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro.

Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo.

Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:


  • text="#número" Para el color del texto.

  • link="#número" Para el color de los enlaces.

  • vlink="#número" El color con que aparecerán los enlaces ya visitados.

  • alink="#número" Color del enlace cuando lo pulsamos.



Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:

background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>.

Ejemplo:

<body background="/documentos/html/gifs/dragonball.gif">

Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.

Etiquetas META

Son usadas para poner meta-información del documento. Esta “directiva” indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos.

Ejemplo:

<META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon">

Indica al visor el nombre de la página y sus contenidos principales.
<META NAME="Author" content="Pablo Ravioli">
Indica el nombre de la persona que elabora la pagina WEB
<META NAME = "keywords" content = "Información de Sailor Moon">

Indica al visor las palabras clave para los buscadores de Internet.

Para hacer listas:

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).

Las listas pueden ser: Lista desordenada, <UL> (Unordered List).

Lista ordenada, <OL> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con números romanos:

<ol>
<li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate
</ol>


  1. Manzana
  2. Zanahoria
  3. Lechuga
  4. Tomate


Lista numerada:
<ol>
<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate
</ol>


  1. Manzana
  2. Zanahoria
  3. Lechuga
  4. Tomate


Lista con puntos:
<ul>
<li> Manzana
<li> Zanahoria
<li> Lechuga
<li>Tomate
</ul>


  • Manzana
  • Zanahoria
  • Lechuga
  • Tomate



Lista con círculos:
<ul>
<li type=circle> Manzana
<li type=circle> Zanahoria
<li type=circle> Lechuga
<li type=circle> Tomate
</ul>


  • Manzana
  • Zanahoria
  • Lechuga
  • Tomate


Lista con cuadrados:
<ul>
<li type=square> Manzana
<li type=square> Zanahoria
<li type=square> Lechuga
<li type=square> Tomate
</ul>


  • Manzana
  • Zanahoria
  • Lechuga
  • Tomate