Cómo contratar diseño web sin hacer el ridículo

Capítulo 3

¿Qué es el HTML y el CSS?

En este capítulo aprenderás…

  1. En qué consiste el HTML
  2. En qué consiste el CSS
  3. A detectar errores en un código HTML
  4. A escribir HTML básico
  5. Algunos aspectos del HTML que los buscadores tienen en cuenta para decidir en qué posición de sus resultados muestran tus páginas web

¿Qué es el HTML? (versión fast food)

Un archivo HTML es un documento que contiene el texto de una página web y referencias al resto del contenido de dicha página web, como vídeos, imágenes, sonidos y cualquier otro recurso.

No son pocas las veces que alguien me ha preguntado si en Clever Consulting hacemos webs en HTML. Todas las páginas web son un archivo con formato HTML. Todas.

Puedes crear una web en menos de 10 minutos haciendo lo siguiente:

  1. Si usas Windows abre la aplicación “Bloc de notas” de tu ordenador (si usas Mac OS X te recomiendo descargar, instalar y usar el programa Sublime Text).
  2. Pega en un documento vacío el siguiente texto:
    	<!DOCTYPE html>
    	<html>
    	  <body>
    	    Mi primera página web
    	  </body>
    	</html>

    Captura del Bloc de notas de Windows con un documento de texto que contiene el código HTML indicado anteriormente.

    Imagen 3.1. Documento de texto, en el Bloc de Notas de Windows, conteniendo el código HTML indicado.

  3. Guarda el archivo con el nombre index.html en el escritorio de tu PC: clic en “Archivo”, clic en “Guardar como…”, escribir index.html (o el nombre que quieras siempre y cuando uses la extensión .html) y clic en “Guardar”.

    Captura del Bloc de notas de Windows con el cuadro de diálogo de

    Imagen 3.2. Cuadro de diálogo de “Guardar archivo” del Bloc de notas de Windows. Es importante que el archivo tenga la extensón .html.

  4. Ve al escritorio y abre el archivo index.html haciendo doble clic en él.

    Captura del icono de la página web recién creada, con nombre index.html.

    Imagen 3.3. Acabas de crear una página web. Haz doble clic en el icono de dicha página web y ésta se abrirá en el navegador que tengas configurado como predeterminado.

  5. Bienvenido a tu primera página web.

    Captura de Google Chrome en Windows mostrando una página web con el código HTML del ejemplo de este apartado.

    Imagen 3.4. Tu primera página web será idéntica a la de la imagen.

Como acabas de comprobar, un archivo HTML no es más que un mero archivo de texto con contenido estático –no varía bajo ninguna condición– escrito siguiendo una sintaxis y un léxico concretos. Escribir HTML no es programar, ni HTML es un lenguaje de programación. Escribir HTML es infinitamente más sencillo que programar.

Si vuelves a abrir el archivo index.html con un editor de texto, como el Bloc de notas, verás que nada de lo que has escrito ha cambiado, sigue siendo un archivo de texto plano. Son los navegadores, como Microsoft Internet Edge, Google Chrome, Mozilla Firefox, Apple Safari u Opera, los que interpretan los archivos HTML para representarlos de una forma fácilmente legible por los humanos.

¿Qué es el HTML? (versión rigurosa)

HTML es el formato de un tipo de archivo de texto, más concretamente el formato de archivo de las páginas web.

Otros ejemplos de formatos de archivo de texto son DOC o DOCX para documentos de Microsoft Word, o TXT para archivos de texto plano, es decir, sin estilos.

HTML son las siglas de “HyperText Markup Lenguage“, que significa “Lenguaje de Marcado de Hipertexto”:

  • Lenguaje porque como veremos a continuación se trata de un conjunto de reglas sintácticas y semánticas, como ocurre con cualquier idioma.
  • Marcado (o “de marcas”) porque en este lenguaje las distintas partes de un texto se delimitan a través de “marcas”, las etiquetas.
  • Hipertexto es el texto que contiene enlaces. Un enlace (también llamado “link“, “vínculo”, “hiperenlace”, “hyperlink” o “hipervínculo”) es el elemento (normalmente una porción de texto o una imagen) de un documento (como por ejemplo una página web) en el que al hacer clic un usuario provoca que a dicho usuario se le muestre otra parte del documento u otro documento.

Los archivos con formato HTML se pueden presentar con una de dos extensiones: .html o .htm.

¿Qué es el CSS? (versión fast food)

CSS es otro formato de archivo de texto. Los archivos CSS establecen los estilos de los archivos HTML.

