Sintesi della lezione
Abbiamo sperimentato alcuni tag HTML: testo, link ipertestuali, contenuti multimediali.
landing.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#biografia">Biografia</a></li>
<li><a href="#galleria1">Galleria di immagini</a></li>
<li><a href="#video">Video</a></li>
</ul>
</nav>
</header>
<section id="titoli">
<h1>Titoli HTML</h1>
<p>Così vengono resi i titoli in HTML per default.</p>
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</section>
<section id="biografia">
<h1>Biografia</h1>
<div>
<h2>Parte prima</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia, quod aliquid alias doloremque accusamus,
ed nisi autem eveniet ex itaque modi maiores tempora expedita illo excepturi eaque consequatur! Nam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eum nisi reprehenderit? Voluptatibus dolor,
accusamus quisquam magnam iste minus aspernatur porro vitae, veniam natus ullam, ex qui omnis officiis sit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima a fugit, maxime alias deleniti nesciunt doloribus
officiis iusto suscipit ducimus! Cumque beatae aliquid dolores facere cum eos, non obcaecati quo.</p>
</div>
<div>
<h2>Parte seconda</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia aliquam fugiat omnis neque iste quod? Cupiditate
numquam repellat hic amet neque cumque doloremque a quidem reiciendis voluptatum, modi quas mollitia. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Exercitationem, temporibus aliquam autem saepe ex voluptatibus ipsum!
Dignissimos mollitia nulla praesentium facilis quis explicabo, quam, minima tempora dolore porro eum expedita. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Fugit et repudiandae autem fuga repellendus voluptatum impedit
corrupti laborum eum quae animi accusantium ducimus, officiis expedita quaerat consequatur soluta vel cumque.</p>
</div>
</section>
<section id="galleria1">
<h1>Galleria di immagini</h1>
<div>
<a href="img/enter-trough-the-balcony-2.jpg" title="Clicca per ingrandire"><img src="img/enter-trough-the-balcony-2.jpg" alt="Immagine"></a>
<img src="img/golden-fish-african-fish-02.jpg" alt="Immagine">
<img src="img/great-expectation-01.jpg" >
<div><img src="img/lesson-of-courage-01.jpg"></div>
<div><img src="img/lesson-of-courage-02.jpg"></div>
</div>
<div>
<figure>
<img src="img/sin-cielo-02.jpg" alt="Senza cielo">
<figcaption>Immagine da "Sin Cielo"</figcaption>
</figure>
</div>
</section>
<section id="video">
<video controls>
<source src="img/RFFR-02.mp4" type="video/mp4">
</video>
<div>
<iframe width="1196" height="673" src="https://www.youtube.com/embed/g6zT3kVtpHc?list=PLH6wQynF80E3BMV3Ps6Nsxvkgbt9MO1Uh"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<audio controls autoplay>
<source src="img/looperman-l-0063133-0006859-rogueai-ambient-music-voc-140.mp3">
</audio>
</section>
</body>
</html>