Introducción a HTML Y CSS

<header>
  <h1>Bienvenidos/as al taller de HTML/CSS</h1>
  <nav>
    <ul>
      <li><a href="cursos">Nuestros cursos</a></li>
      <li><a href="/quienes-somos">Quiénes somos</a></li>
      <li><a href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>¿De qué va el taller?</h2>
    <p>
      En este taller aprenderás a crear webs con <strong>HTML</strong> y
      <strong>CSS</strong>. Si no has trabajado nunca con estas tecnologías,
      ésta es una buena oportunidad para empezar a jugar con ellas.
    </p>
    <img
         src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg"
         alt="Logotipo de HTML"
         width="150"
         height="150"
         />
    <img
         src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
         alt="Logotipo de CSS"
         width="106"
         height="150"
         />
  </section>
  <section>
    <h2>¿Cuánto cuesta el taller?</h2>
    <p>
      Nada. El no-res. Cero. Por la patilla. Gratis. By the face. Absolut
      Zero. 💶❌
    </p>
  </section>
  <section>
    <h2>¿Dónde envío las quejas?</h2>
    <p>
      Nos encantará recibir tu feedback. Para quejarte de la tortura que has
      tenido que vivir este sábado, envíanos un correo a
      <a href="mailto:info@the-refactor-project.com"
         >info@the-refactor-project.com</a
        >
      y recogeremos tu feedback.
    </p>
  </section>
</main>

<footer>
  <img
       src="https://the-refactor-project.com/images/logo-the-refactor-project.svg"
       alt="Logotipo de The Refactor Project"
       width="150"
       height="43"
       />
  Copyleft © 2024. Ningún derecho reservado.
</footer>

<header>...</header>

<footer>...</footer>

<p>...</p>

<strong>...</strong>

<a>...</a>

<h3>...</h3>

<p>
  Aquí va un texto increíblemente interesante que no habla de nada pero 
  que nos sirve para echar el rato. Podríamos estar mirando Instagram 
  o TikTok, pero en lugar de eso estamos leyendo este texto inútil
  que nada aportará a nuestras vidas.
</p>

<p>
  HTML es un lenguaje que nos permite <strong>dotar de estructura y significado</strong> 
  a los contenidos de una web. CSS, por su parte, nos permite definir <strong>el estilo</strong>
  de los contenidos de la web.
</p>
<p>
  Tenemos por tanto una separación clara entre ambas tecnologías, donde HTML nos sirve
  para definir <strong>qué es</strong> cada parte del contenido y CSS nos sirve para
  definir <strong>cómo se ve</strong> cada parte del contenido.
</p>

<p>
  Si quieres aprender más sobre desarrollo web, puedes consultar nuestros cursos 
  en <a href="https://the-refactor-project.com">nuestra web</a>. Si necesitas más 
  información, <a href="https://the-refactor-project.com/contacto">escríbenos</a>.
</p>

<img 
  src="https://img.huffingtonpost.es/files/image_960_640/uploads/2022/12/09/639279aa2102b.jpeg" 
  alt="Un gatete muy enfadado" 
/>

<section>
  <h2>Cuando vi el taller en MeetUp</h2>
  <p>Estaba yo tranquilamente buscando talleres de cerámica para pasar una buena mañana
  de sábado, cuando de repente me apareció una notificación de que hacían 
  un taller de nosequé cosa de webs.</p>
</section>

<section>
  <h2>La decisión de apuntarme</h2>
  <p>Pensé: ¿qué es mejor, desarrollar webs o hacer cerámica? Clarísimamente, como todo 
  el mundo podrá entender, gana la opción cerámica. Sin embargo, vinieron a mi mente
  varios casos de amigos que trabajan como web developers y pueden trabajar en remoto.</p>
  <p>Así que me dije a mí misma: "¿por qué no pasar una mañana de sábado aprendiendo HTML y CSS?"</p>
</section>

<section>
  <h2>La llegada al taller</h2>
  <p>Cuando llegué al taller me encontré a un señor extraño que pretendía ser hospitalario pero 
  no le acababa de salir del todo bien. Nos dijo quién era y nos spameó sobre la escuela sin
  que nadie se lo pidiera.</p>  
</section>

<section>
  <h2>
    Ingredientes para el gazpacho
  </h2>
  <ul>
  	<li>Tomates</li>  
    <li>Pepino</li>
    <li>Pimiento verde</li>
    <li>Ajo</li>
    <li>Pan</li>
    <li>Aceite de oliva</li>
    <li>Sal</li>
  </ul>
</section>

<header>
  <img src="logotipo.png" alt="Logotipo" width="120" height="120" />
  <h1>La World Wide Web</h1>  
</header>

<footer>
  <p>Síguenos en nuestras redes sociales:</p>
  <ul>
    <li><a href="https://instagram.com/loPetamos">Instagram</a></li>
    <li><a href="https://youtube.com/loPetamos">YouTube</a></li>
    <li><a href="https://tiktok.com/loPetamos">TikTok</a></li>
    <li><a href="https://x.com/loPetamos">X</a></li>
  </ul>
</footer>

<h1>La canción del verano</h1>  

h1 {
  font-size: 40px;
}

p {
  font-family: Arial;
  font-size: 15px;
  color: blue;
}

a {
  color: black;
}

a:hover {
  color: green;
}

section {
  padding-top: 10px;
  padding-bottom: 10px;
}

h1 {
  font-size: 40px;
}

p {
  font-family: Arial;
  font-size: 15px;
  color: blue;
}

a {
  color: black;
}

a:hover {
  color: green;
}

section {
  padding-top: 10px;
  padding-bottom: 10px;
}

h1 {
  font-size: 40px;
}

p {
  font-family: Arial;
  font-size: 15px;
  color: blue;
}

a {
  color: black;
}

a:hover {
  color: green;
}

section {
  padding-top: 10px;
  padding-bottom: 10px;
}

p {
  font-family: Arial;
  font-size: 15px;
  color: blue;
}

body {
  font-family: Arial;
  font-size: 18px;
  color: blue;
}

header {
  background-color: #e44d26;
  color: #fff;
}