Grámatica del HTML
En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:
Etiquetas siempre cerradas.
Documentos bien formados.
Etiquetas en minúsculas.
Valores de los atributos siempre entre comillas.
También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.
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 se aconseja seguir aplicandolas, ya que unas veces tendremos que escribir o mantener páginas web desarrolladas con HTML 4, XHTML 1 o HTML5. Así que, para no liarnos, vamos a dar las reglas que siempre son válidas en las tres versiones.
1. Las etiquetas siempre se tienen que cerrar.
Por ejemplo:
- Incorrecto: <p>Aquí hay un <strong>texto destacado , porque la etiqueta <strong> y la etiqueta <p> no están cerradas.
- Correcto: <p>Aquí hay un <strong>texto destacado</strong></p>
2. Los elementos anidados deben tener un correcto orden de apertura/cierre: el que se abre último, debe cerrarse primero.
- Incorrecto: <p>Aquí hay un <strong>texto destacado</p></strong> , 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.
-Correcto: <p>Aquí hay un <strong>texto destacado</strong></p>
3. Etiquetas en minúsculas. 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. Pero lo más recomendable es escribir las etiquetas siempre en minúsculas, aunque se puedan escribir en mayúsculas.
4. 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.
5. Utilizar las letras del alfabeto inglés, números, el guión y el guión bajo (AB...Z ab...z 01...9 - _) para los nombres de los ficheros, de las páginas web. Se pueden usar más caracteres, pero pueden dar problemas en algunas situaciones.
6. “.htm” o “.html” para la extensión de las páginas web.
- Artículo dedicado al lenguaje HTML de la Wikipedia.
- HTML/Training que ofrece el W3C.
- 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.
Etiquetas siempre cerradas.
Documentos bien formados.
Etiquetas en minúsculas.
Valores de los atributos siempre entre comillas.
También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.
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 se aconseja seguir aplicandolas, ya que unas veces tendremos que escribir o mantener páginas web desarrolladas con HTML 4, XHTML 1 o HTML5. Así que, para no liarnos, vamos a dar las reglas que siempre son válidas en las tres versiones.
1. Las etiquetas siempre se tienen que cerrar.
Por ejemplo:
- Incorrecto: <p>Aquí hay un <strong>texto destacado , porque la etiqueta <strong> y la etiqueta <p> no están cerradas.
- Correcto: <p>Aquí hay un <strong>texto destacado</strong></p>
2. Los elementos anidados deben tener un correcto orden de apertura/cierre: el que se abre último, debe cerrarse primero.
- Incorrecto: <p>Aquí hay un <strong>texto destacado</p></strong> , 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.
-Correcto: <p>Aquí hay un <strong>texto destacado</strong></p>
3. Etiquetas en minúsculas. 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. Pero lo más recomendable es escribir las etiquetas siempre en minúsculas, aunque se puedan escribir en mayúsculas.
4. 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.
<p class = "importante"> <p class = 'importante'>
5. Utilizar las letras del alfabeto inglés, números, el guión y el guión bajo (AB...Z ab...z 01...9 - _) para los nombres de los ficheros, de las páginas web. Se pueden usar más caracteres, pero pueden dar problemas en algunas situaciones.
6. “.htm” o “.html” para la extensión de las páginas web.
Recomendaciones:
- Vídeo “Errores web: El título de la página”, donde se explica para qué se usa el título, la etiqueta <title>, de una página web y se muestra algunos errores típicos que se cometen en muchos sitios web.- Artículo dedicado al lenguaje HTML de la Wikipedia.
- HTML/Training que ofrece el W3C.
- 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.
