Tags en Html - Tutorial TerritorioPc.com

Tags

En este capítulo del tutorial vamos a comentar algunos 'tags' básicos que puedes utilizar en tus páginas web:

<H1>, <H2>, ... <H6>: Cabeceras

<H1> hará que lo escrito detrás aparezca con un tamaño de letra grande. Se utilizaría para titulares o cabeceras muy grandes (quizá demasiado, no es aconsejabe abusar de él)

<H2> hará que la letra aparezca un poco más pequeña que <H1>

<H3> hará que la letra aparezca un poco más pequeña que <H2>

así sucesivamente hasta llegar a <H6> que es el tamaño de letra más pequeño

Supongamos que estamos creando una página dedicada a las razas de perros. El título de la página podría ser : 'Razas de perros'. Este título, que sería el principal podríamos escribirlo utilizando <H1>.

Luego tendríamos dividida la página en distintos apartados, cada uno con una raza de perro distinta (San Bernardo, Cocker, etc.). Cada uno de estos apartados de la página, debería aparecer un poco más pequeño que el título, por lo tanto utilizaríamos <H2>.

Si dentro de cada apartado de razas incluimos sub-apartados (por ejemplo: tamaño de la raza, alimentación, etc.), los títulos deberían aparecer algo más pequeños, por lo que utilizaríamos <H3>, y así sucesivamente.

Es recomendable utilizar estos encabezados en orden, es decir, si en nuestra página utilizamos primero <H1>, luego seguimos con <H2>, <H3>, etc... en orden

No es recomendable 'saltar' encabezados, por ejemplo: <H1>, luego <H3>, luego <H5>, etc. Ya que así, la página puede parecer menos estructurada.

Es mejor acostumbrarse a cerrar los elementos <H1>, <H2>, etc. con </H1>, </H2>, etc. para evitar efectos no deseados. Fíjate en el siguiente ejemplo:

<body>

<H1> Esto está escrito con H1 </H1>

<H2> Esto está escrito con H2 </H2>

<H3> Esto está escrito con H3 </H3>

<H4> Esto está escrito con H4 </H4>

<H5> Esto está escrito con H5 </H5>

<H6> Esto está escrito con H6 </H6>

</body>

daría este resultado:

Esto está escrito con H1

Esto está escrito con H2

Esto está escrito con H3

Esto está escrito con H4

Esto está escrito con<H5

Esto está escrito con H6

<p> </p> : Separador de párrafos

Fíjate en el siguiente documento html:

<html>

<head>

<title> Ejemplo </title>

<head

<body>

Me gustan las cerezas

Me gustan las manzanas

No me gustan las chirimoyas

</body>

Si vieramos el resultado en el navegador, las tres frases aparecerían así:

Me gustan las cerezas Me gustan las manzanas No me gustan las chirimoyas

A pesar de haberlas escrito en líneas diferentes, las frases aparecen seguidas porque en un documento HTML, se considera por defecto que todo el texto pertenece al mismo párrafo. Podríamos escribir varias páginas de texto y luego aparecerían todas las frases seguidas unas detrás de otras.

Para solucionar esto tenemos varias alternativas. Una de ellas es utilizar el elemento <p>, que define un párrafo. Si modificamos el documento HTML anterior por este otro:

<html>

<head>

<title> Ejemplo </title>

<head>

<body>

<p>Me gustan las cerezas</p>

<p>Me gustan las manzanas</p>

<p>No me gustan las chirimoyas</p>

</body>

el resultado en el navegador sería:

Me gustan las cerezas

Me gustan las manzanas

No me gustan las chirimoyas

Fíjate que cada <p> </p> define un párrafo, así que cada nuevo <p> hace que el navegador comience en una línea nueva.

<b> </b>: Activa el estilo negrilla

Este va a ser un elemento que utilizaremos con bastante frecuencia. Su función es la de activar el efecto negrilla

Un ejemplo de cómo utilizarlo dentro de un documento HTML sería el siguiente:

<b> Esto es un ejemplo de texto en negrilla </b>

El texto escrito aparecería en el navegador de esta forma:

Esto es un ejemplo de texto en negrilla

No debemos olvidar cerrar la negrilla con </b>, ya que de lo contrario, todo el texto que fuera escrito detrás aparecería también resaltado.

<i> </i>: Activa el estilo cursiva

Este elemento nos va a servir para activar la letra cursiva (inclinada). Un ejemplo de su uso es el siguiente:

<i> Esto es un ejemplo de texto en cursiva </i>

En el navegador, el texto aparecería de esta forma:

Esto es un ejemplo de texto en cursiva

<u> </u>: Activa el estilo subrayado

Este elemento activa y desactiva el texto subrayado. Un ejemplo de su uso en un documento HTML es este:

<u> Esto es un ejemplo de texto subrayado </u>

En el navegador aparecería de esta forma:

Esto es un ejemplo de texto subrayado

Alineación del texto

En un navegador se puede alinear el texto a la izquierda, al centro o a la derecha. Para ello se utilizan las etiquetas:

<left> alinea el texto a la izquierda

<center> alinea el texto al centro

<right> alinea el texto a la derecha

Por ejemplo, el siguiente código:

<body>

<left> <p> Esto está alineado a la izquierda </p> </left>

<center> <p> Esto está centrado </p> </center>

<right> <p> Esto está alineado a la derecha </p> </right>

Fíjate como cada párrafo aparece delimitado por <p> y </p> para que sean considerados como párrafos aparte. El resultado en el navegador sería este:

Esto está alineado a la izquierda

Esto está centrado

Esto está alineado a la derecha

Fíjate que a cada línea de texto se le ha añadido un elemento <p> </p> para que las frases aparezcan en líneas diferentes.

<BR>: Salto de línea

<BR> es una alternativa a <p> </p>, ya que también es capaz de separar dos párrafos en líneas diferentes. Por ejemplo:

<body>

Esto es una línea

<BR> y esto es otra línea

</body>

El ejemplo anterior daría como resultado:

Esto es una línea

y esto es otra línea

Es decir, la frase está separada en dos por <BR>. Si no hubiéramos incluido <BR>, el ejemplo anterior habría quedado de esta forma:

Esto es una línea y esto es otra línea

ya que, si no indicamos lo contario, el texto que aparece en un documento Html aparece todo seguido.

:�dice Tutorial de Html:

Introducción