Ciao a tutti benvenuti in questa nuova parte del corso per front-end developer. In questa guida andremo a vedere come codificare un footer, una delle parti più importanti di un sito.Ciao
Che cos è il tag footer?
Un footer è un componente di un sito che può avere molteplici funzioni, solitamente contiene informazioni o link del tipo:
- informazioni legali
- navigazione semplificata del sito
- pagine importanti
- contatti
- link ai social media
Come includere un footer nel proprio sito
Per includere il footer nel proprio sito bisogna usare un tag specifico. Potete indovinare quale? <footer></footer>
Come per la barra di navigazione è possibile realizzare un footer utilizzando un tag <div></div>, ma per dare una struttura semantica al nostro sito e per renderlo più indicizzabile dai motori di ricerca, utilizziamo il tag <footer>
Vediamo il risultato di ciò che andremo a creare oggi:
Questo codice è stato incluso al codice delle lezioni scorse, se non le avete lette potete tornare indietro e seguire il corso dalla lezione 1.
Vediamo nello specifico il codice che abbiamo utilizzato per creare il footer.
<footer><div class="container"><div class="footer-section"><h5>Iscrivertevi alla newsletter!</h5><form><input type="text"><input type="submit"></form></div><div class="footer-section"><h5>Mettetevi in contatto!</h5><p>+39 11223344556</p><p>[email protected]</p></div><div class="footer-section"><h5>Trivateci sui social</h5><a class="social" href="https//devnews.it">facebook</a><a class="social" href="https//devnews.it">Twitter</a><a class="social" href="https//devnews.it">instagram</a></div></div> </footer>
Come potete vedere abbiamo inserito un tag footer, in cui abbiamo posizionato un container e 3 colonne allineate orizzontalmente (vedere lezione 7).
All’interno delle 3 colonne potete inserire ciò che preferite, nel nostro caso abbiamo inserito una form per iscriversi alla newsletter, una zona contatti ed una zona social.
Ancora non abbiamo parlato dei tag <form> in questo corso, ma li andremo ad analizzare nelle prossime lezioni.
Per il resto questo codice dovrebbe risultare abbastanza facile da comprendere, quindi non mi divarico troppo nelle spiegazioni. Se avete qualche domanda su come creare footer in html potete scrivermi nella zona commenti in basso.
Come potete vedere, creare un footer in HTML non è un processo standard, dato che questo può essere creare un mille modi diversi. Ma abbiamo visto che tutto il contenuto del footer va racchiuso in un tag <footer></footer>
Spero questa piccola guida vi sia stata di aiuto, se avete qualche domanda a riguardo lasciatemi un commento in basso e sarò lieto di rispondervi.