APLICACION DE HTML

Empecemos con algo sencillo. Que te parece una página que diga: “¡Hurra! Esta es mi primera página web.” Sigue leyendo y verás qué sencillo es.

HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.

Lo primero que tienes que hacer es decirle al navegador que le “hablarás” usando el lenguaje HTML. Esto se consigue con la etiqueta <html>(sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe “<html>” en la primera línea del documento creado con el Bloc de notas.

Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe “</html>” un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.

Lo siguiente que necesita el documento es una “cabecera”, que proporcionará información relativa a este mismo documento, y un “cuerpo” donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera (es decir, las etiquetas <head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body> y </body>).

El documento debería presentar ahora este aspecto:

	
	<html>

	  <head>
	  </head>

	  <body>
	  </body>

	</html>
	

Presta atención a cómo hemos estructurado las etiquetas introduciendo nuevas líneas (usando la tecla Enter) al igual que hemos usado sangrado (utilizando la tecla Tab). En principio, da igual cómo estructures el documento HTML; sin embargo, para que te sirva de ayuda tanto para ti y como para otros a la hora de interpretar el código fuente, y con el fin tener una buena visión de conjunto, es recomendable estructurar el código HTML de una forma nítida, con saltos de línea y sangrados, como en el ejemplo anterior.

Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soñabas cuando empezaste este tutorial, pero, con todo y con eso, ya es algo que parece un sitio web. El código que acabas de crear te servirá como plantilla básica para todos tus futuros documentos HTML.

Hasta ahora todo va bien, pero ¿cómo añado contenido a mi sitio web?

Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí..

Por ejemplo, si quieres poner a la página un título que aparecerá en la barra de títulos del navegador, deberías hacerlo en la sección del encabezado, es decir dentro de las etiquetas “head”. El elemento que se usa para el título es title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:

<title>Mi primer sitio web</title>

Ten en cuenta que este título no aparecerá en la página en sí. Cualquier cosa que quieras que aparezca en la página es contenido y debe, por la tanto, añadirse entre las etiquetas <body> y </body>.

Como lo prometido es deuda, vamos a conseguir que la página nos diga: “¡Hurra! Este es mi primer sitio web.” Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la sección del cuerpo. Así pues, en la sección del cuerpo, escribe lo siguiente:

<p>¡Hurra! Este es mi primer sitio web.</p>

La p de <p> es la abreviatura de “párrafo”, que es exactamente lo que es: un párrafo de texto.

El documento HTML debería tener ahora este aspecto:

					
	<html>

	  <head>
	  <title>Mi primer sitio web</title>
	  </head>

	  <body>
	  <p>¡Hurra! Este es mi sitio web.</p>
	  </body>

	</html>
					

¡Hecho! ¡Acabas de crear ahora mismo tu primer sitio web de verdad!

Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:

  • En el Bloc de notas elige “Guardar como…” del menú “Archivo” en el menú principal.
  • Elige “Todos los archivos” en la caja “Tipo”. Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.
  • Ahora guarda el documento como “pagina1.htm” (la terminación “.htm” indica que es un documento HTML; con la terminación “.html” se consigue el mismo resultado. Personalmente, siempre uso “.htm”; tú puedes elegir cualquiera de las dos extensiones, según prefieras). Da igual dónde guardes el documento en el disco duro, siempre que recuerdes dónde lo hiciste para poder recuperarlo con posterioridad.

Guardar documento

 

¿Qué has aprendido hasta ahora?

Empieza siempre con la plantilla básica que creamos en la lección anterior:

	
	<html>
	  <head>
	  <title></title>
	  </head>

	  <body>
	  </body>

	</html>
	

En la sección del encabezado, incluye siempre un título: <title> El título de la página </title>. Fíjate cómo aparece el título en la esquina superior izquierda del navegador:

Título que aparece en el navegador

El título es especialmente importante porque los motores de búsqueda (por ejemplo, Google) lo utilizan para indexar tu sitio y porque aparece reflejado en los resultados de la búsqueda.

Título que aparece en Google

En la sección del cuerpo, se escribe el contenido propiamente dicho de la página. Ya conoces algunos de los elementos más importantes:

	
	<p>Se usa para escribir párrafos</p>
	<em>Muestra el texto enfatizado</em>
	<h1>Encabezado de nivel 1</h1>
	<h2>Encabezado de nivel 2</h2>
	<h3>Encabezado de nivel 3</h3> 
	

Recuerda: el único modo de aprender HTML es utilizando el método de la prueba y el error. Pero no te preocupes, en modo alguno vas a destrozar tu ordenador o Internet. Así que sigue experimentando; es el mejor modo de adquirir experiencia.

¿Y esto qué se supone que significa?

Nadie se convierte en un buen desarrollador web sólo con aprender los ejemplos de este tutorial. Lo que este tutorial te proporciona son sencillamente unos conocimientos básicos de los elementos esenciales; para llegar a ser bueno tienes que usar estos elementos esenciales de formas nuevas y creativas.

Así pues, lánzate de lleno y empieza a volar por ti mismo… Vale, puede que áun no sea el momento. Pero, de todos modos, inténtalo y experimenta con lo que has aprendido.

¿Y ahora qué sigue?

Intenta crear unas cuantas páginas tú mismo. Por ejemplo, crea una página con un título, un encabezado, algo de texto, un encabezado de segundo nivel y algo más de texto. No pasa nada por echarle un vistazo al tutorial mientras preparas estas primeras páginas. Pero, más adelante, intenta hacerlo tú solo… sin mirar.

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: