Guía básica de (X)HTML

• Antes de comenzar
• Un primer acercamiento al código
• Diferenciando entre HTML y XHTML
• Estructura básica de un documento XHTML
• Conceptos claves en un documento
• Comentarios
• Título del documento
• Encabezados
• Líneas horizontales
• Texto
• Escribir texto
• Formato al texto
• Escribir parrafos
• Nueva línea del párrafo
• Listas
• Numeradas
• No numeradas
• De definiciones
• Imágenes
• Enlaces
• Referencias
• Absolutas
• Relativas
• De texto
• De imágen
• Referencias
• Absolutas
• Relativas
• Locales
• Tablas
• Estructura básica
• Titulo de tablas
• Agrupando celdas
• Formularios
• Campos de formularios
• Cajas de texto
• Cajas de verificación
• Botones Radio
• Listas de opciones
• Cuadros de texto
• Botones
• Normales
• Enviar
• Cancelar
• Elementos ocultos
• Frames
• Código de colores

Antes de comenzar

Trabajaremos en XHTML porque HTML está pasando a segundo término. La diferencia entre HTML y XHTML radica principalmente en estructurar bien las etiquetas. ^[1]

No importa el software que utilicemos para escribir el código, lo importante será guardar el archivo como archivo de texto (texto plano) y la extensión .HTM o .HTML.

En algunos casos se escribirá (X)HTML para indicar que lo explicado se refiere tanto a HTML como a XHTML.

Haremos alusión en todo momento a el Sistema Operativo (S.O.) Microsoft® Windows porque es el S.O. mas popular. Análogamente, esta guía podrá funcionar en otro S.O.

Un primer acercamiento al código

Supongamos que trabajamos en el bloc de notas para hacer nuestro código y escribimos algo como:

Seguro que querremos ver el resultado pero antes debemos guardar el documento. Vamos entonces al menú "Archivo" opción "Guardar" y se abre un cuadro de diálogo en donde lo principal está en observar el campo para escribir el nombre, el tipo de archivo y, algunas aplicaciones permiten incluso, el tipo de codificación.

Desde luego que también es importante ubicar en donde se guardará el documento pero eso es cuestión de otro tema, aquí vamos a suponer que todo se guardará en la carpeta "Mis Documentos".

Entonces, enfocándonos en los elemento que nos interesan, escribimos un nombre en el campo "Nombre:" (para este ejemplo será "indice.htm") luego elegimos en la lista "Tipo:"  la opción que dice "Todos los archivos" (si se queda seleccionada la opción "Documentos de texto" entonces el archivo se guardará con la extensión .htm.txt y, cuando se intente abrir se asociará al programa notepad [o el predeterminado para abrir los .TXT]). Si el programa permite asignar el tipo de codificación, entonces elegiremos en la lista "Codificación:" la opción ANSI, en caso de que no lo permita entonces seguro que lo guarda en esta codificación.

Y para poder ver el resultado en el navegador solo hace falta hacer alguno de estos pasos:

• Presionar dos veces con el puntero del ratón sobre el icono del archivo creado (desde luego que antes deberá abrir el Explorador de Windows) lo que provocará que el archivo se abra con la aplicación predeterminada para verlo.
• Abrir el navegador Web de su preferencia (puede ser Microsoft® Internet Explorer, Mozilla, Firefox, Opera o cualquier otro) y, en el menú" Archivo" elegir el comando "Abrir archivo" para, posteriormente, elegir la ubicación y el archivo creado.
• Si conoce la ruta exacta de su archivo puede omitir acudir al menú archivo y teclear directamente en la barra de direcciones de su navegador (incluso en el mismo Explorador de Windows si es que utiliza una versión de Windows® superior a la 98 SE).

Diferenciando entre HTML y XHTML

El código anterior es correcto en HTML pero para XHTML no lo es. Hay ciertas reglas que se deben tener presentes, por ejemplo y las más importantes son:

