Encabezados HTML h1 a h6. Párrafos. Aplicar estilos y etiqueta pre (texto preformateado). Ejemplo (CU00715B)

Resumen: Entrega nº15 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00715B

 

 

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>

<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 <p align=”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>

<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>

<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>

<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.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

FEBRERO - MARZO 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación