Next, create a 1200px wide landscape version of red-panda.jpg, and a 600px wide portrait version that shows the panda in more of a close up shot. Save copies of all these inside the same directory as index.html. You'll also link to the firefox logo in the site header. firefoxlogo400.png and firefoxlogo120.png.Īlong with mdn.svg, these images with be your icons to link to further resources, inside the further-info area.
Using your favourite image editor, create 400px wide and 120px wide versions of:Ĭall them something sensible, e.g. The following subsections detail what you need to do: Preparing images Unfortunately, no images or video have been added yet - this is your job! You need to add some media to make the page look nice and make more sense. In this assessment we are presenting you with a mostly-finished Mozilla splash page, which aims to say something nice and interesting about what Mozilla stands for, and provide some links to further resources. You don't need to touch the CSS, just the HTML inside the element - as long as you insert the correct markup, the styling will make it look correct. Note: The example HTML file contains quite a lot of CSS, to style the page.
then save pattern.png in the same directory (right click on the image to get an option to save it.)Īccess the different images in the originals directory and save them in the same way you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used.
Save the contents of index.html in a file called index.html on your local drive, in a new directory. To start off this assessment, you need to grab the HTML and all the images available in the mdn-splash-page-start directory on github.
To test knowledge around embedding images and video in web pages, frames, and HTML responsive image techniques. In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla! Prerequisites:īefore attempting this assessment you should have already worked through the rest of the Multimedia and embedding module.
0 kommentar(er)
