Solved-Assignment #3 -Solution

Description

Before you begin this assignment, you should download the assignment’s submission file from Canvas. This is the file you will be working on and eventually submitting into Canvas. It is a Microsoft Word 2013 file, so you must have access to Word in order to edit that assignment file.

Part 1: Intro to CSS Video: Styling a Coffee House Page

Note: For this part you will be submitting 1 screenshot and 1 code (copy/paste) from 1 page.

For this part you will watch an introductory CSS video and create the same Web pages and styles as done in the video. The video shows you how to use CSS (Cascading Style Sheets) properties to control color, background images, spacing, and font changes. These capabilities allow you to control some of the common creative design elements of Web pages. Follow the directions below carefully so you understand what you need to do to maximize your score.

1. Watch the video and perform the identical steps yourself. The video, “Intro to CSS”, introduces the best way of using CSS — with an external style sheet file. Note that this video is in QuickTime (.mov) format, so you’ll need the QuickTime player to view it (a free copy is available at Apple.com.) Links to this video and its data files are given below. You will need the data files in order to make the same changes to the files that are made in the video.Link to the data files: Data files for “Intro to CSS” Video (28K .zip file)

   Link to the QuickTime video: Intro to CSS Video (28MB .mov file, 9 min 53 sec video)

2. When trying to follow along with the video, one thing to keep in mind is that the video will use Internet Explorer’s “view source” method of launching Notepad to edit a Web page’s code. But that probably won’t work the same way in your browser, so you may have to launch a separate editor window to be able to edit the code.
3. When you have completed all the steps shown in the video and have successfully created the same styles in your “main.css” file to style your coffee house’s pages and have successfully validated those “main.css” styles using the W3C’s CSS Validation Service, you will be ready to continue on to the next steps below as you prepare for submission. (But if you receive validation errors, you should investigate them, fix them, and retest them before moving on.)

4. Open your “About Us” page in your editor. Insert your full name into the beginning of the “title” tag within the “head” section of the HTML so that your name will show up on the tab when it displays in the browser. To test this page, save and then preview it in the browser.
5. With your “About Us” displaying in the browser (and your name showing on the tab), capture a screen shot of your page so that the entire page is showing up. Use 2 screenshots if you cannot capture it all with one. The whole page needs to be visible to get full credit. (To capture a screen shot in windows, you can use the “Snipping Tool” from the “Accessories Group” or the “PrintScreen” key.)
6. Screenshot Needed: Paste your browser screenshot(s) into your Word submission document in the indicated area.
7. CSS Code Needed: With your style sheet file “css” (NOT the HTML page) in your editor (such as Notepad or Brackets), select and copy all of the CSS code (NO HTML code). Make sure to get it all (including your full name as “author”). Then paste this CSS code into your Word submission document starting on a new page (below your screenshot). Adjust the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. Do not include any HTML at all – this is just a CSS code check. Do not take a screen shot of your code – copy and paste the code text.

Part 2: Questions and Answers from Another CSS Video: Using Id’s and Classes

For this part you are asked to watch a shorter (10 minute) video and then answer some questions related to the video. In this video, the styles are created in a separate style sheet file. Although it is worth seeing the different places you can put CSS (as this assignment has demonstrated), the approach used here in this video is the best approach – keep your styles in a separate style sheet file rather than  sprinkling styles around inside the HTML tags of the pages themselves. So keep that difference in mind as you watch this video.

1. First watch the video from the link below:Link to the video: ID’s and Classes Video (22MB .mov file, 9 min video)
2. As you watch the video (or after watching the video), answer the 5 questions from within the “part 2” portion of the downloaded Word submision file for this assignment. To answer a question, bold and highlight your chosen answer in the Word submission document.

Part 3: Chapter 3 Textbook Work — Links, Images, & Embedded Style Sheets

Note: For this part you will be submitting 1 screenshot and code from 2 different pages.

Read and follow along the examples, steps, and instructions given within chapter 3 (pages HTML 87-142). In doing so, you will be working with several pages from a company who gives underwater photography tours called “Underwater Tours by Eloise”. You will need to have the textbook files downloaded onto a local drive (such as your flash drive) to be able to complete this part of the assignment. You can obtain them from the link below:

