Html practico - Títulos en un documento HTML 5

Para entender mejor lo que he comentado en la tema Introduccion en Html os propongo a construir una pagina web simple de Html5.

Para crear un archivo Html, abrimos el bloc de notas y colocamos el siguiente codigo:

<!DOCTYPE HTML>
<html>
<head>

<title>Mi primera pagina web</title>
</head>

<body>
</body>
</html>

Guardamos el archivo con el nombre "index.html" y lo visualizamos en el navegador, (doble click en el archivo html que acabamos de crear), si todo es corecto el navegador muestra una pagina en blanco con una sola diferencia. El titulo de la pagina "Mi primera pagina web" que lo hemos colocado entre las directivas <title> aparece en barra de titulo del navegador como en este ejemplo


Títulos en un documento HTML 5

Vamos a empezar a añadir contenido a nuestra pagina. Todas la paginas web del mundo tiene que tener un titulo. Los titulos son muy importantes a la hora de indexación de las paginas web por navegadores. Tiene que resumir claramente el contenido que engloba. Para colocar un titulo en nuestra pagina web, utilizamos las directiva <h1> ... </h1>

Abrimos el documento html que lo hemos creado con el bloc de notas (click derecha sobre el fichero html "PaginaWeb.html", seleccionar la opcion abrir con... bloc de notas) y justo despues de la directiva <body> escribimos esta linea de codigo:

<h1>Aprender Html></h1>

Si todo es corecto el codigo tiene que estar asi:

<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera pagina web</title>
</head>

<body>

<h1>Aprender Html</h1>

</body>
</html>

Guardamos el archivo y lo visualizamos en el navegador. El titulo aparece en negrita con letras de tamaño grande como en este ejemplo.

Me van a decir, pero el titulo no esta en la mitad de la pagina o ¿como cambiarle el color? Ahora tenemos un problema. Con Html5, un titulo se puede formatear utilizando solamente CSS. Sin embargo, en las versiones anteriores de Html, para alinear un titulo se utilizaba el atributo "align". Vamos a ver como se puede centrar un titulo utilizando el atributo align.

Abrimos el documento index.html y en linea de codigo <h1>Aprender Html</h1> añadimos el atributo "align" con el valor "center"

<h1 align="center">Aprender Html</h1>

Si todo es corecto el codigo tiene que estar asi:

<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera pagina web</title>
</head>

<body>

<h1 align="center">Aprender Html</h1>

</body>
</html>

Guardamos el archivo y lo visualizamos en el navegador. Ahora el titulo aparece centrado en la pagina como en este ejemplo.

Voy a mencionar otra vez que esta tecnica esta desaprobada en la version de Html5 y debe utiliza CSS. Si quieren seguir utilizando los atributos de formato, lo pueden hacer, pero hay que cambiar la declaracion del documento html (<!DOCTYPE>) por que su documento html, ya no es un documento Html5.

Si hablo tanto de CSS mostrare como se consigue centrar un titulo con CSS:

<h1 style="text-align:center;">Aprender Html</h1>

Si todo es corecto el codigo tiene que estar asi:

<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera pagina web</title>
</head>

<body>

<h1 style="text-align:center;">Aprender Html</h1>

</body>
</html>

En lugar del atributo align aparece otro atributo HTML que es style=" ". El atributo style con la propriedad align dice al navegador que centre el titulo en la pagina.

CSS es muy útil para separar el contenido del diseño, siendo esto muy útil cuando se quiere cambiar un aspecto del diseño de un sitio web, ya que sin hojas de estilo se tendría que cambiar página a página dicho aspecto. Y sin embargo, cuando se han definido hojas de estilo, se puede cambiar dicho aspecto modificando unicamente la hoja de estilo. Con lo que logramos además de un ahorro de tiempo una mayor uniformidad en el diseño.

Ademas, con la hoja de estilo se puede lograr con una sóla línea de código que todos los encabezamientos <h1> tengan un color o un tamaño determinado. O sólo un <h1> determinado. Pero sino usamos hojas de estilo, se tendría que definir cada vez que se use ese <h1>. Del mismo modo, si ese cambio que realizamos pasado un tiempo no nos gusta y lo queremos de otra forma. Con cambiar esa línea se aplicará en cascada a todos los documentos, mientras que de la otra manera implicaría un trabajo bastante más complicado.

Guarda el archivo y visualizalo en el navegador. El titulo aparece centrado igual como antes. Tengo que mencionar que el estilo que he aplicado es un estilo CSS en linea. Hay diferentes metodos de aplicar estilos CSS, pero esta tema no es el objectivo de este tutorial.


La directiva que introducen los titulos en una pagina es de varias niveles, empieza con <h1> sigue <h2>, <h3>, <h4>, <h5>, y acaba con <h6>. El titulo <h1> tiene la letra mas grande y <h6> la mas pequeña. Vamos a presentar otro titulo, esta vez de nivel 2.

Abrimos el documento html que lo hemos guardado en el editor (click derecha sobre el fichero html "PaginaWeb.html", seleccionar la opcion abrir con... bloc de notas), borramos el atributo "style" que lo hemos pusiste en la directiva <h1> y añadimos otra linea de codigo despues de titulo.

<h2>El maravilloso mundo de Html5</h2>

Si todo es corecto el codigo tiene que estar asi:

<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera pagina web</title>
</head>

<body>

<h1>Aprender Html</h1>
<h2>El maravilloso mundo de Html5</h2>

</body>
</html>

Guarda el archivo y visualizalo en el navegador. Aparece un segundo titulo de nivel dos alineado a la izquierda como en este ejemplo.