Tips & Tricks de los snippet HTML para Junior Developers

El lenguaje de markup HTML (acrónimo de Hypertext Markup Language) es uno de los más populares entre los desarrolladores junior que se acercan al mundo de la programación y pretenden programar en html.

Gracias a su esencial y a su sencillez, el HTML resulta fundamental para quien quiere descubrir el mundo de la programación y la mayoría de las veces tendemos a estudiarlo superficialmente y sin profundizar en él.

En este artículo veremos diferentes snippet que enriquecerán tu viaje por el mundo de HTML y de la programación en general.

¿Qué es un snippet?

Snippet, en programación, es generalmente un fragmento de código o un ejemplo de código fuente que a menudo se distribuye en el dominio público o como freeware. 

Form para indicaciones de tráfico: indicaciones con Google Maps

El primer snippet que te queremos mostrar es un form para dar indicaciones de tráfico que tienen que ver con la ubicación de nuestra sede, a través de Google Maps.

Lo primero que hay que hacer es crear en tu escritorio un documento: index.html. Copialo en su interior con un editor de texto (te aconsejo Visual Studio Code), y después pega en el documento este contenido:

<form action="https://maps.google.com/maps" method="get" target="_blank">

    <label for="saddr">Añade tu dirección</label>

    <input type="text" name="saddr" />

    <!-- en la línea 4 en el valor insertarás el destino que quieras-->

    <input type="hidden" name="daddr" value="Strada S. Giorgio Martire, 2D, 70124 Bari BA" />

    <input type="submit" value="Get directions" />

</form>

Después, configura la hoja con HTML 5 y prueba a crear el formulario con tus datos, para darle sustancia a tu proyecto.

Puedes crear el formulario de forma independiente modificándolo con tus datos y dándole el estilo que prefieras

Call & SMS Links: llamar directamente desde el sitio web de HTML

El segundo snippet muestra dos tag anchor que convertirán clicable un número de teléfono y dará la posibilidad a un usuario de poder llamar de manera directa y, por qué no, de mandar un sms.

Usa siempre el documento index.html y copia en su interior con un editor de texto (te aconsejo Visual Studio Code), y después pega en el documento este contenido:

<!-- en el interior del anchor añade el número de teléfono  -->

        <a href="tel:34-3926024621">+34 392 602 4621</a>

        <a href="sms:34-3926024621">+34 392 602 4621</a>

Te aconsejamos modificar siempre el estilo para así tener siempre un folio html ordenado y acorde con el proyecto.

Haz que nos archivos se puedan descargar directamente desde el sitio: downloadable files

El tercer snippet muestra un tag anchor que hará que se puedan descargar uno o más documentos directamente desde nuestro sitio html.

En este caso solo te hará falta linkear un documento externo (como una imagen) y probar a descargarlo.

<!-- añadir el link del documento que se quiere descargar -->

<a href="https://www.tomshw.it/images/images/2020/10/hackademy-di-aulab-121769.hero.jpg" download="immagine.jpg">Descarga documento</a>

Añade en el href el link del documento y establece en el atributo "download" la extensión del documento.

Utilizar vídeo Youtube: embedded vídeos

El último snippet muestra un embedded (incorporado en inglés) de un vídeo de Youtube haciéndolo visible directamente desde el sitio. 

Añade en el href el link del documento y establece en el atributo "download" la extensión del documento.

Como siempre, usa el folio index.html para probarlo y después pega en este documento este contenido:

<!-- añadido estilo  en línea, y  linkado mediante embed directamente desde youtube -->

        <iframe width="560" height="315" src="https://www.youtube.com/embed/qzW2RDFkffM" frameborder="0" allowfullscreen></iframe>

Estos eran algunos de los ejemplos html de aulab, te aconsejo experimentar siempre para así aprender más sobre los lenguajes HTML y CSS, y aumentar tus skill.

Y recuerda siempre, ¡la curiosidad es la clave del éxito!

Si quieres aprender a programar en HTML y en otros lenguajes, siempre puedes participar en el Hackademy de aulab. ¡Te esperamos!