http://www.faculty.rcc.edu/mcleod/html/handouts/ch3-files.zip

After you download the given zip file, you should extract the folder and files within it and use them as you work through the tutorial in your textbook. Also, keep the following instructions in mind as you do your work:

1. The actions you need to take (from the book) will be indicated by the red circled and numbered steps. For examples of that kind of step number formatting , see steps 1-6 toward the top of page HTML 98.
2. When the textbook instructs you to work with your flash drive in the “G:” drive, keep in mind that your own work area on your own computer might be using a different drive letter (or even a different folder name) than the book indicates. Just use whatever is appropriate for your computer and your storage area so that your work is saved where you need it to go.
3. When you reach the bottom of page HTML 117, and have completed and saved the “underwatertours.html” file, you are almost done. But first, make the following changes:Change the name “Eloise” that appears in the first paragraph <p> to your own full name. For example, if your name is “Jane Doe”, then that part of the paragraph should become “Underwater Tours by Jane Doe”. You should also change the name in the same manner where it appears within the title tag in the “head” section of your page’s HTML. Test in the browser to make sure your changes work properly — for example, your full name should end up in the paragraph being formatted in the browser just like “Eloise” was — as bold and colored text.

   When you have made the name changes in those 2 locations, then continue on to Validate your HTML code by following the steps on page 118. If you have any validation errors, try to fix them and re-test your page until you’ve minimized any issues. Then you will be ready to move some of your work into the assignment’s Word file for later submission.

4. HTML Code Needed: When you reach page 119 and have completed the first Web page (underwatertours.html),and your page is looking like the figure on page 119 (except your name is appearing in the title and the first paragraph as instructed above), then copy and paste the HTML code from your “underwatertours.html” page from your code editor into the “part 3 code” area of the Word document you will be submitting for this assignment.
   Do NOT paste a screen shot of the code — copy and paste the actual code text.
5. Next you should follow along with the steps on pages 120 to 122.
6. When you reach page 123, you will be ready to obtain a screen shot of this “underwatertours” page in the browser. Capture a screen shot of your page displaying in the browser so that the entire page is showing up. Use 2 (or more) screenshots as needed to capture the entire page displaying (scrolling the page down as needed in the browser.) I need to see it all to give you full credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the “Accessories Group” or the “PrintScreen” key.

7. Screenshot Needed: Paste your “Underwater Tours” browser screenshot(s) into your Word document in the indicated area.

1. After the screenshot pasting, continue to work on the second Web page on pages 123-140. When you reach page 140, you make the following change before copying the HTML code:In the same manner as in the first page, replace the name “Eloise” with your own full name in the first paragraph <p> text under the “SAMPLE PHOTOGRAPHS” heading. It should format as bold and colored text just like “Eloise” had been. Test your change in the browser to make sure it acts properly.

   Then you should be ready to save, validate, and copy the HTML only for that “sample photographs” page.

2. HTML Code Needed: With your “sample photographs” page open in your editor, select all of the HTML code. Then copy and paste all of the HTML code for the “samplephotos.html” page from your editor into the indicated area within the Word file to be submitted later for this assignment. Do NOT paste a screen shot of the code — copy and paste the actual code text.Note that no browser screenshot is needed for this page.

Part 4: HTML 5 & CSS 3 YouTube Video: Styling a Skateboard Site

For this part you will watch an HTML & CSS video and then answer some questions about it.

1. Watch this YouTube video at the link shown below.
   Video: https://www.youtube.com/watch?v=AxuF9IOPTLM
2. Optionally, to better follow along with the video’s activities, you can get your video starter files at the following link.  Files: html-css-vid-start.zip
3. Answer the questions about this video in the Word file available from the Assignments page. Indicate your answers by bolding and highlighting your chosen answers.

That concludes the work for this assignment. Save your Word submission file, make sure your own name is part of the file’s name. After saving, exit Word, and then submit your Word file (the one containing the answers to the questions, the screen shots and the HTML/CSS code for all parts of this assignment.  You should submit just this one Word file.  Do not submit other files.  Submit only once, when you are all done. (But if it is still before the due date, you can submit the entire assignment a second time if you need to make some improvements.) Remember that lateness deductions will occur if it is after the deadline so get it in on time if you can.