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

5. Diseñando con Estilo

Al igual que hace un procesador de textos, el HTML puede decirle a un browser que muestre por pantalla ciertas partes del texto en cursiva o en negrita, o incluso una combinación de ambas.

Objetivos

Después de esta lección será capaz de:

Lección

Etiquetas HTML de Estilo

El HTML ofrece diversas etiquetas para añadir cierto estilo a su texto. Recuerde, no obstante, ser juicioso y consistente en el uso de estos estilos; un excesivo abuso de las mismas puede derivar en un documento difícil de leer.

Etiquetas de Estilo
HTML Resultado 

<b>Esto es negrita...</b>
Esto es negrita... 

<i>Esto es cursiva...</i>
Esto es cursiva... 

<tt>Esto es terminal...</tt>
Esto es terminal...
Note que puede combinar estas etiquetas de estilo siempre que estén correctamente enlazadas; esto es, las etiquetas de cursiva deben estar siempre dentro de las etiquetas de negrita. Note también que el orden no influye. 

<i><b>Esto es negrita y cursiva</b></i>

<b><i>Y esto también</i></b>
Esto es negrita y cursiva

Y esto también

Otra opción más es que puede añadir estilo al texto que aparece en los encabezados. Note cómo se abren y se cierran las diferentes etiquetas de estilo en torno al texto que se desea estilizar y cómo las etiquetas de encabezado engloban todo el conjunto. 
blah blah blah

<h2><i>¡Nuevo</i> y 
<tt>Mejorado!</tt></h2>

blah blah blah
blah blah blah

¡Nuevo y Mejorado!

blah blah blah

Añadiendo Texto con Estilo a su Documento HTML

Nota: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora.

Siga estos pasos para aplicar estilo a su documento HTML.

  1. Abra su área de trabajo si aún no la tiene abierta.
  2. Vuelva a su documento HTML, "Volc.htm", en el editor de texto.
  3. Encuentre la palabra "volcán" en la primera frase de la Introducción. Vamos a hacer que aparezca en negrita para dar importancia a la palabra.
  4. Inserte las etiquetas para que esta palabra aparezca en negrita: 

    
          <b>volcán</b>
  5. Ahora modificaremos el segundo párrafo con las etiquetas negrita y cursiva para dar énfasis a una palabra. Añada las etiquetas <b>...</b> y <i>...</i> a la palabra billón de modo que quede: 
    
          <p>
          Los volcanes han sido parte de la historia de la Tierra
          desde mucho antes de los hombres. Compare la historia
          de los seres humanos, unos pocos millones de años, con
          la de la Tierra, más de cuatro <b><i>billones</i></b> de años.
  6. Finalmente, usaremos la etiqueta de terminal para indicar una palabra especial. Bajo el encabezado de Terminología de Volcanes introduzca lo siguiente: 
    
          El estudio de los volcanes, o <tt>Vulcanología</tt>,
          incluye muchos términos difíciles.
  7. Guarde en el editor de textos y vuelva a mostrar el documento en su browser.

Revise su trabajo

Eche un vistazo a un ejemplo que muestra estos cambios. Es importante que cuando se usen etiquetas de estilo éstas vayan acompañadas de sus correspondientes etiquetas de finalización, </>. De otro modo, el resultado puede ser escabroso.

Revisión

  1. ¿Qué son las etiquetas de estilo?
  2. ¿Cuáles son las diferentes etiquetas usadas para los diferentes estilos de HTML?
  3. ¿Qué pasos dábamos para introducir el estilo en su documento?
  4. Puntos Extra* - ¿Cómo pueden ser útiles estos estilos a la hora de crear páginas web?

Práctica independiente

Intente usar las etiquetas de estilo, negrita, cursiva y terminal, en el texto de su propio documento. Vea si puede combinar correctamente los estilos... y que el resultado sea agradable de leer.

A continuación....

Cómo poner juntas listas de elementos, en ambos formatos, enumerados y no enumerados.
IR A.... | Índice de Lecciones | anterior: "Separando en Párrafos" | siguiente: "Listas, Listas, Listas, y más Listas" |

Writing HTML Lección 5: Diseñando con Estilo
©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, y corregido por Andrés Valencia

URL: