En este capítulo del tutorial vamos a comentar algunos ‘tags’ básicos que puedes utilizar en tus páginas web:
, , … : Cabeceras
: Cabeceras
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)
hará que la letra aparezca un poco más pequeña que
hará que la letra aparezca un poco más pequeña que
así sucesivamente hasta llegar a
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
.
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
.
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
, y así sucesivamente.
Es recomendable utilizar estos encabezados en orden, es decir, si en nuestra página utilizamos primero
, luego seguimos con , , etc… en orden
, etc… en orden
No es recomendable ‘saltar’ encabezados, por ejemplo:
, luego , luego , etc. Ya que así, la página puede parecer menos estructurada.
, etc. Ya que así, la página puede parecer menos estructurada.
Es mejor acostumbrarse a cerrar los elementos
, , etc. con
, , etc. para evitar efectos no deseados. Fíjate en el siguiente ejemplo:
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
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 Esto está escrito con H6 : Separador de párrafos Fíjate en el siguiente documento html:
Me gustan las cerezas
Me gustan las manzanas
No me gustan las chirimoyas
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
, que define un párrafo. Si modificamos el documento HTML anterior por este otro:
Me gustan las cerezas
Me gustan las manzanas
No me gustan las chirimoyas
el resultado en el navegador sería:
Me gustan las cerezas
Me gustan las manzanas
No me gustan las chirimoyas
Fíjate que cada
define un párrafo, así que cada nuevo
hace que el navegador comience en una línea nueva.
: 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:
Esto es un ejemplo de texto en negrilla
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 , ya que de lo contrario, todo el texto que fuera escrito detrás aparecería también resaltado.
: Activa el estilo cursiva
Este elemento nos va a servir para activar la letra cursiva (inclinada). Un ejemplo de su uso es el siguiente:
Esto es un ejemplo de texto en cursiva
En el navegador, el texto aparecería de esta forma:
Esto es un ejemplo de texto en cursiva
: Activa el estilo subrayado
Este elemento activa y desactiva el texto subrayado. Un ejemplo de su uso en un documento HTML es este:
Esto es un ejemplo de texto subrayado
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:
Por ejemplo, el siguiente código:
Esto está alineado a la izquierda
Esto está centrado
Esto está alineado a la derecha
Fíjate como cada párrafo aparece delimitado por
y
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
para que las frases aparezcan en líneas diferentes.
: Salto de línea
es una alternativa a
, ya que también es capaz de separar dos párrafos en líneas diferentes. Por ejemplo:
Esto es una línea
y esto es otra línea
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
. Si no hubiéramos incluido
, 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.
