Introducción al Desarrollo 
Web: HTML y CSS 
Parte I   
HTML: conceptos básicos (parte 3) 
 
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 marcado 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  la  parte  anterior  de  este videotutorial hemos creado una página web sencilla con el editor de 
textos  Bloc  de  Notas  del  sistema  operativo  Microsoft  Windows.  En este vídeo vamos a usar un 
editor más potente, Notepad++, para seguir editando nuestra página web. 
 
Notepad++  es  un  editor de textos gratuito para los sistemas operativos Microsoft Windows que 
se distribuye bajo licencia GPL. 
 
Notepad++  lo  puedes  descargar  desde  su  sitio  web  en  diferentes  formatos.  Incluso,  te  puedes 
descargar el código fuente, por si te atreves a modificarlo. 
 
Es  muy  ligero y rápido, y dispone de interesantes características, como syntax hightlight, opción 
que  colorea  la  sintaxis  del  código  que  escribimos,  la  opción  de  autocompletar  etiquetas,  o  el 
soporte de diferentes juegos de caracteres, incluyendo Unicode. 
 
Además, Notepad++ dispone de un gran conjunto de plugins que amplía sus funciones. 
 
Vamos  a  continuar  con  la  página  web que hicimos en el videotutorial anterior y la vamos a usar 
de ejemplo para aprender a trabajar con Notepad++. 
 
Una  vez  que  tengas  instalado  este  programa  en  tu  sistema  operativo,  cuando  selecciones  un 
fichero  cualquiera  y  pulses  el  botón  derecho  del  ratón,  te  aparecerá  una  opción  “Edit  with 
Notepad++” que te permite abrir rápidamente un fichero en Notepad++. 
 
Aquí  tenemos  la  página  web  que  hicimos  en  el  videotutorial  anterior  y  vamos  a  añadirle  algo 
más.  Por  ejemplo  aquí,  a  continuación  de  HTML,  vamos  a  escribir  “,  Hypertext  Markup 
Language”. Y lo voy a etiquetar con la etiqueta <em> de énfasis. 
 
Cuando  yo  empiezo  a  escribir  la  etiqueta  <em>  y  la cierro, automáticamente este programa me 
escribe  la  etiqueta  final  o  de  cierre,  que  yo  puedo  cortarla  y  colocarla  fácilmente  al  final  del 
texto que quiero etiquetar. 
 
Esta  opción  está  disponible  en  Notepad++  si  tenemos  instalado  el  plugin  TextFX.  En  concreto, 
esta  opción,  la  de  cerrar  automáticamente  las  etiquetas,  la  tenemos  disponible  en  el  menú 
“TextFX Settings”, la opción “Autoclose XHTML/XML tag”. 
 
Si  yo  la  desactivo,  cuando  ahora  escriba  una etiqueta nueva, como vemos no se cierra, la tengo 
que  cerrar  yo  manualmente.  Sin  embargo,  si  la  vuelvo  activar,  “TextFX  Settings,  Autoclose”, 
ahora escribo un párrafo y se cierra automáticamente. 
 
Vamos  a  escribir  algo  más  en  la  página  web:  “La  versión  actual  de  HTML  es  la  5,  aunque  no 
está completada”. 
 
Y:  “Se  espera que esté terminada en el año 2014”. Voy a etiquetar “año 2014” , la voy a destacar, 
con la etiqueta <strong>. 
 
Otra  opción  que  tiene  este  programa  es  pulsar  Ctrl+  y  me  sale  una  lista  para  autocompletar  la 
etiqueta.  Como  yo  he  escrito  “str”  se  me  va  a  la  lista  de  etiquetas  y  a  la  lista  de  atributos  a  la 
posición  “str”  y  ya  me  aparece  la  etiqueta  <strong>  que  la  puedo  seleccionar,  se  me  cierra 
automáticamente, la corto y la pego a continuación. 
 
