Curso básico de HTML y CSS para bloggers 1

Si eres bloguer o gestionas tu web seguro que más de una vez has tenido que enfrentarte a las siglas HTML y CSS. Sea cual sea tu gestor de contenidos, Blogger, Wordpress, Joomla al final lo que mostrará el navegador está codificado en lenguaje informático. Conocer éste mínimamente te permitirá no sólo personalizar tu sitio web / blog sino también solventar muchos errores.
Con esta entrada inicio una serie de post para aprender  HTML / CSS básico para gestionar tu blog/sitio web. 


Hace mucho tiempo que la idea de crear un mini curso de HTML / CSS ronda mi cabeza. Suelo participar bastante en los grupos de facebook abiertos a la cooperación entre blogueras (en especial el de Frikymama y El perro de papel). En éstos muchas veces surgen dudas o problemas, generalmente al personalizar el blog. 

Prestando ayuda en estos grupos, con mis nociones de programación aprendidas en el grado de Gráfica interactiva, me doy cuenta que muchos errores son por decirlo de alguna manera tontos. Muchas veces aplicamos los tutoriales siguiendo como un autómata los pasos dados, copiando y pegando códigos y cruzando los dedos para que funcione y no se nos desmonte nada. 

Y los errores aparecen, las meteduras de pata fortuitas las cometen hasta los programadores, pero a diferencia de ellos nosotros no siempre descubrimos y subsanamos el error. Seguramente teniendo cuatro nociones claras no se hubieran producido, o al menos sabríamos que está fallando. Y de lo que también soy consciente es el grado de ansiedad y frustración que genera meterse en terrenos que una no entiende ni controla. ¡Yo misma empecé así como bloguera!

Es por esto que me he animado a hacer una serie de entradas aclarando los conceptos básicos de HTML/CSS, aquellos que podamos necesitar para mejorar el aspecto de nuestras entradas, insertar un gadget/widget, seguir tutoriales de personalización y adecuarlo a aquello que deseamos realmente obtener.

Y vamos a empezar por lo básico,

¿Qué es y qué significa HTML?

HTML podría definirse como el lenguaje de instrucciones que indica al navegador qué debe mostrar en pantalla. Sería lo que constituiría su substancia, ¿quieres ver de que esta hecha la página que tu navegador muestra ahora? Clica con el botón derecho del ratón y selecciona ver código fuente. Lo que ves es algo parecido a la plantilla de tu blog, pero me entretendría mucho si enumero las diferencias, porque ya veremos que en una web intervienen muchos más lenguajes y que no todos se interpretan en el navegador.

Vamos a ver una definición de HTML más concreta y oficial, y que atiende al significado de sus siglas HTML: Hipertext Markup Language, traducido al castellano, Lenguaje Marcador de Hipertexto. Ésta definición remarca como funciona este lenguaje:  mediante marcas: ”tags” en inglés, etiquetas en castellano.

La idea es muy sencilla: los elementos que forman la web están marcados por etiquetas. Por ejemplo si queremos que el navegador muestre un párrafo de texto  el código sería el siguiente:

<p>Esto es un párrafo de texto</p>

El texto que constituye el párrafo debe marcarse dentro de una etiqueta de entrada <p> y otra de salida </p> .
¿Y si quisiéramos marcar un texto como título? Lo haríamos de la siguiente manera:

<h1>Este es un título de categoría 1</h1>

Como ves dentro de los signos de mayor y menor he sustituido p por h1. Estas serían dos de las más de 90 etiquetas que componen el lenguaje HTML. Las etiquetas son bastante fáciles de recordar, sobretodo si se domina el inglés, p viene de paragraph, párrafo, y h de heading, encabezado/título. Para informar de la jerarquía de títulos y substítulos en un mismo documento, HTML los numera  siendo el título más importante el marcado con el número uno.

