Introducción al Desarrollo 

Web: HTML y CSS 

HTML: problemas con los editores 

 
Vídeo: h
​ ttp://youtu.be/dgQ0v3V0bDU 

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  hablar  de  unos 
problemas que puedes tener con los editores de 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  el  apartado  de  “Preguntas  y  respuestas”  del  curso,  está  respondida  la  pregunta  “¿Qué 
software es necesario tener para realizar este curso?”. Entre otras cosas, te digo: 
Para  escribir  el  código  de  la  práctica,  no  necesitas  ningún  editor  o  entorno  integrado  especial. 
Podrías  utilizar  el  "Bloc  de  notas"  en Windows, o el "vi" en Linux, pero se pueden utilizar algunas 
opciones gratuitas mucho mejores. 
 
Yo  trabajo  en  Windows  y  te  recomiendo  el  programa  Notepad++,  porque  es  gratuito,  ligero  y 
muy  configurable.  Sí,  sé  que  hay  opciones  mejores,  pero  el  Notepad++  me  gusta  bastante  y 
debo  de  reconocer  que  me  da  pereza  cambiarlo.  Para  la  programación  de  la parte cliente de la 
práctica no necesitas nada más. 
 
Aprovecho este vídeo para realizar una pequeña puntualización. 
Cuando  digo  “Para la programación de la parte cliente de la práctica no necesitas nada más” no 
significa que para la parte servidor necesites otro editor de textos. 
Tanto  para  la  programación  de  la  parte  cliente  (HTML,  CSS,  JavaScript),  como  de  la  parte 
servidor  (PHP),  podemos  utilizar  el  editor  Notepad++.  Pero  para  la  programación  de  la  parte 
servidor  también  necesitaremos  XAMPP  o  algún  paquete  similar,  pero  eso  ya  lo  veremos  más 
adelante. 
 
En  el  vídeo  HTML:  conceptos  básicos  (primera  parte)  escribo  una  página  web  con  el  editor  de 
textos Bloc de notas. 
9 
Y  en  el  vídeo  HTML:  conceptos  básicos  (segunda  parte)  lo  hago  con  el  editor  de  textos 
Notepad++, el editor que te recomiendo que utilices si trabajas en Windows. 
El editor de textos que utilices es importante, pero no es lo más importante. 
Como  se  suele  decir,  “las  buenas  fotografías  no  están  en  la  cámara,  las  buenas  fotografías 
están en la cabeza del que saca la fotografía”. 
 
Con  las  páginas  web  podemos  decir  lo  mismo,  “las  buenas  páginas  web  no  están  en  el  editor, 
las buenas páginas web están en la cabeza del que las hace”. 
 
Pelearse  por  ver  cuál  es  el  mejor  editor  de  HTML  es  una  pérdida  de  tiempo.  En  la  Wikipedia 
podéis  encontrar  una  lista  de  editores  de  HTML.  Algunos son gratuitos, mientras que otros son 
de  pago;  algunos  son  para  Windows,  mientras  que  otros  son  para  Macintosh  o  para  Linux.  Así 
que, la oferta es muy variada y cada alumno puede elegir el que más le guste. 
Yo hace años, por el año 2000, 2001, 2002, utilizaba el EditPad. 
 
Desde  hace  unos cinco o seis años utilizo el Notepad++, lo conozco, me encuentro cómodo con 
él,  y  como  he  dicho  antes,  me  da  pereza  cambiarlo  y  tener  que  acostumbrarme  a  uno  nuevo. 
Algún día lo haré, pero este año, seguro que no va a ser. 
Pero  muchas  veces  me  toca  trabajar  con  el  “vi”  y  el  “joe”,  dos editores de texto muy conocidos 
en Linux. 
Pero,  ¿no  has  dicho  varias  veces que trabajas en Windows? Sí, en mi ordenador tengo Windows 
pero  casi  todos los días me conecto a servidores remotos que tienen el sistema operativo Linux 
en  los  que  tengo  alojados  sitios  web  por  lo  que  muchas  veces  tengo  que  trabajar  con  otros 
editores como el “vi” o el “joe”. 
 
