Hola,
en el ejercicio 1 bonitas imágenes.
Al establecer una background-image sobre el elemento html y definir un width del 80% para el body creas un efecto de imagen de fondo (esto no lo pedía el ejercicio). Muchas veces esto se hace definiendo la background-image para body y un div como contenedor para los distintos elementos.
body {background-color: yellow; width: 80%; margin:auto; border:solid; background-color:blue;} tiene una incongruencia: repites dos veces background-color. El efecto cuando ocurre esto es que se aplica el último estilo definido, en este caso lo que se aplicaría sería el background-color blue. De resto todo bien (has agrupado bien las características comunes a los div, aplicando luego las específicas a los id).
En el ejercicio 2-a también bonita imagen. En lugar de margin:auto; es más estándar margin:0 auto; y claro hay que cambiar charset="urf-8"
Una forma alternativa sería:
body{background-image:url(http://es.best-wallpaper.net/wallpaper/1024x768/1105/Magic-Earth_1024x768.jpg);
background-color:red; background-repeat:no-repeat; background-position: center top;}
En el ejercicio 2-b es una pena que el pinguino se vea tan pixelado. Aquí también puedes aplicar la regla sobre body en lugar de sobre el elemento html.
body {background-image:url(http://vignette3.wikia.nocookie.net/pixelpeople/images/9/97/Penguin.png/revision/latest?cb=20130411214626); background-color:red;}
Saludos