Hemos visto como ejemplo algunas etiquetas que permiten dar formato a nuestro texto. Ahora veremos con más detalle las más utilizadas y ejemplificaremos algunas de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, cursiva (itálica) …
Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.
Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamos de línea.
Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.
Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal.
Para introducir un texto alineado a la izquierda escribiríamos:
<p align="left">Texto alineado a la izquierda</p>
Para alinear al centro:
<p align="center">Texto alineado al centro</p>
Para justificar a la derecha:
<p align="right">Texto alineado a la derecha</p>
En cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left (alinear a la izquierda)
El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual.
Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.
Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.
Así, el código:
<p align="left">Parrafo1</p> <p align="left"> Parrafo3</p> <p align="left"> Parrafo2</p>
es equivalente a:
<div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div>
Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado. De esta forma aligeramos un poco el código consiguiendo que la página pese menos y sea cargado más rápido por el navegador. La velocidad con la que carga una página es muy importante, a nadie nos gusta esperar para ver el contenido de una web, sobre todo si llegamos a ella desde un buscador. Solemos hacer click, si tarda mas de 5 segundos solemos pinchar en otra. Hemos perdido un visitante.
Ejemplo práctico:
Para practicar realizar el siguiente ejercicio. Construir una página que tenga, por este orden:
2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda
Headings, encabezados
Nos definen el tamaño de un título o cabecera que podemos utilizar
<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.
<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio. No es bueno abusar de los encabezados, en su justa medida es mas que suficiente.
Ejemplo de como colocar los encabezados
<h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6>
Otras etiquetas
Dejo por aquí algunos de las etiquetas más utilizadas, para ver su funcionamiento solamente tienes que probar
<b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itálica</i> <small>Texto pequeño</small> <strong>Texto fuerte</strong> <sub>Texto subíndice</sub> <sup>Texto superíndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>
1 Comentario