HTML: conceptos básicos (parte 4)

En las tres partes anteriores de este videotutorial sobre los conceptos básicos de HTML, hemos visto algunos aspectos de su vocabulario, es decir, de las palabras que forman el lenguaje, y de su gramática, es decir, sus reglas que nos indican cómo podemos combinar sus palabras, su vocabulario, para formar textos complejos.

Respecto al vocabulario, por ahora sólo conocemos estas etiquetas.

Respecto a la gramática, vamos a repasar las principales reglas que debes de tener en cuenta.

Muy importante, en HTML5 algunas de estas reglas se han relajado y ya no es necesario aplicarlas, pero yo te aconsejo que las sigas aplicando, ya que unas veces tendrás que escribir o mantener páginas web desarrolladas con HTML 4, XHTML 1 o HTML5. Así que, para que no te líes, te voy a dar las reglas que siempre son válidas en las tres versiones.

En primer lugar, las etiquetas siempre se tienen que cerrar. Por ejemplo, este fragmento de HTML es incorrecto porque la etiqueta <strong> y la etiqueta <p> no están cerradas.

Este otro fragmento es correcto, porque todas las etiquetas están correctamente cerradas.

Los elementos anidados deben tener un correcto orden de apertura/cierre: el que se abre último, debe cerrarse primero. Este fragmento de HTML es incorrecto porque la etiqueta <p> se ha abierto antes que la etiqueta <strong>, por lo que la etiqueta <p> se debe cerrar después que la etiqueta <strong>, no antes.

Este fragmento, este segundo fragmento sí que es correcto, los elementos <p> y <strong> están correctamente anidados.

Por otro lado, según la versión de HTML que se utilice, las etiquetas se pueden escribir en mayúsculas y minúsculas, o sólo en minúsculas.

Yo te recomiendo escribir las etiquetas siempre en minúsculas, aunque se puedan escribir en mayúsculas.

Los valores de los atributos deben siempre ir encerrados entre comillas simples o dobles. En alguna versión de HTML, los valores de los atributos se pueden escribir sin comillas. Sin embargo, esto es incorrecto en otras versiones, por lo que siempre hay que encerrar los valores de los atributos entre comillas dobles o comillas simples.

Para los nombres de los ficheros, de las páginas web, lo mejor es que te limites a utilizar las letras del alfabeto inglés, números, el guión y el guión bajo. Sí, se pueden usar más caracteres, pero te pueden dar problemas en algunas situaciones.

Y la extensión de las páginas web es “.htm” o “.html”.

Ahora, te propongo que veas el vídeo “Errores web: El título de la página”, de poco más de 4 minutos de duración. En este vídeo te explico para qué se usa el título, la etiqueta <title>, de una página web y te muestro algunos errores típicos que se cometen en muchos sitios web.

También te recomiendo que leas el artículo dedicado al lenguaje HTML que puedes encontrar en la Wikipedia. Con lo visto en estos vídeos no deberías tener problemas para entender la mayor parte de lo que se cuenta en este artículo.

También te recomiendo que leas el HTML/Training que ofrece el W3C. Hemos visto muy poco de HTML, veremos más cosas en otros vídeos, pero puedes intentar aprender algo más por tu cuenta. Este sitio web está en inglés, pero algunos de los materiales los podemos encontrar traducidos al español.

Por supuesto, recuerda el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales.

Consulta el tutorial sobre HTML, al menos el apartado sobre conceptos básicos.

En la página del W3C puedes encontrar mucha información sobre HTML, pero recuerda, es un sitio web dirigido a profesionales y expertos, no para principiantes.

Puedes consultar la especificación oficial de HTML5, que por ahora es un documento de trabajo y no estará completada hasta el año 2014, por lo que puede sufrir numerosos cambios de aquí a entonces.

En la especificación de HTML5 puedes consultar la lista de elementos organizados por categoría, o la lista alfabética de los elementos, y la lista alfabética de los atributos. No te tienes que aprender estas listas de memoria, por supuesto, sólo tienes que intentar que te suenen algunos de los nombres de los elementos y de los atributos, y saber dónde encontrar estas listas para volver a ellas cuando las necesites.

Ahora te propongo dos ejercicios. Primero, te propongo que aprendas por ti mismo las etiquetas de HTML que son necesarias para crear listas no numeradas y numeradas.

A continuación, intenta hacer una página web que sea tu currículo. Puede tener una apariencia similar a este ejemplo que te muestro.

Normalmente, cuando explico lo que hemos visto en este vídeotutorial, lo primero que me preguntan los alumnos a continuación es “¿cómo le cambio el color, el tamaño o el tipo de letra al texto?”. Por ahora no podemos, recuerda que HTML sólo define la estructura y el contenido de las páginas web, no la presentación.

Paciencia, eso lo haremos cuando lleguemos al tema de CSS, las hojas de estilo en cascada que nos permitirán definir la presentación de nuestras páginas web.

Muchas gracias por tu atención.

AVISO IMPORTANTE

Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, enero 2016.