HTML: conceptos básicos (parte 3)
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 2016” y expresamente, si es
posible, mediante un enlace activo a http://google.es/activate. Revisado, enero 2016.
No hay comentarios:
Publicar un comentario