martes, 10 de mayo de 2011

61 - HTML - color de fondo y color de texto - bgcolor

Continuamos con las opciones que nos permiten darle alegría a nuestra web, esta vez vemos como asignar un color de fondo. Para esto utilizaremos el atributo "bgcolor".

La etiqueta <body> admite los atributos "bgcolor" y "text", con lo que podremos seleccionar para nuestra web, un color de fondo y un color de texto diferente a los que nos asigna el sistema por defecto.

Código     : <body bgcolor="color" text="color">

Resultado: muestra la página y el texto con los colores seleccionados.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente - Colores</title>

</head>

<body bgcolor="green" text="yellow">

Se muestra Texto color amarillo sobre<br>

fondo de la página color verde.

</body

</html>

Programa 43

El ejemplo en el navegador:

clip_image002

domingo, 8 de mayo de 2011

60 - HTML - Estilos y efectos de fuentes - Color

Vamos a profundizar un poco más en la forma de dar color al texto, como ya hemos visto anteriormente (Ver Pág 51) para alegrar nuestra web, o resaltar nuestros textos con colores.

Para indicar el color de un texto se utiliza la propiedad "font" con el atributo "color".

Código     : <font color="#FF0000">Rojo</font>

Resultado: muestra el texto entre las etiquetas en color rojo.

Hay dos formas de indicar el valor de la propiedad color, la primer en sus valores RGB (red, green, blue) rojo, verde, azul. Es decir que combinando estos valores se obtienen los diferentes colores. Y la otra forma es con sus nombres en inglés.

Pasemos al Código de ejemplo utilizando los valores RGB:

<html>

<head>

<title>Fuente - Colores utilizando los códigos RGB</title>

</head>

<body>

<font color="#000000">Negro</font> <br>

<font color="#C0C0C0">Plata</font> <br>

<font color="#808080">Gris</font> <br>

<font color="#FFFFFF">Blanco</font> <- Blanco<br>

<font color="#800000">Marron</font> <br>

<font color="#FF0000">Rojo</font> <br>

<font color="#8800080">Purpura</font> <br>

<font color="#FF00FF">Fucsia</font> <br>

<font color="#008000">Verde</font> <br>

<font color="#00FF00">Verde lima</font> <br>

<font color="#808000">Verde Oliva</font> <br>

<font color="#FFFF00">Amarillo</font> <br>

<font color="#000080">Azul Marino</font> <br>

<font color="#0000FF">Azul</font> <br>

<font color="#008080">Azul Verdoso</font> <br>

<font color="#00FFFF">Celeste</font> <br>

</body>

</html>

Programa 41

El ejemplo en el navegador:
Negro
Plata
Gris
Blanco <- Blanco
Marron
Rojo
Purpura
Fucsia
Verde
Verde lima
Verde Oliva
Amarillo
Azul Marino
Azul
Azul Verdoso
Celeste

Y ahora el mismo ejemplo pero dándole a los atributos de color su valor en inglés, su representación en el explorador es la misma que para los valores RGB de antes.

Pasemos al Código de ejemplo utilizando los valores de los colores en inglés:

<html>

<head>

<title>Fuente - Colores utilizando los códigos en inglés</title>

</head>

<body>

<font color="black">Negro</font> <br>

<font color="silver">Plata</font> <br>

<font color="gray">Gris</font> <br>

<font color="white">Blanco</font> <- Blanco<br>

<font color="maroon">Marron</font> <br>

<font color="red">Rojo</font> <br>

<font color="purple">Purpura</font> <br>

<font color="fuchsia">Fucsia</font> <br>

<font color="green">Verde</font> <br>

<font color="lime">Verde lima</font> <br>

<font color="olive">Verde Oliva</font> <br>

<font color="yellow">Amarillo</font> <br>

<font color="navy">Azul Marino</font> <br>

<font color="blue">Azul</font> <br>

<font color="teal">Azul Verdoso</font> <br>

<font color="aqua">Celeste</font> <br>

</body>

</html>

Programa 42

El resultado en el navegador es el mismo que utilizando los codigos RGB.

Nota: Se aconseja utilizar estos colores que son los que la mayoría de los navegadores incluyen en su paleta de colores, aunque se pueden hacer cientos de variedades utilizando las combinaciones rgb, no todos los colores obtenidos se encuentran en las paletas de colores de los navegadores con lo que podrían no obtenerse los resultados deseados.

viernes, 6 de mayo de 2011

59 - HTML - Estilos y efectos de fuentes <sub></sub> subíndice

Como vimos, la opción "sup" muestra en formato superíndice, pues bien hoy vemos la opción <sub> que se utiliza para mostrar un texto en formato subíndice (fuente pequeña debajo de la línea de texto).

Código    : <sub> Texto </sub>

Resultado: muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato subíndice</title>

</head>

<body>

Este es un texto normal <br>

<sub>Este es un texto en subíndice</sub> <br>

Aquí un texto normal <sub>subíndice</sub> para ver la diferencia

<br>

Otro ejemplo, la fórmula del agua: H<sub>2</sub>O

</body>

</html>

