lunes, 17 de septiembre de 2012

Dar formato al texto


Insertar párrafos y saltos de linea

Para definir un párrafo debemos encerrar el texto entre <p> y </p> y si queremos insertar un salto de linea solo basta con un <br />, recuerden que cuando presionamos ENTER no inserta un salto de linea.

Cambiar el formato de un texto

Hay varias etiquetas que nos permiten modificar el formato de un texto, por ejemplo si queremos un texto en Negrita utilizamos <b></b>:
  • Esto es un texto en Negrita
Para cambiar el texto a cursiva utilizamos <i></i>:
  • Texto en Cursiva
Para subrayar un texto lo encerramos entre <u></u>:
  • Texto subrayado

Insertar listas

Las listas son muy importantes, muchas veces tendremos que utilizarlas para ordenar nuestro contenido. Tendremos que usar dos etiquetas para formar una lista, la primera es <ul></ul> con la que indicamos que comenzaremos una lista, y la segunda es <li></li> donde insertamos los items de la lista, se utiliza así:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Eso se vería así:
  • Item 1
  • Item 2
  • Item 3

Títulos encabezados

Hay varios niveles de encabezados, con ellos definiremos títulos y subtítulos, lo encabezados se definen con:
  • <h1></h1>: Encabezado 1

    • <h2></h2>: Encabezado 2

      • <h3></h3>: Encabezado 3


Hay 6 niveles de encabezados para utilizar.

Alinear texto

Para alinear textos utilizaremos la etiqueta <div> (esta tiene mas usos, ya los veremos mas adelante) donde podremos elegir la ubicación, si queremos que el texto se centre lo haremos así:
<div align=�center�>texto centrado</div>

Selector de colores HTML


Desplace la barra de desplazamiento vertical para elegir el color y después haga clic en el cuadro de colores a la izquierda para conseguir el Código de color HTML para elegir el tono de color deseado.

Puede empezar con su propio color escribiendo su código de color en el campo de entrada superior.
Introduzca su código de color:  
  •  °
  •  %
  •  %
Haga clic para poner el color en la lista a continuación: 

Enlace en una imagen

Utilizar este codigo:

<a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a>

Como añadir una imagen

Utilizar el siguiente codigo:

<img src="ubicación" alt="descripción" />