La etiqueta h1/h6


Otros elementos HTML muy utilizados dentro del diseño web son los dedicados a indicar títulos, para esto contamos con los elementos:

<h1><h2><h3><h4><h5><h6>

El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente, más adelante podrá ver que uno puede modificar la fuente, tamaño, color etc.)

Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del título con la barra invertida como hemos visto.

A continuación podremos confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.

Cada título aparece siempre en una línea distinta, no importa si lo tipeamos seguido en el archivo, es decir el resultado será igual si hacemos:

<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>

o esto:

<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>

El navegador dispone cada título en una línea nueva.


Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>.

<h1> viene de heading, heading significa título.

La etiqueta p



Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo.

Dentro de un párrafo puede haber saltos de línea <br>.

<html>
<head>
</head>
<body>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <br>Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor </p>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <br>Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor </p>
</body>
</html>

En el ejemplo anterior, tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página, separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos para dar más sentido a nuestro escrito.

Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente de acuerdo al ancho de la ventana.

Para recordar el nombre de esta marca HTML:
<p> viene de paragraph

La etiqueta br

 


Todo el texto que utilizaremos en el cuerpo de la página aparece en por defecto en la misma línea, no importa si cuando tescribimos en la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>.

Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora.

Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa de la misma:

<br> viene de break

HTML: Un lenguaje de marcas


Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html

Durante este curso utilizaremos un programa para escribir la página y visualizaremos en un navegador los resultados que genera nuestro código.

Si observamos cualquier página web podremos ver que todas ellas comienzan con la marca:<html> y finalizan con la marca:</html>
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:


<head>
</head>

Y el cuerpo de la página:


<body>
Cuerpo de la página.
</body>


Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.

Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).

Recomiendo escribir manualmente todas las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo.

Todos los materiales contenidos dentro de esta página web se distribuyen bajo licencia Creative Commons Reconocimiento – NoComercial – CompartirIgual (by-nc-sa)

Para más información consultar aqui