Módulo anterior Módulo siguiente
Indice general
 
Cabeza y cuerpo del archivo
Atributos en las etiquetas del cuerpo
Códigos de colores
Párrafos y saltos de línea
Tipografía
        Tamaños, Colores y Apariencias
Alineación
Listas
Líneas horizontales
Síntesis del módulo y términos usados


CABEZA Y CUERPO DEL ARCHIVO

En el primer módulo conociste que el archivo de hipertexto tiene dos partes principales: la cabeza, llamada HEAD y el CUERPO llamado BODY.

El documento completo se inicia y finaliza con las etiquetas HTML. La cabeza -HEAD-, se ubica inmediatamente después de la etiqueta de apertura de HTML. Ahí se ubican referencias del documento que no se visualizan en la pantalla del navegador y que veremos posteriormente.

Después de la etiqueta de cierre de HEAD se abrirá la etiqueta de BODY que incluirá todo lo que el navegador presentará en la pantalla. Se cierra al final del documento, antes de la etiqueta de cierre de HTML.

Repetimos esta muestra que vimos en el módulo 1 para dejar bien clara la estructura general del documento:
<HTML>
<HEAD>

</HEAD>

<BODY>
 
 
 
 
Contenido del documento
Contenido del documento
Contenido del documento
Contenido del documento
 
</BODY>
</HTML>
Etiqueta que indica que inica un documento HTML
Etiqueta que indica que inicia la cabeza del documento.
Ahí se ubicarán las referencias que veremos en módulos posteriores.
Etiqueta que indica que finaliza la cabeza del documento.

Etiqueta BODY indica que comienza el cuerpo del documento.
Dentro de la etiqueta se especifican los parámetros o atributos
que definirán las características generales del documento,
por ejemplo el color o la imagen del fondo,
los colores del texto y de las ligas, etc.

Después se coloca todo el contenido con sus etiquetas específicas.
 
 
Etiqueta que indica que termina el cuerpo del documento.
Etiqueta que indica que termina el documento HTML.

ATRIBUTOS EN LAS ETIQUETAS DEL CUERPO

Los atributos principales en BODY son referidos a los colores. Analicemos cada uno a partir de un ejemplo en el que se incluyen varios atributos:

<BODY  BGCOLOR="#000050"  BACKGROUND="noche.jpg"  TEXT="#FFFFFF"  LINK="#FFFF00"  VLINK="#FFFF99"  ALINK="#FF0000">

BGCOLOR="#000050"
Con BGCOLOR se indica el color que deberá tener el fondo de todo el documento. BG es abreviación de "background" (fondo). Después del indicativo BGCOLOR se pone el signo de igual y se indica entre comillas el código hexadecimal correspondiente al color deseado. Estos códigos se explican más abajo. En este caso se indica el color azul oscuro.
BACKGROUND="noche.jpg"
Aquí se indica utilizar una imagen de fondo llamada noche.jpg que, independientemente de su tamaño, cubrirá todo el fondo y tapará el azul oscuro que se indicó en el atributo anterior. En este ejemplo se utiliza una imagen de un kilobyte y mide 50 por 50 pixeles, que son los cuadritos en que se divide la pantalla.
Pensarás tal vez que si defines imagen de fondo (BACKGROUND), resulta inútil señalar el atributo de color de fondo (BGCOLOR) pues se ocultará. Sin embargo debes prevenir que alguien utilice un navegador con imágenes desactivadas y el el color de fondo deberá ser un sustituto de la imagen que estás utilizando, principalmente bajo el criterio que contraste con el color que tendrá el texto.
TEXT="#FFFFFF"
Este define el color para el texto común en el documento. Cuando no se indica este atributo el color por omisión será el negro. En este ejemplo se indica el color blanco para el texto a fin de contrastar sobre la imagen noche.jpg o sobre el azul oscuro del fondo.
Aunque se tenga definido un color para el texto común, se puede especificar texto de otro color en partes específicas dentro del documento. Eso lo veremos más adelante en este módulo al referirnos a la tipografía.
LINK="#FFFF00"
Los vínculos o ligas dentro del documento o que enlazarán con otros documentos también tendrán su color distintivo. Cuando no se define el atributo aparecen de color azul. En el ejemplo se indica que las ligas sean de color amarillo fuerte.
VLINK="#FFFF99"
Si una liga o vínculo es utilizado por quien visualiza la página, cambiará el color para diferenciar las ligas ya visitadas de las que no se han visto. La letra V antes de LINK significa "Liga ya vista". En el ejemplo cambiará a un amarillo pálido.
ALINK="#FF0000"
Por último tenemos la definición del color para la liga que en el momento se está utilizando o la última utilizada. La letra A antes de LINK significa "Liga activa" y en este ejemplo está solicitada con el color rojo.
Así se verá con imágen de fondo   Así se verá sin imágen de fondo
Usos y Costumbres

