---
title: Página de bienvenida de Mozilla
slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
tags:
  - Codificación de Secuencia de comandos
  - CodingScripting
  - Evaluación
  - HTML
  - Imagenes
  - Inserción
  - JPEG
  - Medidas
  - Multimedia
  - PNG
  - Principiante
  - Video
  - iframe
  - img
  - receptivo
  - src
  - srcset
translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>

<p class="summary">En esta evaluación, pondremos a prueba tu conocimiento de algunas de las técnicas mostradas en los artículos de este módulo, ¡para que tú agregues algunas imágenes y videos a una página de bienvenida de Mozzilla!.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisitos previos:</th>
   <td>Antes de intentar esta evaluación, ya deberías conocer el módulo de <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia e inserción</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Prueba cuánto sabes de la incorporación de imágenes y videos en páginas web, marcos y técnicas de imagen receptiva a HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="Punto_de_partida">Punto de partida</h2>

<p>Para comenzar esta evaluación, necesitas el HTML y todas las imágenes de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> que tienes en la carpeta de GitHub. Guarda el contenido de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> en un archivo llamado <code>index.html</code> en tu disco local, en una nueva carpeta. Guarda <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> en la misma carpeta (haciendo click derecho en la imagen y seleccionando la opción guardar).</p>

<p>Accede a las diferentes imágenes en la carpeta de <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> y guárdalas también de la misma manera. De momento puedes guardarlas en una carpeta diferente, ya que podrías necesitar modificarlas usando un editor de gráficos antes de que estén listas para usarlas.</p>

<p>También puedes usar una herramienta en línea como <a href="https://glitch.com/">Glitch</a> para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección  {{anch("Assessment or further help")}} al final de esta página.</p>

<div class="note">
<p><strong>Nota</strong>: El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.</p>
</div>

<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>

<p>En esta evaluación, te presentamos una página de bienvenida de Mozzilla en su mayoría terminada, que tiene como objetivo decir algo agradable e interesante sobre lo que significa Mozilla, y proporcionar algunos enlaces a recursos adicionales. Desafortunadamente, aún no se han agregado imágenes o videos, ¡este es tu trabajo!. Debes añadir algunos elementos para que la página se vea bien y tenga sentido. Las siguientes subsecciones detallan lo que tienes que hacer:</p>

<h3 id="Preparar_las_imágenes">Preparar las imágenes</h3>

<p>Usa tu editor de imágenes favorito, y utiliza medidas de 400px de ancho y 120px de alto para:</p>

<ul>
 <li><code>firefox_logo-only_RGB.png</code></li>
 <li><code>firefox-addons.jpg</code></li>
 <li><code>mozilla-dinosaur-head.png</code></li>
</ul>

<p>Nómbralas por ejemplo, <code>firefoxlogo400.png</code> y <code>firefoxlogo120.png</code>.</p>

<p>Junto con <code>mdn.svg</code>, estas imágenes serán tus iconos para vincular a otros recursos, dentro del área <code>further-info</code>. Debes vincular al logo de Firefox en el encabezado del sitio. Guarda copias de todos estos dentro de la misma carpeta que <code>index.html</code>.</p>

<p>A continuación, crea una versión horizontal de 1200px de <code>red-panda.jpg</code>, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que <code>index.html</code>.</p>

<div class="note">
<p><strong>Nota</strong>: Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. <a href="https://tinypng.com/">tinypng.com</a> es un gran servicio para hacerlo fácilmente.</p>
</div>

<h3 id="Añadir_logo_al_encabezado">Añadir logo al encabezado</h3>

<p>El elemento {{htmlelement("header")}}, añade el elemento {{htmlelement("img")}} que insertará la versión pequeña del logotipo de Firefox al encabezado.</p>

<h3 id="Añadir_un_video_al_contenido_del_artículo_principal">Añadir un video al contenido del artículo principal</h3>

<p>Justo dentro del elemento {{htmlelement("article")}} (debajo de la etiqueta de apertura), inserta el video de Youtube <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, utilizando las herramientas de YouTube para generar el código. El video debe tener 400px de ancho.</p>

<h3 id="Agregar_imágenes_receptivas_a_los_enlaces_de_información_adicional">Agregar imágenes receptivas a los enlaces de información adicional</h3>

<p> Dentro de {{htmlelement("div")}} con clase <code>further-info</code> encontrarás cuatro elementos {{htmlelement("a")}} -cada uno de los cuales vincula a una página interesante relacionada con Mozilla-. Para completar esta sección, debes insertar un elemento {{htmlelement("img")}} dentro de cada uno que contenga los atributos {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}}.</p>

<p>En cada caso, (excepto uno que es inherentemente receptivo) queremos que el navegador sirva la versión 120px cuando el ancho de la ventana de visualización sea de 500px o menos, o la versión de 400px en otro caso.</p>

<p>¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!</p>

<div class="note">
<p><strong>Nota</strong>: para probar correctamente los ejemplos <code>srcset</code>/<code>sizes</code> necesitarás cargar tu sitio a un servidor (usar <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>.</p>
</div>

<h3 id="Un_red-panda_con_arte_dirigido">Un "red-panda" con arte dirigido</h3>

<p>Dentro del elemento {{htmlelement("div")}} con clase <code>red-panda</code>, queremos insertar un elemento {{htmlelement("picture")}} que permita una imagen pequeña del panda si la ventana tiene 600px de ancho o menos, y la gran imagen del paisaje en caso contrario.</p>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Las siguientes capturas de pantalla muestran como debería verse la página de bienvenida después de haber sido marcada correctamente, en una pantalla ancha y estrecha.</p>

<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>

<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>

<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>

<p>Si quieres evaluar tu trabajo, estás atorado o quieres pedir ayuda:</p>

<ol>
 <li>Pon tu trabajo en un editor en línea para compartir, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. Glitch es probablemente el mejor para este ejemplo, porque permite cargar propiedades como imágenes, mientras que algunas de las otras herramientas no lo hacen.</li>
 <li>Escribe una publicación solicitando evaluación y/o ayuda en el foro <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a>. Agrega la etiqueta "aprendizaje" a tu publicación para que podamos encontrarla más fácilmente. Tu publicación debe incluir:
  <ul>
   <li>Un título descriptivo como "Evaluación para página de bienvenida de Mozilla".</li>
   <li>Detalles de lo que quiera que hagamos, por ejemplo, lo que ya has intentado, si estás atascado y necesitas ayuda.</li>
   <li>Un enlace al ejemplo que deseas evaluar o en el que necesitas ayuda, en un editor en línea. Ésta es una buena práctica: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</li>
   <li>Un enlace a la página de evaluación actual, para que podamos encontrar la pregunta con la que desea ayuda.</li>
  </ul>
 </li>
</ol>

<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Contenido de Audio y Video</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; to &lt;iframe&gt; - otras tecnologías de inserción</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la Web</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes receptivas</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
</ul>