La  lección  de  todo  esto  es  bien  sencilla:  el  editor  es  una  herramienta, no es lo más importante; 
no  te  acostumbres  a un único editor; y si tú no sabes, el editor no hace milagros, tú eres la clave 
de que una página web sea buena o mala, no el editor. 
 
A  continuación,  te  voy  a  explicar  algunos  problemas  que  puedes  tener  al  trabajar  con  algunos 
editores en Windows y Macintosh. 
 
En  primer  lugar,  en  Microsoft  Windows,  ni  se  te  ocurra  hacer  una  página  web  con  WordPad  o 
con Word. Ni se te ocurra, por favor. 
 
Con  el  Bloc  de  notas  puedes  tener  un  problema:  al  guardar  la  página web, puede ser que luego 
no se vea bien al abrirla con un navegador web. 
 
Cuando  vayas  a  la  carpeta  donde  has  guardado  la  página  web  puede  ser  que  no  te  aparezca 
con  el  icono  del  navegador  web  por  defecto,  en  este  caso  Google  Chrome,  sino  con  el  icono 
correspondiente  a  un  fichero  de  texto.  Además,  si  tienes  activada  la  opción  de  ver  las 
extensiones de los ficheros, verás que acaba en .txt. 
 
Y  cuando  intentes  visualizar  la  página  web  en  un navegador, verás el código HTML en vez de la 
representación  visual  de  la  página.  Esto  no  ocurre  en  todos  los  Windows:  en  mi  versión  actual 
de  Windows,  la  7,  parece  que  ya  no  existe  este  problema,  pero  en  versiones  anteriores  sí  que 
existía. 
 
El  problema  está  al  guardar  el  fichero,  en  la  opción “Tipo” que se debe de cambiar a “Todos los 
archivos”. 
 
Si  se  deja la opción por defecto, “Documentos de texto”, el Bloc de notas puede añadir de forma 
automática la extensión .txt al fichero. 
 
Otra forma de solucionarlo es poniendo el nombre del fichero entre comillas. 
 
¿Qué tendría que hacer si me pasa esto y tú no me lo hubieses contado? 
 
Pues bien sencillo, buscar la solución en la Web. 
 
Seguro que tú no eres el primero al que le pasa esto y encontrarás una buena solución. 
Por  ejemplo,  en  el  sitio  web  desarrolloweb.com,  podemos  encontrar  una  pregunta  de  alguien 
que  parece  que  tuvo  este  problema  hace  muchos,  muchos  años,  parece  que,  según  las fechas 
de  los  comentarios,  en  el  año  2003.  Esta  la  pregunta  y  hay varias respuestas con la solución al 
problema.  Esto  mismo  tienes  que  hacer  cuando  te  surja  cualquier  tipo  de  problema,  buscar  la 
solución en la Web por ti mismo. 
 
Si  utilizas  Macintosh,  también  te  puedes  encontrar  con  un  problema  parecido.  Y  esta  parte del 
vídeo  se  la  dedico  a  todos  los  admiradores  de  Macintosh  que  dicen  que  es  lo  mejor,  muy  fácil 
de usar y que nunca da problemas. Va para ellos. 
 
Bien, anoche recibí este correo de un alumno o alumna del curso. El correo decía: 
He  comenzado  hoy  con  los  vídeos  sobre  html  y  he  estado  haciendo  la  primera  práctica  que 
sugerías. 
 
¿El resultado? ¡Catastrófico! 
Al  principio  siempre  me  encanta  que  así  sea,  porque  te  pones  a  revisar  y  ...  bueno,  acabas 
encontrando el fallo y solucionándolo pero, en este caso, ya he rozado la desesperación. 
No consigo que mi texto se vea bien en el explorador… 
 
