Esta página está dedicada a la realización de la práctica correspondiente al ejercicio obligatorio del Módulo 2 de la 5ª edición del Curso "Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS..." y en la que es necesario incluir los detalles indicados. A la cabecera de la página se le ha realizado un background degradado en CSS. El menú superior, utilizado a modo de índice del ejercicio, se ha ubicado dentro de la etiqueta <nav> y se le ha dado formato practicando con la relativamente nueva propiedad flex de CSS3.
La página ha sido dividida semánticamente en <header>, <nav>, <main> (con varias <section>), <aside> (donde he introducido de nuevo los enlaces a las diferentes secciones que ya indica el índice superior) y <footer>
Las anclas para volver al inicio de la página se han dibujado con SVG, creando un círculo relleno con color gris y tres líneas rectas que forman la flecha.
Tratamiento de textos con CSS
Para modificar el fuente de toda la página se ha realizado un link a la tipografía "Raleway" alojada en el servidor de Google Fonts y se ha utilizado la siguiente línea de código:
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
Además se han creado las clases "destacado" y "codigo" para diferenciar palabras y fracciones de los párrafos importantes (en rojo) o que usan caracteres especiales (en verde)
Sección dedicada a imágenes en HTML5
HTML5 permite incluir imágenes con diversas etiquetas. En este caso utilizo <picture> por tratarse de una herramienta muy útil, que permite mostrar unas u otras imágenes a partir de la resolución y tamaño de la pantalla del dispositivo en el que se muestre
Reduce y amplia el ancho del navegador para que la imagen cambie
Sección dedicada a insertar vídeos en HTML5
Para insertar un vídeo desde un servidor externo se ha copiado el enlace proporcionado (en este caso por Youtube) mediante la etiqueta iframe y ha sido modificada con los valores rel=0, showinfo=0, controls=0, autoplay=0 y loop=1 para que arranque automáticamente, no muestre controles, haga loop al terminar etc.