HTML - Web Slide Desk

Introduzione al Web Slide Deck

Ciao a tutti, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo dell'HTML e creeremo il nostro web slide deck personale. Come il tuo amico insegnante di informatica del quartiere, sono entusiasta di guidarti in questo processo, anche se non hai mai scritto una riga di codice prima. Allora, mettetevi all'uncinetto e tuffiamoci!

HTML - Web slide Desk

Cos'è un Web Slide Deck?

Prima di iniziare a programmare, capiremo cosa stiamo costruendo. Un web slide deck è essenzialmente una presentazione che viene eseguita in un browser web. È come PowerPoint, ma più figo perché lo stai creando da zero utilizzando HTML! Questo significa che puoi accedervi ovunque, in qualsiasi momento,只要你拥有网络连接。

Configurazione del Nostro Documento HTML

Iniziamo con la struttura di base del nostro documento HTML. Non preoccuparti se questo sembra intimidatorio all'inizio - lo analizzeremo passo per passo.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title/il mio fantastico web slide deck</title>
<style>
/* Aggiungeremo un po 'di CSS qui più tardi */
</style>
</head>
<body>
<!-- Le nostre diapositive andranno qui -->
</body>
</html>

Analizziamo questo:

<!DOCTYPE html> informa il browser che si tratta di un documento HTML5.
<html lang="it"> è l'elemento radice della nostra pagina HTML, con "it" che specifica la lingua italiana.
La sezione <head> contiene le informazioni meta sul documento.
<meta charset="UTF-8"> specifica la codifica dei caratteri per il documento.
<meta name="viewport"...> garantisce una corretta visualizzazione sui dispositivi mobili.
<title> imposta il titolo della nostra pagina web.
Il tag <style> è dove aggiungeremo il nostro CSS più tardi.
Il <body> è dove andrà il contenuto visibile del nostro slide deck.

Creazione della Nostra Prima Diapositiva

Ora creiamo la nostra prima diapositiva. Utilizzeremo i tag <section> per definire ogni diapositiva.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>Benvenuti nel mio web slide deck!</h1>
<p>Creata da [Il Tuo Nome]</p>
</section>
</div>
</body>

Qui abbiamo:

Aggiunto un <div> con la classe "slideshow-container" per contenere tutte le nostre diapositive.
Creato un <section> con la classe "slide" per la nostra prima diapositiva.
Aggiunto un'intestazione <h1> e un paragrafo <p> alla nostra diapositiva.

Aggiunta di Altre Diapositive

Aggiungiamo un paio di altre diapositive al nostro deck:

<div class="slideshow-container">
<section class="slide">
<h1>Benvenuti nel mio web slide deck!</h1>
<p>Creata da [Il Tuo Nome]</p>
</section>

<section class="slide">
<h2>Cosa Copriremo</h2>
<ul>
<li>Basics di HTML</li>
<li>Stile CSS</li>
<li>Simple JavaScript</li>
</ul>
</section>

<section class="slide">
<h2>Grazie!</h2>
<p>Qualche domanda?</p>
</section>
</div>

Abbiamo aggiunto altre due diapositive, ciascuna con una struttura di contenuto diversa. La seconda diapositiva utilizza una lista non ordinata <ul> per visualizzare i punti elenco.

Stile delle Nostre Diapositive con CSS

Ora aggiungiamo un po' di stile alle nostre diapositive. Metteremo questo nel tag <style> nella nostra <head>:

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

Analizziamo questo CSS:

Abbiamo impostato body e html a piena altezza e rimosso i margini predefiniti.
La .slideshow-container utilizza flexbox per il layout e scroll-snap-type per lo scorrimento fluido.
Ogni .slide è impostata a piena larghezza e altezza, con il contenuto centrato.
Utilizziamo scroll-snap-align per assicurare che le diapositive si bloccano in posizione quando si scorre.
Diversi colori di sfondo sono impostati per ogni diapositiva utilizzando :nth-child.

Aggiunta dei Pulsanti di Navigazione

Per rendere il nostro slide deck più user-friendly, aggiungiamo alcuni pulsanti di navigazione:

<body>
<div class="slideshow-container">
<!-- ... diapositive qui ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Precedente</button>
<button class="next" onclick="changeSlide(1)">Successivo ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

Abbiamo aggiunto:

Pulsanti "Precedente" e "Successivo" con eventi onclick.
Una funzione changeSlide in JavaScript per gestire la navigazione.

Stiliamo questi pulsanti:

<style>
/* ... stili precedenti ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

Tocchi Finali

Per fare funzionare la nostra navigazione in modo fluido, dobbiamo aggiungere ID alle nostre diapositive:

<section id="slide1" class="slide">
<h1>Benvenuti nel mio web slide deck!</h1>
<p>Creata da [Il Tuo Nome]</p>
</section>

<section id="slide2" class="slide">
<h2>Cosa Copriremo</h2>
<ul>
<li>Basics di HTML</li>
<li>Stile CSS</li>
<li>Simple JavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>Grazie!</h2>
<p>Qualche domanda?</p>
</section>

Conclusione

Congratulations! Hai appena creato il tuo web slide deck personale utilizzando HTML, CSS e un tocco di JavaScript. Questo è solo l'inizio - puoi ora sperimentare con diversi stili, aggiungere più elementi interattivi o persino incorporare animazioni.

Ricorda, lo sviluppo web è tutto riguardo alla pratica e alla creatività. Non avere paura di modificare il codice e vedere cosa succede. Chi lo sa? Potresti scoprire qualcosa di straordinario!

Buon codice, futuri maghi del web!

Tabella dei Metodi

Metodo	Descrizione
`document.querySelectorAll()`	Seleziona tutti gli elementi che corrispondono a un selettore CSS
`document.querySelector()`	Seleziona il primo elemento che corrisponde a un selettore CSS
`Array.from()`	Crea una nuova istanza di Array da un oggetto simile a un array
`indexOf()`	Restituisce l'indice della prima occorrenza di un elemento nell'array
`location.hash`	Ottiene/Imposta la parte dell'URL che segue il simbolo #

Credits: Image by storyset