Como ya hemos hecho con el HTML, crearemos, en menos de diez minutos, una hoja de estilo o archivo CSS:

  1. Abre la aplicación Bloc de notas de tu ordenador (en Windows).
  2. Abre el archivo index.html creado hace un momento: clic en “Archivo”, Clic en “Abrir…”, clic en “Formato”, en “Tipo de archivo” seleccionar “Todos los formatos”, selecciona el archivo index.html, Clic en “Abrir”.
  3. Edítalo para que su contenido quede como lo que te pongo a continuación:
    <!DOCTYPE html>
      <html>
        <head>
          <link href="style.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
          Mi primera página web
        </body>
      </html>
  4. Guarda el archivo: clic en “Archivo” y clic en “Guardar”.
  5. Crea un nuevo archivo: clic en “Archivo” y clic en “Nuevo”.
  6. Pega el texto a continuación:
    	body {
    	  font-family: Arial;
    	  font-size: 30px;
    	  font-weight: bold;
    	  text-decoration: underline;
    	}
  7. Guarda este archivo en tu escritorio con el nombre style.css: clic en “Archivo”, clic en “Guardar como…”, escribir “style.css” y clic en “Guardar”.
  8. Ve al escritorio y abre de nuevo el documento index.html.

Comprobarás que el diseño de tu primera página web ha cambiado. Ahora el texto aparece escrito con la tipografía Arial, con un tamaño de 30 puntos, en negrita y subrayado.

Captura de Google Chrome en Windows mostrando una página web con el código HTML y CSS del ejemplo de este apartado.

Imagen 3.5. Tu primera página ya tiene estilos.

La tecnología CSS nació para independizar contenido y diseño, lo que hace que editar el diseño sea mucho más fácil que antiguamente, cuando estaba mezclado en los mismos archivos (HTML) que contienen el contenido.

Si vuelves a abrir el archivo style.css con un editor de texto, como el Bloc de notas, verás que sigue siendo un archivo de texto plano. Son los navegadores los que interpretan los archivos CSS para representarlos de una forma entendible por los humanos.

¿Qué es el CSS? (versión rigurosa)

CSS es el formato de un tipo de archivo de texto, más concretamente el formato de archivo que establece la apariencia gráfica de las páginas web.

En el proceso de construcción de una web es el diseñador el que, usando un software de diseño como Adobe Photoshop, Adobe Illustrator, Adobe FireworksGimp o Inkscape, diseña la apariencia del sito o aplicación web, y una vez dicho diseño es aprobado por el cliente, es un maquetador el que, escribiendo CSS, hace realidad el diseño.

CSS son las siglas de “Cascading Style Sheets“, que se traduce como “Hoja de Estilos en Cascada”:

  • Hoja porque se trata de un documento o parte de un documento.
  • Estilos porque sirven para definir la aperiencia gráfica de un documento en formato HTML.
  • en Cascada porque existe un orden de prioridad en caso de que más de una regla de estilo se aplique sobre un mismo elemento.

Los archivos con formato CSS tienen la extensión de archivo.css.

Una plantilla gráfica o template es el conjunto de archivos HTML, CSS y otros recursos (imágenes, iconos, archivos JavaScript) que componen un diseño web (más acerca de esto en próximos capítulos).

¿Cómo funciona el HTML?

Las etiquetas

El HTML es un lenguaje basado en etiquetas (o tags en inglés). Las etiquetas son cadenas de texto que indican el inicio y final de un elemento. Por ejemplo, existen etiquetas para indicar dónde empieza y dónde finaliza un párrafo:

<p>Este es el primer párrafo.</p>
	
<p>Este es el segundo párrafo.</p>

<p> es la apertura de la etiqueta párrafo y determina el inicio de un párrafo, y </p> es el cierre de la etiqueta y determina el final del párrafo.

Existen etiquetas HTML para representar cada uno de los elementos que pueden formar parte de una página web: titulares, subtitulares, imágenes, enlaces, listas, vídeos, formularios …

Captura de pantalla de un documento HTML en Sublime Text en el que los valores de las propiedades de las etiquetas aparecen en distinto color que el resto del código.

Imagen 3.6. En un documento HTML los saltos entre líneas y la tabulación del texto no tienen repercusión en el resultado que se verá a través del navegador, sólo se hace para facilitar la lectura del código HTML. Además, existen editores de texto concebidos para la edición de HTML y CSS, como Sublime Text (en la captura superior), que colorean algunos elementos para facilitar aun más la lectura.

Si al escribir en HTML se te olvida escribir el cierre de una etiqueta se dice que la etiqueta ha quedado abierta, lo que producirá problemas en la visualización de la página web y en el reconocimiento de la página web por buscadores.

Validación de código HTML

Si existe un error en un código HTML se dice que dicho código no valida. Puedes comprobar si una página web valida o no a través de la aplicación web HTML Validator, creada por la organización W3C, que es el organismo que crea y mantiene las especificaciones HTML y CSS, entre otras.

W3C son las siglas de “World Wide Web Consortium“, lo que se traduce como “Consocio de la Red Mundial”.

No es necesario que una página web valide para que funcione. La mayoría de errores serán comprendidos y subsanados por el navegador. Aun así, los errores se deben minimizar, pues puede que algunos navegadores o buscadores no sean capaces de comprender, y por tanto mostrar, una página web que contenga errores de validación.

No obstante, es casi imposible que el Validador HTML no detecte ni un solo error en una página web, pues existen etiquetas que no son parte de la especificación oficial HTML pero que son de uso común.

Un ejemplo de etiquetas HTML que no son parte de la especificación son las que sirven para indicarle a FacebookTwitter el título y resumen de una página web, algo que resulta útil cuando alguien comparte un enlace en una de éstas redes sociales.

Captura de pantalla desde el navegador Firefox para Mac OS X de los resultados que ofrece la página web validator.w3.org tras evaluar la validación del código HTML de la página http://www.google.es/.

Imagen 3.7. Ni siquiera el código HTML de la página web de Google valida. Como se puede observar en la imagen superior, contiene 27 errores y 4 advertencias (warnings en inglés). Las advertencias son cambios recomendados por el W3C.
La herramienta Validator también nos indica dónde se encuentran, en el código HTML de google.es, cada uno de los errores y advertencias, así como sugerencias para solventarlos.

Anidación de etiquetas HTML

Las etiquetas HTML se pueden anidar unas dentro de otras, por ejemplo:

<p>Este es el <em>primer párrafo</em>.</p>

En este caso, la etiqueta <em>…</em> está anidada dentro de la etiqueta <p>…</p> y este sería el resultado visto desde un navegador:

Este es el primer párrafo.

La etiqueta <em>…</em> sirve para resaltar (emphasis) un texto.

Propiedades en las etiquetas HTML

Algunas etiquetas pueden ir acompañadas de propiedades. Por ejemplo, la etiqueta <a>…</a>, que sirve para crear un enlace. Ejemplo:

<a href="http://mongemalo.es/">Blog de marketing y tecnología</a>

En este caso, lo que aparece después de la apertura de la etiqueta (<a) es la propiedad href, que indica la dirección web a la que debe llevar un enlace. Lo que va entre las comillas que siguen al signo = es el valor de la propiedad. A continuación se muestra cómo se observará en un navegador el ejemplo anterior:

Blog de marketing y tecnología

Al texto clicable de un enlace se le llama texto del enlace, texto ancla o anchor text. En el caso anterior el anchor text es: “Blog de marketing y tecnología”.

Self-closing tags

Existe un tipo de etiquetas llamadas self-closing (traducible como “cerradas en sí mismas”), que se cierran de manera distinta a cómo he explicado hasta ahora.

Una de estas etiquetas es la etiqueta que sirve para incrustar una imagen en un documento HTML:

<img src="http://mongemalo.es/foto.jpg" alt="Descripción de la imagen" title="Título de la imagen" width="200" height="100" />

Como puedes observar en la línea anterior, las etiquetas self-closing se cierran con los caracteres />. Esta etiqueta (img), además, tiene múltiples propiedades:

  • src: del inglés source, que significa fuente. El valor de esta propiedad indica la ruta de la imagen. La etiqueta HTML del ejemplo no servirá de nada a menos que exista el archivo http://mongemalo.es/foto.jpg.
  • alt: esta propiedad se llama texto alternativo (proviene del inglés alternative text) y debe contener un texto que describa el contenido de la imagen. Es útil para los invidentes, para los buscadores de imágenes (como Google Imágenes) y para el resto de los usuarios cuando la imagen no carga correctamente.

    Imagen 3.8. Cuando no se carga una imagen de un archivo HTML el navegador muestra, en lugar de la imagen, el valor alt de dicha imagen. De esta forma, si la imagen aporta significado al resto del contenido, dicho contenido se seguirá entendiendo correctamente.

  • title: es el recuadro amarillo con texto negro que aparece encima de la imagen cuando sitúas el ratón sobre ésta. También es útil para buscadores.

    Captura de pantalla de una imagen mientras se muestra el recuadro con el valor de la propiedad title

    Imagen 3.9. El texto que dice “Última evolución del logo de Pepsi” corresponde al valor de la propiedad title de la imagen superior, que forma parte de un documento HTML.

  • width: el ancho de la imagen, en píxeles.
  • height: el alto de la imagen, en píxeles.

Comentarios

Los comentarios son anotaciones dentro del documento HTML que el navegador no muestra por pantalla. Los comentarios suelen ser explicaciones acerca de cómo está escrito el código HTML, lo que resultará de ayuda para facilitar la comprensión del código HTML por otra persona distinta al autor del código o cuando haya pasado el tiempo.

Ejemplo de comentario:

<!-- Esto es un comentario. En un comentario no se deben usar tildes, dieresis, ni la letra que en el abecedario castellano viene despues de la n :)

Se considera una buena practica escribir los comentarios en ingles. -->

Los comentarios se inician con los caracteres <!-- y se finalizan con los caracteres -->.

HTML en detalle

Ahora que ya conoces en qué consiste el lenguaje HTML vamos a analizar línea a línea un código HTML que contiene las etiquetas más habituales:

<!DOCTYPE html>

<html dir="ltr" lang="es-ES">

  <head>
      
      <link rel="shortcut icon" href="favicon.ico" />
  
      <link rel="stylesheet" type="text/css" href="style.css" media="all" />

      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
      <title>Título en la ventana del navegador</title>

      <meta name="title" content="Título en los resultados de los buscadores" />

      <meta name="description" content="Descripción en los buscadores" />

      <script src="jquery.js"></script>

  </head>

  <body>

    <h1>Cabecera 1, es el titular, debe ser uno por página</h1>

    <h2>Cabecera 2, subtitular, se pueden usar varios por página</h2>

    <h3>Cabecera 3, y se pueden usar hasta 6 niveles de cabeceras</h3>

    <p>Párrafo y <a href="http://www.cleverconsulting.net">ejemplo de anchor text.</a></p>

    <img src="foto.jpg" width="30" height="30" alt="Texto alternativo" title="Título de la imagen" />
    
    <div class="contenedor-ejemplo">
    	
      <p>Curso creado por <span class="author">Luis Monge Malo</span>.</p>
    	
    </div>

  </body>

</html>

Te facilitará la comprensión de la explicación que viene a continuación que crees un archivo HTML con el código anterior y observes el resultado desde un navegador.

Si lo haces el resultado será similar a la siguiente imagen:

[Captura de pantalla de la página web resultante tras crear un archivo HTML con el anterior código de ejemplo vista desde un navegador

Imagen 3.10. Captura de pantalla del resultado del código HTML usado en este apartado, visto desde el navegador Mozilla Firefox para Mac OS X.

  • Línea 1:
    <!DOCTYPE html>
  • Explicación de la línea 1: sirve para indicar el inicio de un archivo HTML. Todos los archivos HTML deben empezar con esta línea. Esta etiqueta ya está cerrada, en ese aspecto es diferente a todas las demás.

  • Línea 2: <html dir="ltr" lang="es-ES">
  • Explicación de la línea 2: es el inicio de la etiqueta html. Su cierre (</html>) debe ser la última línea de cualquier archivo HTML. Contiene dos propiedades con sus respectivos valores:
    • dir="ltr": dirección de escritura del idioma en el que estará la página web, en este caso, de izquierda a derecha (del inglés “Left To Right“).
    • lang="es-ES": el idioma en el que estará la página web, en este caso, español de España.

  • Línea 3: <head>
  • Explicación de la línea 3: es el inicio de la cabeza o cabecera, uno de los dos elementos principales que forman parte de cualquier archivo HTML. El otro es el cuerpo (<body> … </body>).

Como verás a continuación, el contenido de la cabecera está destinado al navegador o a los buscadores.


  • Línea 4: <link rel="shortcut icon" href="favicon.ico" />
  • Explicación de la línea 4: la propiedad y su valor, rel="shortcut icon", indican que se trata de un icono. El valor de la propiedad href indica la ruta del pequeño icono que aparece en la barra de navegación al lado de la dirección de la página web. Este icono se llama favicon.
    En este caso, y habitualmente, la ruta del recurso se indica de manera relativa al archivo HTML. Es decir, como la ruta no indica ningún directorio ni subdirectorio, se espera que el recurso (favicon.ico) se encuentre en la misma localización que el archivo HTML. Por tanto, esta línea no servirá de nada a menos que haya un archivo llamado favicon.ico en el mismo directorio que en el que se encuentra el archivo HTML.

    Captura de Chrome resaltando el icono en la pestaña de la página de inicio del sitio web de Clever Consulting, a la izquierda del título de la página web, y que consiste en un pequeño elefante.

    Imagen 3.11. Favicon en la página de inicio del sitio web de Clever Consulting.

El favicon fue inventado por Microsoft para Internet Explorer 5, para que cuando se guardara una página en favoritos apareciera un icono al lado del nombre de dicha página. De ahí su nombre: fav-icon.

La idea se la debemos al programador Bharat Shyam y a su jefe Ray Sun, que fue quien le dio el visto bueno durante una larga y solitaria noche de trabajo, pues de haber sido por uno de los superiores de Ray el favicon nunca hubiera sido aprobado.


  • Línea 5: <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  • Explicación de la línea 5: las propiedades y valores rel="stylesheet" y type="text/css" indican la relación con una hoja de estilos (un archivo CSS).
    El valor de la propiedad href indica la ruta del archivo CSS en cuestión.
    Esta línea no servirá de nada a menos que haya un archivo llamado style.css en el mismo directorio que el archivo HTML.
    La propiedad y valor media="all" indican que esta hoja de estilos se usará para todos los tipos de dispositivos (PCs, móviles y tablets). Un HTML puede contar con distintas hojas de estilo para que se cargue una u otra según cuál sea el tipo de dispositivo desde el que se visita la página web.

  • Línea 6: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  • Explicación de la línea 6: deberías encontrar una línea como ésta (o similar) en todos los archivos HTML. La propiedad y valor que nos interesa es charset="utf-8", que indican que en esta página web vamos a utilizar caracteres de alfabetos occidentales.
    A la etiquetas que empiezan con <meta se les llama meta-etiquetas o meta-tags.

  • Línea 7: <title>Título en la ventana del navegador</title>
  • Explicación de la línea 7: apertura y cierre de la etiqueta title o título. Es el texto que se verá en la barra de título de la ventana o pestaña del navegador.
    Junto con el favicon, esta es la única información contenida dentro del head que el usuario sí ve a través de su navegador.

    Captura de Chrome resaltando el título de la pestaña de la página de inicio del sitio web de Clever Consulting, a la derecha del favicon.

    Imagen 3.12. title de la página de inicio del sitio web de Clever Consulting.

    No confundas la etiqueta title con la etiqueta meta title (explicada a continuación).


  • Línea 8: <meta name="title" content="Título en los resultados de los buscadores" />
  • Explicación de la línea 8: esta etiqueta es conocida como la “meta-etiqueta título”, “meta título”, “meta title” o “título SEO“. Es el texto que los buscadores quizás utilizarán como título cuando esta página aparezca como uno de sus resultados. No obstante, aunque el uso del meta título todavía es habitual, apenas es tenido en cuenta ya por los buscadores que, en su lugar, prefieren la etiqueta <title> explicada en el punto anterior.

    Captura de pantalla de los resultados de Google en la que se destaca el meta title del primer resultado, el blog mongemalo.es.

    Imagen 3.13. La imagen superior es una captura de pantalla de los resultados de Google. El título clicable de cada resultado debería coincidir con el contenido de la etiqueta meta title de la página web a la que enlaza el resultado.
    Digo “debería coincidir” porque en ocasiones los buscadores deciden usar otro texto, como una porción del contenido de la página web.


  • Línea 9: <meta name="description" content="Descripción en los buscadores" />
  • Explicación de la línea 9: esta etiqueta es conocida como la “meta-etiqueta descripción”, “meta descripción”,  “meta description” o “descripción SEO“. Es el texto que los buscadores deberían utilizar como descripción cuando esta página aparezca como uno de los resultados.

    Captura de pantalla de los resultados de Google en la que se destaca el meta description del primer resultado, el blog mongemalo.es.

    Imagen 3.14. La imagen superior es una captura de pantalla de los resultados de Google. Las dos líneas de texto de debajo del título deberían coincidir con el contenido de la etiqueta meta description de la página web a la que enlaza el resultado.
    Como ocurre con el meta title, a veces los buscadores deciden usar otro texto, como una porción del contenido de la página web.


  • Línea 10: <script src="jquery.js"></script>
  • Explicación de la línea 10: apertura y cierre de la etiqueta script. El valor de la propiedad src indica la ruta de un programa en JavaScript.
    Esta línea no servirá de nada a menos que haya un archivo llamado jquery.js en el mismo directorio que el archivo HTML. JavaScript es un lenguaje de programación. Se pueden incrustar programas en JavaScript en un archivo HTML, lo que permite dotar a la página web de funcionalidad y mayor dinamismo. Encontrarás más información acerca de qué exactamente es JavaScript y cómo funciona en siguientes capítulos.

  • Líneas 11 y 12:

    	</head>
    	
    	<body>
  • Explicación de las líneas 11 y 12: cierre de la etiqueta head y apertura de la etiqueta body, el cuerpo de la web, que contiene el contenido de la página web que sí está destinado para los usuarios (a diferencia del contenido del head).

    Fotografía de camiseta con el texto

    Imagen 3.15. Ejemplo de sentido del humor en el mundo informático.


  • Línea 13: <h1>Cabecera 1, es el titular, debe ser uno por página</h1>
  • Explicación de la línea 13: apertura y cierre de la etiqueta que contiene el titular principal de la página web. Cada página web debería tener un solo titular h1.
    El uso de la letra “h” para marcar los titulares y subtitulares proviene de la palabra inglesa heading, que significa titular.
    Idealmente, el H1 de cada una de las páginas web de un mismo sitio web será diferente al resto de los H1 del resto de páginas web de dicho sitio web y contendrá un mensaje descriptivo del contenido de la página web que titula.

  • Líneas 14 y 15:

    	<h2>Cabecera 2, subtitular, se pueden usar varios por página</h2>
    
    	<h3>Cabecera 3, y se pueden usar hasta 6 niveles de cabeceras</h3>
  • Explicación de las líneas 14 y 15: apertura y cierre de un subtitular y de un subsubtitular. Y así se puede llegar hasta seis niveles (h1, h2, h3, h4, h5, h6).
    Deben utilizarse para estructurar el contenido de la página web de la misma manera en la que se utilizarían titulares y subtitulares en cualquier otro documento.

  • Línea 16: <p>Párrafo y <a href="http://www.cleverconsulting.net">anchor text.</a></p>
  • Explicación de la línea 16: apertura y cierre del primer párrafo de la página web (<p>…</p>). Además, este párrafo contiene un enlace con un anchor text que dice “ejemplo de anchor text”: <a href="http://www.cleverconsulting.net">ejemplo de anchor text.</a>.
    La propiedad href y su valor (href="http://www.cleverconsulting.net") indican la dirección de la página web de destino a la que llevará el enlace.

  • Línea 17: <img src="foto.jpg" width="30" height="30" alt="Texto alternativo" title="Título de la imagen" />
  • Explicación de la línea 17: apertura y cierre de la etiqueta HTML de imagen. Esta línea no servirá de nada a menos que haya un archivo llamado foto.jpg en el mismo directorio que el archivo HTML. Esta etiqueta tiene las siguientes propiedades y atributos:
    • src="foto.jpg": el valor de la propiedad src indica la ruta de la imagen.
    • width="30": ancho de la imagen, en píxeles.
    • height="30": alto de la imagen, en píxeles.
    • alt="Texto alternativo": la parte entrecomillada debe describir la imagen. Es útil para buscadores, invidentes y para cuando la imagen no carga correctamente.
    • title="Título de la imagen": la parte entrecomillada es el texto negro con recuadro amarillo que a veces aparece cuando un usuario posiciona el puntero del ratón encima de una imagen de una página web.

  • Línea 18: <div class="contenedor-ejemplo">
  • Explicación de la línea 18: la etiqueta div es un contenedor multipropósito, sirve para muchas cosas. Sirve para anidar elementos con propósitos de diseño, de posicionamiento en buscadores o por otros motivos técnicos.
    Por ejemplo, es habitual que el menú de un sitio web esté contenido dentro de un elemento div al que además se le podría añadir la siguiente propiedad y valor: class="menu-superior".
    La propiedad class se utiliza para identificar uno o varios elementos de la página web y puede aplicarse a casi cualquier etiqueta HTML de la sección del body, como párrafos, imágenes o enlaces, por ejemplo:
    <p class="resumen">Este es un párrafo con clase</p>
    Una de las utilidades de la propiedad class está en el diseño. Podríamos crear una hoja de estilo en la que declaremos que todos los párrafos con la clase resumen aparezcan con fondo amarillo y texto rojo. En otro ejemplo, podemos asignar un valor class a todas las imágenes que queramos que aparezcan con un borde marrón de 10 píxeles de ancho.

  • Línea 19: <p>Curso creado por <span class="author">Luis Monge Malo</span>.</p>
  • Explicación de la línea 19: en esta línea de nuevo aparece la apertura y cierre de un párrafo, y contenido dentro de ese párrafo vemos la apertura y cierre de la etiqueta span con la propiedad class, y en este caso, el valor de dicha etiqueta es author.
    La utilidad de la etiqueta span es similar a la etiqueta div, pero a diferencia de ésta última, la etiqueta span sólo debe contener cadenas de texto (a veces resulta difícil saber si es más adecuado usar la etiqueta span o la etiqueta div, aunque no entraremos en eso).
    El motivo por el que uso un ejemplo de la propiedad class con el valor author es porque se trata de un caso en el que class tiene una utilidad diferente a la mencionada anteriormente (aunque simultáneamente también podría utilizarse con propósitos de diseño).
    En este caso, class="author" es un microformato. Los microformatos son una forma de ayudar a los buscadores a entender mejor el contenido de una página web y a proporcionar resultados más relevantes al usuario, lo que a su vez puede mejorar el posicionamiento en buscadores de las páginas web que usan dichos microformatos.
    Los microformatos se crean asignando valores específicos a la propiedad class. Usando el valor author del ejemplo le estamos diciendo a los buscadores quién es el autor de esa página web. Esto se utiliza habitualmente en blogs o sitios web de noticias.

    Captura de los resultados de google.com en la que aparece como primer resultado mi blog con una línea de texto más que el resto de resultados. Debajo del meta title y la dirección web de destino aparece el texto

    Imagen 3.16. Dado que los artículos de mi blog cuentan con el microformato author, cuando una de sus páginas es uno de los resultados del buscador de Google, aparece mi nombre como parte del resultado, lo que además de proporcionar más información al usuario aumenta la notoriedad del resultado, pues ocupa mayor superficie en la pantalla, incrementando así las probabilidades de que el usuario haga clic en dicho resultado, lo que a su vez es beneficioso para mejorar el posicionamiento natural en buscadores de la página web en cuestión
    Google llama rich snippet (traducible como “fragmento enriquecido”) a esos trozos de información adicional que, gracias a los microformatos, muestra en sus resultados.

    Existen microformatos para una gran variedad de tipos de información, tales como: fecha de publicación, fecha de edición, nombre del autor, apellidos del autor, datos de contacto, datos de localización, ingredientes, recetas, dirección física, valoraciones, datos de un libro o una película, …

    Como siempre en tecnología, además de los microformatos (o microformats en inglés), existen otras dos alternativas que persiguen el mismo propósito que los microformatos: los microdatos (o microdata en inglés) y el RDFa.

    Cada una de las formas de agregar información adicional al contenido HTML cuenta con un sitio web donde se recogen cuáles son los tipos de datos aceptados: microformats, microdata y RDFa.


  • Líneas 20, 21 y 22:

    	    </div>
    
    	  </body>
    
    	</html>
  • Explicación de las líneas 20, 21 y 22: cierre de las etiquetas div, body y html.

Malentendidos comunes

Programar en HTML y CSS

No se puede programar en HTML y CSS porque HTML y CSS no son lenguajes de programación (más de esto en el próximo capítulo).

Un lenguaje de programación debe permitir expresar “lógica condicional”. Es decir, los resultados producidos por un programa no serán siempre los mismos, sino que dependerán de ciertas condiciones (los datos de entrada).

Por ejemplo, con un programa sería posible mostrar por pantalla “Buenos días” cuando es por la mañana y “Buenas tardes” cuando es por la tarde, sin embargo un archivo HTML no es capaz de hacer algo así. Para que un archivo HTML que muestra el texto “Buenos días” muestre el texto “Buenas tardes” no queda otra alternativa que editar dicho archivo manualmente. El contenido de un archivo HTML no cambia automáticamente según ninguna condición.

PHP sí es un lenguaje de programación. Es posible escribir un programa en PHP que genere un archivo HTML que contenga “Buenos días” si es por la mañana y que genere otro archivo HTML que contenga “Buenas tardes” en el caso contrario. ¡Pero ojo! En el ejemplo del párrafo anterior los archivos HTML siguen siendo estáticos. Es un programa en PHP el que genera un archivo HTML con uno u otro contenido dependiendo de la hora del día.

Lo correcto es referirnos al HTML y al CSS como lenguajes de marcado, en lugar de como lenguajes de programación.

No todo el HTML y CSS es creado igual

Hay mejores y peores formas de escribir código HTML y CSS. Dos páginas web con idéntico aspecto pueden tener códigos HTML y CSS muy distintos.

La diferencia de calidad en la escritura del código HTML y CSS puede hacer que sólo una de esas páginas web cargue rápido, se visualice correctamente en todos los navegadores y dispositivos, incluyendo móviles y tabletas, y obtenga un buen posicionamiento natural en buscadores.

Editores WYSIWYG

Aunque lo más seguro es escribas tus correos electrónicos en el editor de emails que te proporciona Outlook, Gmail, HotmailYahoo!, Apple Mail u otro cliente de correo electrónico, tus emails y todos los demás son, en el fondo, código HTML. Ocurre que cuando escribes un correo electrónico la generación del código HTML es un proceso invisible para ti y llevado a cabo por el cliente de correo que uses. (Un “cliente” de correo electrónico es el programa informático que sirve para leer y enviar mensajes de correo electrónico).

Existen editores de texto que permiten crear HTML sin necesidad de escribir HTML, sino a través de una sencilla interfaz gráfica. Estos programas se denominan editores WYSIWYG, del inglés “What You See Is What You Get“, que significa “Lo Que Ves Es Lo Que Obtienes”.

Algunos editores WYSIWYG permiten crear sitios web completos, como las herramientas Adobe Dreamweaver, Apple iWeb o Microsoft FrontPage. También existen servicios como Wix o SquareSpace que partiendo de diseños preestablecidos (plantillas) que puedes editar parcialmente, permiten crear, a golpe de ratón, sin necesidad de conocimientos técnicos avanzados y en cuestión de minutos, un sitio web con un aspecto bastante profesional.

Puede que te preguntes por qué no se usan editores WYSIWYG para todo. Los motivos son los que hace unas líneas explicaba en el apartado No todo el HTML y CSS es creado igual. Los editores WYSIWYG cumplen bien con el acometido de permitir que cualquiera, sin apenas conocimientos técnicos, pueda crear un sitio web, pero añadir esas facilidades implica limitar posibilidades en la personalización gráfica y de funcionalideades del sitio web y renunciar a calidad sobre el código HTML generado, lo que en última instancia tendrá desventajas en el tiempo de carga del sitio web, la compatibilidad con navegadores y el posicionamiento en buscadores.

El procesador de textos Microsoft Word también es un editor WYSIWYG. Los primeros editores WYSIWYG (Bravo y Gypsy) fueron creados por Xerox.

No obstante, lo más probable es que un editor WYSIWYG produzca mejores resultados que un mal desarrollador. Por eso es una tontería intentar ahorrar en desarrollo web. Si tienes poco presupuesto obtendrás mejor relación calidad/precio empleando una de las dos últimas herramientas que menciono anteriormente (Wix, SquareSpace) que contratando a un desarrollador barato. No contrates a alguien porque te dé pereza aprender a usar las herramientas. Aprender a usar Wix, Squarspace o cualquier alternativa similar requiere menos de quince minutos, menos tiempo del que te llevaría contratar a alguien.

No confundas los editores WYSIWYG con los gestores de contenidos. Como te contaré en el Capítulo 5. ¿Qué es una base de datos y qué son los gestores de contenido? un editor WYSIWYG puede ser una parte de un gestor de contenidos, aunque no necesariamente. Y si ni siquiera sabes lo que es un gestor de contenidos no te preocupes, también lo explico en ese capítulo.

Si tienes poco presupuesto o tan sólo deseas un sitio web o tienda online sencilla obtendrás la mejor relación calidad/precio con servicios como el que te ofrecen WixSquareSpace.

Si sabes enviar un correo electrónico y crear una cuenta en una red social ya posees los conocimientos necesarios para construir una web con estas u otras herramientas similares. Pero por si aún así te tiemblan las piernas cuando piensas en construir una web tú mismo, en Clever Consulting ofrecemos una sesión de formación en la que iremos de la mano contigo a lo largo de este proceso.

Accede al código HTML de cualquier página web

Captura de pantalla de Google Chrome visitando la web amazon.es. Se muestra el menú que aparece cuando se clica el botón derecho del ratón, que incluye, entre otras, la opción de ver el código fuente de la página que está siendo visualizada.

Imagen 3.17. Casi con cualquier navegador, haciendo clic derecho encima de una página web aparecerá un menú que, entre otras cosas, te permite acceder al código fuente de esa página web.

Ahora que ya sabes algo de HTML ya puedes leer y entender gran parte del código de cualquier página web. Para ello sólo tienes que ir a una página web de la que desees ver su código, como por ejemplo http://amazon.es. Una vez que la página haya cargado haz clic con el botón derecho de tu ratón en cualquier lugar de la página web y después haz clic con el botón izquierdo en “Ver código fuente”. Voilá, lo que estarás viendo ahora es el código fuente de una página web, ojéalo y comprobarás que entiendes partes de él.

Captura de pantalla de Google Chrome visitando la web amazon.es. Se muestra el menú que aparece cuando se clica el botón derecho del ratón, que incluye, entre otras, la opción de ver el código fuente de la página que está siendo visualizada

Imagen 3.18. Ya conoces muchos de los elementos que forman parte del código HTML de la página de inicio de Amazon: div, p, a, ….

HTML5 y CSS3

Cada poco tiempo alguien me pregunta si hacemos webs en HTML5 y/o CSS3 y siempre respondo preguntando si hay otra forma de hacer webs.

La evolución natural de la tecnología hace que con el paso del tiempo se añadan o eliminen funcionalidades al HTML y al CSS al margen de los estándares oficiales.

Cada cierto tiempo, el W3C, organismo encargado de la elaboración de estos estándares, publica una nueva versión de ambas especificaciones. Para cuando se publica una nueva versión, cualquier desarrollador o maquetador web que se precie conoce la mayoría de novedades de los estándares.

Es cierto que el HTML5 y el CSS3 son actualizaciones muy esperadas e introducen más mejoras que cualquier otra versión anterior. No obstante, aunque estas actualizaciones sirven para hacer muchas cosas de manera más eficiente, su uso es transparente para el usuario final y no alteran la forma de codificar HTML o CSS.


Conclusiones

Escribir o codificar HTML y CSS no es programar. HTML es un conjunto de reglas sencillas para publicar contenido en la web y CSS un conjunto de reglas para darle estilo al contenido HTML.

Ahora que ya conoces las bases del HTML y Cómo funciona un ordenador estás en la situación perfecta para afrontar el siguiente capítulo: Desmitificando la programación.