© Jordi González Boada
Dar formato al texto II
Negrita, cursiva, subrayado
Estas tres etiquetas son elementos de modificación del estilo de fuente. en el tema anterior vimos otras dos: small y big.
La sintaxis de estas etiquetas es la siguiente:
<b>...</b> para negrita (en ingles bold), ejemplo:
Ayer murió una tortuga
<i>...</i> para cursiva (en ingles italic), ejemplo:
Ayer murió una tortuga
<u>...</u> para el subrayado (en ingles underline), ejemplo:
Ayer murió una tortuga
Estas etiquetas se pueden aplicar a la vez a un mismo texto, por ejemplo texto en cursiva y negrita (<b><i>...</i></b>): Ayer murió una tortuga
La etiqueta subrayado a sido desaprobada en favor del uso de las hojas de estilo en cascada (CSS). Como tal vez os halláis dado cuenta lo que se quiere es que el contenido se incluya a través de HTML y el formato del mismo sea realizado a través de CSS. Más adelante veremos como hacerlo así.
Estas etiquetas tienen una función general, hay otras -las cuales no se trataran en este manual por dar los mismos resultados: textos en negrita o cursiva- que son de uso más particular, los elementos de frase.
Otros elementos de modificación del estilo de fuente
Otros elementos de modificación del estilo de fuente menos utilizados son:
<tt>...</tt> teletipo, ejemplo:
Ayer murió una tortuga
<strike>...</strike> tachado, ejemplo:
Ayer murió una tortuga
<s>...</s> tachado, ejemplo:
Ayer murió una tortuga
Tanto la etiqueta strike como s han sido desaprobadas.
Subíndice y superíndice
Estas etiquetas son útiles para la presentación visual del texto o de fórmulas y ecuaciones. Veamos su sintaxis y algunos ejemplos:
<sub>...</sub> subíndice, ejemplos:
H20, CH3-CH3
<sup>...</sup> superíndice, ejemplos:
y=a·x2+b·x+c, Ma del Camino, Calle Morería no60 4oB.
Texto preformateado
Esta etiqueta es útil para presentar textos en los que es importante que:
- Se preserven los espacios en blanco.
- No se produzcan saltos de línea automáticos.
Esto resulta útil para presentar código de programación, como se hace en este curso en las figuras, o para presentar textos de carácter particular como la poesía. La sintaxis de esta etiqueta es:
<pre>
...
</pre>
Veamos un ejemplo:
<html>
<head>
<title>
fig03_01
</title>
</head>
<body>
<pre>
GOTA PEQUEÑA, MI DOLOR
Gota pequeña, mi dolor.
La tiré al mar.
Al hondo mar.
Luego me dije: ¡A tu sabor
ya puedes navegar!
Más me perdió la poca fe...
La poca fe
de mi cantar.
Entre onda y cielo naufragué.
Y era un dolor inmenso el mar.
De «Poemas puros. Poemillas de la ciudad» Dámaso Alonso
</pre>
</body>
</html>
fig03_01 Texto preformateado, poesía de Dámaso Alonso.
Línea horizontal
Esta etiqueta, con carácter únicamente visual genera una línea horizontal que puede, por ejemplo, servir de divisor de secciones. Su sintaxis es <hr> y produce el siguiente efecto:
Esta etiqueta tiene tres atributos que han sido desaprobados en favor del uso de CSS:
- align: que puede tener los valores left, right y center
- width: que permite fijar la longitud de la línea. El valor se puede facilitar en porcentaje (ej. 60%) o en pixeles (ej. 600), resultando más aconsejable el uso de porcentajes.
- size: determina el grosor de la línea, es un número dado en píxeles.
Un ejemplo, el código <hr Width="50%" Size="20" Align="center" Color="#554466"> produce el siguiente efecto:
Como podéis ver, también hemos incluido el atributo color.
Comentarios del código HTML
Se pueden hacer comentarios del código HTML no visibles al cargar la página en el navegador. Estos pueden ser útiles a la persona que realiza la página para clarificar la estructura del texto. Su sintaxis, peculiar, es la siguiente:
<!-- ... -->
Este es un ejemplo fig03_02.
Texto en movimiento: marquesinas
Este tipo de texto en movimiento se consigue con la etiqueta <marquee>...</marquee>.
Esta etiqueta no forma parte del estándar HTML por lo que algunos navegadores no la reconocen y presentan el texto en forma estática.
Con el código <marquee>Este texto esta en una marquesina</marquee> se consigue el siguiente efecto:
La etiqueta marquee puede tener los siguientes atributos:
- widht: anchura de la marquesina.
- height: altura de la marquesina.
- align: alineación del texto. Valores: top (arriba), middle (en medio) o bottom (abajo).
- behavior: comportamiento. Valores: scroll, slide y alternate.
- bgcolor: color del fondo de la marquesina.
- direction: dirección en la que se mueve el texto. Valores: left (izquierda) y right (derecha).
- scrollamount: cantidad de desplazamiento del texto en cada movimiento de avance, píxeles.
- scrolldelay: tiempo que transcurre entre cada movimiento de avance, milisegundos.
- loop: número de veces que aparecerá el texto, indefinido por defecto.
Texto parpadeante
Este tipo de efecto de texto se consigue con la etiqueta <blink>...</blink>.
Esta etiqueta tampoco forma parte del estándar HTML por lo que algunos navegadores no la reconocen y presentan el texto en forma estática (Internet explorer, por ejemplo, no reconoce esta etiqueta).
Con el código <blink>Este texto parpadea</blink> se consigue el siguiente efecto:
