En esta segunda entrega del curso de HTML darás forma a tu primera web. Para ello necesitaremos dos herramientas: un navegador y un editor de texto.

El navegador

No existe un navegador mejor que los demás. Los desarrolladores de cada uno de ellos se han encargado de que sean idóneos para determinados cometidos. Eso obliga a que el sitio web que elabores deba probarse con éxito en todos los navegadores más populares. Así evitaremos que determinadas funciones que hayas desarrollado fallen, dependiendo del navegador que utilices.

El navegador también será muy útil en la fase de escritura del código HTML, cuando necesites ver las páginas en las que trabajas y probar su funcionalidad.

El editor de texto

Es el software que te permitirá escribir el código HTML.

En principio, el Bloc de notas de Windows o el TextEdit de MacOs pueden servirte, pero existen editores mejores y más específicos que te facilitarán mucho el trabajo. Me estoy refiriendo a los editores que, entre otras funciones, te ayudan con la sintaxis del lenguaje que utilices (en este caso HTML), señalando con diversos colores o símbolos los posibles errores que cometas.

Algunos de estos editores se denominan IDE (entorno de desarrollo integrado). Son específicos para la programación y también actúan como compiladores, facilitando la integración y depuración de tu código escrito.

En este curso utilizaremos un IDE llamado Visual Studio Code que, además de potente y versátil, es gratuito. Ha sido elaborado por Microsoft y utilizaremos, sobre todo, su función Text Editor. Por supuesto, también puedes optar por otros editores gratuitos y muy buenos, como puedan ser Sublime Text, Atom, Bloc de notas ++, Adobe Dreamweaver y muchos más.

Instalación de Visual Studio Code

Para instalar Visual Studio Code deberás ir al sitio web https://code.visualstudio.com y pulsar el botón azul de descarga.

Una vez descargado el archivo, lo ejecutarás. Eso dará comienzo a un proceso de instalación estándar en el que solo tendrás que ir pulsando el botón “siguiente”. Cuando la instalación haya concluido, podrás abrir VsCode y crear tu nuevo archivo de trabajo. Lo conseguirás con la combinación de teclas “ctrl + n” o pulsando la opción “New File” del menú “File”.

Guardando la sesión de trabajo

En el archivo recién creado podrás escribir el código HTML de la página web que quieras programar, y después podrás guardarlo en tu dispositivo mediante la combinación de teclas “ctrl + s” o pulsando la opción “Save As…” del menú “File”. En ambos casos, te aparecerá una ventana emergente en la que podrás guardar tu archivo, siguiendo estas precauciones.

  • El nombre del archivo podrá contener caracteres alfanuméricos, el guión medio o el guión bajo, pero no contendrá otros caracteres especiales ni espacios en blanco.
  • La extensión del archivo será “.html” o “.htm”. De esta forma tu IDE reconocerá que se trata de un archivo con código HTML.

HTML es un lenguaje de etiquetas

Las etiquetas o marcadores de HTML consisten en una serie de palabras encerradas entre los caracteres especiales “<” y “>”. El W3C establece y actualiza los nombres de esas etiquetas.

Normalmente, cada etiqueta que utilices tendrá su correspondiente etiqueta de cierre, que será la misma que la etiqueta de apertura, pero con el carácter “/” después de “<”. Entre las etiquetas de apertura y cierre irá lo que quieras formatear con ellas.

<b> Esto es un ejemplo </b>
<em> ¡Hola mundo! </em>

Hay cosas que HTML formatea por defecto, sin que tengas que indicárselo, como puedan ser la fuente de la letra (Times New Roman), el tamaño de la fuente (16px) o alinear el texto por la izquierda. Estos valores podrás modificarlos a través de sus correspondientes etiquetas.

También es conveniente que sepas que hay etiquetas que, en apariencia, hacen el mismo formateo, pero que se utilizan por motivos diferentes.

Las etiquetas <b> y <strong> pasan a negrita el texto que encierran. Sin embargo, <strong>, además de esa función, te ayuda con el SEO (conjunto de reglas que permiten optimizar el sitio web para que tenga una mejor posición en los resultados de búsqueda). Por tanto, usarás <strong> cuando quieras enfatizar las palabras clave que definan la temática del archivo, mientras que reservarás la etiqueta <b> para cuando solo quieras pasar un texto a negrita.

Un error típico al utilizar las etiquetas

Supongamos que tu archivo contiene el siguiente código HTML:

< b> Hola mundo </b>

Al abrir el archivo en tu navegador, aparecerá escrito:

b> Hola mundo

Esto es así porque hay un espacio en blanco después del carácter “<” de la etiqueta de apertura, y el navegador ha interpretado que “b>” forma parte del texto a escribir; no lo reconoce como una etiqueta que pone el texto en negrita. De nada sirve que la etiqueta de cierre tenga una sintaxis correcta, ya que esa segunda etiqueta no lleva incluida una función de formateo, tan solo cierra a la anterior.

Bien, hemos llegado al final de la segunda lección de este curso de HTML. En ella, has aprendido a instalar tu IDE de trabajo y también has escrito tu primer código de programación web. Sí, ya sé que ha sido un proyecto de juguete, pero te aseguro que muy pronto sabrás hacer sitios web mucho más elaborados y funcionales. Disfrutarás programándolos, ya lo verás.

Hasta dentro de muy poco.

Deja un comentario