Así se verá el texto porque lo define el TEXT="#FFFFFF"
Esta sería una liga que aún no se ha visitado
Esta sería la liga "activa", o sea la última visitada
Esta sería una liga ya visitada.

 
Usos y Costumbres

Así se verá el texto porque lo define el TEXT="#FFFFFF"
Esta sería una liga que aún no se ha visitado
Esta sería la liga "activa", o sea la última visitada
Esta sería una liga ya visitada.

No siempre deben estar incluidos todos los atributos. Pueden ponerse sólamente los necesarios o ninguno. En tal caso, cuando sólo se pone la etiqueta <BODY> sin atributos, asumirá los colores que los navegadores toman por omisión. Generalmente son: fondo blanco o gris, letra negra, ligas azules y ligas visitadas en violeta.

También hay atributos de BODY que sólamente son interpretados por algunos navegadores. Es recomendable usarlos con moderación pues limitan el buen funcionamiento de la página en los navegadores que no los interpretan.

Por ejemplo el atributo BGPROPERTIES="fixed" sirve para que la imagen de fondo quede estática cuando el documento se desplaza, sin embargo ese efecto sólamente funciona en Internet Explorer 5 o posterior, aunque no afecta en otros navegadores, simplemente no asumen la orden. Observa el comportamiento del fondo en la página Indice.

Algunas recomendaciones prácticas para no frustrarte al tener tu página en Internet:

 

CÓDIGOS DE COLORES

Para indicar cada color se utilizan códigos de SEIS cifras en donde las dos primeras corresponden al ROJO , las dos de enmedio corresponden al VERDE y las dos en la derecha corresponden al AZUL . De modo que todos los colores se forman a partir de la "cantidad" que pongas a cada uno de ellos:

#RRVVAA

Para cada una de las cifras se pone una proporción con numeración hexadecimal. Un número hexadecimal es un número en base 16. La base normal utilizada es base 10 o decimal que va del 0 al 9. En este caso los número válidos serán del 0 al 9 añadiendo desde la A a la F. Por tanto el número F corresponde al 15 y E será el 14.

En la especificación de la proporción del color hay 256 posibilidades, que será un número del 00 al FF. El 00 indica nada de ese color y FF la mayor proporción del color.

En la siguiente tabla se muestra la proporción de cada color en forma salteada. Entre cada una corresponden 15 pasos intermedios verticales (01, 02, ... 36, 37, etc.) que darán las 256 tonalidades en cada uno.

Cada tonalidad de un color se puede combinar horizontalmente con cada una de las 256 tonalidades de los otros colores de modo que tendremos 16 millones 777 mil 216 colores entre el negro y el blanco.

#000000 #000000 #000000
#100000 #001000 #000010
#200000 #002000 #000020
#300000 #003000 #000030
#400000 #004000 #000040
#500000 #005000 #000050
#600000 #006000 #000060
#700000 #007000 #000070
#800000 #008000 #000080
#900000 #009000 #000090
#A00000 #00A000 #0000A0
#B00000 #00B000 #0000B0
#C00000 #00C000 #0000C0
#D00000 #00D000 #0000D0
#E00000 #00E000 #0000E0
#F00000 #00F000 #0000F0
#FF0000 #00FF00 #0000FF

Los colores más comunes pueden indicarse con texto poniendo su nombre en inglés pero no todos los navegadores logran "traducirlo", así que por ello es mejor utilizar el código correspondiente al color deseado.

