Consejos técnicos: cómo utilizar XML/HTML/CSS
© Publishing Perspectives, 2013.
Nivel de dificultad: Básico
Este artículo está pensado para principiantes, pero cualquier usuario de HTML puede sacar provecho de los conceptos que aquí desarrollamos.
Definiendo nuestros términos
El XML –lenguaje de marcado extensible– permite almacenar datos de manera estructurada, gracias al uso de tags o etiquetas. Una etiqueta es simplemente un nombre enmarcado por < >. Así, <book> sería una etiqueta de libro y <title>, una etiqueta de título.
El HTML –lenguaje de marcado de hipertexto–, constituye una estructura XML específica y bien definida. Para decirlo en pocas palabras, se trata de una lista de etiquetas específicas, con su significado habitual.
El CSS –hojas de estilo en cascada– es un conjunto específico y bien definido de atributos de presentación. Estos atributos se aplican al marcado HTML para definir cómo éste será presentado al usuario.
El XHTML –una versión estricta de HTML que debe ajustarse a todos los estándares XML– viene a ser básicamente lo mismo que el HTML, con la salvedad de que si falta una etiqueta de cierre, el contenido no será interpretado correctamente, mientras que en HTML, el navegador a menudo hará la vista gorda y cerrará la etiqueta por nosotros.
Los fundamentos del HTML y por qué es importante que todos lo conozcamos
El HTML es el lenguaje de la web –al menos en lo que se refiere a la presentación de contenido. Los sitios web, los e-books y muchas aplicaciones dependen de una u otra manera del HTML. Aunque nunca tengamos que escribir en HTML a mano, estar al tanto de su potencial y de sus limitaciones es extremadamente importante.
Todas las etiquetas de HTML tienen un comienzo y un final. El comienzo se escribe <etiqueta> y el final, </etiqueta>. Todo lo que se encuentre en el medio designará el valor de la etiqueta.
Dividiré las etiquetas HTML en los siguientes grupos –lo que no constituye en absoluto una lista completa: incluyo aquí sólo las etiquetas más comunes–:
– Etiquetas de presentación. Estas etiquetas cambian el modo en que se presenta el texto: <b> o <strong> convierte el texto en negrita. <i> o <em> lo convierte en itálica. La etiqueta <img> inserta una imagen.
– Etiquetas de agrupación. Estas etiquetas designan contenidos agrupados de forma lógica y semántica. <p> agrupa contenidos en un párrafo, <h1> <h2> <h3> … <h6> denotan diferentes niveles de título.
– Etiquetas de estructura. Estas etiquetas no son visibles para el usuario, pero contienen metadatos referidos al documento, o definen la estructura del mismo. La etiqueta <head> define el encabezado, <title> define el título del documento –que debe ubicarse en el encabezado–, <body> define el cuerpo del contenido –es decir, lo que resulta visible para el lector.
– Etiquetas de control. Estas etiquetas definen la interacción del documento. La etiqueta <a> define un link o un destino –lo que habilita a aplicar un vínculo a una parte específica del documento.
– Comentarios. Los comentarios son códigos que el sistema ignora pero que sirven para que quien lee el código comprenda qué está ocurriendo. Los comentarios comienzan con <!-- y terminan con -->.
– Otros. Existen otras etiquetas como <script> y <style>, que nos permiten definir javascript, CSS y otros elementos que no son HTML pero que igualmente controlan cómo se presenta el contenido o cómo se interactúa con él.
Atributos y valores
Expliqué anteriormente que lo que se halla al interior de una etiqueta es su valor. Una etiqueta también puede tener atributos: son distintos del valor y existen en la etiqueta de apertura. Una etiqueta con un atributo tiene esta forma: <etiqueta atributo=“valor del atributo”>valor de la etiqueta</etiqueta>.
Una etiqueta común es el identificador (ID) que asigna un nombre único a dicha etiqueta. Por ejemplo: <p id=“ primer_parrafo”>Mi primer párrafo</p>.
Estructura del documento
Todo documento en HTML tendrá la siguiente estructura. Utilizaré el código <!-- --> para agregar comentarios:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <!-- Esto le dice al navegador o al programa que el documento está en HTML y que utiliza la estructura XML xhtml11.dtd -->
<html>
<head>
<title>Mi documento HTML</title>
<!-- el javascript y los archivos CSS estarán incluidos en el documento, aquí -->
</head>
<body>
<!-- El contenido del cuerpo iría en esta sección. Todo lo que se incluya aquí se visualizará -->
<p>Este es mi primer y único párrafo.</p>
</body>
</html>
Bastante simple, ¿no? Una característica fantástica de los navegadores web es que ofrecen la posibilidad de hacer click derecho y ver el código fuente de la página. Esto revelará el código HTML de la página que estamos visitando. En la mayoría de las páginas actuales, el código es interpretado por algún script alojado en el servidor –como el HTML que están leyendo ahora mismo, que fue generado por WordPress. Suele ser algo bastante complejo, pero aun así sigue la lógica que explicaba anteriormente. Fue hace unos 20 años que aprendí HTML –y javascript–, y lo logré gracias al botón “ver código fuente”.
CSS: embelleciendo nuestros contenidos
El HTML es muy limitado a la hora de controlar la presentación del contenido. En otra época se utilizaba la etiqueta <font> para definir la tipografía, pero ésta ha sido removida de las especificaciones HTML –aunque todavía funciona en la mayoría de los navegadores. Casi toda la presentación de los contenidos HTML está controlada por CSS, el cual puede declararse de los siguientes modos:
- Interno, utilizando el atributo “style”. El CSS puede insertarse directamente, como en aquí: <p style=“text-indent:32px;”>Este texto tendrá una indentación de en 32 píxeles.</p>. El documento mantiene una lectura sencilla, pero los estilos definidos sólo funcionan dentro de la única etiqueta. El estilo interno no suele recomendarse.
- Utilizando identificadores en la hoja de estilos CSS. Si bien los ID deben ser únicos en cada archivo HTML, podemos reutilizar el mismo ID en múltiples archivos y tener un mismo CSS para cada uno de esos archivos. La declaración de CSS sería: “#primer_parrafo {text-indent: 32px;}” y el HTML sería: <p id=“primer_parrafo”>Este texto tendrá una indentación de 32 píxeles.</p>. El uso de # en CSS designa un selector de ID.
- Seleccionando etiquetas en el CSS. El HTML ofrece algunas etiquetas semáticas, como <h1> <h2> <h3>…, que definen distintos niveles de título. Si empleamos estas etiquetas, en CSS podremos definir cómo presentar los títulos.
El CSS quedaría así:
h1 {font-size:48px;}
h2 {font-size: 42px;}
h3 {font-size: 36px;}
Mientras que el HTML quedaría así:
<h1>Título grande (48 píxeles)</h1>
<h2>Subtítulo menor (42 píxeles)</h2>
<h3>Subtítulo aun menor (36 píxeles)</h3>
Ahora bien, cada etiqueta h1, h2 y h3 tendrá el mismo aspecto. Al mismo tiempo, el estilo se encuentra definido en un simple archivo CSS, de modo que podemos cambiarlo fácilmente. Este es el uso más recomendable de todos. - Seleccionando clases en el archivo CSS. Si bien los ID son únicos, los elementos pueden tener clases, que podrían ser compartidas. En HTML, definimos nuestra lista de clases –separadas por espacios– en la “clase” atributo. Por ejemplo: <p class=“texto_indentado tipografia_verde”>Este texto aparecerá indentado y con la tipografía verde</p>. Nuestra declaración de CSS debería ser:
.texto_indentado {text-indent: 36px;}
.tipografia_verde {font-color: rgb ( 0, 255, 0);}
Como podemos ver, dos clases han sido definidas y aplicadas a ese párrafo. A través de las clases, fácilmente podemos definir otro párrafo posterior en el documento HTML, utilizando: <p class=“texto_indentado”>Párrafo que aparecerá indentado pero no verde</p>.
De hecho, podemos combinar selectores para volverlos más específicos, como: “texto_indentado b {font-color: rgb(255,0,0);}”, lo que tomará todas las etiquetas <b> que estén contenidas dentro de un elemento de clase “texto_indentado” y hará que el texto aparezca en rojo. En otro artículo me explayaré sobre usos avanzados de selectores CSS, pues algunas opciones pueden resultar muy complejas.
Cómo leer documentación de API
Al comienzo de este artículo figura el vínculo a la documentación de HTML y CSS, y ambos pueden parecer desmoralizantes tanto por su extensión como por su aspecto. A decir verdad, la información que allí encontramos es muchísima y está dirigida sobre todo a usuarios muy especializados –ya que la emplearán expertos que necesitan verificar que lo que escriben en HTML funciona correctamente. Si los términos que figuran allí llegan a producir confusión, lo mejor será cerrar esa ventana, abrir Google y buscar “referencia rápida de HTML” o “referencia rápida de CSS”. Existen numerosos tutoriales pensados para toda clase de público, de diferentes niveles, y por lo general son gratuitos.
