EPET 20 Taller de Programación Estática y Laboratorio Web

Programación en XHTML

El lenguaje de marcas HTML

HTML es un lenguaje que fue creado en la década del 90 de la mano de Tim Berners-Lee, fue quien escribió la primera especificación de URLs, HTTP y HTML y en la actualidad se lo considera el padre de la web, para compartir información entre distintos centros de investigación. No es un lenguaje de programación "propiamente dicho", sino que es un lenguaje de marcas de hipertexto. Es el principal lenguaje de las páginas web, un navegador "entiende" ese código y visualiza el contenido. Para definir dichos documentos se emplean elementos denominados etiquetas (tags).

Es un lenguaje fácil de aprender, si bien existen más de 90 etiquetas en HTML, se puede comenzar a trabajar conociendo sólo un "par" de ellas.

La última versión en salir es HTML 5 y llegó con muchas novedades. Con nuevas etiquetas, atributos y soporte nativo de audio y video. Las últimas versiones de los navegadores ya soportan esta nueva especificación. Esto no quiere decir que las versiones anteriores quedarán obsoletas, ya que existe una compatibilidad entre las distintas versiones.

XHTML es la versión extendida (mejorada) de HTML, es una "combinación" del lenguaje de marcado hipertextual junto con el lenguaje de marcas XML. HTML es muy permisivo para trabajar, generando un código desprolijo y malos hábitos al programador, en cambio XHTML es mas estructurado en donde se seben seguir una serie de reglas para escribir el código generando un código mas limpio y prolijo.

Reglas en XHTML

¿Por dónde comienzo?

Para comenzar a "programar" en HTML, sólo necesito un editor de texto "liso y llano" es decir sin formato (no debe ser ningún procesador de texto como Ms Word o LibreOffice Writer). En MS Windows contamos con el programa Bloc de Notas, en cambio en algunas distribuciones de GNU/Linux los editores de texto son mas variados como Gedit, Kate, Nano, Vim (la ventaja sobre el Bloc de notas, es que algunos editores reconocen los distintos lenguajes de programación, identificando el código y aplicando colores a etiquetas, atributos, valores, etc. facilitando así la tarea del programador).

Ventana bloc de notas.
Código HTML con el Bloc de Notas.

Una vez escrito el código, sólo se debe guardar el archivo con la extensión .html o .htm, seleccionar "Todos los archivos" en la opción Tipo para evitar guardar el archivo como tipo texto (nombre_pagina.html.txt).

Guardar como en Bloc de notas.
Agregar .html y seleccionar en Tipo la opción Todos los archivos.

En algunas versiones de MS Windows, de forma predeterminada, se ocultan las extensiones de los archivos pudiendo confundir fácilmente el verdadero tipo de cada archivo. Para ver todas las extensiones de los archivos se debe desactivar la opción "Ocultar las extensiones de archivos para tipos de archivos conocidos" desde Opciones de carpeta, pestaña Ver y Configuración avanzada.

Opciones de carpeta.
Primero entrar en "Opciones de carpeta y búsqueda".

Luego, seleccionar la pestaña "Ver", buscar y desactivar la casilla de verificación "Ocultar las extensiones de archivo para tipos de archivos conocidos."

Opciones, ocultar extensiones.
Clic para desactivar la opción.

Una vez creado el archivo automáticamente se asociará con el navegador predeterminado (fácil de notar, ya que su icono cambiará). De esta forma al hacer doble clic en el mismo se abrirá el navegador mostrando la página web.

Asociación de archivo .html.
El icono cambiará según el navegador predeterminado.

Para volver a editarlo, se puede abrir desde el editor de texto, por ejemplo el Bloc de notas o bien desde el Explorador de Windows clic con el botón derecho, seleccionar la opción "Abrir con..." y luego el programa en cuestión.

Explorador de Windows, abrir con.
Seleccionar "Abrir con" desde el menú desplegable.

arriba  siguiente

arriba