¿La clave? es lo que busco. 
El  proceso  a  seguir  ha  sido  exactamente  igual  que  el  tuyo  sólo  que  con  la  diferencia  de  que lo 
he  realizado  en  Mac.  Lo  he  guardado  tanto  con  el  textedit  como  con  la  versión  oficial de Word 
para  Mac  y  no  consigo  que  se  abra.  ¿Es  posible  que  la  culpa  la  tenga  que  estos programas no 
me dan opción de seleccionar ningún valor? 
Y  el  alumno  me  mandaba  la  siguiente  captura  de  pantalla,  en  la  que  podemos  ver  que  al 
visualizar  la  página  web  en  Google  Chrome,  se  muestran  las  etiquetas  de  HTML,  cosa  que 
nunca debe ocurrir. Pero, esto, esto me suena es el mismo problema que hemos visto antes que 
puede  aparecer  en  Windows.  ¿Cómo?  ¿Un  Mac,  un  Macintosh,  con  el  mismo  problema  que  un 
Windows? ¡No puede ser, es el fin del mundo! 
 
A los 20 minutos recibí otro correo del alumno o alumna que me decía: 
 
Solucionado, la culpa era a la hora de guardarlo con Mac. 
En bloc de notas salió perfecto :D 
Este  es  un  correo  literal,  he  copiado  el  texto  tal  cual,  lo  de  “la  culpa  era  por  guardarlo  con  el 
Mac”  y  con  el  “Bloc  de  notas  salió  perfecto”  yo  no  lo  he  dicho,  que  luego  la gente dice que soy 
pro-Windows. 
Y  el  alumno  o  alumna  me  mandaba  otra  vez  otra  captura  de  pantalla  con  la  página  que por fin 
había logrado que se visualizará correctamente. 
 
Excelente,  ese  es  el  espíritu  que  debéis tener, pero no sólo aquí en este curso, sino en cualquier 
otro curso y en la vida diaria. Debéis intentar resolver los problemas por vosotros mismos. 
 
Pero  la  solución  que  ha  encontrado  el  alumno  no  es  la  mejor,  porque  ha  tenido  que  dejar  de 
usar su maravilloso Macintosh con su editor TextEdit. ¿Cuál es la buena solución? 
Bueno,  el  mismo  consejo  que he dado antes: si te vas a la Web y buscas tu problema, verás que 
no  eres  el  primero  que  tiene  este  problema.  Es  muy  malo,  es  muy  difícil  ser  el primero en algo, 
hasta en lo malo. 
 
Desgraciadamente,  a  veces  hay que buscar mucho, porque la solución que encontramos, puede 
no ser muy útil. Por ejemplo, esta es un poco escueta y no ayuda mucho. 
Pero  si  se  sigue  buscando,  normalmente  se  encuentra  una  buena  solución.  Por  ejemplo,  para 
este  problema  se  encuentra  una  buena  solución  en  el  sitio  web  de  soporte  de  Apple,  que  nos 
explica  paso  por  paso  lo  que  tenemos  que  hacer,  e  incluye  una  captura  de  pantalla  para 
ayudarnos a solucionar el problema. 
 
El  problema  es  la  configuración por defecto que emplea TextEdit para guardar los documentos. 
En la página de Apple se os indican unas preferencias que hay que cambiar para arreglarlo. 
 
Conclusión:  dos  sistemas  operativos  distintos,  el  infierno  y  el  paraíso  de  los  sistemas 
operativos según algunos, y sin embargo, comparten un mismo problema. Curioso, curioso. 
 
¿Y  el  pobre  pingüino  de  Linux  que  dice  de  todo  esto?  No  lo  sé,  yo  no  lo  sé  todo,  habrá  que 
preguntarle. 
 
Recuerda  que  este  vídeo  forma  parte  del  curso  “Introducción  al  desarrollo  web”  que  está 
disponible en la dirección idesweb.es. 
 
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 
​ ttp://google.es/activate​. Revisado, enero 2016. 
activo a​ h