Jose J. Fernández Programador. Desarrollador web y SEO en León

Curso de HTML: tu primera página en HTML 5

Jose J. Fernández

Curso HTML

1. Las etiquetas en HTML

La semana pasada lo habíamos dejado indicando la estructura de un documento HTML, que era la siguiente:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<p>Este texto sí aparece en la página web. ¿Por qué no lo pruebas?</p>
	</body>
</html>

Todo lo que hagamos esta semana lo colocaremos entre la etiqueta <body> y la etiqueta </body>, pero antes de empezar quiero explicarte qué son las etiquetas y cómo se hacen.

Las etiquetas van encerradas entre los símbolos menor que (<) y mayor que (>). Por ejemplo, <em> es una etiqueta, y <p> es otra. Gran parte de la magia de HTML reside en conocer las etiquetas que hay disponibles y cómo utilizarlas, cosa que iremos viendo conforme avance el curso.

Existen varias reglas que debes respetar a la hora de trabajar con las etiquetas en HTML.

Regla #1: las etiquetas se abren y se cierran

Si te fijas en la plantilla de la semana pasada, cada etiqueta (excepto una o dos) aparece dos veces, una sin barra (/) y otra con ella. La primera es la etiqueta de apertura, como por ejemplo <html>, mientras que la que tiene la barra es la etiqueta de cierre, que en este caso sería </html>.

Veamos otro ejemplo.

Soy un texto normal y <strong>yo soy un texto en negrita</strong>, mientras que yo vuelvo a ser normal.

Entre ambas etiquetas hay texto, que en este caso es “yo soy un texto en negrita”. La etiqueta strong sólo afectará a ese texto: al que haya entre la etiqueta de apertura y la etiqueta de cierre.

Si copias y pegas el código del ejemplo anterior en un documento HTML y lo abres con un navegador web, deberías ver algo como esto:

>> Soy un texto normal y yo soy un texto en negrita, mientras que yo vuelvo a ser normal.

Al conjunto de etiqueta de apertura, etiqueta de cierre y lo que hay dentro lo llamamos elemento en HTML. En nuestro ejemplo, esto sería un elemento HTML:

<strong>yo soy un texto en negrita</strong>

Donde strong sería la etiqueta y “yo soy un texto en negrita” sería el contenido. En general es obligatorio cerrar todas las etiquetas, aunque hay algunas excepciones que veremos más adelante. Si no las cerramos en algunos casos no pasará nada y en otros la página se visualizará de forma incorrecta.

Regla #2: etiquetas dentro de etiquetas

Las etiquetas en HTML pueden tener otras etiquetas dentro de ellas. Es decir, el contenido de un elemento HTML pueden ser más etiquetas. Veamos un ejemplo de esto.

<em>Soy un texto en cursiva y <strong>yo en cursiva y negrita</strong>. Yo vuelvo a ser sólo cursiva.</em>

En este caso todo el texto irá en cursiva, pero sólo una pequeña parte irá en negrita y cursiva al mismo tiempo. Quedaría así en el navegador:

>> Soy un texto en cursiva y yo en cursiva y negrita. Yo vuelvo a ser sólo cursiva.

¿Contradice esto a la norma de abrir y cerrar etiquetas? En absoluto, pero si abrimos una etiqueta <em> y dentro de ésta una <strong> como es el caso, cerraremos primero </strong> y luego </em>, cosa que puede verse bien en el ejemplo.

Dicho de otro modo: las etiquetas HTML se cierran en orden inverso al orden en que se abren.

Un apunte: algunas etiquetas deben obligatoriamente contener sólo un tipo de etiquetas dentro, como por ejemplo las etiquetas de lista (<ol>, <ul>, entre otras), que deben tener sólo etiquetas <li> dentro de ellas. Cualquier otra etiqueta que pongamos dentro dará error, y la página podría visualizarse incorrectamente.

Por ahora no debes preocuparte por esto, ya que lo iremos viendo más adelante.

Regla #3: atributos de etiquetas

Algunas etiquetas en HTML pueden contener más información que simplemente su contenido. Esta información irá en forma de atributos. Existe una etiqueta básica que necesita tener un atributo para ser funcional: la etiqueta de enlace, que es <a>.

