ENCABEZADOS <h1>…<h6>, PÁRRAFOS <p> Y ETIQUETA <pre> EN HTML.
Continuamos viendo una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicaremos las que han venido siendo más utilizadas.
ENCABEZADOS
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.
A continuación mostramos un código ejemplo de los seis diferentes encabezados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title>
</head>
<body>
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
</body>
</html>
|
Podemos ver el resultado obtenido en la siguiente imagen.
Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del siguiente por un salto de línea sin que nosotros en el código hayamos escrito nada ya que los encabezados generan por sí solos un salto de línea.
Ten en cuenta que en una página podrías poner un texto de tamaño grande indicándolo de otra manera, por ejemplo modificando el tamaño de fuente sin usar encabezado. ¿Por qué usar entonces encabezados? Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como google, yahoo o bing cuando encuentran una etiqueta <h1> le dan más relevancia que a un texto del mismo tamaño que no sea un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc. para obtener un mejor posicionamiento de nuestras páginas web en los buscadores. Es decir, usar h1 no sólo supone agrandar el tamaño de la letra, también supone indicar que el texto incluido entre esas etiquetas tiene una importancia superior al resto de texto y esto es valorado por los buscadores. Por supuesto, de nada servirá que intentes incluir todo el texto de tu página web dentro de etiquetas h porque los buscadores no son tontos: detectarán ese “truco” e incluso te penalizarán haciendo que no aparezca tu página web en las búsquedas. Por tanto los encabezados deben usarse con moderación y equilibrio.
PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS
Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por abajo.
Un atributo muy usado en el pasado (hoy deprecated) fue align, que servía para establecer la alineación del texto dentro del párrafo.
ATRIBUTO
|
USO
|
OBSERVACIONES
|
align
|
Especifica la alineación del texto dentro del párrafo.
left --> Alineación del texto a la izquierda
right --> Alineación del texto a la derecha
center --> Alineación del texto centrada
justify --> Alineación del texto justificada
|
Atributo obsoleto (deprecated) en su uso en la forma <palign=”center”>Texto<p>. En lugar de esta sintaxis, usar CSS como se muestra a continuación.
Ejemplo de uso correcto empleando técnica CSS:
<p style="text-align: center;">Texto centrado</p>
|
Como comprobarás, hemos introducido el uso de estilos. Aunque en este curso no vamos a hablar de CSS más que superficialmente, conviene que te vayas familiarizando con esta técnica. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un contenedor). En nuestro caso, estamos diciendo que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center). Un estilo se puede aplicar de distintas maneras. Una forma de hacerlo es escribiendo en línea (a continuación de la etiqueta) con la sintaxis style = “característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº…;”.
Por ejemplo: <p style = “text-align: center; font-size: 12px; color:blue;”> Este texto estará centrado, tendrá un tamaño de fuente de 12 pixeles y color azul cuando se vea en el navegador</p>
Como vemos para definir un estilo escribimos style = “un nombre de atributo, dos puntos, el valor del atributo y terminación en punto y coma. Otros atributos se pueden especificar de la misma manera (tantos como queramos) hasta terminar con un punto y coma y las comillas de cierre”.
Iremos introduciendo cuestiones básicas relacionadas con estilos poco a poco y a medida que las vayamos necesitando. Cuando termines este curso te recomendamos seguir el curso CSS desde cero de aprenderaprogramar.com, pues CSS es una técnica imprescindible hoy día para desarrollos web.
EJEMPLO
Escribe este código en un editor de textos como bloc de notas o Notepad++. Guárdalo como archivo con extensión html y a continuación visualízalo en tu navegador comprobando que obtienes el resultado esperado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de párrafos - aprenderaprogramar.com</title>
</head>
<body>
<p style="text-align: center;">Este texto se alineará al centro</p>
<p style="text-align: right;">Este texto se alineará a la derecha</p>
<p style="text-align: left;">Este texto se alineará a la izquierda</p>
</body>
</html>
|
El texto dentro de una etiqueta pre normalmente se muestra con un tipo de fuente especial (Courier o similar) de ancho fijo, lo que le da un aspecto de “texto escrito con máquina de escribir”.
LA ETIQUETA <PRE>
La etiqueta <pre> se denomina de “texto preformateado” y sirve para que el navegador interprete el texto escrito tal y como está, respetando los saltos de línea, espacios, etc. indicados.
Escribe este código, guárdalo como archivo HTML y comprueba sus resultados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
Escribo esta línea así
Dejo dos líneas de separación
y escribo tres más.
</body>
</html>
|
Sin poner ninguna etiqueta, el navegador respondería así:
En ausencia de la etiqueta <pre> el navegador no toma en consideración que en el código fuente existan saltos de línea, espacios, etc. en el texto. En cambio utilizando la etiqueta <pre> y cerrándola con su correspondiente etiqueta el navegador sí respetará los saltos de línea, espacios, tabuladores.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title>
</head>
<body>
<pre>
Escribo esta línea así
Dejo dos líneas de separación
y escribo tres más.
</pre>
</body>
</html>
|
Como podremos observar al comprobar los resultados, con esta etiqueta se muestra el texto tal y como lo hayamos escrito respetando saltos de línea, espacios, tabuladores, etc.
La etiqueta <pre> interesa usarla en determinadas ocasiones, pero es poco frecuente hacer uso de ella. ¿Por qué? Porque normalmente se puede dar el formato adecuado a los textos usando técnicas CSS, que resultan más fáciles y cómodas de usar. No obstante, es una etiqueta que debemos conocer.
EJERCICIO
Crea una página web que conste de lo siguiente: un encabezado h1 que ponga “Las fotos de mi viaje”. A continuación un párrafo explicando un viaje. A continuación un encabezado h2 que indique “Fotos de la primera parte del viaje” y a continuación 2 fotos. Seguidamente un encabezado h2 que indique “Fotos de la segunda parte del viaje” y a continuación 2 fotos. Finalmente usando las etiquetas pre haz que aparezca este texto en la parte inferior usando espacios y tabuladores:
Los viajes …son libertad
… son amistad
… son crecimiento personal
¡No desaproveches una oportunidad!
|
Guarda el documento con un nombre como ejemploCU00715B.html y comprueba que se visualiza correctamente.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
