Exercicios e código

Máis abaixo podes atopar varias versións da mesma páxina (Faros de Galicia) numeradas desde a 00 ata a 06. Podes facer clic en cada unha das versións para ir vendo as diferenzas.

En cada nova versión imos aprender algo novo. Podes atopar unha descrición das novidades xusto debaixo de cada versión.

Recorda que podes ver o códifo fonte (HTML e CSS) de todas as páxinas facendo clic co botón dereito e despois "ver código da páxina".

Versión 00

Só HTML. As imaxes son máis grandes que a pantalla.

Versión 01

Descargar código fonte

Un pouco de CSS para cambiar a apariencia:

Todas as imaxes teñen o mesmo ancho.
Cambiamos a cor do título.
Modificamos o espacio arredor dos paráagrafos.

Establecemos o ancho do contido en 800 píxels

<div style="width: 800px;margin: 0 auto;">

Establecemos o ancho das imaxes en 800 píxels

<img src="img/fisterra.jpg" alt="Faro de Fisterra" width="800">

Faros de Galicia

<h1 style="color: #018747;">Faros de Galicia</h1>

Modificamos o espacio arredor dos paráagrafos

<p style="margin-top: 2px;margin-left: 10px;margin-right: 10px;margin-bottom: 40px;">

Versión 02

Descargar código fonte

Non facemos cambios na apariencia pero movemos todo o CSS (o código para modificar a apariencia) de sitio.

<style>
  main {
    max-width: 800px;
    margin: 0 auto;
  }

  h1 {
    margin-top: 40px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #018747;
  }

  p {
    margin-top: 2px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 40px;
  }

  img {
    width: 100%;
    height: auto;
  }
</style>

Versión 03

Modificamos o tipo de letra, unha para o título e outra para o resto do texto.

<link href="https://fonts.googleapis.com/css2?family=Rubik+Marker+Hatch&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik+Marker+Hatch&family=Rubik+Maze&display=swap" rel="stylesheet">

body {
  font-family: 'Rubik Maze', cursive;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
}

h1 {
  font-family: 'Rubik Marker Hatch', cursive;
  font-size: 70px;
  line-height: 1;
}

Versión 04

Modificamos a cor do fondo e do texto.

body {
  background-color: #202124;
  color: #e8eaed;
}

Versión 05

Agrupamos as imaxes de dúas en dúas.

div utilízase para facer grupos.

<div>

</div>

Código para que o contido do div se poña un a carón do outro

<div style="width: 49%;margin-right: 1%;float: left;">

Versión 06

Utilizamos JavaScript para que as imaxes vaian cambiando ao facer clic enriba delas.

<script>
  document.querySelectorAll('div.child').forEach(element => {
    element.addEventListener('click', () => {

      element.style.visibility = 'hidden';

      if (element.nextElementSibling) {
        element.nextElementSibling.style.visibility = 'visible';
      } else {
        document.querySelector('div.child').style.visibility = 'visible';
      }

    });
  });
</script>