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.
Video: 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:
html, head, title, body, h1, h2, h3, h4, h5, h6, p,
strong, em
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 te aconseja 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 damos 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 <p> y
la etiqueta <strong> no están cerradas:
<p>Aquí hay un
<strong>texto destacado.
<p>otro
texto
Este otro fragmento es correcto, porque todas las etiquetas
están correctamente cerradas:
<p>Aquí hay un
<strong>texto destacado. </strong></p>
<p>otro texto</p>
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.
<p>Aquí hay un
<strong>texto destacado. </p></strong>
Este fragmento, este segundo fragmento sí que es
correcto, los elementos <p> y <strong> están correctamente
anidados.
<p>Aquí hay un
<strong>texto destacado. </strong></p>
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. Te recomendamos 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.
<p class=”importante”>
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 guion
y el guion 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”.
En este vídeo te explican para qué se usa el título, la etiqueta,
de una página web y te muestran 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.
