En esta nueva entrega del curso de HTML vamos a ver como poder dar formato al texto de diferentes formas, tanto en colores como en tamaño y otras características mas en HTML. Os voy a ir explicando las etiquetas que vamos a usar y al final del articulo os pondré una pagina web que contendrá todas las etiquetas y podréis copiar el código y ejecutarlo para ver el resultado.
La primera etiqueta que os voy a mostrar es para poner el texto en negrita. Esta etiqueta es “b” y se usa de la siguiente forma:
<b>Texto que queremos que salga en negrita</b>
Como podéis ver hay una etiqueta de apertura y una de cierre, de esta forma acotamos lo que queremos que salga en negrita en el navegador cuando se ejecute la pagina. Hay otra etiqueta que hace lo mismo y que es “strong” pero es mas fácil usar “b”, simplemente por escribir menos :D. La sintaxis de “strong” es así:
<strong>Texto que queremos en negrita</strong>
La siguiente etiqueta que vamos a usar es “i”, que nos servirá para mostrar texto en cursiva o itálica en el navegador. Su sintaxis es así:
<i>Texto en cursiva</i>
La etiqueta “em” hace lo mismo y podemos usarla como “i” de la siguiente forma:
<em>Texto en cursiva</em>
Otra opción que tenemos es poner un texto subrayado, lo cual no es muy aconsejable ya que los enlaces a otras paginas aparecen por defecto subrayados y podemos confundir al usuario que este visitando la pagina, aunque veremos que esto lo podemos cambiar mas adelante con CSS. Os muestro su sintaxis:
<u>Texto subrayado</u>
Si queremos hacer una pagina en la cual aparezcan expresiones matemáticas o científicas tenemos dos etiquetas que nos permitirán poner subindices o supraindices según queramos. Las etiquetas para estos fines son “sub” y “sup”. Os pongo un ejemplo:
6<sup>2</sup>es igual a 36
Esto nos mostrara el numero seis con el numero dos indicando que es su cuadrado y el texto mostrando el resultado. Si queremos usar un subindice para expresiones de química por ejemplo seria así:
C<sub>2</sub>
Lo siguiente que vamos a ver es como cambiar la fuente que queremos usar, el tamaño y el color. Para cambiar estos tres aspectos se usa la etiqueta “font” con tres atributos diferentes:
- face, para cambiar la fuente
- size, para el tamaño
- color, para el color
Cada navegador web, si no indicamos lo contrario tiene una fuente que usa por defecto para mostrar el texto de una pagina web. Si queremos cambiarlo lo haremos mediante el atributo “face” de la etiqueta “font” de la siguiente manera:
<font face="arial, verdana">texto que queremos mostrar</font>
Esto cambiara la fuente que usa el navegador para mostrar el texto delimitado por la etiqueta “font” y le damos dos opciones. La primera opción es “arial” y la segunda “verdana”. Con esto lo que hacemos es que mediante el código HTML le decimos al navegador que primero intente mostrar el texto con la fuente “arial” y si esa fuente no la tiene disponible en el navegador, que lo haga con la siguiente de la lista “verdana”. Si tampoco tiene disponible el navegador dicha fuente mostrara el texto en la que tenga como fuente por defecto. Es importante fijarse en la sintaxis, ya que hay que poner las comillas dobles para englobar todas las fuentes posibles y separa cada una de la siguiente mediante la coma. Si usamos tipos de fuentes comunes no habrá ningún problema, pero es aconsejable poner siempre poner 3 o 4 opciones por si acaso.
El siguiente atributo que vamos a ver es “size” mediante el cual podemos definir el tamaño de la letra que queremos mostrar y que va de 1 a 7, siendo 1 la mas pequeña y 7 la mas grande. Un ejemplo seria así:
<font size="1">Texto en tamaño 1</font>
Para probar los distintos tamaños de letra solo habría que cambiar el numero.
Por ultimo vamos a ver los colores. Para cambiar el color de un texto se hace mediante el atributo “color” y le podemos dar el color de varias formas. La forma mas sencilla es darle el nombre del color en ingles de la siguiente manera:
<font color="blue">Texto en azul</font>
Otra forma que tenemos que poner el color seria cambiando el nombre del color en ingles y dárselo en valor hexadecimal de la siguiente forma:
<font color="#FF2299">Texto coloreado</font>
Para hacerlo de esta forma primero hay que poner el símbolo “#” seguido de números del 0 al 9 y letras de la a a la f, con todas sus posibles combinaciones. Estos valores en hexadecimal se pueden obtener de varias formas como en el Photoshop o Gimp, o en Internet.
Con esto ya podemos dar formato al texto que queramos mostrar en nuestra pagina web de varias formas, lógicamente podemos combinar todas las etiquetas de la forma que queramos para conseguir muy diferentes resultados. Ahora os voy a dejar una pagina de ejemplo que podéis copiar a vuestro ordenador y ejecutarla para ver los resultados y que podáis jugar con los valores:
<html>
<head></head>
<body>
<b>Texto que queremos que salga en negrita</b><br>
<strong>Este texto tambien aparece en negrita</strong><br>
<i>Texto en cursiva</i><br>
<em>Texto tambien en cursiva</em><br>
<u>Texto subrayado</u><br>
6<sup>2</sup>es igual a 36<br>
C<sub>2</sub><br>
<font face="arial, verdana">texto que queremos mostrar</font><br>
<font size="1">Texto en tamaño 1</font><br>
<font color="blue">Texto en azul</font><br>
<font color="#FF2299">Texto coloreado</font>
</body>
</html>
En esta pagina he puesto todas las etiquetas he he usado en el articulo para que veáis el resultado, si queréis ver como combinar algunas de ellas y ver los resultados os animo a ver el vídeo que os pongo a continuación y veréis como lo hago, es mas fácil verlo y explicarlo en vídeo. Aquí os dejo el vídeo:
