Página personal de Francisco Ruiz

Firefox Logo

Fuente utilizada

El tipo de fuente utilizada por defecto es la 'FiraMono-Regular'.

@font-face{font-family: FiraMono; src: url(FiraMono-Regular.ttf);}

Pero tambien se puede usar la fuente 'Roboto'.

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Distintos tipos de encabezados

Este es un tipo de encabezado h2

Este es un tipo de encabezado h3

Este es un tipo de encabezado h4

Este es un tipo de encabezado h5
Este es un tipo de encabezado h6

Uso de carácteres especiales

En html la incluir carácteres espececiales como se describe en la siguiente tabla.

Esta tabla se ha obtenido de este enlace.

Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Esta es una imagen vectorial

Logo

Una imagen vectorial no pierde calidad ni se pixela.

<img src="img/bunny.svg" alt="Logo" width="300">

Etiqueta picture para imágenes responsive

shaun

La etiqueta picture nos permite cargar diferentes imágenes según el ancho de la pantalla.

<picture>
<source media="(min-width: 400px)" srcset="img/shaun2.png">
<source media="(min-width: 200px)" srcset="img/shaun1.png">
<img src="shaun.jpg" alt="shaun">
</picture>

Vídeo empotrado de YouTube

El vídeo empotrado de YouTube es un gran recurso para mostrar información multimedia en tu sitio.

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