• Los nombres de elementos y atributos deben escribirse en minúsculas.
• Los elementos vacíos deben cerrarse siempre.
• Los elementos no vacíos también deben cerrarse siempre.
• Los elementos anidados deben tener un correcto orden de apertura/cierre (el último que se abre, se debe cerrarse primero).
• Se debe siempre especificar un texto alternativo para imágenes (atributo "alt" para la etiqueta "img").
• Insertar elementos de bloque dentro de elementos de línea.
• Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles).
• El símbolo & (ampersand) debe ser usado únicamente como parte de una entidad.
• No está permitida la minimización de atributos (se usa el nombre del atributo como valor).
• Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.

Parecen muchas reglas para alguien que no sabe nada aún sobre HTML y, mucho menos, de XHTML pero es conveniente mencionarlo ahora y evitar malos entendidos después. Si llegara a omitir alguna o varias de las reglas lo que ocurrirá al verlo en un navegador no es significativo (todavía) incluso puede no pasar absolutamente nada. Pero eso no quiere decir que esté bien hecho el documento. Si se procesara a través de un validador de código entonces nos indicaría los errores. En un futuro tal vez ni sea posible abrir un documento mal estructurado y, por otro lado, llegará a repercutir en aplicaciones que quisieran servirse de dicho documento para extraer información.

Estructura básica de un documento XHTML

Ahora si, la correcta escritura del código en XHTML sería esta:

A este código lo llamaremos estructura básica de un documento XHTML. Se pueden notar varias diferencias en cuanto al primer código escrito.

• En la primer línea se encuentra la etiqueta <!DOCTYPE... que define el DTD. ^[2]
• El resto del código está en minúsculas.
• La segunda línea es una declaración xmlns para el espacio de nombres de XHTML.
• La etiqueta <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> indica el juego de caracteres en el propio documento.

Como ve, se han seguido las normas para XHTML que se enunciaron anteriormente.

Conceptos claves de un documento

Ahora explicaremos algunos conceptos que hemos dejado para este momento:

• El código (X)HTML se basa en etiquetas para mostrar el contenido.
• Las etiquetas pueden tener atributos que se usan para cambiar el comportamiento estándar de la etiqueta.
• Hay dos tipos de etiquetas, las que contienen algo y las que están vacías:
• Las que contienen algo se abrirán antes del contenido y se cerrarán después de el.
• Las que están vacías se cerrarán en la misma etiqueta que se abre.
• Las etiquetas llevan la siguiente sintaxis (los colores son únicamente didácticos, no los llevará realmente):
  <nombre_etiqueta [atributo_1="valor", atributo_2="valor"... atributo_n="valor"]>[contenido</nombre_etiqueta>]
  Ejemplo:
• <br /> es una etiqueta vacía, por eso se escribe la diagonal al final de br separada con un espacio (aunque podría no llevar el espacio, es mas correcto ponerlo).
  <title>Mi primer ejemplo</title> es una etiqueta que tiene contenido. El contenido de title es "Mi primer ejemplo", note como se cierra la etiqueta al final del contenido.
• Los atributos pueden servir para cambiar formatos en el texto (color, tipo de fuente, negrillas, tamaño, etc.) pero en caso de requerir esos cambios se utilizarán estilos. Solo utilizaremos los atributos de las etiquetas cuando no exista el equivalente en CSS.

El primer código será correcto en XHTML de la siguiente manera:

¿Nota alguna otra diferencia, específicamente en la etiqueta body?. Correcto, está escrito p&aacute;gina en vez de página.

Resulta que los signos especiales (no alfanuméricos)  como algunos signos diacríticos (acentos ortográficos, diéresis, la oclusión, la nasalización, la tilde), los signos ¿, <, >, ¡ y ! por mencionar solo algunos tienen un código en HTML para poder escribirlos correctamente en el navegador. ^[3]

Si omitimos el código para el signo, entonces es muy posible que obtengamos un resultado no esperado como signos raros que sustituyen al carácter que pretendíamos escribir.

Seguramente está pensando  ¿Y como saber cuales son esos signos?