- Boilerplate Web
- Navbar
- Immagine con descrizione
- Un video embedded
- Modulo per inserire commenti
- Risultato finale
- Link utili
Boilerplate Web
Un boilerplate web è un template front-end con una struttura pronta che ti permette di dare il via allo sviluppo di progetti velocemente. Di seguito puoi scaricare quello che ho preparato per questa lezione. Contiene un file index.html con già incorporato Bootstrap, una cartella con l’immagine che utilizzeremo e file di testo con i dati con cui popoleremo la pagina.
La pagina index si presenta nel seguente modo:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>Open Day Bernocchi </title>
</head>
<body>
<div class="container-lg">
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
La struttura delle cartelle è quella classica per il front-end
Navbar
il primo componente che aggiungo è la navbar che in futuro ci permetterà di navigare tra le pagine del nostro sito. Subito dopo il body basta aggiungere il seguente codice:
<nav class="navbar bg-light">
<div class="container-fluid">
Mountains
</div>
</nav>
dopo la navbar avremo il contenitore per tutto il resto del sito
<div class="container-lg">
e dentro di quello come prima cosa inseriremo un tag per l’intestazione
<h1> Cervino </h1>
Immagine con descrizione
Utilizziamo un sistema di riga e due colonne per impaginare a sinistra l’immagine e a destra il testo.
<div class="row">
<div class="col">Contenuto della prima colonna</div>
<div class="col">Contenuto della seconda colonna</div>
</div>
Nel div della prima colonna inseriremo l’immagine
<img src="img/cervino.jpg">
Nel file placeholder-text.txt c’è il testo che serve come descrizione per l’immagine, basterà copiarlo nel div per la seconda colonna. Il risultato finale sarà il seguente:
<div class="row">
<div class="col">
<img src="img/cervino.jpg">
</div>
<div class="col">
Cervino (Cervin in francese - pron. AFI: [sɛʁvɛ̃]; Matterhorn in tedesco; Gran Becca in patois valdostano; Matterhòre in Greschòneytitsch) è una montagna delle Alpi alta 4478 m s.l.m., settima vetta e terza montagna italiana per altitudine, situato nelle Alpi Occidentali (Alpi Pennine - Alpi del Weisshorn e del Cervino - catena Catena Bouquetins-Cervino), lungo il confine tra Italia e Svizzera (a ovest del massiccio del Monte Rosa, a est del Grand Combin e a sud-ovest del Massiccio del Mischabel).
Con una prominenza di 1031 m (è necessario scendere fino al Col Durand, posto a 3451 m, per salire su vette più alte) e un isolamento di 13,7 km (la montagna più alta di esso più vicina è il Lyskamm Occidentale a quota 4481 m, nel massiccio del Monte Rosa), si erge isolato dal resto delle altre vette circostanti e sovrasta i paesi di Breuil-Cervinia a sud in Italia e di Zermatt a nord in Svizzera, note località turistiche estive e invernali.
Caratterizzato dalla particolare forma piramidale molto pronunciata, ha segnato in modo significativo la storia dell'alpinismo: la sua parete nord è infatti una delle classiche pareti nord delle Alpi e attorno a esso si sviluppa il comprensorio sciistico del Matterhorn Ski Paradise, con possibilità di sci estivo sul ghiacciaio del Plateau Rosa.
</div>
</div>
Un video embedded
Utilizziamo il codice di incorporazione presente in qualsiasi video su YouTube per averlo nel nostro sito web, effettua il click sul pulsante Condividi sotto il video
e seleziona la voce Incorpora e successivamente copia per copiare il codice
Incolliamo il codice di seguito al blocco per l’immagine e il testo
Modulo per inserire commenti
Inseriamo ora una casella di input per l’email e una textarea per il commento ed infine un bottone
<div class="mb-3">
<label for="email" class="form-label">La tua email</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="comment" class="form-label">Lascia un commento</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
<button class="btn btn-primary">Invia</button>
Risultato finale
Puoi confrontare il tuo codice con quello della pagina end-index.html presente nel boilerplate
