Tip:
Highlight text to annotate it
X
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 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 .
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 , y podría cerrar también el . Podría dejar solamente
el , 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 y “año 2014”, lo he marcado, lo he etiquetado con la etiqueta
.
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.