WEB222 Assignment 3 Solution

Objective:

Practice writing HTML Markup, Using Media Elements, Writing for the Web, and Using Open Archives.

Overview:

You are asked to create a small wildlife educational website. You will pick a species of animal, bird, insect, fish, etc. and research this species online. You will then create a multimedia website that uses resources about your chosen species (e.g., images, audio, and video) from open web archives.


Requirements:

Step 1. Choose a Species

Pick a species to research from those listed in iNaturalist, see:

https://www.inaturalist.org/observations?place_id=any&view=species

It can be a plant, animal, insect, bird, etc. Ideally you should choose a species that lives near you, but you are free to also choose something else that you find interesting. You must work on your own species (i.e., you can’t partner with other students in the course). Given the number of natural species in the world, it would be surprising if two students chose the same one.

Step 2. Research on iNaturalist.org

Research your chosen species using iNaturalist’s website. For example, if you were interested in the Red-bellied Woodpecker, you would begin with the following page:

https://www.inaturalist.org/taxa/18205-Melanerpes-carolinus





Step 3. Research on 3 Other Platforms

Conduct a similar search for other sources of information about your chosen species. Find 3 other web resources to use in your research. Try to find reputable sources of information. Take notes as you do your research on these other sites and keep track of all the sites/URLs you use. You will need to properly cite these in your about.html page (see below).

Step 4. Write a Research Summary

Write a 750-to-1000 word summary of your research. Your goal is to educate a non-scientific audience about your chosen species. Give them an overview and summary. You should define any terms you use, and help your reader understand the concepts you discuss.


Step 5. Convert to Markup

Convert your text to HTML5 markup. Make use of any and all appropriate HTML elements https://developer.mozilla.org/en-US/docs/Web/HTML/Element. For example, if you use lists or acronyms, quotes or technical terms, dates or definitions, etc. you should make use of the associated HTML5 elements. You will be graded on the appropriate use of HTML5 elements—you can’t make everything a <p> or <div>.

In your final markup, you should try to use most of the following HTML5 semantic elements (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element):

- <meta> tags for document, author, topic details
- <title> for the document’s title
- <article>, <header>, <footer> for the structure of your document
- <nav>, <li> for navigation links
- Headings <h1>, <h2>, …
- Definitions using <dfn>
- Figures using <figure>, <figcaption>
- Lists using <ol>, <ul>, <li>
- Paragraphs <p>
- Hyperlinks <a>
- Abbreviations <abbr>
- Quotes and Citations using <q>, <blockquote>, <cite>
- Data and Time using <time>, <data>
- Inline text with <em>, <strong>


Step 6. Add Media

Find supporting media resources to help educate the reader on your topic. Media helps tell a story and is one of the secret powers that the web has over other print media.

Here’s an example web page from the Globe and Mail newspaper that uses a mix of text and media well:

https://www.theglobeandmail.com/canada/article-the-last-lighthouse-keeper-why-a-nova-scotiancouple-refused-to-leave/

In this site you see all of the following HTML5 and media being used:

- Text Headings and Paragraphs
- Images with captions
- Audio
- Video, both looping/muted in the background, and also embedded
- Graphics (e.g., Interactive Map)

Your site doesn’t need to be this elaborate, but hopefully you get some ideas to help guide your use of text and media.


Here are some links to help you find open licensed media:

- https://support.google.com/websearch/answer/29508?co=GENIE.Platform%3DAndroid&hl=en
- https://www.wikihow.com/Find-Creative-Commons-Videos-on-YouTube
- https://search.creativecommons.org/
- https://unsplash.com/
- https://www.flickr.com/creativecommons/

You are asked to include the following open licensed resources on your page:

- At least 2 photos - At least 1 video (i.e. using the <video> element) or 1 YouTube embed (i.e., using an <iframe>)
- 1 audio resource (i.e. using the <audio> element) in your page. If you can’t find audio directly related to your topic, get creative. Maybe you can use background sound or include a song from a band that uses the same name.


- All images should have alt text included and used captions to describe the image and give credit - Videos and Audio should include controls
- Use appropriate sizes for all media. You can use a tool like https://squoosh.app/ to reduce the size of an image that is very big to download.

Step 7. Add A Basic Stylesheet

This assignment is not about the page’s style (fonts, colours, etc). We will focus on style when we look at CSS later in the course.

However, you are encouraged to use one of the various “class-less” CSS stylesheets described here: https://css-tricks.com/no-class-css-frameworks/ These stylesheets can be included in the <head></head> of your document, for example:

<head>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">

Try experimenting with some of these stylesheets to find one that makes your page look good to you.

Coding:

Use the website starter project in the assignment ZIP file. Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json):

npm install

Your code should all be placed in the src/ directory. You will find 3 HTML files there now, which should be updated by you as follows:

1. src/index.html – Your main web page should go here. Be sure to create a proper HTML5 document and also include hyperlinks to the about.html and honesty.html pages.

2. src/about.html – Include information about yourself (the author). Be sure to create a proper HTML5 document as well as links to index.html and honesty.html.

3. src/honesty.html – Include the standard text for student submissions, as well as credits for any and all resources you used in your site (e.g., citations for images, videos, etc). Be sure to create a proper HTML5 document, as well as links to index.html and about.html.

NOTE: you are welcome to create other pages if you need them. Just remember to link all of your pages together.

Running a Web Server:

You can start a local web server to test your code in a browser by running the following command:

npm start

This will start a server on http://localhost:3000, which you can open in your web browser

To stop the server, use CTRL + C

Submission:

When you are finished, run the following command to create your submission ZIP file:

npm run prepare-submission

This will generate submission.zip, which you can hand in on Blackboard.