Introducción al Desarrollo 
  Web: HTML y CSS 
  Parte I   
HTML: conceptos básicos (parte 4) 

Hola,  soy  Sergio  Luján  Mora,  profesor  de  informática  de  la  Universidad  de  Alicante,  y  en  este 
vídeo  que  forma  parte  del  curso  “Introducción  al  desarrollo  web”,  te  voy  a  ayudar  con  tus 
primeros pasos con el lenguaje de etiquetado HTML. 
 
Antes  de  empezar,  me  gustaría  recordarte  algunos  de  los  sitios  web  en  los  que  puedes 
encontrar  más  información  sobre  mí  y  sobre  mi  trabajo,  y  dos  formas  de  contactar conmigo, a 
través  de  mi  correo  electrónico  sergio.lujan@ua.es  y  a  través  de  mi  cuenta  en  Twitter 
@sergiolujanmora. 
 
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”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​.  
a​ h