Aquí tienes disponibles varios "muestrarios" de colores para que los consultes como mejor te parezca.

En programas para gráficos y edición de color como GIMP (GNU Image Manipulation Program) y Photo Shop de Adobe®, encontrarás también los millones de colores y sus códigos hexadecimales correspondientes.

A la hora de definir colores recuerda que las tonalidades complejas no son interpretadas exactamente iguales por los distintos navegadores y las tarjetas de video de las computadoras. Verás diferencias notorias de colores entre equipos tipo Macintosh y los tipo PC. Entonces es recomendable utilizar colores "sencillos".


 

Ya es tiempo de que retomes el ejercicio que iniciaste en el Módulo 01.

Arranca el TextPad o el Bloc de notas y abre el archivo prueba1.htm


Debes tener en pantalla lo siguiente:

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#996600" TEXT="#FFFFFF">
<P ALIGN="CENTER">
<FONT SIZE="7">
Usos y Costumbres
</FONT>
</P>
</BODY>
</HTML>

Cuando guardas para actualizar en TextPad
el botón de "Guardar" se inhabilita. Después oprimes el mundito para arrancar el archivo en el Navegador de Web. 		Con lo que has visto hasta ahora podrás jugar con el cambio de colores.

Fijate en los atributos de BODY: tiene definidos el color del fondo y el color del texto.

Haz pruebas de cambio de color en fondo y en texto, probando como contrastan unos con otros, hasta que encuentres una combinación que te guste.

Recuerda que los cambios lo haces en el procesador de textos y guardas para actualizar. Te pasas al navegador y visualizas tus cambios al oprimir el botón de "Actualizar" en los botones del navegador o F5 en Internet Explorer. Si usas Netscape o Mozilla actualiza con CTRL+R o Reload.


 

PÁRRAFOS Y SALTOS DE LÍNEA

Sigamos revisando el ejercicio: Al iniciar el contenido después de BODY, se presenta la etiqueta:
<P ALIGN="CENTER">

La etiqueta <P> se utiliza para indicar el inicio de un párrafo. Equivale a dejar una línea en blanco trabajando en procesador de textos.

Puede ir así sola o puede llevar atributos. Cuando se escribe sin atributos asume un nuevo párrafo alineado a la izquierda. En este caso NO es necesario hacer el cierre con </P>. Al abrir un nuevo párrafo asume que el anterior termina.

En el caso del ejemplo el párrafo contiene el atributo de "centrado" que se indica ALIGN="CENTER" y por eso el título que estamos trabajando se presenta en el centro de la pantalla.

Los atributos de uso común para la etiqueta <P> son:

¿QUE HACE? ¿QUE SE ESCRIBE? ¿COMO SE VERA?
Párrafo centrado <P align="CENTER"> Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
<BR>
No son una mercancía que se compra o se vende. </P>

Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
No son una mercancía que se compra o se vende.

Párrafo a la derecha <P align="RIGHT"> Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
<BR>
No son una mercancía que se compra o se vende. </P>

Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
No son una mercancía que se compra o se vende.

Párrafo justificado

Alinea en los dos lados. No es adecuado en culumnas estrechas porque separará mucho las palabras para que queden alineadas.

<P align="JUSTIFY"> Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
<BR>
No son una mercancía que se compra o se vende. </P>

Para nosotros, pueblos indios, pueblos verdaderos, nuestra madre tierra es sagrada, así como son sagrados todos los seres que habitan en ella: los animales, las plantas, los ríos, los montes, las cuevas, los valles, los recursos biológicos y el conocimiento que nuestros pueblos tienen sobre ellos.
No son una mercancía que se compra o se vende.

Cuando haces un párrafo que deberá ir alineado a la izquierda, como los que estamos utilizando en estos módulos, no es necesario detallar atributo pues lo asume por defecto si se escribe solamente <P> y en tal caso no es necesario poner la etiqueta de cierre.

Ahora observa que antes de la última oración se encuentra la etiqueta <BR> que es la abreviación del término BREAK, que se utiliza para un corte de línea. Es la etiqueta para iniciar una nueva línea sencilla. No hace doble línea como la etiqueta para párrafo.

