6.1. Introducción a los ejercicios HTML y CSS

Editor de texto

Para crear los archivos que se van a ver en este tutorial solo se necesita un simple editor de texto.

En Windows, el más simple es el Block de notas, que tiene la ventaja de encontrarse en todas las versiones de Windows.

../_images/block-de-notas.png

A la hora de guardar por primera vez el código HTML o el código CSS hay que seleccionar dos opciones para no tener problemas con el archivo.

../_images/notepad-html-utf8.png
  1. El tipo de archivo debe ser "Todos los archivos (.)"

    Con esta opción, la extensión del archivo se podrá elegir como .html o como .css en vez de guardar la extensión por defecto .txt que no serviría.

  2. La codificación debe ser UTF-8

    De esta forma los caracteres especiales como los acentos o la eñe se guardarán y se visualizarán correctamente.

Una vez guardado correctamente por primera vez, las modificaciones posteriores se pueden guardar sin repetir este proceso. Simplemente seleccionando en el menú Archivo... Guardar o pulsando Ctrl-G se guardará correctamente.

Si se quiere utilizar un editor de texto más profesional y con más opciones el editor de texto Notepad++ es libre, gratuito y una gran opción.

La ventaja de utilizar Notepad++ u otro editor de textos avanzado es que estos editores hacen resaltado de sintaxis y eso ayuda mucho a comprobar errores y evitarlos mientras se escribe el código.

Visualización en navegador y modificaciones

Una vez guardado el fichero HTML, al pinchar sobre él se abrirá en el navegador y podemos ver el resultado.

Si queremos realizar modificaciones, no se podrán hacer con el navegador por lo que tendremos que volver a editar el fichero con el editor de textos.

Para conseguirlo debemos pulsar el botón derecho del ratón sobre el archivo y elegir la opción Abrir con... para elegir el Block de notas.

Otra solución es arrastrar el fichero.html sobre el Block de notas y se abrirá su contenido para editarlo.

Errores de código

Normalmente el navegador no muestra los errores que se han cometido al escribir el código. En ocasiones no muestra nada si el código es incorrecto.

Para visualizar los errores de código, en el navegador Firefox seleccionamos en el menú de Herramientas... Desarrollador Web... Inspector

Aparecerá en la parte baja del navegador un conjunto de herramientas muy útil para comprobar qué parte del código corresponde a la pantalla y viceversa.



Errores habituales

Esta es una pequeña lista con los errores más habituales. Conviene repasarla antes de buscar otros errores menos comunes.

  • No se ha cerrado una etiqueta correctamente. Por ejemplo en <h1>Título<h1> le falta la barra en la segunda etiqueta: </h1>

  • No se ha cerrado un comentario correctamente.

Editor de texto para Linux

En el caso de utilizar el sistema operativo Linux, hay muchas opciones posibles. Los editores por defecto tales como Pluma Text Editor o Gedit sirven para realizar cualquier práctica.

Se recomienda utilizar Gedit con resaltado de sintaxis (syntax hightlighting) para encontrar los errores con más facilidad. Para activar la opción hay que seleccionar en el menú View... Highlight mode... y el lenguaje utilizado.