Assignment 6
Add another new page to your existing website. You have total freedom over the page format and content. You should continue using bootstrap.
Required Knowledge & Skills
- SublimeText 3 (Optional)
- Bootstrap
- Embedding Media Content
- HTML and CSS
Assignment Instructions
Part 1 (70 points)
Create a homepage for your website. You must include the bootstrap styled webpage you created in assignment 5. You may keep or discard the other webpages you created in previous assignments.
You have complete freedom over the content and layouts of the pages in your website as long as you fulfill the requirements listed below.
The theme of the new web-page is multimedia. You should design the layout appropriately while following these requirements:
Part 2 (30 points)
Use AwardSpace or any other hosting platform to host your newly created website.
Submission - Add all your files (all the html/css/image files) to a folder and compress it. Submit your zip file along with clickable URL of the website to Blackboard. Please test all the links within your website before submitting.
Create a homepage for your website. You must include the bootstrap styled webpage you created in assignment 5. You may keep or discard the other webpages you created in previous assignments.
You have complete freedom over the content and layouts of the pages in your website as long as you fulfill the requirements listed below.
The theme of the new web-page is multimedia. You should design the layout appropriately while following these requirements:
- The file should be named "index.html". (Note: any other file name will not be recognized as homepage). (5 points)
- Add a navbar to the new page, similar to the one you added to the page you created in assignment 5. It should link to all the webpages you decide to include in your website. Make sure that each page within your website links to every other page. Your website will now be hosted on a web-server. Webpages will not open up in your website if there are any broken links. (10 points)
- Modify the left aligned text on your navbar (the name of your website) so it links to your homepage. You should have at least two other links that allow you to navigate to the pages from assignment 5 and 6. (Refer to image below) (5 Points)
- Create an image gallery (using bootstrap classes) with 3 images
- There should be one animated GIF, one PNG, and one JPG image. (5 Points)
- Each image must have an alternate text in case the image does not load (use the ALT attribute). (5 Points)
- Optional: You can use Picasion (or another tool of your choice) to create your own animated GIF of various pictures you find on the web. You may need to use an online picture editor such as resizr to crop and resize the pictures before you create the animated GIF to minimize download overhead. Note that this would replace the animated GIF in the first point.
- Embed a Youtube video of your choice. Choose an appropriate size for the video container. (10 points)
- Embed a video file without downloading. (You can provide the actual link to a video instead of a local file) . (Note: 'embed' is not the same as 'link') (5 points)
- Embed an audio file without downloading. (You can provide the actual link to an audio instead of a local file) (5 points)
- Your website must be responsive and aesthetically pleasing. Use bootstrap classes, grid system and other features to define the layout of your homepage. (10pts)
- All CSS styles must be in an external CSS file. (5pts)
- You may include the same CSS file that you have been using, or create a new one and link that instead.
- You should not use any inline CSS. If you feel that there is a valid reason to use inline CSS at any point, then add a comment within your HTML file explaining why.
- Indent the CSS and HTML code correctly as shown in class. (5pts penalty for unindented code)
Part 2 (30 points)
Use AwardSpace or any other hosting platform to host your newly created website.
- Create a free web hosting account on AwardSpace; when creating your account do not register an optional domain -- you will set up a subdomain later (watch the AwardSpace Video Tutorial to learn you how to do this)
- Publish the website under the subdomain URL is1500-studentID.atwebpages.com. Your student ID can be either your numeric student ID starting with 000 or your user name. Never delete the subdomain as that will remove the folder and all your files in it.
- Watch the AwardSpace Video Tutorial showing you how to create a subdomain and build a simple website. Follow along and actually build the same code. Stop the video while you do the examples. Here's the full code for a simple web site that shows stretched images, external CSS, embedded videos, and the HTML page setup. You can download the code, unzip it and then simply click on index.html -- this will load the code into your browser locally. Explore it and use some of it as a template for Part 1. Remember that you can view the code for any web page by clicking the right mouse button and choosing "View Page Source" on Google Chrome or similar on other browsers (except Safari which does not allow you to easily view web pages.)
Submission - Add all your files (all the html/css/image files) to a folder and compress it. Submit your zip file along with clickable URL of the website to Blackboard. Please test all the links within your website before submitting.
Resources Required:
- Picasion or GifCreator or MakeAGIF for creating animated GIFs
- Resizr for image cropping and resizing
- AwardSpace account (000webhost and FreeHostingEU are alternatives should this not work); there are other low-cost hosting platforms that are better and more stable: BlueHost ($3.95/mo with PHP and MySQL), JustHost ($2.75/mo with PHP and MySQL).
Grading Rubric as specified in instructions | Submission Instructions
Total Number of Earnable Points: 100 Points
Approximate Time to Complete: 4 Hours
Due Date: see Syllabus or Blackboard
Approximate Time to Complete: 4 Hours
Due Date: see Syllabus or Blackboard