La etiqueta <BR> normalmente se utiliza sin atributos y no necesita etiqueta de cierre. Simplemente indica "romper la línea". Cuando se utiliza con imágenes podrá contener atributos que veremos en el módulo donde se explican las imágenes.

Cuando necesitas bajar líneas más allá de lo que te ofrece <P>, puedes combinar con ciertas limitaciones: puedes poner juntas <P> y <BR> o a la inversa, pero cuando repites varias veces <P> o <BR> sólamente reconoce una, así que para abrir más líneas deberás intercalar entre ellas el código que se utiliza para el espacio en blanco: &nbsp;.

Entonces para abrir espacio de doble párrafo debes poner: <P>&nbsp;<P>, que corresponde a una separación como la que estás viendo entre este párrafo y el título de Tipografía. Si necesitas abrir mucho más espacio puedes manejar la etiqueta <PRE>, abrir con la tecla de "Enter" las líneas que necesites y cerrar con </PRE>. Esta etiqueta es para integrar texto preformateado.

 

TIPOGRAFÍA

Para los tipos de letras podríamos considerar tres características: tamaños, colores y apariencias.

En los tres casos puede utilizarse la etiqueta FONT, que siempre deberá llevar atributos. Además hay algunas otras etiquetas para cada característica. Veamos primero las relacionadas con el tamaño.

T A M A Ñ O S

SIZE en inglés significa tamaño y así se define el atributo. Entonces se escribe <FONT SIZE="n"> en donde "n" será un número del 1 al 7 como tamaños absolutos. La etiqueta se cierra con </FONT>

Cuando escribimos una página sin especificar tamaño, aparecerá el tamaño intermedio que equivale a SIZE="3", de modo que los tamaños 2 y 1 son menores, mientras 4, 5, 6 y 7 son más grandes.

<FONT SIZE="1">            Contenido
<FONT SIZE="2">            Contenido
<FONT SIZE="3">             Contenido    <- es igual a no definir tamaño
<FONT SIZE="4">             Contenido
<FONT SIZE="5">             Contenido
<FONT SIZE="6">             Contenido
<FONT SIZE="7">             Contenido

Cada una de las etiquetas debe cerrarse con </FONT>

Otra forma de indicar el tamaño es en forma relativa utilizando los signos de más y menos para que presente la letra aumentada o disminuida a partir del tamaño que estemos utilizando. Por ejemplo:

Dentro de este escrito habrá una parte resaltada definida con aumento y una parte disminuida con el signo menos.

Sus etiquetas están indicadas así:

Dentro de este escrito habrá una <FONT SIZE="+2"> parte resaltada</FONT> definida con aumento y una <FONT SIZE="-1"> parte disminuida</FONT> con el signo menos.

De menor uso pero que también funcionan son las etiquetas <BIG> </BIG> para indicar grande y <SMALL> </SMALL> para indicar pequeña. La visualización será similar a los aumentos o disminuciones relativas que se explicaron arriba.

Así se ve con BIG         Así se ve con SMALL

COLORES

Los colores para las letras se establecen de acuerdo a los códigos que se detallaron más arriba con el atributo COLOR= en la etiqueta de FONT, de modo que quedará así:
<FONT COLOR="#RRVVAA>contenido</FONT>
donde RRVVAA será el código correspondiente al color deseado.

Así, si deseas que el texto se vea CAFE CLARO escribes:
        <FONT COLOR="#CC6600">contenido</FONT>
        y se verá así: contenido

Como estás utilizando la etiqueta <FONT> puedes combinar los dos atributos que acabas de ver: SIZE y COLOR, cuando deseas que tenga un determinado color y un determinado tamaño. Por ejemplo:
La palabra "participación" en color púrpura con tamaño seis.

Escribes: <FONT COLOR="#800080"  SIZE="6">participación</FONT>
 
Apertura de etiqueta FONT
y atributo de color
Atributo
de tamaño
y cierre
de etiqueta
Texto que
asumirá
la orden
Etiqueta de cierre
Se verá así: participación
El orden de los atributos no importa, puede ir SIZE primero y luego COLOR.

APARIENCIA

Además de tamaños y colores, también puedes cambiar la apariencia o aspecto que tendrán las letras y números en tus páginas.

Una apariencia es el tipo de letra o FUENTE. Esta se define como un atributo en la etiqueta FONT y se indica:

FACE="nombre de la fuente"

Puede ir como atributo único o agregado con los dos atributos que viste anteriormente (SIZE y COLOR), sin importar el orden.

El uso de FACE debe ser muy cuidadoso ya que la fuente que indiques deberá existir en la computadora de quien vea tu página. Ese es el gran riesgo en el uso de fuentes, particularmente si usas letras poco comunes.

En estos módulos casi todo está con la fuente llamada "Comic Sans MS" que se visualiza en la mayoría de computadoras pero siempre está el riesgo de que alguien utilice un navegador o una computadora que no logre identificarlo y entonces presentará el tipo de letra que se usa por defecto que es Times New Roman.

Hay nueve tipos de fuentes que se leen en la mayoría de las computadoras. A continuación la forma de definirlas y como aparecerán. Si alguna de ellas la vez igual que Times New Roman significa que tu computadora no lee ese tipo de fuente.

<FONT FACE="Arial">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Arial Black">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Comic Sans MS">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Courier New">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Impact">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Lucida Console">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Tahoma">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Times New Roman">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche
<FONT FACE="Verdana">Los murciélagos salen de noche</FONT>Los murciélagos salen de noche

Ante el riesgo de que la fuente que quieres utilizar no se vea, puedes poner dentro de las comillas y separadas por comas, dos o tres fuentes alternativas si no deseas que se vea en Times New Roman. Por ejemplo: quiero utilizar la fuente , pero es poco común, entonces si no está instalada, la opción sería y si no la tiene tampoco entonces .

La etiqueta se escribe así:
<FONT FACE="Disney Print, Comic Sans MS, Arial">Los murciélagos salen de noche</FONT>

Dependiendo de las fuentes que tengas instaladas en tu máquina verás la primera, la segunda o la tercera opción:

Los murciélagos salen de noche

Otras etiquetas de uso común que cambian el aspecto son las siguientes:

Negritas<B>Los murciélagos salen de noche</B>Los murciélagos salen de noche
Cursivas<I>Los murciélagos salen de noche</I>Los murciélagos salen de noche
Subrayadas<U>Los murciélagos salen de noche</U>Los murciélagos salen de noche
Máquina de escribir<TT>Los murciélagos salen de noche</TT>Los murciélagos salen de noche
Subíndice:
Media línea abajo		Los murciélagos<SUB> salen de noche</SUB>Los murciélagos salen de noche
Supraíndice:
Media línea arriba		Los murciélagos <SUP>salen de noche</SUP>Los murciélagos salen de noche

Por último en relación a los aspectos existen las etiquetas para encabezados. Se escribe una H por "Head" que significa "cabeza" y un número del 1 al 6. donde el uno es el mayor y seis es el menor.

Se escriben: <H1> </H1>, <H2> </H2>, <H3> </H3>, <H4> </H4>, <H5> </H5>, <H6> </H6>.

Su utilidad es que en una sola etiqueta se integran tres órdenes: tamaño, negrita y cambio de párrafo antes y después del encabezado.

Aquí el muestrario con las seis opciones:

Título con H1

                equivale a FONT 6 con negritas y cambio de párrafo

Título con H2

                equivale a FONT 5 con negritas y cambio de párrafo

Título con H3

                equivale a FONT 4 con negritas y cambio de párrafo

Título con H4

                equivale a FONT 3 con negritas y cambio de párrafo
Título con H5
                equivale a FONT 2 con negritas y cambio de párrafo
Título con H6
                equivale a FONT 1 con negritas y cambio de párrafo


  ALINEACIÓN


Cuando leíste más arriba sobre los párrafos se mencionó una de las formas de alineación más usuales: <P align="RIGHT"> </P>, <P align="CENTER"> </P>, <P align="JUSTIFY"> </P> y <P> sencilla que asume por defecto la alineación izquierda.

Otra forma de alineación es con la etiqueta <DIV> utilizando los atributos ="CENTER", ="RIGHT" y ="JUSTIFY" similar al párrafo. La opción izquierda (LEFT) puede usarse también cuando lo que se esta alineando es una imagen, pues en texto no es necesaria.

