Marta Franco: Ideas para comunicar en la nubeApuntes básicos de HTML útiles para tu blog o web
Seguro que en alguna ocasión cuando visitabais alguna web al clicar el botón derecho de vuestro ratón para abrir la opción de “ver código fuente de la página” os habéis quedado impresionados ante la aparición de un lenguaje, a primera vista, indescifrable que parece concebido por un intérprete de Encuentros en la tercera fase.
Pero Kristina Nordlof, experta en diseño y programación web, me demostró que si os entretenéis un poco en la lectura y os cargáis de paciencia, optimismo e imaginación os daréis cuenta que incluso no compartiendo un ADN robótico o alienígena se pueden llegar a identificar algunos vínculos entre lo que se esconde tras el telón y la función puesta en escena.
Esa sucesión de líneas de código se denomina HTML (Hypertext Markup Language)y se utiliza para indicar a los navegadores Web cómoestructurar y mostrar las páginas web. Se podría definir como un lenguaje estructurado que se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>) y que cuenta con unas reglas. La principal organización que intenta regular el HTML y otras tecnologías web es el W3C (World Wide Web Consortium).
– La estructura básica de una página Web tiene este aspecto:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8”>
<title>Título del documento</title>
</head>
<body>
</body>
</html>
– El <html> delimita el comienzo y final del documento y es el contenedor del resto de elementos.
– La etiqueta <head> describe el contenido del documento y la “Metainformación” como, por ejemplo, el título de la página, mientras que <body> delimita el cuerpo del documentoy contiene todo el contenido que vemos en pantalla.
También podemos encontrar elementos en línea y en bloque. Los elementos en bloque pueden contener elementos en línea y algunos de ellos pueden contener otros elementos en bloque: <div><p>Contenido</p></div>. Los elementos en línea, sin embargo, no pueden contener elementos en bloque.
Los enlaces tienen este aspecto: <a>contenido</a>; los saltos de línea se representan así: <br> o <br/>; la negrita se corresponde a esto: <strong>contenido</strong>, y la cursiva tiene esta traducción: <em>contenido</em>.
Como podéis observar, las etiquetas siempre se deben abrir y cerrar, no se pueden cruzar y siempre se tienen que poner a los atributos entre comillas.
Las hojas de estilo describen la forma
El lenguaje HTML, no obstante, es limitado a la hora de aplicarle forma a un documento. Precisamente para poder controlar el aspecto de las páginas web, nació el CSS (Cascading Style Sheets). La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. Esa hoja de estilo se vincula de diferentes maneras a un documento HTML.
Ahora con una sola CSS o hoja de estilo se pueden controlar todas las páginas de un sitio web, lo que permite más control sobre el diseño, hace que sea más fácil de actualizar y mantener, se ahorra en ancho de banda y se reduce el tiempo de descarga, entre otras ventajas.
– Una hoja de estilo básica tiene este aspecto:
body {
color:#000;
background-color:#FFF;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
p {
margin:1em;
}
Lo último: el HTML5 y el CSS3
La última generación de tecnologías web es el HTML5 y el CSS3.
El HTML5 es la quinta revisión importante del lenguaje básico de la World Wide Web (HTML). Es la suma del HTML4, más el XHTML 1.0. El HTML5 es compatible con navegadoresanteriores, incluye nuevos elementos que mejoran la semántica y una mejora tecnológica y redefine algunos elementos existentes.
Igualmente, el CSS3 incluye prácticamente todo de la versión CSS2.1, así como nuevascaracterísticas e incluye soporte para selectores nuevos, sombras, degradados, esquinas redondeadas y transparencias.
Si queréis saber un poco más sobre estas nuevas tecnologías web podéis consultar recursos como SitePoint Reference (un proveedor de información dirigida a desarrolladores y diseñadores web), w3schools(ofrece tutoriales gratuitos para aprender a crear una página web con diferentes tecnologías de desarrollo), HTML5 (todo sobre el html5), CSS3 (todo lo que necesitas saber sobre CSS3), y 0 to 255 (una herramienta muy simple que ayuda a los diseñadores web a encontrar cualquier variedad de color para sus hojas de estilo).
Validadores de accesibilidad y compatibilidad de un sitio web
Si como yo no sois programadores web pero os habéis atrevido alguna vez a tocar un poco el código HTML de vuestro blog con miedo a fastidiar todo su aspecto, es importante contar con algún tipo de validador que reafirme vuestras intuiciones.
Porque aunque por delante hayáis conseguido que todo se vea bien, cuando chequéis vuestra página seguro que os sorprendéis de los errores que se esconden tras esas inocentes modificaciones.
Algunos validadores de código HTML de referencia son elW3C (Markup Validation Service para HTML y XHTML de documentos web) y el CSS Validation Service (verifica Hojas de Estilo en Cascada (CSS) y documentos (X)HTML con hojas de estilo).
Además para comprobar si tu sitio web es accesible puedes testearlo con diferentes herramientas de análisis automático de accesibilidad de acuerdo con las diferentes directrices para contenido web. Podéis usar TAW, WAVE, HERA y Cynthia Says.
También podéis comprobar la compatibilidad que tiene vuestro sitio web con los diferentes navegadores y testear como se ve la página en función del navegador que el visitante tenga instalado. Para ello podéis usar Browsershots, IE NetRenderer, Adobe BrowserLab y Cross browser testing (este último de pago).
Por último, si usáis Firefox como vuestro navegador habitual, también es muy útil el plugin de Firebug, para probar como se ven algunos cambios en el código de la página sin llegar a hacerlos realmente.
¡Ah! y ya como apunte final, si tenéis pensado modificar código y no sois unos expertos siempre es mejor guardar una copia antes de empezar a publicar los cambios. Mucha suerte 😉
Libro ‘Optimismo para periodistas’
