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 highlight, 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 de énfasis. Cuando yo empiezo a escribir la etiqueta 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 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 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.

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.