9. Dale Estilo a tu Página Web

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Dale Estilo al Texto [Jan. 13, 2012, 11:32 a.m.]


En este reto vas a aprender cómo darle estilo a un sitio web. Si has estado siguiendo los retos del Trisfera Summer Camp, ya debes tener:

  • Bosquejos de cómo quieres que se vea tu sitio 
  • HTML escrito para cada una de tus páginas
 
Digamos que tenemos el siguiente documento HTML:
 
<html>
<head>
  <meta charset="utf-8" />
  <title>Dándole Estilo al Texto</title>
</head>
<body>

  <h1>Queremos que el encabezado esté subrayado</h1>

  <p>Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

  <p>Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>

</body>
</html>
 
Como podrás observar en el ejemplo, los navegadores asignan estilos por defecto, que no siempre se ajustan a nuestro diseño. En este caso, queremos que el encabezado esté subrayado en vez de usar negrita. También queremos darle colores y alineaciones diferentes a cada párrafo.
 
Todo esto se puede solucionar con CSS (Cascading Style Sheets), que es el lenguaje utilizado en la web para darle estilo al HTML.
 
Color
 
Para modificar el color de un texto, CSS define una propiedad llamada "color", que acepta valores en cualquiera de estos formatos:
  • Usando el nombre del color en inglés - color: green
  • Hexadecimal - color: #00FF00
  • RGB - color: rgb(0,255,0)
     

Si modificamos los párrafos para agregarles color, quedarían de esta manera:

<p style="color:green;">Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

<p style="color:#FF0000">Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>
 
Cuando abras el archivo en el navegador, debes ver algo como esto.
 
Text-Align
 
Para darle alineación al texto, CSS define una propiedad llamada "text-align", que acepta los siguientes valores:
  • left - Alineación a la izquierda
  • right - Alineación a la derecha
  • center - Alineación centreada
  • justify - Alineación justificada
     

Si le agregamos alineación a los párrafos, quedarían de esta manera:

 

	<p style="color:green; text-align:right;">Este es nuestro primer párrafo. Queremos que tenga alineación a la derecha y que el texto sea en "itálica" de color verde.</p>

<p style="color:#FF0000; text-align:justify">Este es nuestro segundo párrafo. Queremos que tenga alineación justificada y que el texto sea en "negrita" de color rojo. Para ver el efecto de la alineación justificada, tal vez tengas que achicar el tamaño de tu navegador.</p>

Y debemos ver algo como esto en el navegador.