Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

18. Retocando el Texto

°Pero ESPERE! Ahora puede usar superÌndices y subÌndices para escribir cosas como fÛrmulas quÌmicas o matem·ticas:

CO₂ + SO₄^-2
3x² - 2y^-1/2 = 4z

Objetivos

• Cambiar el tamaÒo de partes concretas del texto
• Cambiar el color de partes concretas del texto
• Crear superÌndices y subÌndices en el texto
• EspecÌficar la fuente o tipo de letra de partes del texto

LecciÛn

Con el HTML que presentÛ NetScape y el HTML 3.0 dispone de algunas opciones m·s para dar forma al texto. EspecÌficamente puede tener texto de distinto tamaÒo tanto como coloreado. Si lo usa juiciosamente el formateo del texto puede mejorar el aspecto de una p·gina web. Si lo usa arbitrariamente puede que reslten p·ginas no tan bonitas.

TambiÈn puede crear superÌndices y subÌndices en expresiones matem·ticas, fÛrmulas quÌmicas o marcas de pie de p·gina.

En esta lecciÛn le enseÒaremos estas caracterÌsticas con algunos ejemplos que usar· para modificar sus p·ginas de la Web de Volcanes. Quiz·s deba ver primero la p·gina de prueba de fuentes para determinar si su Browser soporta las etiquetas usadas en esta lecciÛn.

TamaÒo de Letra

TamaÒo de Letra= 1
TamaÒo de Letra= 2
TamaÒo de Letra= 3 -- tamaÒo normal del texto
TamaÒo de Letra= 4
TamaÒo de Letra= 5
TamaÒo de Letra= 6
TamaÒo de Letra= 7
Recuerde que el tamaÒo normal depender· de la fuente que el usuario haya elegido para su Browser; usted est· ajustando el tamaÒo en relaciÛn con dicha fuente.

NOTA: Si un Browser no soporta las etiquetas <font> quiz·s puede utilizar las etiquetas del HTML 3.0:

  <BIG>...</BIG>
  <SMALL>...</SMALL>

que le dan menos juego pero que pueden ser ™tiles en algunos Browsers.

El formato de la etiqueta de tamaÒo de letra es:

    <font size=N>bla bla bla</font>

donde N=1 to 7. La etiqueta font puede ser usada en combinaciÛn con otras etiquetas de estilo (lecciÛn 5) o dentro de etiquetas de encabezados (lecciÛn 3).

TambiÈn se puede usar la etiqueta font para efectuar un cambio relativo de tamaÒo de letra:

    <font size=+1>bla bla bla</font>
    <font size=-2>bla bla bla</font>

p.ej. donde el valor +N o -N provee el desplazamiento con respecto al tamaÒo de letra actual. Esto se usa con otra etiqueta:

    <basefont size=5>

que cambia el tipo de letra base desde su valor por defecto de 3 a otro distinto. PodrÌa utilizarlo en una p·gina web que tenga texto m·s pequeÒo o m·s grando de lo habitual. De este modo, si necesita cambiar el tamaÒo del texto de algunas partes del documento puede usar etiquetas "font size" como se comentÛ anteriormente.

El poder de usar etiquetas de tamaÒo de letra relativas (p.ej. size=+2) en vez de absolutas (p.ej. size=5) es que podemos f·cilmente cambiar el tamaÒo de TODO el texto en una p·gina sin m·s que cambiar el valor de la etiqueta <basefont>.

NOTA: La etiqueta <basefont> carece de etiqueta de cierre; a partir de ella, el tamaÒo base seguir· hasta que haya otra etiqueta <basefont>.

