desarrollo web

Introducción al desarrollo web (iDESWEB)
Práctica 1: HTML

1.

Objetivos
Aprender el lenguaje de marcado HTML, o algunas de sus variantes, como XHTML o HTML5, y
la importancia de escribir código correcto y conforme a la especificación oficial.
Conocer algunas herramientas que ayudan a escribir código HTML correcto y compatible con distintos navegadores.

2.

Recursos

¿Qué etiquetasexisten en XHTML? ¿Qué atributos existen y qué valores pueden tomar? ¿Cómo se
emplean las etiquetas?
W3Schools1 : cursos de aprendizaje y guías de referencia de diversas tecnologías empleadas en la
programación web.
W3C2 : organismo internacional que desarrolla las especificaciones de las principales tecnologías
que se emplean en la programación web.
XHTML Cheat Sheet 3 : resumen en una solapágina de lo más importante de XHTML.
HTML Cheat Sheet 4 : resumen en una sola cara de lo más importante de (X)HTML.
HTML Tags5 : resumen de las etiquetas con sus atributos y posibles valores.
¿Cómo puedo saber que el código XHTML que he escrito es correcto?
W3C Markup Validation Service6 : servicio de validación para diferentes lenguajes de marcado
(HTML, XHTML, SVG, y otros).
Html Validator7: complemento para Mozilla Firefox que permite comprobar el número de errores
que posee una página web que se visualiza.
Multipage Validator8 : herramienta de validación de XHTML que permite validar múltiples páginas web a partir de una dirección.
WDG HTML Validator9 : herramienta de validación de XHTML que permite validar múltiples
páginas web (hasta un máximo de 100) a partir de unadirección.
¿Cómo puedo comprobar que la página web se visualiza correctamente en diferentes navegadores?
Browsershots10 : permite comprobar cómo se visualiza una página web en decenas de navegadores
y en distintos sistemas operativos.
1 http://www.w3schools.com
2 http://www.w3.org
3 http://floele.flyspray.org/htmlcheatsheet-ncr.pdf
4 http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
5http://html-tags.info/
6 http://validator.w3.org
7 http://addons.mozilla.org/es-ES/firefox/addon/249
8 http://www.validator.ca/
9 http://htmlhelp.com/tools/validator/
10 http://browsershots.org

1

Total Validator Service11 : ofrece diversos servicios, como buscar enlaces rotos o comprobar el
nivel de accesibilidad. También ofrece la posibilidad de generar una captura de pantalla de cómo sevisualiza en distintos navegadores.
BrowserCam12 : permite comprobar la compatibilidad de una página web con diferentes navegadores (incluso con navegadores de PDA y teléfonos móviles). Es un servicio de pago.
¿Existe alguna herramienta que me pueda ayudar a escribir el código XHTML?
Notepad++13 : editor gratuito de código fuente que soporta varios lenguajes de programación.
Entre otrascaracterísticas, posee sintaxis coloreada, envoltura de sintaxis y autocompletado.
Real-time HTML Editor14 : editor WYSIWYG de HTML en página web.
Online-HTML-Editor.org15 : editor WYSIWYG de HTML en página web que permite abrir y
guardar una página web.
HTML Tidy16 : limpia y organiza el código HTML. También se puede descargar el ejecutable y el
código fuente para ejecutarlo en local.

3.

¿Quétengo que hacer?

Con esta práctica vamos a empezar el desarrollo de un sitio web de gestión de álbumes de fotos llamado
“PI - Pictures & Images”. Con cada práctica el sitio web crecerá tanto en número de páginas como en
funcionalidad.
El objetivo es crear un sistema gestor de álbumes de fotos que admita múltiples usuarios. Un usuario
se tendrá que registrar para poder emplear el sistema. Unavez registrado podrá crear todos los álbumes
que quiera y en cada álbum podrá publicar todas las fotos que quiera. Para visualizar las fotos no es
necesario estar registrado: cualquiera puede ver los álbumes y sus fotos.
En esta práctica tienes que crear un sitio web compuesto de cinco páginas web; en la Figura 1 se
incluye un diagrama que resume las páginas que se tienen que crear y las...