Como  vemos,  son  muy  potentes  estas  opciones, ayudan bastante. Otra opción muy interesante 
es  el  emparejamiento  de  etiquetas.  Yo  puedo  seleccionar  una  etiqueta,  por  ejemplo  este 
párrafo,  y  me  marca,  me  selecciona,  donde  está  la  etiqueta  de  cierre  correspondiente.  O  aquí, 
esta etiqueta <strong> se cierra en esta posición. 
 
Y  también  puedo,  si  así  lo  deseo,  cerrar  ciertas  partes  de la página. Por ejemplo aquí, yo podría 
cerrar  el  <body>,  y  podría  cerrar  también  el  <head>.  Podría  dejar  solamente  el  <html>,  o  voy 
abriendo, voy desplegando las distintas partes de la página que necesite. 
 
Por  supuesto,  tenemos  también  opciones  típicas  de  cualquier  editor,  como  es  numerar  las 
líneas  del  código,  y  aquí  abajo,  en  la  barra  de  estado  inferior,  pues  tenemos  la  longitud  del 
fichero, cuántas líneas tiene y en que posición actual se encuentra el cursor. 
 
Muy importante son estos dos valores que vemos aquí abajo, “DOS/Windows”, esto me indica el 
formato  de  los  saltos  de  línea.  Esto  yo  lo  puedo  modificar  en  cualquier  momento  en  el  menú 
“Editar”,  “Conversión  fin  de  línea”,  puedo  convertir  a  otros  formatos,  como  este  fichero  está  en 
formato “DOS/Windows”, lo puedo convertir a formato “Unix” o a formato “Macintosh”. 
 
Y  muy  importante  también  es  la  opción,  el  valor  que  vemos  aquí  “UTF-8”  me  indica  el juego de 
caracteres  del  fichero.  Esto  lo  puedo  cambiar a través del menú “Codificación”, puedo convertir 
el  fichero  a  otros  formatos.  Pero  esto  ya  lo  veremos  más  adelante en otro vídeo sobre el juego 
de caracteres. 
 
Para  finalizar,  puedo  lanzar,  puedo  ver  esta  página  web  en  un  navegador  y  lanzarla 
directamente  desde  Notepad++.  Para  ello  me  voy  al  menú  “Ejecutar”,  realmente  no  vamos  a 
ejecutar  la  página,  esto  no  es  código,  pero  lo  que  vamos  a  hacer  es  lanzar  la  página,  que  se 
cargue, que se visualice automáticamente en un navegador. 
 
Aquí  nos  aparecen  los  navegadores  más  usuales,  que  por  supuesto,  para  usar  estas  opciones 
debemos tener estos navegadores instalados en nuestro sistema operativo. 
 
Por  ejemplo,  voy  a  lanzar  esta  página,  voy  a  ver  cómo  se  ve  en  Chrome.  Simplemente 
selecciono  aquí,  espero unos segundos y se me abre la página en el navegador Google Chrome. 
Y  podemos  ver  el  texto  que  yo  he  añadido  y  cómo  aparece  aquí  enfatizado  este  texto,  y  este 
texto  en  negrita.  Porque  en  mi  código  yo  he  marcado  “Hypertext  Markup  Language”  lo  he 
marcado  con  la  etiqueta  <em>  y  “año  2014”,  lo  he  marcado,  lo  he  etiquetado  con  la  etiqueta 
<strong>. 
 
Y  con  esto  finaliza  este  vídeo  en  el  que  hemos  visto  cómo  editar  una  página  web  con  el 
programa Notepad++. 
 
Hemos  visto  algunas  características  interesantes  que  nos  ayudan  a  escribir  el  código  HTML, 
como  el  coloreado  de  la  sintaxis,  el  cierre  automático  de  las  etiquetas,  la  opción  de 
autocompletar  las  etiquetas  y  los  atributos,  y  el  emparejamiento  de  la  etiqueta  inicial  con  la 
etiqueta final. 
 
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