<a href="http://www.google.es">Yo soy un enlace a Google</a>

En un enlace, podemos indicar hacia dónde va ese enlace, es decir, el destino de dicho enlace. Lo hacemos mediante el atributo href, al cual le asignamos el valor de la página web a la que queremos que nos lleve el enlace. Mira el ejemplo de arriba para un enlace que te lleva a Google, y el ejemplo siguiente para un enlace que te lleva a la portada de mi blog:

<a href="http://josejfernandez.com">Jose J. Fernández</a>

El resultado visto en el navegador sería el siguiente:

>> Jose J. Fernández

Como ves, el navegador subraya el texto y le cambia el color para indicar que es un enlace. En un curso posterior veremos cómo podemos modificar el aspecto de los enlaces, y te adelanto que se hace con CSS.

¿Cómo podemos poner atributos en una etiqueta? Los atributos siguen todos el siguiente formato:

atributo="valor"

No necesariamente tiene que haber un único atributo, sino que puede haber varios, y no necesariamente deben tener un único valor. Vamos a ver un ejemplo para que te hagas a la idea pero no te preocupes en exceso porque iremos viendo etiquetas, atributos y valores posibles conforme vaya avanzando el curso.

<etiqueta atributouno="valor" atributodos="otro valor" atributotres="tercervalor">texto</etiqueta>

Si estás haciendo pruebas tú mismo en un editor de texto, ya deberías ser capaz de apreciar el resaltado de sintaxis que comentábamos en la primera entrega del curso. Intenta encontrar las 7 diferencias:

Resaltado de sintaxis en HTML

¿Vale la pena o no vale la pena utilizar un editor como Notepad++? ;) si no lo has instalado te recomiendo que lo hagas, porque te facilitará mucho escribir código HTML.

2. Tu primera página: habla sobre ti

Si entiendes lo anterior es hora de que crees tu primera página web, y qué mejor que hacerlo sobre ti mismo. Vamos a crear una página web muy simple que hable acerca de ti, y para ello utilizaremos las siguientes etiquetas:

  • h1: para poner tu nombre.
  • p: para escribir información sobre ti.
  • ul, li: para crear una lista de aficiones.

Quiero que crees un elemento h1 donde indiques tu nombre. Debajo de éste, incluye dos o tres párrafos en los que hables sobre ti, y dentro de uno de éstos, una lista con algunas aficiones tuyas.

Fíjate en dos cosas: puedes usar el tabulador (suele estar a la izquierda de la tecla Q en tu teclado) para mejorar la presentación del código en tu editor. Esto no sólo es posible sino altamente recomendable. Luego, para incluir la lista de aficiones, tendrás que colocar una etiqueta ul dentro de una de las etiquetas p que tendrás que usar, y dentro de ul colocar ya las aficiones dentro de etiquetas li.

¿Cómo lo ves? ¿Te resulta sencillo? ¿Ya lo tienes? Te enseño mi código junto a cómo se ve en el navegador:

Tu primera página web

Puedes hacer click sobre la imagen para verlo más grande. ¿Lo hiciste bien? ¿Tu código se parece al mío?

Ahora que me fijo… ¿Has visto que si modificas lo que hay escrito entre las etiquetas title en la parte de arriba del código, es lo que luego va a aparecer como título de la pestaña en el navegador?

Eso es muy importante, pero por ahora quiero que te centres en entender el código que te he enseñado. Si has sabido hacerlo sin mirar mi código, enhorabuena. Vas por el buen camino para saber HTML. Si no, no te preocupes, porque en próximas entregas del curso reforzaremos los fundamentos para que puedas continuar sin problemas.

Siguiente entrega: El cabecero de una página en HTML 5

Samus 2014-05-07 - 00:04

Excelente Jose, me encanta la estructura, diseño y entradas del blog y este curso HTML tiene buenísima pinta. Ánimo y muchas gracias!

Jose J. Fernández 2014-05-07 - 17:49

Gracias por pasarte Samus, cuánto tiempo. Me alegro de que te guste ;) cualquier comentario, ya sabes.

  1. Curso de HTML: introducción | Jose J. Fernández

No se mostrará públicamente.

Un enlace a tu blog o página web.