Cuando se crean páginas web, es habitual repetir una y otra vez algunos trozos de código HTML, como por ejemplo las tablas, los formularios y la cabecera de las páginas. Para no tener que reescribir continuamente el mismo código, se utilizan los fragmentos de código, llamados "snippets" en inglés.
Crear fragmentos de código y trabajar con ellos es un proceso muy sencillo. A continuación se muestran los pasos necesarios para crear un fragmento correspondiente a una tabla completa de XHTML:
- Se escribe el código XHTML completo de una tabla vacía (con sus etiquetas
<caption>,<thead>,<tbody>,<tfoot>, sus atributossummary,scope, etc.) - Se guarda el código anterior en un archivo de texto con un nombre fácil de identificar (por ejemplo, "Tabla XHTML").
- Cuando se necesite insertar una tabla en una página XHTML, se copia y se pega todo el código creado anteriormente y se completa con los datos necesarios.
El método descrito anteriormente no es muy eficiente si se realiza de forma manual. Afortunadamente, muchos programas utilizados para el diseño web permiten gestionar de forma más cómoda los fragmentos de código o snippets.
A continuación se muestra la forma de trabajar con los fragmentos de código en el conocido programa Dreamweaver:
1) Si no está visible, se debe mostrar la ventana correspondiente a los fragmentos de código mediante la opción de menú Ventana > Fragmentos o pulsando Mayúsc. + F9. Una vez abierta esta ventana, el aspecto que muestra se ve en la parte inferior izquierda de la siguiente imagen:
Figura 14.1 Visualizando la ventana de fragmentos de código en Dreamweaver
2) Dreamweaver ya dispone por defecto de muchos fragmentos de código útiles. Si por ejemplo se pulsa sobre la carpeta Meta, Dreamweaver muestra un snippet llamado No crear caché. Al pinchar dos veces sobre el nombre del fragmento, se inserta su contenido en el lugar en el que se encuentre el cursor dentro de la página, tal y como muestra la siguiente imagen:
Figura 14.2 Insertando un fragmento de código de Dreamweaver en una página web
3) Para añadir un fragmento de código propio, se crea en primer lugar una carpeta en la que se guardarán todos los snippets propios. El nombre elegido para esta carpeta es Propios y la forma de crearla es pinchando sobre el pequeño icono que simboliza una carpeta:
Figura 14.3 Creando una nueva carpeta para guardar los fragmentos de código propios
Una vez escrito el nombre de la nueva carpeta, el aspecto que muestra la ventana de snippets es el siguiente:
Figura 14.4 Nueva carpeta creada para guardar los fragmentos de código propios
4) Para crear un fragmento de código propio, se pulsa sobre el pequeño icono que simboliza un nuevo fragmento:
Figura 14.5 Creando un nuevo fragmento de código
Después de pulsar sobre ese icono, aparece la ventana en la que se puede escribir el nombre y el contenido del fragmento:
Figura 14.6 Propiedades (nombre, descripción y contenido) del fragmento de código propio
En este caso, se trata de un fragmento de código que inserta un bloque completo de código XHTML. También es posible crear fragmentos que añaden código XHTML antes y después del texto que ha sido seleccionado previamente.
Una vez creado el snippet, ya se puede insertar en cualquier zona de la página XHTML simplemente pulsando dos veces sobre su nombre:
Figura 14.7 Insertando un fragmento de código propio en una página XHTML
En las siguientes secciones de este capítulo, se incluyen algunos fragmentos de código imprescindibles para crear páginas web.