Il linguaggio di markup HTML (l'acronimo html sta per "Hypertext Markup Language") è uno dei più popolari tra gli sviluppatori junior che si affacciano al mondo della programmazione e intendono programmare in html.
Grazie alla sua imprescindibilità e alla sua semplicità, l’HTML risulta fondamentale per chi vuole scoprire il mondo della programmazione informatica; tuttavia, il più delle volte si tende a studiarlo in maniera superficiale senza approfondirlo.
In questo articolo vedremo diversi snippet che arricchiranno il tuo viaggio nel mondo del linguaggio HTML e della programmazione in generale.
Cos’è uno snippet?
Per snippet, in programmazione, si intende generalmente un frammento di codice o un esempio di codice sorgente che di solito vengono distribuiti nel pubblico dominio o come freeware.
Form per indicazione stradale: indicazioni con Google Maps
Il primo snippet che ti vogliamo mostrare è un form per dare indicazioni stradali riguardanti l’ubicazione della sede aziendale mediante Google Maps.
Come prima cosa crea sul tuo desktop un file index.html e copia al suo interno con un editor di testo (ti consiglio Visual Studio Code), e successivamente incolla nel file questo contenuto:
<form action="https://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Inserisci il tuo indirizzo</label>
<input type="text" name="saddr" />
<!-- a riga 4 nel value inserirai la destinazione che vorrai -->
<input type="hidden" name="daddr" value="Strada S. Giorgio Martire, 2D, 70124 Bari BA" />
<input type="submit" value="Get directions" />
</form>
Subito dopo imposta il foglio con HTML:5 e prova a creare il form con i tuoi dati, in maniera tale da dare sostanza al tuo progetto.
In autonomia potrai creare il form modificandolo con i tuoi dati e dando lo stile che preferisci.
Call & SMS Links: chiamare direttamente dal sito web HTML
Il secondo snippet mostra due tag anchor che ti permetteranno di rendere cliccabile un numero di telefono e dare la possibilità ad un utente di poter chiamare in maniera diretta o, perché no, mandare un sms.
Usa sempre il file index.html e incolla al suo interno (sempre con l'aiuto del tuo editor di testo), questo contenuto:
<!-- all'interno dell’anchor inserisci il numero di telefono -->
<a href="tel:39-3926024621">+39 392 602 4621</a>
<a href="sms:39-3926024621">+39 392 602 4621</a>
Ti consigliamo di modificare sempre lo stile in maniera da avere sempre una pagina semplice html ordinata e in linea con il progetto.
Rendere file scaricabili direttamente dal sito: downloadable files
Il terzo snippet mostra un tag anchor che renderà scaricabile uno o più file direttamente dal nostro sito html.
In questo caso ti basterà linkare un file esterno (come un’immagine) e provare a scaricarlo.
<!-- inserire il link del file che si vuole far scaricare -->
<a href="https://www.tomshw.it/images/images/2020/10/hackademy-di-aulab-121769.hero.jpg" download="immagine.jpg">Scarica file</a>
Inserisci nell’href il link del file e imposta nell’attributo "download" l’estensione del file.
Utilizzare video Youtube: embedded videos
L’ultimo snippet mostra un embedded (incorporato in inglese) di un video di Youtube rendendolo visibile direttamente dal sito.
Inserisci nell’href il link del file e imposta nell’attributo "download" l’estensione del file.
Come sempre utilizza il foglio index.html per provarlo e successivamente incolla nel file questo contenuto:
<!-- inserito stile in linea, e linkato mediante embed direttamente da youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/qzW2RDFkffM" frameborder="0" allowfullscreen></iframe>
Questi erano alcuni degli snippet html di aulab, ti consiglio di sperimentarli in maniera tale da imparare sempre di sull'HTML ma anche sul linguaggio CSS, così da accrescere le tue skill.
E ricorda sempre che la curiosità è la chiave del successo!
Se vuoi imparare a programmare in HTML e in altri linguaggi, forse potrebbe fare al caso tuo un corso di programmazione! Puoi sempre partecipare all'Hackademy di aulab e diventare web developer! Ti aspettiamo!
