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:
|
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
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.
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.
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.
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.
Otra opción útil a la hora de resaltar texto es el subrayado.
Para marcar en "subrayado" un texto, utilizamos la etiqueta <u></u> (en inglés: "underlined").
Código : <u> Texto </u>
Resultado: muestra el texto entre las etiquetas en subrayado.
Código de ejemplo:
<html>
<head>
<title>Fuente en Subrayado</title>
</head>
<body>
Este es un texto normal <br>
<u>Este es un texto subrayado</u>
<br>
Y este texto tiene una palabra <u>subrayada</u> intercalada
</body>
</html>
Programa 32
El ejemplo en el navegador:
Este es un texto normal
Este es un texto subrayado
Y este texto tiene una palabra subrayada intercalada
-----------------------------------------------------------
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Veremos ahora las opciones que tenemos para dar estilo y efectos a nuestro texto.
Con el efecto “negrita”, podremos resaltar palabras o párrafos completos para hacer más legible y llamativas nuestras webs.
Para marcar como "negrita" una fuente o texto, utilizamos la etiqueta <b></b>.
Código : <b> Texto </>
Resultado: muestra el texto entre las etiquetas en negrita.
Código de ejemplo:
<html>
<head>
<title>Fuente en negrita</title>
</head>
<body>
Este es un texto normal <br>
<b>Este es un texto en negrita</b> <br>
Y este texto tiene una palabra en <b>negrita</b> intercalada
</body>
</html>
Programa 31
El ejemplo en el navegador:
Este es un texto normal
Este es un texto en negrita
Y este texto tiene una palabra en negrita intercalada
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Con "basefont"[1] podemos establecer el tamaño base de la fuente utilizando la etiqueta "size".
Los cambios de tamaño de fuente producidos con "font" son relativos al tamaño establecido con "basefont".
No tiene etiqueta de cierre con lo que a partir del uso de esta, todo el texto a continuación pasara al nuevo tamaño.
En caso de no utilizarse "basefont", el tamaño de la fuente es el establecido en el atributo.
Código : <basefont size="número" />
Resultado: permite mostrar el texto con diferentes fuentes.
En el ejemplo tenéis algunos de los aspectos posibles, podéis probar con otros.
Código de ejemplo:
<html>
<head>
<title>Texto - Tipos de Fuente - aspecto</title>
</head>
<body>
<font color="#0000ff" size="3" face="verdana">Ejemplo de texto en fuente Verdana, de color azul y tamaño 3</font><br><br>
Ahora utilizaremos: basefont size=6<br><basefont size="6">Y entonces el Texto desde este punto está en tamaño 6.
<font size="2"> </font></p></font>
</body>
</html>
Programa 30
En el navegador veremos algo así:
[1] Actualmente este elemento está en desuso, a cambio se utilizan las hojas de estilo.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Ahora veremos como determinar el tipo de fuente a utilizar. Lo haremos con el mismo elemento <font> pero en este caso utilizando el atributo “face”
Código : <font face = nombre_de_la_fuente></font>
Resultado: permite mostrar el texto con diferentes fuentes.
En el ejemplo tenéis algunos de los aspectos posibles, podéis probar con otros y ver los resultados.
Código de ejemplo:
<html>
<head>
<title>Texto - Tipos de Fuente - aspecto</title>
</head>
<body>
<font face="verdana">Fuente con aspecto Verdana</font><br>
<font face="arial">Fuente con aspecto Arial</font><br>
<font face="times new roman">Fuente con aspecto Times New Roman</font><br>
<font face="courier">Fuente con aspecto Courier</font><br>
<font face="comic sans ms">Fuente con aspecto Comic Sans MS</font>
</body>
</html>
Programa 29
La representación en el navegador se vería como sigue:
Fuente con aspecto Verdana
Fuente con aspecto Arial
Fuente con aspecto Times New Roman
Fuente con aspecto Courier
Fuente con aspecto Comic Sans MS
Nota: Dado que el ordenador del que mira la web puede que no disponga del tipo de fuente seleccionado, se le mostrará la fuente por defecto, para evitar esto, podemos dar varias opciones de fuente, agregándolas separadas por comas, por ejemplo "arial, verdana, courier", en este caso si no es posible mostrar el texto en “arial”, intentara mostrarlo en “verdana”, y si no es posible en “Courier”.
Así podremos mantener un mayor control de la visualización de nuestra web, adelantándonos a los posibles problemas que puedan surgir.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
En el apartado anterior hemos visto como cambiar el tamaño al texto, ahora veremos como darle color para que nuestra web sea más bonita.
Lo haremos con el mismo elemento <font> pero con el atributo "color".
Código : <font color = nombre del color></font>
Resultado: permite mostrar el texto en diferentes colores.
También es posible utilizar los valores sRGB (del inglés Red, Green, Blue; "rojo, verde, azul") para indicar el color.
En el ejemplo tenéis los colores.
Código de ejemplo:
<html>
<head>
<title>Texto - Colores de la fuente</title>
</head>
<body>
<font color="black">Texto en color NEGRO</font> atributo = black<br>
<font color="silver">Texto en color PLATEADO</font> atributo = silver<br>
<font color="gray">Texto en color GRIS</font> atributo = gray<br>
<font color="white">Texto en color BLANCO</font> (BLANCO) atributo = white<br>
<font color="maroon">Texto en color MARRÓN</font> atributo = maroon<br>
<font color="red">Texto en color ROJO</font> atributo = red<br>
<font color="purple">Texto en color PÚRPURA</font> atributo = purple<br>
<font color="fuchsia">Texto en color FUCSIA</font> atributo = fuchsia<br>
<font color="green">Texto en color VERDE</font> atributo = green<br>
<font color="lime">Texto en color VERDE LIMA</font> atributo = lime<br>
<font color="olive">Texto en color VERDE OLIVA</font> atributo = olive<br>
<font color="yellow">Texto en color AMARILLO</font> atributo = yellow<br>
<font color="navy">Texto en color AZUL MARINO</font> atributo = navy<br>
<font color="blue">Texto en color AZUL</font> atributo = blue<br>
<font color="teal">Texto en color AZUL VERDOSO</font> atributo = teal<br>
<font color="aqua">Texto en color CELESTE</font> atributo = aqua<br>
</body>
</html>
Programa 28
Representación en el navegador:
Texto en color NEGRO atributo = black
Texto en color PLATEADO atributo = silver
Texto en color GRIS atributo = gray
Texto en color BLANCO (BLANCO) atributo = white
Texto en color MARRÓN atributo = maroon
Texto en color ROJO atributo = red
Texto en color PÚRPURA atributo = purple
Texto en color FUCSIA atributo = fuchsia
Texto en color VERDE atributo = green
Texto en color VERDE LIMA atributo = lime
Texto en color VERDE OLIVA atributo = olive
Texto en color AMARILLO atributo = yellow
Texto en color AZUL MARINO atributo = navy
Texto en color AZUL atributo = blue
Texto en color AZUL VERDOSO atributo = teal
Texto en color CELESTE atributo = aqua
Nota: Observad que en el ejemplo, el color blanco no se ve porque utilizamos un fondo blanco, pero sobre un fondo oscuro queda muy bien. Si probáis el código, “pintar” en el navegador, sobre el renglón del atributo “White” con el ratón y veréis el texto.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Otro elemento importante es el que nos permite cambiar las propiedades de la fuente, este elemento es el elemento <font>.
Código : <font></font>
Resultado: permite entre otras cosas cambiar el tamaño de la fuente.
Como veréis necesita etiqueta de inicio y de cierre, pero además cuenta con algunos atributos.
Tamaño de la fuente “size”
Entre los atributos que podemos utilizar para elemento “Font”, encontramos a “size” que nos permite cambiar el tamaño de la fuente.
Los valores posibles son un número entero entre 1 y 7. Por ejemplo el tamaño "2", significa dos tamaños mayores.
Pasemos al Código de ejemplo:
<html>
<head>
<title>Texto - Tamaños de la fuente</title>
</head>
<body>
<font size="1">tamaño de fuente con size = 1</font><br>
<font size="2">tamaño de fuente con size = 2</font><br>
<font size="3">tamaño de fuente con size = 3</font><br>
<font size="4">tamaño de fuente con size = 4</font><br>
<font size="5">tamaño de fuente con size = 5</font><br>
<font size="6">tamaño de fuente con size = 6</font><br>
<font size="7">tamaño de fuente con size = 7</font><br>
</body>
</html>
Programa 27
El código anterior se vería así representado en el navegador:
tamaño de fuente con size = 1
tamaño de fuente con size = 2
tamaño de fuente con size = 3
tamaño de fuente con size = 4
tamaño de fuente con size = 5
tamaño de fuente con size = 6
tamaño de fuente con size = 7
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
El elemento <del> es utilizada para textos borrados.
Código : <del></del>
Resultado: formato para escribir textos borrados
Pasemos al Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br><br>
<del>Formato utilizado para los textos borrados</del>
</body>
</html>
Programa 26
La representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Elemento para insertados.
Código : <ins></ins>
Resultado: formato para escribir textos insertados
Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br><br>
<ins>Formato utilizado para los textos insertados</ins>
</body>
</html>
Programa 25
La representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Con <blockquote> vimos cómo dar formato a citas largas, en este caso el elemento <q> se utiliza para las citas cortas.
La diferencia básica con el elemento anterior es que no muestra sangría.
Código : <q></q>
Resultado: formato para escribir citas cortas
Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br>
<q>Formato utilizado para escribir citas cortas "q" </q>
</body>
</html>
Programa 24
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Continuando con los elementos de estructuración de texto en html, veremos el elemento utilizado para citas largas, esto muestra un bloque de texto con sangría.
Código : <blockquote></blockquote>
Resultado: formato para escribir citas largas
Pasemos al Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal sin utilizar
blockquote, este es un párrafo que
no está definido como una cita larga <br><br><br>
<blockquote>
Formato utilizado
para escribir
citas largas con blockquote
como un solo bloque
</blockquote>
</body>
</html>
Programa 23
El código anterior se vería así en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