Programa 40

El ejemplo en el navegador:

 
 

Este es un texto normal
Este es un texto en subíndice
Aquí un texto normal subíndice para ver la diferencia
Otro ejemplo, la fórmula del agua: H2O

miércoles, 4 de mayo de 2011

58 - HTML - Estilos y efectos de fuentes <sup></sup> superindice

La opción <sup> se utiliza para mostrar un texto en formato superíndice.

Código     : <sup> Texto </sup>

Resultado : muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato superindice</title>

</head>

<body>

Este es un texto normal <br>

<sup>Este es un texto en superindice</sup> <br>

Aqui un texto normal <sup>superindice</sup> para ver la diferencia <br>

Otro ejemplo: 2<sup>2</sup> + 2<sup>2</sup> = 8<br>

</body>

</html>

Programa 39

El ejemplo en el navegador:

 
 

Este es un texto normal
Este es un texto en superindice
Aquí un texto normal superindice para ver la diferencia
Otro ejemplo: 22 + 22 = 8

lunes, 2 de mayo de 2011

57 - HTML - Estilos y efectos de fuentes <small></small> pequeño

La opción <small> se utiliza para mostrar un texto en formato pequeño.

Código     : <small> Texto </small>

Resultado : muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato pequeño</title>

</head>

<body>

Este es un texto normal <br>

<small>Este es un texto pequeño</small>

<br>

</body>

</html>

Programa 38

El ejemplo en el navegador:

 
 

Este es un texto normal
Este es un texto pequeño

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

sábado, 30 de abril de 2011

56 - HTML - Estilos y efectos de fuentes <big><big> grande.

La opción <big> se utiliza para mostrar un texto en formato grande.

Código    : <big> Texto </big>

Resultado: muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato grande utilizando "big"</title>

</head>

<body>

Este es un texto normal <br>

<big>Este es un texto grande</big>

<br>

</body>

</html>

Programa 37

El ejemplo en el navegador:

 
 

Este es un texto normal
Este es un texto grande

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

jueves, 28 de abril de 2011

55 - HTML - Estilos y efectos de fuentes: "Itálica o Cursiva <i></i>"

La opción <i> se utiliza para mostrar un texto en formato itálico o cursivo.

Código    : <i> Texto </i>

Resultado: muestra el texto entre las etiquetas en formato cursivo.

Código de ejemplo:

<html>

<head>

<title>Fuente en italica o cursiva</title>

</head>

<body>

Este es un texto normal <br>

<i>Este es un texto italica o cursiva</i>

<br>

</body>

</html>

Programa 36

El ejemplo en el navegador:

-------------------------------------------

Este es un texto normal
Este es un texto italica o cursiva

-------------------------------------------

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

martes, 26 de abril de 2011

54 - HMTL - Estilos y efectos de fuentes: "Teletipo <tt> </tt>"

La opción <tt> se utiliza para mostrar un texto en formato teletipo o máquina de escribir.

Código    : <tt> Texto </tt>

Resultado: muestra el texto entre las etiquetas en formato teletipo.

Código de ejemplo:

<html>

<head>

<title>Fuente en Teletipo o máquina de escribir</title>

</head>

<body>

Este es un texto normal <br>

<tt>Este es un texto Teletipo</tt>

<br>

</body>

</html>

Programa 35

El ejemplo en el navegador:

-----------------------------------------------

Este es un texto normal
Este es un texto Teletipo

--------------------------------

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

domingo, 24 de abril de 2011

53 - HTML - Estilos y efectos de fuentes: "Tachado <s></s>"

Otra opción al igual que <strike>, para mostrar el texto tachado es <s>.

Código    : <s> Texto </s>

Resultado: muestra el texto entre las etiquetas tachado.

Código de ejemplo:

<html>

<head>

<title>Fuente en Tachado</title>

</head>

<body>

Este es un texto normal <br>

<s>Este es un texto Tachado</s>

<br>

Y este texto tiene una palabra <s>tachada con "s"</s> intercalada

</body>

</html>

Programa 34

El ejemplo en el navegador:

Este es un texto normal
Este es un texto Tachado
Y este texto tiene una palabra tachada con "s" intercalada

-----------------------------------------------------------

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

viernes, 22 de abril de 2011

52 - HTML - Estilos y efectos de fuentes: "Tachado: <strike><strike/>"

Continuamos con las opciones disponibles para dar estilo y efectos a nuestro texto.

Concretamente aprenderemos a marcar como "tachado" un texto, para esto utilizamos la etiqueta <strike></strike>.

Código    : <strike> Texto </strike>

Resultado: muestra el texto entre las etiquetas tachado.

Código de ejemplo:

<html>

<head>

<title>Fuente en Tachado</title>

</head>

<body>

Este es un texto normal <br>

<strike>Este es un texto Tachado</strike>

<br>

Y este texto tiene una palabra <strike>tachada</strike> intercalada.

</body>

</html>

Programa 33

El ejemplo en el navegador:

Este es un texto normal
Este es un texto Tachado
Y este texto tiene una palabra tachada intercalada.

 

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.