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: