JSFiddle

maria_ringes's public fiddles

  • Assessment: Mozilla Splash Page

    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!

  • Skill Test: Multimedia and Embedding

    The aim of this skill test is to assess whether you understand how to embed video and audio content in HTML, also using object, iframe and other embedding technologies.

  • Skill Test: HTML Images

    The aim of this skill test is to assess whether you understand images and how to embed them in HTML.

  • Assessment: Structuring a Page of Content

    For this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it.

  • Assessment: Marking up a Letter

    For this project, your task is to mark up a letter that needs to be hosted on a university intranet. The letter is a response from a research fellow to a prospective PhD student concerning their application to the university.

  • Advanced HTML Text 2

    In this task we want you to add some semantics to the provided HTML as follows: Turn the second paragraph into a block-level quote, and semantically indicate that the quote is taken from Accessibility. Semantically mark up "HTML" and "CSS" as acronyms, providing expansions as tooltips. Semantically associate machine-readable dates with the dates in the text. Use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly.

  • Advanced HTML Text 1

    In this task we want you to turn the provided animals and their definitions into a description list.

  • Links 3

    The following links link to an info page about Narwhals, a support email address, and a PDF factfile that is 4MB in size. In this task we want you to: Take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text. Add a warning to any links that need a warning added.

  • Links 2

    In this task we want you to fill in the four links so that they link to the appropriate places: The first link should link to an image called blue-whale.jpg, which is located in a directory called blue inside the current directory. The second link should link to an image called narwhal.jpg, which is located in a directory called narwhal, which is located one directory level above the current directory. The third link should link to the UK Google Image search. The base URL is https://www.google.co.uk, and the image search is located in a subdirectory called imghp. The fourth link should link to the paragraph at the very bottom of the current page. It has an ID of bottom.

  • Links 1

    In this task we want you to help fill in the links on our Whales information page: The first link should be linked to a page called whales.html, which is in the same directory as the current page. We'd also like you to give it a tooltip when moused over that tells the user that the page includes information on Blue Whales and Sperm Whales. The second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "[email protected]". You'll get a bonus point if you also set it so that the subject line of the email is automatically filled in as "Question about Whales".

  • HTML Text Basics 3

    In this task you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis.

  • HTML Text Basics 2

    In this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list.

  • HTML Text Basics 1

    In this task we want you to mark up the provided HTML using semantic heading and paragraph elements.