Unidad 2. Básico: Descargar archivos y probar el código

Descargar archivos

Para descargar los archivos de los ejercicios de este curso (y otros cursos) debes ir a la siguiente página: Descargar archivos. Ahí debes buscar el enlace a Ejercicios de HTML y CSS, descargarte el archivo comprimido .zip, extraer los archivos y buscar el archivo correspondiente.

Probar código

A lo largo de este curso es conveniente que vayas probando todo lo que se explica, en algunos casos debes copiar el código que aparece en la página y en otros casos se te indicará que archivo debes utilizar de los previamente descargados.

Puedes ejecutar el código HTML y CSS de varias formas:

1.- Desde un editor de código. Nosotros recomendamos Brackets porque nos parece muy bueno, gratis y es el que utilizamos en este curso. Puedes seleccionar el código que se muestra en los ejemplos y pegarlo en un archivo de Brakets. Luego puedes utilizar la vista previa para ver el resultado. Esta forma de probar es la más recomendable, pero si no tienes a mano un ordenador con un editor de código puedes utilizar una de las opciones siguientes.

2.- Desde el propio navegador.

2.1. En páginas web. Hay varias páginas web que permiten introducir código HTML y CSS en el navegador y ver el resultado. Por ejemplo: w3schools.org , JSFiddle.net, codepen.io y stackblitz.com

En cualquier caso, sobre todo con páginas complejas, siempre es conveniente ver el archivo .html en un navegador web, ya que en ocasiones la vista en vivo de Brackets y los sistemas que acabamos de citar no ofrecen el mismo resultado que el navegador web. Además en conveniente probar la página en los navegadores más utilizados (como mímimo en Chrome, Firefox, Edge y Safari) y en dispositivos móviles.

2.2. Inspector del navegador. También desde los propios navegadores Chrome y Firefox, entre otros, podemos editar el código HTML con la función de Inspeccionar de la siguiente forma. Por ejemplo en Chrome, para empezar con una página en blanco, escribir en la barra de direcciones del navegador about:blank pulsar la tecla INTRO y aparecerá una página en blanco, pulsar con el botón derecho del ratón en esa página y elegir Inspeccionar, aparecerán unas ventanas, en la mitad inferior izquierda veremos la pestaña Elements con código HTML, colocar el curso en la primera posición y pulsar el botón derecho y elegir Editar como HTML, ya podremos escribir o copiar el código que queramos. Para ver el resultado hacer clic fuera de la zona de edición.