Alineación derecha: Comienza con <DIV ALIGN="right"> y cierra con </DIV>:

Nuestros más antiguos nos enseñaron
que la verdad suele buscar su nido
pegado al suelo,
y que la mentira busca las alturas
para así saberse impune y poderosa.

Alineación centrada: Comienza con <DIV ALIGN="center"> y cierra con </DIV>:

Nos escondimos la cara
para que nos vean.
Y así nos escucharon
y nos vieron.

Alineación justificada: Comienza con <DIV ALIGN="justify"> y cierra con </DIV>:

Y nosotros, nosotros aquí estamos. La historia tiene un lugar para cada uno. Cada uno lo toma o lo deja. En la suma y en la resta no sólo suman los "sí" y los "no". También suman los silencios. El silencio que somos quienes del color de la tierra somos fue roto. Sobre sus pedazos nos levantamos. No está en juego la posibilidad de volver a ser lo que éramos y no somos. Tampoco el que en otros nos convirtamos. Lo que está en juego es si se reconoce o no el lugar que ya tenemos y en el que somos. Es la posibilidad de ser con todos y no bajo los otros. No importa el pequeño nosotros que del gran nosotros somos. Importan todos: los que hacen las leyes y los que las legitiman. Quienes hacen la historia y quienes la escriben.

Otras formas de alineación son el "sangrado" completo de párrafos con la etiqueta <DIR> </DIR>. No hay etiqueta para sangrar sólo la primera línea de un párrafo. Eso se puede hacer definiendo "estilos" que veremos en otro módulo.

Cuando se requiere empujar un texto hacia la derecha de la página pero conservando su alineación izquierda, puedes abrir varios <DIR> y luego cerrarlos. Por ejemplo abriendo cuatro <DIR>:

Aquí estamos para vernos y mostrarnos, para que tú nos mires, para que tú te mires, para que el otro se mire en la mirada de nosotros, aquí estamos y un espejo somos.
No la realidad, sino apenas su reflejo. No la luz sino apenas un destello. No el camino sino apenas unos pasos. No la guía, sino apenas uno de tantos rumbos que al mañana conducen.

Si lo que requieres es que se haga sangria de la izquierda y también de la derecha, se utiliza la etiqueta <BLOCKQUOTE> </BLOCKQUOTE> como podrás verla aplicada en el siguiente ejemplo en donde se insertan tres BLOCKQUOTE, y se aplica DIV con alineación justificada para que el margen derecho sea parejo también:

Para ellos, nuestra historia son mitos, nuestras doctrinas son leyendas, nuestra ciencia es magia, nuestras creencias son supersticiones, nuestro arte es artesanía, nuestros juegos, danzas y vestidos son folklore, nuestro gobierno es anarquía, nuestra lengua es dialecto, nuestro amor es pecado y bajeza, nuestro andar es arrastrarse, nuestro tamaño es pequeño, nuestro físico es feo, nuestro modo es incomprensible.

  LISTAS

De mucha utilidad cuando se requiere ordenar la información de manera presentable y que sea clara la separación de cada punto. Las LISTAS pueden ser numeradas, con símbolos o simplemente con sangrías tipo índices y subíndices.

Lista numerada se inicia con <OL>, abreviación de Order List (lista ordenada)
y se cierra con </OL>
Lista punteada se inicia con <UL>, abreviación de Unorder List (lista no ordenada)
y se cierra con </UL>

Entre apertura y cierre de ambas se incluye la etiqueta para indicar cada punto que es <LI>

Así se verán una lista ordenada y una lista de puntos:

ESCRITURA RESULTADO ESCRITURA RESULTADO
<OL>
<LI>Primer punto
<LI>Segundo punto
<LI>Tercer punto
<LI>Cuarto punto
<LI>Quinto punto
</OL>
  1. Primer punto
  2. Segundo punto
  3. Tercer punto
  4. Cuarto punto
  5. Quinto punto
