Press "Enter" to skip to content

Como dar formato al texto con HTML

En este articulo vamos a ver como cambiar el tipo, el color y el tamaño de la letra en HTML

La etiqueta ¨Font¨ nos sirve para ajustar el tamaño del texto de una pagina web. El tamaño del texto se especificara con el atributo ¨size¨. Así pues, para darle a un texto un determinado tamaño lo haremos de la siguiente forma:

<font size = ¨5¨> Texto al 5 </font>

El valor que le demos al atributo Size sera el del tamaño de la letra, cuando mayor sea el numero mas grande sera la fuente. Este valor puede ir del 1 al 7, siendo el valor por defecto normalmente el 3.

Hay que decir que cada navegador puede tener un valor por defecto en el tamaño de la letra. Si por ejemplo, el tamaño de por defecto de un navegador es 3, si al atributo ¨size¨ le damos un valor ¨2¨ el tamaño de la letra sera mas pequeño que el normal de la pagina, pero si le ponemos ¨4¨ el tamaño sera mas grande.

¿Como podemos incrementar el tamaño de la fuente tomando como referencia el tamaño general del texto de la pagina?

Bien, imaginemos que queremos que un texto sea el tamaño general de la pagina mas 3, para hacer esto simplemente hay que escribir este código:

<font size =¨+3¨> Texto </font>

Si el tamaño por defecto de la pagina es de 3, todo el texto que aparezca entre estas etiquetas sera de 6, es decir, 3 del texto general mas 3 que le estamos dando al atributo ¨size¨.

Comentar que también se puede disminuir el tamaño de la fuente, para ello cambiaremos el signo + por el –

Darle a toda una pagina el mismo tamaño

Imaginaros que queremos darle a una pagina un tamaño de letra 4. Para realizar esto tendremos que poner el siguiente código detrás de la etiqueta Body.

<Basefont size = ¨4¨>

Color del texto

Siguiendo con la etiqueta ¨Font¨, cambiar el color de un texto en HTML es una tarea muy sencilla, para ello utilizaremos el atributo ¨color¨. El codigo quedaria de la siguiente manera:

<Font Color=¨codigo¨> Texto con el color deseado </font>

Ahora bien, donde pongo codigo tenemos dos formas de definir los colores:

– Insertando el codigo de la paleta de colores RGB. Puedes encontrar algunos en este enlace de wikipedia pero existen 16.777.216 combinaciones distintas.

– Poniendo el nombre del color en ingles, es decir, red para el rojo, yellow para el amarillo, black para el negro, etc.

Cambiar el color de letra de los enlaces.

Para cambiar el color de un determinado enlace lo realizaremos de la siguiente forma:

<a style=»color:codigo» href=»http://la pagina que sea.com»> Texto que queramos poner</a>

Cambiar el color de la letra de toda una pagina:

En muchas ocasiones puede ser interesante cambiar el color de la letra de toda la pagina web, para ello, el html nos da la posibilidad de realizarlo con una serie de atributos colocados en la etiqueta <body>. Para cambiar el color del texto normal de la letra utilizaremos ¨text¨, para cambiar el color de los enlaces utilizaremos ¨link¨ y para cambiar el color de los enlaces visitados utilizaremos ¨vlink¨.

Y asi quedaria nuestro codigo:

<body  text=»#CodigoColor» link=»#CodigoColor» vlink=»#CodigoColor»>

Cambiar la fuente

Por ultimo vamos a ver como cambiar el tipo de letra que queremos para nuestra pagina web, para ello utilizaremos el siguiente codigo:

FONT FACE=»arial»>Texto con letra Arial</FONT>

Con este código escribiríamos con el tipo de letra ¨arial¨ pero existen muchas mas.

Texto en negrita, cursiva, tachado y subrayado.

Ahora vamos a ver como poner un texto en negrita, cursiva, subrayado o incluso tachado. Lo haremos de la siguiente forma.

<B> Texto en negrita </B>

<I> Texto en cursiva </I>

<U> Texto subrayado </U>

<STRIKE> Texto tachado </STRIKE>

Crear superindice o subindices

Aveces necesitamos crear superindices o subindices, sobretodo si estamos trabajando con funciones matemáticas, en HTML disponemos las siguientes etiquetas para conseguirlo.

<SUP> Superindice </SUP>

<SUB> Subindice </SUB>

La etiqueta Hn

Este etiqueta se emplea para definir los estilos de encabezado de una pagina. La n puede ser un numero entre el 1 y el 6, siendo uno el de mayor relevancia y seis el de menos.

<H1> Texto  </H1>

<H2> Texto  </H2>

<H3> Texto  </H3>

<H4> Texto  </H4>

<H5> Texto  </H5>

<H6> Texto  </H6>

Otras etiquetas

<ADDRESS>

Para cualquier tipo de direccion, teléfono, correo electrónico, etc.

<BLOCKQUOTE>

Para citas que ocupan varias lineas.

<CITE>

Para la fuente de una cita
<CODE>

Para escribir lineas de códigos de programación

<DFN>

Para definiciones

<EM>

Para poner mas énfasis al contenido

<STRONG>

Denota una énfasis aun mas fuerte.

<VAR>

Asociado a CODE, indica las variables de programación.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.