CONTATTACI

Blog

Tips & Tricks sugli snippet HTML per Junior Developers

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!  

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Il mondo del web development è in continua evoluzione e, se da un lato può sembrare una corsa incessante, dall’altro rappresenta senz’altro un vortice di sfide e opportunità.  Come sviluppa…
Il mondo dello sviluppo backend è una parte cruciale di qualsiasi progetto web: definisce la logica che alimenta il lato “non visibile” di un sito o di un’applicazione. Si lega al frontend per mescol…
GitHub è da anni uno degli strumenti di condivisione del codice e versioning più utilizzati tra i web developers. Ad oggi, nel mondo del web development risulta essere uno strumento imprescindibile…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.