Efectos avanzados en el texto HTML - Combinación de formatos
Cómo configurar partes independientes del hipertexto HTML para una página Web en colores, tipografía y tamaño del texto.
Ya sabemos cómo aplicar algunos efectos sencillitos al texto, la verdad es que, con la combinación adecuada de esos efectos “sencillitos” ya se pueden obtener bastantes cosas. Sin embargo, vamos aprender a sacarle más jugo al texto.
Aquí vamos aprender a configurar partes independientes del texto, en color tipografía y tamaño.
En la introducción de esta sección vimos cómo darle un color al texto de toda la página mediante el atributo text del tag <body>. Prescindamos ahora de ese atributo y vamos a reconfigurar el texto de toda la página mediante el tag <basefont>. Teclee el siguiente código y grábelo como fuentes_1.htm.
<html>
<head>
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”#0000FF”>
El texto de esta página está en color azul. <br>
Así lo hemos determinado mediante <br>
El uso de basefont.
</basefont>
</body>
</html>
El resultado de la ejecución del código se ve en la siguiente figura:
Observe que el tag empleado se coloca directamente anidado dentro del cuerpo de la página. Es decir, inmediatamente después de abrir el <body> se abre <basefont> e inmediatamente antes de cerrar con </body> se cierra </basefont>. De este modo, las características de texto que son determinadas por este tag afectan a toda la página. En este ejemplo le hemos asociado el atributo color para establecer el color de todo el texto de la página. El color por defecto del texto es negro, pero con este tag le hemos cambiado a azul. Una advertencia sobre este tag: Sólo funciona correctamente con explorer. En seguida veremos una alternativa válida para todos los navegadores.
Existen otras propiedades del texto que también podemos alterar. Por ejemplo, como ya sabemos, la tipografía usada por defecto es Times New Roman. Si al tag <basefont> le pasamos el atributo face, podremos cambiar ésta tipografía. Además podemos cambiar el tamaño por defecto de la letra.
Estos cambios de tamaño no tiene nada que ver con los encabezamientos de h1 a h6 que vimos en el apartado anterior. El tamaño de la letra con <basefont> puede ir de 1 a 7, siendo que el 1 es la letra más pequeña y el 7 la más grande. El tamaño por defecto de la letra es el equivalente al valor 3. Esto lo hacemos con el atributo size. Teclee el siguiente código y guárdelo como fuentes_2.htm.
<html>
<head>
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”0000FF” face=”arial” size=2>
El texto de esta página está en color azul. <br>
Así lo hemos determinado mediante <br>
El uso de basefont.
</basefont>
</body>
</html>
El resultado es el que se ve en la figura:
Fíjese que el cambio que se ha producido en el texto. El color sigue siendo azul. Sin embargo, la tipografía es diferente: es la clásica letra “de palo” que corresponde con la letra conocida como Arial. Además, el tamaño ha variado: ahora es más pequeño de lo normal, ya que hemos usado el atributo size con el valor 2. Puede probar a poner el valor 7 en lugar del 2 y verá una letra enorme. Como hemos dicho antes, los valores permitidos están entre 1 y 7. Si pone un valor mayor que 7, la página mostrará le letra del tamaño equivalente a 7. Si pone un valor menor que 1, la página mostrará el texto del tamaño equivalente a 1.
Ahora bien, ¿Qué ocurre si lo que quiere es modificar las propiedades de una parte del texto, en lugar de todo el texto de la página? Para ello, empleamos en tag <font>, que recibe los mismos atributos que <basefont>, pero es mucho más selectivo que su ámbito de acción. Y este tag es la alternativa a <basefont>, y funciona con cualquier navegador. Teclee el siguiente listado y guárdelo como fuentes_3.htm.
<html>
<head>
<title>
Uso de fuentes
</title>
</head>
<body>
<basefont color=”0000FF” face=”arial” size=2>
En esta página vamos a ver <br>
Un uso cambiado de Font y basefont. <br>
El texto de esta página está en color azul. <br>
Así que hemos determinado mediante <br>
El uso de basefont. <br>
<Font color=”FF0000 face=”comic sans ms” size=4>
Este texto aparece <br>
Afectado por el tag font. <br>
</font>
Aquí volvemos al texto <br>
Normal de la página. <br>
</basefont>
</body>
</html>
El resultado de la ejecución de este código se ve en la siguiente figura:
En ella puede apreciar cómo poco a poco, vamos adquiriendo mayor libertad para darle a cada parte de nuestro documento el aspecto que nos apetezca. De esta forma, podemos lograr unos acabados bastante atractivos para nuestro texto.
Observe que las propiedades del tamaño equivalen a 4, color rojo y tipografía Comic Sans MS sólo afecta al texto comprendido entre <font> y </font>.
En el tag <font>, el atributo size se puede fijar de forma absoluta o relativa. Se establece el valor de size de forma absoluta cuando se le pasa, como en el ejemplo anterior, directamente entre 1 y 7. Se establece el valor de forma relativa cuando le pasamos un número precedido del signo + o del signo -. En ese caso, el valor es relativo al tamaño por defecto del texto de la página. Vamos a aclarar esto. Supongamos el ejemplo que acabamos de ver, fuentes_3.htm. En el tag <basefont> le pasamos el atributo size con el valor 2. Por lo tanto, el tamaño por defecto del texto de la página es 2. Ahora, en el tag font vamos a sustituir el atributo size=4 por size=+2. El resultado es el mismo, ya que toma el tamaño por defecto 2 y le suma 2, obteniendo el tamaño de 4. Si le pasamos el tag font el atributo size=+7, el resultado sería 9, pero como el valor máximo permitido es 7, en 7 se queda.
Y algo más sobre las tipografías. Hemos visto que podemos establecer la tipografía del texto citando el nombre de la fuente. Sin embargo, es preciso que el archivo que contiene esa tipografía esté, físicamente, presente en el disco duro del ordenador. Las tipografías se almacenan en archivos con la extensión .ttf o bien con la extensión .fon. No olvide que está trabajando para la red. Si su página la visita un usuario que no tiene en su ordenador las tipografías que usted ha empleado, el navegador buscará, por su cuenta, la tipografía por defecto (Times New Roman) y la usará. Por esta razón, si emplea fuentes muy exóticas, es posible que su página quede de lujo… en su ordenador, pero que nadie más pueda verla tal como usted la diseñó. Vamos, que a la hora de diseñar, citase a fuentes lo más estándar posible, para estar razonablemente seguro de que todos los usuarios podrán ver bien su página. Y, aunque use tipografía estándar, es posible que alguna de ellas no exista en el ordenador del usuario. Para prever esto, lo que hacemos es que, al usar el atributo face del tag <font> o <basefont> ponemos una lista de varias tipografías, separadas por comas, como en la siguiente línea de código.
<font face=”arial, verdana, trebuchet”>
De esta forma lo que hacemos es proporcionarle alternativas al navegador, de tal forma que, una vez descargada la página en el ordenador del usuario, se buscará la primera de las fuentes citadas. Si no la encuentra, se buscará la segunda, y si no existe, se buscará la tercera. Sólo en el caso de que no exista ninguna de las tres, se recurrirá a la fuente por defecto. Lo que haremos será, por tanto, incluir una lista de varias fuentes (normalmente tres o cuatro) que sean lo más estándar posible (y además parecidas entre sí) para que el ordenador que no tenga una tenga otra y el resultado final sea aceptable en todos los ordenadores.
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!CITAR ARTÍCULO
Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos
Referencia en Formato APA:
Delgado, Hugo. (2013).
Efectos avanzados en el texto HTML - Combinación de formatos.
Recuperado 19 de November, 2024, de
https://disenowebakus.net/domine-html-y-dhtml-efectos-avanzados-en-el-texto.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
El primer documento Web creado por Tim Berners-Lee publicado en 1991 con el nombre HTML Tags, fue el...
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags...
Para incluir letras propias del alfabeto en castellano es necesario usar códigos HTML que nos...
Cuando un ordenador se conecta a Internet, el protocolo de comunicación le asigna una dirección IP...
¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
1 Comentario en "Efectos avanzados en el texto HTML - Combinación de formatos"
Deja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información
Efectos avanzados en el texto HTML