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: