(Inicio) (Artículos) (Charlas) (Documentos) (Programas) (Chorradas) (Otros)

Primeras etiquetas HTML
 Ficha técnica
Autor: Esteban Manchado Velázquez
Fecha: Alrededor de 1998
Tema: Programación web

Después de la introducción al HTML, donde se vio por encima qué es HTML y su funcionamiento general, pasamos a ver algunas etiquetas importantes.

En la anterior entrega vimos que la etiqueta «HTML» tenía que rodear a todo el texto. Realmente, necesitamos también distinguir entre la información general del documento (que no es necesario especificar, pero sí conveniente para páginas importantes), con la etiqueta «head», y el contenido en sí, con «body». Dentro de la etiqueta «head» incluimos el título y otra información general sobre la página, como el autor, las palabras relacionadas con el documento (para que, a la hora de meter la página en algún buscador, éste sepa cómo indizarla), etc. La estructura general de un documento es la siguiente:

<HTML>
<head>
<title>T&iacute;tulo de mi p&aacute;gina</title>
<meta name="author" content="Esteban Manchado Vel&aacute;zquez">
<meta name="keywords" content="ejemplo, HTML, curso
b&aacute;sico">
</head>

<body>
	Este es el contenido del documento. Puedo escribir lo que
quiera, en <b>negrita</b>, <em>cursiva</em>, o
<big>letra m&aacute;s grande</big>.

	Si escribo esto, seguir&aacute; siendo el mismo
p&aacute;rrafo, aunque haya una l&iacute;nea en blanco.

	<p>En cambio, si escribo una etiqueta de p&aacute;rrafo
nuevo, se separar&aacute;.

	<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Si lo que
quiero es un p&aacute;rrafo como en castellano, tendr&eacute; que
poner un salto de l&iacute;a y cinco espacios en blanco
&laquo;protegidos&raquo;.
</body>
</HTML>

Antes de seguir, hay algo importante que todavía no hemos dejado claro: los navegadores no distinguen entre mayúsculas y minúsculas en los nombres de las etiquetas (es decir, podemos escribir tanto «b» como «B», y, de hecho, mucha gente escribe todas las etiquetas en mayúsculas, para que resalten). No así con las entidades HTML, que tienen nombres «fijos». Esto es lógico, porque las vocales tildadas, mayúsculas y minúsculas, se distinguen exactamente en eso: la á se escribe «&aacute;», y la Á «&Aacute;».

En el ejemplo anterior pudimos ver varias etiquetas, como «b», «em» o «big». Significan respectivamente negrita, enfatizado (normalmente los navegadores utilizan cursiva para esto) y letra un poco más grande. El resultado de este código sería (además, el navegador pondría «Título de mi página» en la barra de título, seguramente):

Este es el contenido del documento. Puedo escribir lo que quiera, en negrita, cursiva, o letra más grande. Si escribo esto, seguirá siendo el mismo párrafo, aunque haya una línea en blanco.

En cambio, si escribo una etiqueta de párrafo nuevo, se separará.
     Si lo que quiero es un párrafo como en castellano, tendré que poner un salto de lía y cinco espacios en blanco «protegidos».

Es muy común poner títulos, secciones, subsecciones, etc. a nuestros documentos. Para ello, podríamos especificar letras más grandes, negrita y cursiva (por ejemplo), o podríamos especificar que el texto en cuestión es un título. Ésto es mucho más recomendable por dos razones:

  1. Escribimos menos y el código queda más claro.
  2. Utilizamos estilos lógicos.

Por lo general es conveniente utilizar estilos lógicos en vez de físicos, es decir, especificar qué queremos (texto enfatizado, texto muy enfatizado, un título, etc.), y no cómo lo queremos (letra de 24 puntos, negrita, cursiva, etc.). La razón es que, cuanto más sepa el navegador qué queremos, mejor podrá presentar los contenidos al usuario. Esto es especialmente cierto cuando el navegador, o cualquier otro programa, hace un índice de la página (podrá sólo si tiene información sobre cuáles son los títulos), o cuando el navegador no es «muy normal» (es sólo de texto, o se va a presentar en un dispositivo que no sea una pantalla de ordenador).

Como íbamos diciendo, los títulos podemos representarlos con etiquetas especiales. Estas etiquetas son seis, y se llaman «h1», «h2», «h3», «h4», «h5», «h6». Los números representan la «profundidad», es decir, que «h1» puede ser un capítulo, «h2» una sección, «h3» una subsección, «h4» una subsubsección, «h5» un párrafo y «h6» un subpárrafo. Obviamente, estas marcas rodean al nombre del capítulo, sección, o lo que sea apropiado, y lo que esté rodeado por «h1» se representará (supuestamente) con un tipo de letra mayor que algo marcado como «h2» o «h3».

<HTML>
<head>
<title>Ejemplo de cabeceras</title>
<meta name="author" content="Esteban Manchado Vel&aacute;zquez">
<meta name="keywords" content="ejemplo, HTML, curso
b&aacute;sico, cabeceras, h1, h2, h3, h4, h5, h6">
</head>

<body>
	<h1>Bienvenido a mi p&aacute;gina</h1>

	&Eacute;sta es mi p&aacute;gina personal: aqu&iacute;
podr&aacute;s encontrar de todo ...

	<h2>Secci&oacute;n de m&uacute;sica</h2>

	La secci&oacute;n de m&uacute;sica es la que m&aacute;s
enlaces tiene...

	<h3>Beck Hansen</h3>

	Beck (Hansen) es uno de mis artistas favoritos...

	<h2>Secci&oacute;n de inform&aacute;tica</h2>

	Aqu&iacute; tengo algunos tutoriales, que nadie entiende...
</body>
</HTML>

El resultado de este código sería algo como:

Bienvenido a mi página

Ésta es mi página personal: aquí podrás encontrar de todo ...

Sección de música

La sección de música es la que más enlaces tiene...

Beck Hansen

Beck (Hansen) es uno de mis artistas favoritos...

Sección de informática

Aquí tengo algunos tutoriales, que nadie entiende...

Y aquí lo dejamos, animando a los lectores a practicar el HTML que han aprendido hasta ahora.


(Inicio) (Artículos) (Charlas) (Documentos) (Programas) (Chorradas) (Otros)