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.
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.- Sin salir de aulaClic. Selecciona y copia el código html que hay en este primer recuadro (o cualquier otro código), pégalo en el siguiente recuadro y pulsa el botón "Visualizar el código escrito", se abrirá una ventana del navegador con el resultado.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejemplo 2.1. Hojas de estilo</title>
<style>
h1 {
text-align: center;
}
p {
font-family: arial;
font-size: 16px;
}
.resaltado {
color: blue;
}
</style>
</head>
<body>
<h1>Introducción</h1>
<p>Excel es un programa del tipo Hoja de Cálculo.</p>
<p class="resaltado">Microsoft es la propietaria de Excel.</p>
</body>
</html>
Pega o escribe código html en el siguiente recuadro. Pulsa el botón para visualizar el resultado:
Cuando utilizamos un archivo para guardar la hoja de estilo CSS, este sistema no funciona, puesto que no tenemos donde guardar ese archivo, podemos solucionarlo incrustando la hoja de estilo en el código html, como se explica en este tema básico: Incrustar CSS en HTML 
.
2.2. En otras páginas. 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.3. 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.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.