Description
Objective:
Practice writing HTML Markup, Using Media Elements, Writing for the Web, and Using Open Archives.
Overview:
You are asked to create an educational/informational website about one of your favourite Books, Television Shows, or Movies. You will pick a Book/TV Show/Movie and research it online. You will then create a multimedia website that uses resources about your chosen musical artiste/genre (e.g., images, audio, and video) from open web archives.
The web is full of both proprietary and open-licensed resources. The former cannot be reused by you: you can’t take an image or logo from someone else’s site and use it on your own. This is a copyright violation. However, there are also many open resources that you can copy and reuse. Learning how to find and use these correctly is important when building your own web content.
A high value will be placed on academic integrity and adherence to copyright law in your work on this assignment. Please take it seriously.
Requirements:
Step 1. Choose a Book/TV Show/Movie
Pick a Book/TV Show/Movie that you like.
It can be modern or historical, popular, or obscure. Ideally you should choose something that has meaning to you so that you can bring your own experience into play. You must work on your own (i.e., you can’t partner with other students in the course or other sections). Given the number of possible options, it would be surprising if two students chose the same one.
Step 2. Research
Research your chosen Book/TV Show/Movie. Learn as much as you can. Take notes to help you with the creation of your website. You may NOT copy any text word-for-word, only use it as background material.
Use at least 4 separate web resources in your research (i.e., you can’t use Wikipedia and be assume you’ve done enough). Try to find reputable sources of information. Take notes as you do your research on these 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 3. Write a Research Summary
Write a 750-to-1000 word summary of your research. Your goal is to educate a general audience about your chosen artist/genre, who likely won’t know anything. Give the reader an overview and summary, but also include specific details, quotes, etc. You should define any terms you use, and help your reader understand the concepts you discuss.
You may NOT copy/paste any text or use AI. All words must be written by you.
Step 4. 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 below (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>
You will be marked on your knowledge and use of these elements, and how well you have used them to markup your text. You may NOT submit a series of plain text paragraphs with no other elements. Spend some time choosing and implementing your markup.
Step 5. 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:
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.
You can use any open licensed media resource that allows reuse but may not use copyright materials. How do you know if something is copyright? Everything is copyright by default! Unless you are told you can reuse something that you find, assume that you can’t. Open licensed materials will be marked as such.
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 3 images
- At least 1 video (i.e., using the <video> element) or YouTube embed (i.e., using an <iframe>)
- At least 2 audio resources (i.e., using the <audio> element) or audio embeds.
Use appropriate HTML to include these resources in your site along with the text you have written. You may link to external URLs where applicable (i.e., you don’t have to download and use resources if they are publicly hosted). Make sure you do the following:
- 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 file 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 6. 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:
- 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.
- 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.
- 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.