<UL>
<LI>Primer punto
<LI>Segundo punto
<LI>Tercer punto
<LI>Cuarto punto
<LI>Quinto punto
</UL>
  • Primer punto
  • Segundo punto
  • Tercer punto
  • Cuarto punto
  • Quinto punto

En las listas ordenadas puedes incluir dos tipos de atributos:
type=
para indicar el tipo de numeración a utilizar:
        a         para numeración alfabética minúscula: a, b, c, etc.
        A         para numeración alfabética con mayúsculas: A, B, C, etc.
        i         para numeración romana en minúsculas: i, ii, iii, etc.
        I         para numeración romana en mayúsculas: I, II, III, etc.
Cuando no se usa el parámetro asume 1, 2, 3, etc.

El otro parámetro es start=
para indicar cuál será el primer número de la lista. Si no se especifica nada asume que comienza en el 1. Si estás usando los dos atributos el start siempre se indica con número, por ejemplo para lista de letras que comience en la f debes poner:

<OL type=a start=6>
<LI>este será el punto f
<LI>este será el punto g
</OL>

En las listas sin ordenar, que utilizan símbolos, se puede especificar el atributo TYPE=, indicando disk, circle o square (disco, círculo o cuadrado).

Repetimos el ejemplo, usando atributos:

ESCRITURA RESULTADO ESCRITURA RESULTADO
<OL type="a" start="5">
<LI>Primer punto
<LI>Segundo punto
<LI>Tercer punto
<LI>Cuarto punto
<LI>Quinto punto
</OL>
  1. Primer punto
  2. Segundo punto
  3. Tercer punto
  4. Cuarto punto
  5. Quinto punto
<UL type="square">
<LI>Primer punto
<LI>Segundo punto
<LI>Tercer punto
<LI>Cuarto punto
<LI>Quinto punto
</UL>
  • Primer punto
  • Segundo punto
  • Tercer punto
  • Cuarto punto
  • Quinto punto

Dentro de cualquier lista abierta pueden anidarse otras lista que quedarán como sublistas de la que ya está abierta. Veamos un ejemplo combinando ordenadas y con símbolos:

ESCRITURA RESULTADO 
<OL type="I">
<LI>Primer punto
<LI>Segundo punto
      <OL type="a"><LI>Subpunto 1 del punto 2
                   <LI>Subpunto 2 del punto 2
                   <LI>Subpunto 3 del punto 2
                         <UL type="disk">
                         <LI>item 1 del subpunto 3
                         <LI>item 2 del subpunto 3
                         <LI>item 3 del subpunto 3
                         </UL>
                   <LI>Subpunto 4 del punto 2
      </OL>
<LI>Tercer punto
<LI>Cuarto punto
<LI>Quinto punto
</OL>

  1. Primer punto
  2. Segundo punto
    1. Subpunto 1 del punto 2
    2. Subpunto 2 del punto 2
    3. Subpunto 3 del punto 2
      • item 1 del subpunto 3
      • item 2 del subpunto 3
      • item 3 del subpunto 3
    4. Subpunto 4 del punto 2
  3. Tercer punto
  4. Cuarto punto
  5. Quinto punto

Si lo que deseas es crear una lista con índices y subíndices que no tengan numeración ni símbolos, se utiliza la etiqueta <DL> </DL> para apertura y cierre, indicando con <DD> cada uno de los puntos. También se pueden hacer anidamientos internos.

ESCRITURA RESULTADO 
<DL>
<DD>Primer punto
<DD>Segundo punto
      <DL><DD>Subpunto 1 del punto 2
          <DD>Subpunto 2 del punto 2
          <DD>Subpunto 3 del punto 2
                   <DL>
                   <DD>item 1 del subpunto 3
                   <DD>item 2 del subpunto 3
                   <DD>item 3 del subpunto 3
                   </DL>
          <DD>Subpunto 4 del punto 2
      </DL>
<DD>Tercer punto
<DD>Cuarto punto
<DD>Quinto punto
</DL>

Primer punto
Segundo punto
Subpunto 1 del punto 2
Subpunto 2 del punto 2
Subpunto 3 del punto 2
item 1 del subpunto 3
item 2 del subpunto 3
item 3 del subpunto 3
Subpunto 4 del punto 2
Tercer punto
Cuarto punto
Quinto punto