Primero, aÒadiremos una etiqueta "font size" para modificar el tÌtulo de nuestra p·gina inicial:
1. Abra el archivo index.htm en su editor de textos.
2. Antes habÌamos usado una etiqueta <h1>..</h1> para dar forma al tÌtulo de nuestra p·gina. Ahora usaremos etiquetas de tamaÒo para crear un tÌtulo de estilo mezcla.

   Cambie la lÌnea que dice:

     <h1>Web de Volcanes</h1>

   por:

     <p>
     <B><font size=+4>W</font><font size=+3>EB DE VOLCANES
     </font></B>

   Mire cuidadosamente lo que hemos hecho. La primera W ahora est· aumentada en tamaÒo por 4 unidades el tamaÒo base, y el resto, ahora en may™sculas, est· aumentado en 3 unidades. Esto le da un aspecto de PEQUE‹AS MAYŽSCULAS. Note tambiÈn que hemos aÒadido una etiqueta <b>...</b> para dar m·s Ènfasis. Y, finalmente, ya que no usamos una etiqueta de encabezado que incluya un retorno de lÌnea por defecto hemos tenido que aÒadir una etiqueta <p> antes del tÌtulo para forzarle a aparecer en una nueva lÌnea (no se necesita otra a continuaciÛn porque el siguiente HTML es un <BLOCKQUOTE> que incorpora su propio retorno de lÌnea (vea la lecciÛn 13).
3. DespuÈs nos gustarÌa hacer que la cita de Plinio estuviese un poco m·s resaltada, asÌ que la aumentaremos un poco:

     <B><I><font size=+1>"La Naturaleza se enfurece salvajemente,
      amenazando las tierras"</font></I></B><br>

4. Salve y Abra el fichero en su Browser.
Antes de continuar usaremos etiquetas de tamaÒo para modificar otras dos p·ginas de nuestro ·rea de trabajo; las p·ginas de Lugares Volc·nicos en USA (archivousa.htm) y Proyectos de InvestigaciÛn (archivo proj.htm). Ambos usan etiquetas <h2>...</h2> en el tÌtulo principal y <h3>...</h3> para los encabezados de las subsecciones. Vaya al editor y cambie todas las:

  <h3>bla bla bla</h3>

por:

  <p>
  <font size=+1><B>bla bla bla</B></font><br>

Note que la etiqueta <p> fuerza un retorno de lÌnea con respecto al texto precedente y la etiqueta <br> fuerza un retorno de lÌnea (sin espacio en blanco) con el texto posterior.

øPuede ver la diferencia entre usar las etiquetas <font> y las <hN> en los tÌtulos de secciÛn? Las diferencias de forma pueden ser mÌnimas pero le ofrecen, como autor de HTML, alternativas para el seÒo de sus p·ginas. Recuerde que si el Browser del usuario no soporta etiquetas de tamaÒo ver· todo el texto con el tamaÒo est·ndar.

Dos MÈtodos para Crear Encabezados
<h3>...</h3>	<p><b><font size=+1> ...</font></b><br>
...antes de la siguiente gran innovaciÛn que impulsÛ el mundo de la leche fermentada. Historia del Queso Longhorn El queso Longhorn fue descubierto por primera vez por Alister Longhorn en 1754 cuando...	...antes de la siguiente gran innovaciÛn que impulsÛ el mundo de la leche fermentada. Historia del Queso Longhorn El queso Longhorn fue descubierto por primera vez por Alister Longhorn en 1754 cuando...

Color de Letra

En la lecciÛn 16 introdujimos las etiquetas ara dar color al texto para toda la p·gina y el formato correcto para representar valores de color en HTML. TambiÈn puede aÒadir un atributo a la etiqueta <font> para dar color a una parte del texto usando cÛdigos hexadecimales o los 16 reconocidos por sus nombres:
<font color=red>...</font>
<font color=#993459>...</font>
<font color=lime>...</font>
<font color=#002200>...</font>
<font color=navy>...</font>
<font color=#193467>...</font>

No vamos a dar mucho la lata con las etiquetas de color pero, como ejemplo, cambiaremos el color del texto WEB DE VOLCANES con el que trabajamos en la p·gina inicial. Si recuerda pusimos como color del texto de la p·gina el amarillo y queremos dar otro color sÛlo a este texto del tÌtulo:

1. Abra el archivo index.htm en su editor de textos.
2. Edite la lÌnea que contiene el texto WEB DE VOLCANES para que sea:

     <B><font size=+4 color=#FF66FF>W</font>
     <font size=+3 color=#DD0055>EB DE VOLCANES</font></B>

3. Salve y Actualice el fichero en su Browser.

NOTA: Puede situar los atributos de size y color juntos en una etiqueta <font>. El efecto es hacer que la "W" tenga un color violeta brillante y un punto mayor que el resto de las dem·s letras.

SuperÌndices y SubÌndices

Hasta la llegada del HTML 3.0 no habÌa forma de escribir expresiones matem·ticas, fÛrmulas quÌmicas u otras expresiones con sub o superÌndices. Estas nuevas etiquetas suben/bajan el texto deseado media lÌnea y le dan un tamaÛ un punto menor.

El formato HTML de estas etiquetas es:

SuperÌndices / SubÌndices
HTML	Resultado
<sup>...</sup>	superÌndice
<sub>...</sub>	subÌndice

Ahora utilizaremos estas etiquetas en nuestra p·gina de IntroducciÛn:

1. Abra el archivo intro.htm en su editor de textos.
2. Primero utilizaremos subÌndices para escribir fÛrmulas quÌmicas. DespuÈs de la ™ltima frase en el segundo p·rrafo ("Compare la historia de los seres humanos...") aÒada lo siguiente, que usa subÌndices:

     Los volcanes fueron unos grandes contribuyentes 
     a la atmÛsfera primaria de la Tierra al desprender
     gases tales como el nitrÛgeno (N<sub>2</sub>), 
     diÛxido de carbono (CO<sub>2</sub>) y
     amoniaco (NH<sub>4</sub>).

3. Ahora usaremos superÌndices para denotar un volumen c™bico. DespuÈs de la tabla que tenÌamos creada con las etiquetas <pre>...</pre> aÒada esta frase:

     Note que las erupciones volc·nicas ocurridas
     en la prehistoria fueron varios Ûrdenes
     de magnitud mayores (m·s de 1000 Km<sup>3</sup>
     en volumen desalojado) que las observadas
     por los hombres.

4. Si se fija en la tercera columna de la tabla cuando la escribimos tuvimos que usar "km^3" para indicar "km³". Aunque este texto estÈ dentro de una etiqueta de preformato podemos utilizar la etiqueta de superÌndice. Efect™e el cambio:

     Volumen en km^3

   a:

     Volumen en km<sup>3</sup>

Tipo de Letra Base

Los est·ndares HTML 3.2 incluyen ahora una opciÛn para la etiqueta <font> que permite especificar una fuente de letra particular en pantalla. Esto puede no funcionar en todos los Browsers asÌ que primeto eche un vistazo a la p·gina de pruebas de fuentes.

El HTML para especÌficar un tipo de letra concreto es:

   <font FACE="font1,font2">alg™n texto

Si el Browser del usuario soporta el atributo font FACE y dispone de una de las fuentes listadas en su ordenador entonces se mostrar· el texto con la fuente escogida. De otro modo se usar· la misma fuente que para el resto de la p·gina.

Si elije trabajar con un tipo de letra deberÌa escoger una de las est·ndares o asegurarse de que los ordenadores que puedan ver sus p·ginas disponen de cualquier fuente "exÛtica" instalada.

Ahora modificaremos la etiqueta <font> para el tÌtulo de nuestra p·gina de modo que "Web de Volcanes" aparezca con un tipo de letra distinto:

1. Abra el archivo index.htm en su editor de textos.
2. Edite la lÌnea que contiene el texto WEB DE VOLCANES y dÈjela como:

     <B><font face="Arial,Helvetica" size=+4 color=#FF66FF>W</font>
     <font face="Arial,Helvetica" size=+3 color=#DD0055>EB DE VOLCANES</font></B>

3. Salve y Actualice en su web Browser.

NOTA: Hemos incluido especÌficamente que el Browser elija la fuente Arial para Windows y Helvetica para Macintosh y/o cualquier ordenador que no disponga de la fuente Arial instalada.

°Use este HTML con discreciÛn! El uso de esto es un arte frente al abuso de demasiados estilos de fuentes.

Compruebe Su Trabajo

Compare su trabajo con este ejemplo de cÛmo deberÌa aparecer el documento. Si el suyo resulta ser diferente del del ejemplo, revise cÛmo introdujo el texto en el editor de textos.

RevisiÛn

TÛpicos a recordar de esta lecciÛn:
1. øCÛmo se cambia el tamaÒo y el color de una parte del texto en una p·gina web?
2. øQuÈ HTML se puede usar si el Browser no soporta las etiquetas <font>...</font>?
3. øCÛmo se crean subÌndices en HTML?
4. øCÛmo puede hacer que un texto aparezca con un tipo de letra concreto?

M·s InformaciÛn

AquÌ tiene dos estilos m·s que tambiÈn est·n disponibles en HTML 3.2 y pueden funcionar correctamente en su Browser:

Etiquetas de Estilo
HTML	Resultado
<u>Esto est· Subrayado...</u>	Esto est· Subrayado
<u>Esto est· Tachado...</u>	Esto est· Tachado

Y finalmente aquÌ tiene un ™ltimo comentario acerca del coloreado del texto que puede serle ™til alg™n dÌa. En la lecciÛn 16 aprendimos a usar la etiqueta <body> para dar color al fondo, al texto y a los links. Si fuÈsemos a dar color a un bloque de texto con la etiqueta <font> solo afectarÌa al texto del "body" y no a los links hipertexto; estos mantienen bien el color por defecto, azul o bien cualquiera que se especifique en la etiqueta <body>.

Colores de Links por Defecto
HTML	Resultado
<font color=red> PasÛ mucho tiempo tras la triste muerte de <A HREF="http://www.longhorn.org/sir/"> Sir Longhorn</A> hasta que alguien pudo recrear su fÛrmula.	PasÛ mucho tiempo tras la triste muerte de Sir Longhorn hasta que alguien pudo recrear su fÛrmula.
Podemos cambiar el color de los links hipertexto colocando una etiqueta <font> dentro de un anchor link. Note que esto sÛlo vale para links no visitados; una vez vista la p·gina apuntada por el link ser· coloreada con el color designado para los links visitados; por ejemplo, p™rpura
Colores de Links Modificados
<font color=red> PasÛ mucho tiempo tras la triste muerte de <A HREF="http://www.longhorn.org/sir/"> <font color=#228800>Sir Longhorn</font></A> hasta que alguien pudo recrear su fÛrmula.	PasÛ mucho tiempo tras la triste muerte de Sir Longhorn hasta que alguien pudo recrear su fÛrmula.

Pr·ctica Independiente

Intente experimentar con las etiquetas <font>...</font> en sus propias p·gina web. Vea cÛmo funcionan dentro de las etiquetas de <hN>...</hN> tambiÈn. Experimente con diferentes fuentes, °incluso con las m·s salvajes!

Busque sitios donde crea que pueda necesitar sub/superÌndices. Un ejemplo podrÌa se los pies de p·gina; podrÌa numerarlos o codificarlos, y entonces cada uno podrÌa actuar como un link hipertexto a una nota a pie de p·gina (o saltar a una p·gina distinta para dichas notas):

... y despuÈs del estudio de Linberger y Gordon en 1963 ¹² sobre los efectos de la temperatura sobre la maduraciÛn del queso, Gange y Walters (1964)¹³ al igual que Colby (1969)¹⁴ llegaron a la misma conclusiÛn.

    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

---

12.Los experimentos de Linberger y Gordon fueron controvertidos por sus radicales tÈcnicas sobre el control de temperaturas.
13.Gange y Walters realmente no llegaron a la misma conclusiÛn hasta que sus resultados fueron verificados por J.D. Smith. Para m·s informaciÛn vea Cheese Abtracts 1964, pp.234-239
14.Colby nunca recibiÛ el reconocimiento apropiado a su trabajo pionero en el campo del queso y terminÛ sin pena ni gloria.

---

A ContinuaciÛn....

---

---

---

---

---

---

øHermosas Rayas? øHuecas Rayas? øH·biles Rayas? M·s opciones para la <hr>

IR A.... | Õndice de Lecciones | anterior: "°No Parpadee!" | siguiente: "Separadores F·ciles" |

---

Writing HTML LecciÛn 18: Retocando el Texto

©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al espaÒol por agma@usa.net

URL: