jueves, 9 de julio de 2015

Estilos de letra en HTML. Parte 1

Hoy les traigo un pequeño tutorial sobre los estilos de letra en HTML.

Y antes de comenzar con este tutorial, les comparto los tutorial anterior acerca de modificar el tamaño de letra en HTML y saltos de linea en HTML, que también es muy útil en el diseño de paginas web.


Y pues entonces, comencemos.


Algo que es muy útil al momento de manipular los textos dentro de las paginas web son las fuentes para el texto. Al diseñar una pagina web podemos acceder a todas las fuentes de texto con las que cuenta nuestro equipo de una manera muy fácil y rápida, con la etiqueta <font> con el parámetro face:


        <font face="fuente"> Texto que queremos con esta fuente </font>


A continuación pongo varios ejemplos de fuentes que se pueden utilizar.
<html>

    <head>
        <title>
            Estilos de letra
        </title>
    </head>

    <body>
        Texto Normal<br/>
        <font face="arial"> Texto Arial </font><br/>
        <font face="verdana"> Texto Verdana </font><br/>
        <font face="calibri"> Texto Calibri </font><br/>
        <font face="Times New Roman"> Texto Times New Roman </font><br/>
        <font face="Comic Sans MS"> Texto Comic Sans MS </font><br/>
        <font face="Bernard MT Condensed"> Texto Bernard MT Condensed </font><br/>
    </body>

</html>
Y para concluir este tutorial les explicare unas etiquetas mas que son muy buenas para la manipulación del texto.

La etiqueta <b> se utiliza para convertir el texto en negritas:
<b> Texto que queremos en negritas </b>
La etiqueta <i>  vuelve el texto en cursiva:
<i> Texto que queremos en cursiva </i>
La etiqueta <u> subraya el texto:
<u> Texto que queremos subrayar </u>
La etiqueta <s> tacha el texto:
<s> Texto que queremos tachar </s>
La etiqueta <tt> le da al texto la apariencia de ser de maquina de escribir:
<tt> Texto que queremos con apariencia de maquina de escribir </tt>
La etiqueta <big> hace que la fuente del texto se vuelva mas grande:
<big> Texto con fuente mas grande </big>
La etiqueta <small> hace que la fuente del texto se vuelva mas pequeña:
<small> Texto con fuente mas pequeña </small>
A continuación les pongo el el código de la pagina web de ejemplo:
<html>

    <head>
        <title>
            Estilos de letra
        </title>
    </head>

    <body>
        Texto Normal<br/>
        <font face="arial"> Texto Arial </font><br/>
        <font face="verdana"> Texto Verdana </font><br/>
        <font face="calibri"> Texto Calibri </font><br/>
        <font face="Times New Roman"> Texto Times New Roman </font><br/>
        <font face="Comic Sans MS"> Texto Comic Sans MS </font><br/>
        <font face="Bernard MT Condensed"> Texto Bernard MT Condensed </font><br/>

        <br/> Texto Normal <br/>
        <b> Texto Negritas </b><br/>
        <i> Texto Cursiva </i><br/>
        <u> Texto Subrayado </u><br/>
        <s> Texto Tachado </s><br/>
        <tt> Texto Maquina de Escribir </tt><br/>
        <big> Texto con Fuente mas Grande </big><br/>
        <small> Texto con Fuente mas Pequenia </small>
    </body>

</html>
Y este seria el resultado que obtendríamos:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.



Fuente:
https://es.wikibooks.org/wiki/Lenguaje_HTML/Propiedades_de_Fuentes_y_Texto consultada el 09 de Julio del 2015.

No hay comentarios:

Publicar un comentario