LÍNEAS HORIZONTALES

Cuando necesitas hacer una separación visual muy clara entre una cosa y otra, trazas una línea que indique a quien lee tu página: aquí termina una cosa y comienza otra.

Para eso se utiliza la etiqueta <HR> que indica línea horizontal.

Puedes ponerla así solita y asumirá una línea fina de extremo a extremo como aparece en el subtítulo de esta parte. No utiliza etiqueta de cierre.

También puedes especificarle atributos para indicarle

Puede llevar uno o varios atributos. Si no hay atributos asume longitud al 100%, alineada al centro, grosor fino, con relleno y en color transparente.

Definimos una línea que tendrá 300 pixeles de largo: <HR WIDTH="300">
Se alinea al centro porque sólo cambiamos su longitud.

Definirla en número absoluto le indica pixeles, pero en cada pantalla se verá más grande o más pequeña dependiendo la resolución que se utilice. Para un monitor VGA de 640 de ancho ocupará más de la mitad. Para un SVGA de 800 de ancho ocupará la mitad, pero ahora los monitores modernos utilizan 1024 pixeles de ancho. Nuestra línea ocupará sólo una tercera parte. Si deseamos que ocupe la mitad de cualquier resolución anotaremos la longitud en porcentaje: <HR WIDTH="50%">

Ahora queremos alinearla al costado izquierdo de la pantalla:
<HR WIDTH="50%" ALIGN="LEFT">

Agregamos la orden para que sea un poco más gruesa (se define en pixeles):
<HR WIDTH="50%" ALIGN="LEFT" SIZE="15">

El efecto de sombreado desaparece con NOSHADE (sin sombra):
<HR WIDTH="50%" ALIGN="LEFT" SIZE="15" NOSHADE>
Algunos navegadores hacen redondos los extremos.

El color estandar es gris oscuro o un oscurecimiento del color del fondo.
Podemos cambiarlo, así que si queremos azul ("#0000FF"):
<HR WIDTH="50%" ALIGN="LEFT" SIZE="15" NOSHADE COLOR="#0000FF">

Si estás usando un navegador antiguo no verás ningún cambio.


TERMINOS DEL INGLES usados en este módulo:

Término
utilizado 		Significado   Término
utilizado 		Significado
LINK Vínculo, liga, enlace   BACKGROUND Fondo
PROPERTIES Propiedades. Se usa para indicar las características.   FIXED Fijo
YELLOW Amarillo   BLUE Azul
WHITE Blanco   BLACK Negro
RED Rojo   GREEN Verde
ALIGN Alineación   CENTER Centrado
JUSTIFY Justificado   BREAK Corte. Se usa para indicar un corte de línea sencillo.
BIG Grande. Se aplica para que la letra sea mayor.   SMALL Pequeña. Se aplica para que la letra sea menor.
FACE Cara o rostro. Indica el tipo de letra o fuente a utilizar.   LIST Lista
ORDER Orden   UNORDER Sin orden
DISK Disco   CIRCLE Círculo
SQUARE Cuadrado   SHADE Sombreado, matiz. Se aplica en sentido negativo para quitar sombra a las líneas: NOSHADE
 

Ha sido bastante largo este módulo pero al concluirlo ya estás manejando casi todo lo básico del diseño gráfico de las páginas: letras de distintos tipos y tamaños, diversidad de colores, etc., pero hay algunas cosas que mencionamos en la introducción que aún no hemos visto. Una de ellas, tal vez la principal característica de las páginas web, son los brincos de un sitio a otro que se les llama hiperenlaces o hipervínculos, más conocidos popularmente como "las ligas".
También mencionamos la colocación de imágenes que dan una mejor presentación a la página y a veces son más claras que muchas palabras.
Esas dos características y otras menores serán los contenidos que estudiaremos en el módulo 03.

Recuerda que cualquier duda, comentario, crítica o sugerencia serán bienvenidas. Escribe a sidca@laneta.apc.org indicando a qué módulo se refieren tus comentarios.



Módulo anterior Indice general Módulo siguiente

©Programa LaNeta, Carlos Eugenio; marzo 2007