A partir de ahora vamos a empezar a machacar nuestros dedos contra el teclado escribiendo páginas de código HTML. Empezaremos aprendiendo ocho etiquetas diferentes. Recuerda que si acabas de empezar deberías leer antes la entrada que he escrito como una introducción al HTML.
Las etiquetas HTML
Si vamos a aprender un lenguaje nuevo es imporante que aprendamos todas las palabras posibles. Pero en realidad es aun más importante aprender las palabras fundamentales (como decir "hola" o "gracias").
Debes saber que de todas las etiquetas del lenguaje HTML vas a utilizar habitualmente el 20%, con el que podrás construir el 80% del contenido de tus webs.
Por ahora nos conformaremos con aprender lo mejor posible las bases de cemento de una página web:
- <html>
- <head>
- <title>
- <body>
- <h1>...<h6>
- <p>
- <strong>
- <em>
En realidad las etiquetas se pueden escribir en mayúsculas o en minúsculas, pero te aconsejo que lo hagas TODO en minúsculas.
Te anticipo que si ahora empiezas a jugar (la mejor forma de aprender) escribiendo páginas web sin ninguna de estas etiquetas y las abres con tu navegador verás que los textos que hayas escrito sí estarán presentes en la web, pero a la hora de la verdad no usar las etiquetas correctamente te dará muchos dolores de cabeza y construirás webs confusas e indeseables.
Ahora copia el siguiente ejemplo en tu editor de textos y guárdalo como un archivo web. Ábrelo con tu navegador y observa el resultado.
<html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<h1>Ejemplo de prueba</h1>
<h2>Primera prueba</h2>
<p>Esto es una prueba para ver como funciona el lenguaje HTML.</p>
<p>Si todo sale bien, probaré por mi mismo</p>
<h2>Segunda prueba</h2>
<p>La <strong>mejor</strong> manera de aprender HTML es <em>practicando, practicando y practicando mucho.</em></p>
</body>
</html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<h1>Ejemplo de prueba</h1>
<h2>Primera prueba</h2>
<p>Esto es una prueba para ver como funciona el lenguaje HTML.</p>
<p>Si todo sale bien, probaré por mi mismo</p>
<h2>Segunda prueba</h2>
<p>La <strong>mejor</strong> manera de aprender HTML es <em>practicando, practicando y practicando mucho.</em></p>
</body>
</html>
Ahora vamos a conocer las etiquetas una a una comparándolas con el ejemplo anterior y su resultado del navegador.
Etiqueta <html>
Sin este elemento no hay página web. Es la más importante de todas, la principal (llamada raíz) y solo puede existir una. Indica que todo su contenido debe ser interpretado bajo las normas del lenguaje HTML. El navegador necesitará encontrar sus etiquetas de inicio y final (o apertura y cierre) para detectar toooooodo el texto del contenido y traducirlo a lo que el usuario va a ver en su navegador web.
Debes escribir tu página web entre las etiquetas <html> y </html>.
Etiqueta <head>
Aquí aparecerán casi todos los datos que no se mostrarán en la página web: los metadatos. Es importante aclarar la separación entre el "head" y el "body" para que no se confunda la información que se mostrará en la web. Por ahora solo usaremos dentro de su contenido una etiqueta, la que indica el título de la página web que se mostrará en la barra del navegador (pero no en la página web).
Etiqueta <title>
El contenido de esta etiqueta será lo que salga como título de la página web y quedará escrito SOLO en la barra superior del navegador o en el botón del navegador que quedará abajo al minimizar la ventana. Básicamente será el nombre que cojerá la ventana o pensataña del navegador que muestre en ese momento la página web. Elige un buen título para tu página, que sea breve y conciso para que el lector sepa siempre donde está. Además también ayudará a tener un mejor posicionamiento en los motores de búsqueda (SEO).
Etiqueta <body>
Con esta etiqueta indicamos qué queremos que muestre la página. Todo el contenido que pongas entre las etiquetas de apertura y cierre "body" será lo que vea el usuario a través de su navegador. Es el lugar donde debes escribir todo aquello que quieres que se vea en tu página web.
Ahora te toca a ti
Antes de aprender como funcionan las otras cuatro etiquetas observa bien la gramática del lenguaje HTML. Fíjate bien en las funciones de las etiquetas "html", "head", "title" y "body" y sobretodo examina el orden en que se escriben.
¿Que elementos van dentro del contenido de otros elementos? ¿Cómo están ordenadas las etiquetas para poder dar sentido a la página web?
Empieza una página web muy simple con solo las cuatro etiquetas que se han descrito en esta entrada y asegúrate de que siguen la misma estructura. Juega y experimenta y descubre cosas por ti mismo.
Luego podrás seguir con la segunda parte de este pequeño tutorial introductorio.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)