Usarás las etiquetas HTML básicas en una página web todo el tiempo, ya que hacen el 90 por ciento del formato que puedes ver cuando visitas una página Web. Una vez que las conoces, tienes ganado buena parte del terreno para convertirte en un buen diseñador Web. Según vayas conociendo estas etiquetas, las puedes probar del mismo modo que hemos explicado en la anterior lección, usando nuestro archivo prueba.html.
Todas las etiquetas que aprendas, pueden insertarse en este archivo para ver como quedan. Recuerda poner toda la información que quieres que se muestre, entre las etiquetas. Experimenta añadiendo nuevas etiquetas HTML y viendo los resultados. También tenemos la opción de utilizar un editor HTML, que tiene funciones que facilitan nuestro trabajo. Si buscas en Google, encontrarás varios que son bastante buenos, y muchos de forma gratuita.
Empecemos por las etiquetas de texto. Como seguramente sabrás, existen varias maneras de mostrar el texto que escribimos en un documento cualquiera (Word, Excel, etc.), y son negrita, cursiva y subrayado. Las etiquetas que tenemos que usar para dar este formato al contenido de nuestra página Web es el siguiente:
- <b>texto</b> – Esto pondrá nuestro testo en negrita.
- <i>texto</i> – Esto pondrá nuestro texto en cursiva.
- <u>texto</u> – Esto pondrá nuestro texto en subrayado.
Aunque el texto que has tecleado pueda contener retornos de carro, espacios extra y otros cambios normales en nuestra escritura, el navegador no los verá. Tendrás que usar etiquetas para poder crear algunos espacios en blanco en tus documentos HTML.
- <br> – Esta etiqueta crea una pauta entre una línea y otra. Puedes usar varias de estas etiquetas todas juntas para crear espacios en blanco.
- <p> – Crea un espacio extra entre dos líneas de texto. Si pones esta etiqueta en una línea, marcará una pauta y creará un espacio adicional.
- <hr> – Creará una línea horizontal.
Al igual que se puede dar el formato en un texto, también las etiquetas nos servirán para cambiar su tamaño, fuente y color. Lo podemos hacer con las siguientes líneas:
- <font color=”blue”>texto azul</font> Esto nos dará un testo azul.
- <font color=”green”>texto azul</font> Esto nos dará un testo verde.
Muchos de los colores estándar funcionarán. Puedes intentar todos los colores que se están disponibles, los cuales también se muestran con valores hexadecimales en un formato parecido a este: <font color=”#0066FF”>. En Internet puedes encontrar un listado de códigos de colores hexadecimales para practicar. Si lo que quieres es asignar un color específico a todo el texto de la página Web, lo puedes hacer incluir la etiqueta text=”color” dentro de la etiqueta <body>. De todos modos, aunque cambies el color del texto de toda la página, todavía podrás cambiar el color de porciones de texto a lo largo de la página, usando las etiquetas que hemos visto.
Para cambiar la fuente de un texto, podemos hacerlo de la siguiente manera:
- <font face=”arial”>texto</font> Le dará una fuente arial.
- <font face=”Courier”>texto</font> Le dará una fuente Courier.
Si la fuente que has seleccionado no está disponible en el ordenador, el tipo de fuente cogerá el que tenga el navegador por defecto, normalmente Courier o Times New Roman, por lo que debemos asegurarnos de que existe en nuestro equipo.
Para cambiar el tamaño de nuestro texto, tenemos que usar las etiquetas siguientes:
- <font size=”8”>texto</font> Con esta etiqueta, le estaremos dando un valor de “8” a nuestro texto, y podemos variarlo de número según el tamaño que queramos. Por defecto, el tamaño en muchos navegadores es de “3”. También se pueden usar las etiquetas <small></small> y <big></big> para hacer el texto más grande o más pequeño.
También tenemos unas etiquetas que varían el tamaño que son las de cabecera. Estas etiquetas se utilizan mucho para dar el encabezado de una noticia o como complemento del titular. Hay tres tipos bien definidos:
- <h1>cabecera</h1>
- <h2>cabecera</h2>
- <h3>cabecera</h3>
En la siguiente sección veremos como crear enlaces a otras páginas Web y a las nuestras propias. Haz clic en el enlace para verlo:
Como añadir enlaces manualmente a nuestras páginas Web