Es importante que se aplique muy bien la sintaxis, si por ejemplo olvidas cerrar una etiqueta o no colocas en su orden cada signo es posible que el navegador no interprete bien el marcado. Fíjate que la etiqueta de cierre va entre los signos mayor y menor y le precede una barra: </p>

¿Qué constituye una web?

Muchas de las etiquetas se refieren a elementos propios de un artículo ( títulos,  párrafos, citas, listas , etc)  ya que en sus inicios el lenguaje HTML se creó para el intercambio de información entre la comunidad científica. Y a pesar de los más de 20 años transcurridos  la mayoría  de estas etiquetas se mantienen.  El lenguaje, como la tecnología,  está en continua evolución. La nueva versión, el  HTML5, incorpora nuevas etiquetas  en un avance hacia el concepto de web semántica, dónde cada elemento proporciona un significado intrínseco, rastreable por los buscadores.

La estructura básica de cualquier web, incluido tu blog, consta de una serie de etiquetas anidadas. Con anidadas me refiero a que las etiquetas se presentan como si la web fuera una compleja matrioska,  sí esas muñecas rusas que tanto me fascinaban en mi infancia.  Veamos el símil con un ejemplo, aquí teneís el código de una mínima página web que contiene un título y un párrafo:

<!DOCTYPE html>
<html>
   <head>
      <title>Mi página</title>
      <meta charset="UTF-8">
   </head>
   <body>
      <h1>Bienvenidos</h1>
      <p>Este es un párrafo de mi fabulosa página web.</p>    
   </body>
</html>

La gran mamá matrioska que compone esta web sería la etiqueta <html>, observa como se abre y cierra al principio y al final de esta mínima web. Debes ignorar la primera línea, <!DOCTYPE html>,  que solo informa al navegador, el encargado de mostrar la página, que se trata de un documento codificado en HTML.

La etiqueta <html> anida dos hijas: la etiqueta <head> y la etiqueta <body>. Si has fisgado la plantilla de tu blog seguro que te suenan. Estas etiquetas son madres a su vez de otras etiquetas anidadas en su interior, observa que entre la etiqueta de abertura y la de cierre del head aparecen dos etiquetas más: la de  title y una etiqueta  meta. En esta última no verás una etiqueta de cierre, ya que no todas lo requieren como veremos más adelante.

La etiqueta html indica al navegador donde empieza y acaba el código HTML.

La etiqueta head  es el nidito de todas las etiquetas  que indican al navegador cómo debe mostrar la página. Son discretas pero esenciales, se encargan de indexar la página en  los buscadores, indicar la lengua y/o  el alfabeto en el que se mostrará, definir funciones mediante JAVA, y como en el caso de los blogs  Blogger definir los colores y el aspecto que tendrá cada elemento mediante reglas CSS.

Dentro de body encontraremos todas las etiquetas que forman en si el contenido de la web, así le diríamos al navegador que muestre ese  título  y ese  párrafo, cada elemento marcado con su etiqueta correspondiente. Y podríamos añadir  más elementos como imágenes, videos, enlaces, etc.

Evidentemente la estructura de un blog es bastante más compleja, y de hecho un purista me corregiría, ya que exactamente no se trata de HTML puro. Pero  la base aquí expuesta nos va a ayudar a ir con paso más firme si nos toca lidiar con código. Fíjate ahora porqué en tantos tutoriales te insisten en copiar el código en un concreto lugar o en un determinado orden.

Y para acabar con la de lección de hoy te propongo un pequeño ejercicio. Abre la aplicación Bloc de notas de Windows o la Textedit de Mac, y copia el código de la mínima página web de arriba. Guardalo con la extensión .html. A continuación da doble clic sobre el nuevo archivo generado para que tu navegador por defecto lo abra. ¡Ya tienes ahí tu primera web!  Nada mal para la primera lección.

¿Te has quedado con alguna duda? ¿Atascada en algún concepto? Te espero en los comentarios.