CS006: Lab 2 Multi-Web Page Personal Website
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
CS006: Lab 2
Multi-Web Page Personal Website
In lab 2 students will develop a Multi-Web Page Personal Website. Each web page will share a similar structure and layout. Semantic HTML elements such as header, main, section, nav, and footer will form the basic structure of the website. The intended audience are potential employers, college professors, classmates, and prospective colleagues. The four page website includes a homepage, index.html, with content about the student’s interests and background. In addition there is an academics.html web page with listed coursework, a professional.html with simple resume, and personal.html with bucket list and goals from lab 1.
1.1 Create lab 1 folder
1. Login to your AWS account: Use Google Chrome only.
https://959097940486.signin.aws.amazon.com/console
2. Open Cloud9 in AWS. Locate your home folder:
● The home folder (aka root directory) name has the same name as the AWS environment you created when signing up for AWS.
● The home folder’s name consists of cs006_fall23_ (lowercase c, lowercase s, zero, zero, 6, underscore, lowercase w, lowercase i, lowercase n, 2, 3, underscore) then your NetID in all lowercase (no spaces in between).
● For example, if your NetID was kflynn001, then the environment name will be cs006_fall23_kflynn001.
● All of your individual lab folders will be created inside of your home folder.
● We will use a slightly different folder naming convention for the lab 1 folder we will create in the next step.
3. Create a New Folder - Select your home folder. On Windows first right-click, for a Mac press and hold down two fingers on the trackpad, until a drop down menu opens. From the menu click on New Folder. A new folder will be created inside of your home folder (environment).
4. Rename New Folder - Select the New Folder (same way as previous step). From the menu click on Rename. This will highlight the folder’s name. Rename the new folder as follows. Your lab 1 folder name should be your NetID followed by an underscore ‘_’ followed by lab1 followed by an underscore ‘_’ followed by your lecture section number in the format section001, section002, or section003. Below are meeting times for all sections.
|
Section Number |
Days & Time |
|
001 |
MWF 8:00-8:50 AM |
|
002 |
MWF 10:00-10:50 AM |
|
003 |
MWF 12:00-12:50 PM |
Example - If your NetID was klynn001 then your lab 1 folder name would be one of the following based on your lecture section.
kflynn001_lab2_section001, kflynn001_lab2_section002, or kflynn001_lab2_section003.
1. Download - There are no starter files for this lab. Students will create an index.html from scratch. Then create the other webpages by duplicating a portion of index.html.
2. Upload - There are no starter files to upload to AWS Cloud9. Proceed to the next section, 1.2 Homepage.
1.2 Homepage
1. In your lab 2 folder (for example, kflynn001_lab2_section001), create an HTML file named index.html. The index.html file is commonly used to represent the home page of a website.
2. Open index.html in edit mode in Cloud9.
3. Add <!DOCTYPE html> on line 1 in index.html. <!DOCTYPE html>, the Document Type Declaration, specifies to the browser that the document is written in HTML5.
4. Add <html></html> on line 2 of index.html.
5. Place your cursor in between the opening and closing html tags: <html> here</html>. Then press the return key once, moving the closing </html> tag down two lines. The <html> tag marks the beginning of the HTML document.
6. Add <head></head> inside the html element: <html>here</html>.
7. Place your cursor in between the opening and closing head tags: <head>here</head>. Then press the return key once, moving the closing </head> tag down two lines in the code.
The <head> tag marks the document head. The head element contains information that describes the web page document. It also includes information browsers will use to properly display the web page.
8. Add <body></body> inside the html element after the head element, <html>after head element here</html>. The body element should be placed after the entire head element, that is after closing </head> tag and before closing </html> tag.
9. Place your cursor in between the opening and closing body tags: <body>here</body>. Then press the return key once, moving the closing </body> tag down two lines in the code.
10. Add (copy-and-paste the entire line of code) the following <meta> element with the given attribute values inside <head>here</head>.
|
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"> |
11. If you correctly followed the directions for steps 1-10, the index.html source code should appear as follows.
|
index.html: add <main>, <header>, <section>, and <footer> to <body>
1. Add <header></header> inside <body>here</body>. The header element is a structural element that contains content such as a navigation menu.
2. Add <main></main> inside the body element: <body>after header element here</body>. The header and main elements will be in sequence in the document, i.e. header element occurs first followed by the main element. The main element contains information considered the central part of the webpage content.
3. Add four <section></section> elements inside <main>here</main>. Using your cursor and the return key, add a new blank line between each opening <section> tag and closing </section> tag. Once done there should be 4 section elements in a row.
4. Add <footer></footer> after the closing tag for </main> element and before the closing tag </body>.
5. Place your cursor in between the opening and closing footer tags: <footer>here</footer>. Then press the return key once, moving the closing </footer> tag down two lines in the code.
6. If you correctly followed the directions for steps 1-6, the index.html source code should appear as in the image above.
index.html: About Me, My Hometown, Interests and Hobbies and UCR
1. Add a paragraph element,<p></p>, inside the first section element, <section>here</section>.
2. In the paragraph element from the previous step, write a single paragraph about yourself. Start the paragraph with the text About Me: in bold. We could use the <b> element to make the text bold, but to make our website more accessible we will use the <strong> element. The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. For users who are visually impaired or use text-to-speech software to navigate and read webpages, <strong> indicates this content is important: which content about you is. Read more about its use here. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong.
3. To complete the paragraph content, at a minimum, you should answer the following questions. The answers to which will form the paragraph’s content.
What is your name, major, year in college? What year and quarter did you start at UCR? Where did you attend high school? What are your plans after you graduate career-wise? Phrase each plan as a positive affirmation , examples are: I will enter graduate school in ______. I am going to attend law school, then enter criminal law. When I earn my teaching credential, I will become a HS teacher. I will enter the industry as a(n) _______. I will work as a Congressional aid, then run for political office. I am going to work as a social worker in LA County. Points will be deducted for not using positive affirmation. Avoid “want to” or “hope to” or “if...then”.
4. Add a heading level 2 element, <h2>Hometown</h2>, inside the second section element, <section>here</section>.
5. Add one paragraph element, <p></p>, this section element: <section>here after h2 element</section>. Next, write one paragraph of content about where you grew up, your hometown or a recent place you call home.
What did you love the most about this place? Be specific. What were some of your fondest memories of this place? What was the best of the food and culture like? Were there particular seasons of the year that you enjoyed the most and why? What were some of the cool places you would go or experience growing up?
6. Add a heading level 2 element, <h2>Interests and Hobbies</h2>, inside the third section element: <section>here</section>.
7. Add one paragraph element, <p></p>, this section element: <section>here after h2 element</section>. Next, write one paragraph of content about your favorite hobbies or interests you have.
Examples are: sport you love to play and/or follow or a musical instrument you learned to play. Do you often hike or spend time in the great outdoors? Do you love to cook? Is there a particular cuisine you are an expert at cooking (eating :-))? Any topic you choose that you are passionate about will work for this section.
8. Add a heading level 2 element, <h2>UCR</h2>, inside the fourth section element: <section>here</section>.
9. Add one <p></p> element to this section element: <section>here after h2 element</section>. Add one paragraph of content about your time at UCR. If you have not yet been on campus, do some research online and consider what activities or experiences you look forward to once you get to UCR.
What interesting places or activities have you added to your repertoire or want to experience as a Highlander? Describe several. Examples would be: hiking to the C, eating Pho' with friends, snowboarding, visiting the Botanical Gardens, trips to the beach, nights out dancing in LA with friends, etc.
10. Save index.html and open in Preview Mode in Cloud9. Your webpage should look like the example web page (next page of this document), but with different text for the paragraphs in About Me: My Hometown, Interests and Hobbies, and UC Riverside.
index.html: add <img>, <h1> to <header>
1. Add an image element, <img>, to the header element: <header>here</header>. The element should be similar to below, with different attribute values for src, alt, width, and height:
<img src="misty_morning.png" alt="morning fog on mountains" width="1024" height="378">
2. Upload an image of scenery in landscape orientation (much wider than high). Search online if needed. Make sure you do not upload an image larger than 1500 pixels wide.
3. Add a heading level 1 element, <h1>Firstname Lastname: Homepage</h1>, after the image element <img> in the header. Replace the Firstname and Lastname with your name.
4. Resize image - open (double click filename) image file in Cloud9’s image editor (see below). Select "Resize" in the edit window menu. Next, change the width value to 1024 pixels. Be sure the “Maintain Aspect Ratio” box is checked, so the height is changed automatically and in proportion to 1024. Save your image file (File->Save, or Command-S on Mac, or Control-S on
|
Windows). Fill in correct width and height values in the <img> element in your code.
5. Save and open index.html in Preview mode in Cloud9. Your web page should look like the following example with different images and text.
index.html: add <nav> to <header>
1. Add a navigation element, <nav></nav>, element to header element: <header>here after h1 element</header>. We will be adding hyperlinks to the <nav>. The <nav></nav> will serve as the enclosing element (similar to an ordered or unordered list). The items inside of <nav>...<.nav> will be a list of links.
2. After the <nav> opening tag (inside nav element) add the following hyperlink:
<a href="index.html">HOME</a>
3. On the next line add the hyperlink: <a href="academics.html">ACADEMICS</a>
4. On the next line add the hyperlink: <a href="professional.html">PROFESSIONAL</a>
5. On the next line add the hyperlink: <a href="personal.html">PERSONAL</a>
6. Open index.html in Preview mode in Cloud9. Your file should be similar in appearance as the image below.
|
1. Add a mailto: hyperlink inside the footer element, <footer>here</footer>. The content should be your name. The link should open an email client when clicked on.
<a href="mailto:[email protected]">Kevin Flynn</a>
Notice that the anchor, <a>, element’s href attribute has a value set to an email address rather than a web page address or file path location.
2. Change email address to have your NetID instead of “kflynn001” in the mailto: href.
3. Add a line break element, <br>, after the mailto: hyperlink .
4. Add a tel: hyperlink inside the footer element after the previous <br> , <footer>...<br>after here</footer>. The displayed linked text for the number should be: (951) 555-5555. The link should open the phone client on the device the link is accessed on.
<a href="tel:+01-951-555-5555"> (951) 555-5555</a>
5. Add a line break element, <br>, element after tel: hyperlink.
6. Add a copyright notice that uses the idiomatic text element for italicized text, <i> and uses the copyright symbol, after the phone hyperlink. We want the text to be smaller than the mailto: and tel: links so we will use the <small> element.
<small><i>Copyright © 2021 Kevin Flynn</i></small>
7. Change text for copyright notice to be your Firstname Lastname.
8. Your footer in your web page should look like the following example with different text.
9. Open index.html in Preview mode in Cloud9 and compare to the index.html: sample solution at the back of this document. Your file should be similar in appearance and content.
|
10. Add a title element, (<title></title>) to the head element (<head>title HTML element goes here</head>) in index.html. Edit the content of the heading level 1 element <title>...</title> to be Firstname Lastname: Homepage.
1.3 Academics, Professional, and Personal web pages
academics.html - Academics web page
1. Make a copy of index.html in your lab 2 folder. Rename the copied file to be academics.html. Edit the content of the heading level 1 element <h1>...</h1> to be Firstname Lastname: Academics.
<h1>Firstname Lastname: Academics</h1>
2. Edit the content of the title element in academics.html to be the same as the h1 element’s content in the previous step: Firstname Lastname: Academics.
<title>Firstname Lastname: Academics</title>
3. Delete all four of the section elements in the main element in academics.html. Do not delete the header and footer elements.
4. Save and open academics.html in Preview mode in AWS. Your webpage should look like the example above with different images and text.
|
professional.html - Professional web page
1. Make a copy of academics.html in your lab 2 folder. Rename the copied file to be professional.html. Edit the content of the heading level 1 element <h1>...</h1> to be Firstname Lastname: Professional.
<h1>Firstname Lastname: Professional</h1>
2. Edit the content of the title element in professional.html to be the same as the h1 element’s content in the previous step: Firstname Lastname: Professional.
<title>Firstname Lastname: Professional</title>
NOTE: since we made a copy of academics.html from index.html, then removed the main element’s content from academics.html except for the header and footer elements, we can make another copy from academics.html for use as personal.html, needing only to change the <h1> and <title> elements’ content. Do not delete the main element’s content for index.html.
personal.html - Personal web page
3. Make a copy of academics.html in your lab 2 folder. Rename the copied file to be personal.html. Edit the content of the heading level 1 element <h1>...</h1> to be Firstname Lastname: Personal.
<h1>Firstname Lastname: Personal</h1>
4. Edit the content of the title element in personal.html to be the same as the h1 element’s content in the previous step: Firstname Lastname: Personal.
<title>Firstname Lastname: personal</title>
academics.html: Academics web page
Next you will add UCR coursework to academics.html. We will use your current course schedule (Fall 2023) and your previous quarter’s classes (Spring 2023). If this is your first year at UCR, use Fall 2023 and your expected course schedule for next quarter, Winter 2024. Enrollment for Winter 2024 will not open for a few more weeks, so first year students should refer to UCR’s Class Schedule. You can select the Winter 2023 quarter to choose classes that were offered last year. Most of these classes will be offered again in Winter 2024.
1. Add a heading level 2 element <h2></h2> with content “Courses” after the opening main element tag <main>.
2. Add a paragraph element <p>...</p> after the h2 element (opening tag <p> goes directly after the closing tag </h2>). In the content of the paragraph, answer the following questions:
○ What is the coursework being completed for? A degree in what?
○ Are there classes that you chose to make yourself more well rounded or you have a genuine interest in learning in addition to your course of study?
○ When did you enroll to study at UCR and when do you expect to graduate?
○ Where are you on your journey at UCR? Does the work below represent your first year at UCR, or are you in your 2nd year or higher at the University?
3. Add two heading level 3 elements <h3></h3>, one each for Winter 2024 and Fall 2023. Place these after the complete paragraph element from the previous step (closing tag </p>). Fill in the content for Winter 2024 and Fall 2023.
○ <h3>Winter 2024</h3>
○ <h3>Fall 2023</h3>
|
NOTE: The sample solution for academics.html at the back of this document has course information for Winter 2021 (current) and Fall 2020. Your lab submission will list Winter 2024 (current) and Fall 2023. |
4. Add an unordered list element for each h3 element in the previous step. You can start with the unordered list HTML code stub below:
|
<ul> <li>replace with course 1 info</li> <li>replace with course 2 info</li> <li>replace with course 3 info</li> <li>replace with course 4 info</li> </ul> |
5. Each list item’s content needs to be replaced with course information: course number and course name. The course number should be made bold using the HTML Bring Attention To element (<b>). The course name should be the default font for list items.
Example for unordered list of courses:
● CS006: Effective Use of the World Wide Web
● CS010C: Introduction to Data Structures and Algorithms
● MATH9C: First Year Calculus
● PHIL007: Introduction To Critical Thinking
Use the <b> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b.
6. Open academics.html in Preview mode in Cloud9 and compare to the academics.html: sample solution at the back of this document. NOTE: sample solution for academics.html at the back of this document has course information for Fall 2020 and Winter 2021.
professional.html: Résumé content
Next you will add a short resume to professional.html. This is a two-step process. First we will import a collection of HTML elements already in resume format. Then we will edit element content to contain your own information.
1. Open professional.html in edit mode in Cloud9 (source code view). Find the main element. The professional web page should have only a header, footer, and empty element inside: <header>...</header><main>empty</main><footer>...</footer>.
2. Copy and paste the entire block of code (found on the next page of this document) between the header and footer elements inside of the main element in professional.html. Then make the changes to this code described in the next steps.
○ before: <header><main>empty</main></header><footer>...</footer>.
○ after:a <header>...</header><main>paste code from here</main><footer>...</footer>.
|
<h2>Education</h2> <ul style="list-style-type:none"> <li><b>University of California, Riverside</b></li> <li><b>Fall 2019-present</b></li> <li><b>Major:</b> Economics/Law and Society</li> <li><b>Minor:</b> Psychology and Political Science</li> </ul>
<h2>Experience</h2> <ul> <li><b>Jan 2020 - present: </b>Student Office Assistant: Biology Department, UC Riverside, USA</li> <li><b>Aug 2019 - Dec 2019: </b>Food Service, Dining Services, UC Riverside, USA</li> <li><b>Aug 2016 - Jun 2019: </b>Restaurant Shift Manager, In-N-Out Burger, Baldwin Park, CA</li> </ul>
<h2>Activities and Service</h2> <ul> <li><b>May 2018: </b> Habitat for Humanity, Colton, CA</li> <li><b>Sep 2016 - Sep 2018: </b>Mock Trial, King High School, Mesa, AZ</li> <li><b>Sep 2015 - Sep 2016: </b>Model United Nations, King High School, Mesa, AZ</li> <li><b>Sep 2015 - May 2019: </b>Men's Varsity Soccer, King High School, Mesa, AZ</li> </ul>
<h2>Honors</h2> <ul> <li><b>Fall 2019: </b>Dean's List Fall 2019, UC Riverside, USA</li> <li><b>Fall 2019: </b>Golden Key National Honor Society</li> </ul> |
3. Change the content in the following list element to be the year you entered UCR.
<li><b>Fall 2019-present</b></li>
4. Change the content in the following list element to be your major. <li><b>Major:</b> Economics/Law and Society</li>
5. If you have a minor change the content in the following list element to be your minor. If you do not have a minor, delete this list item. <li><b>Minor:</b> Psychology and Political Science</li>
6. Change the content in the Experience section. There are three listed work experiences. Edit these to show your experience. Remove any extra list items that you do not need. You can add more listed items if you like.
<li><b>Jan 2020 - present: </b>Student Office Assistant: Biology Department, UC Riverside, USA</li>
<li><b>Aug 2019 - Dec 2019: </b>Food Service, Dining Services, UC Riverside, USA</li>
<li><b>Aug 2016 - Jun 2019: </b>Restaurant Shift Manager, In-N-Out Burger, Baldwin Park, CA</li>
7. Change the content in the Activities and Service section. There are four listed activities and services. Edit these to show your activities and service. Remove any extra list items that you do not need. You can add more listed items if you like.
<li><b>May 2018: </b> Habitat for Humanity, Colton, CA</li>
<li><b>Sep 2016 - Sep 2018: </b>Mock Trial, King High School, Mesa, AZ</li>
<li><b>Sep 2015 - Sep 2016: </b>Model United Nations, King High School, Mesa, AZ</li>
<li><b>Sep 2015 - May 2019: </b>Men's Varsity Soccer, King High School, Mesa, AZ</li>
8. Change the content in the Honors section. There are two listed honors. Edit these to show your honors. Remove any extra list items that you do not need. You can add more listed items if you like.
<li><b>Fall 2019: </b> Dean's List Fall 2019, UC Riverside, USA</li>
<li><b>Fall 2019: </b>Golden Key National Honor Society</li>
9. Open professional.html in Preview mode in Cloud9 and compare to the professional.html: sample solution at the back of this document.
personal.html: Goals and Bucket List
Next you will add your Bucket List and Goals lists from lab 1 to personal.html. You will also add a description (a paragraph each) for your rationale for each item in the lists.
1. Open personal.html in edit mode in Cloud9 (source code view). Find the main element. The personal web page should have only a header, footer, and empty element inside: <header>...</header><main>empty</main><footer>...</footer>
2. Add a heading level 2 element <h2>Bucket List</h2>.
before: <header><main>empty</main></header><footer>...</footer>.
after:a <header>...</header><main><h2>Bucket List</h2></main><footer>...</footer>.
3. Add a paragraph element: <p></p> after <h2>Bucket List</h2>. In the paragraph’s content describe why you want to have these experiences on your bucket list. If you already did this in lab 1 you can simply copy and paste the paragraph over from lab 1 (me.html) to lab 2.
4. Add your unordered Bucket List from lab 1 below <p></p>.
5. Add a heading level 2 element <h2>Goals</h2> after your after unordered bucket list (<ul>...</ul>).
6. Add a paragraph element: <p></p> after <h2>Goals</h2>. In the paragraph’s content describe why you want to accomplish these things in your life. If you already did this in lab 1 you can simply copy and paste the paragraph over from lab 1 (me.html) to lab 2.
7. Add your ordered Goals list element (<ol>...</ol>) from lab 1 below <p></p>.
8. Open personal.html in Preview mode in Cloud9 and compare to the personal.html: sample solution at the back of this document.
Turn-in
Students will upload a single .zip file that contains: index.html, professional.html, academics.html, professional.html and an image file in either .png, .jpg, or .jpeg format. Follow the instructions below.
1. If not already, configure AWS to download .zip file as default
● Instructions for this are at the end of this document in: Cloud9 - zip file set-up.
2. Download .zip file from AWS
● Select your lab 2 folder (in Cloud9) - for example: kflynn_lab2_section001. For Windows users right-click, for Mac press and hold down two fingers on the trackpad, until a drop down menu opens.
● Select Download from the menu. This will download a zipped archive file to your local machine. Warning: Do not download your entire home folder. Only your lab 2 folder
● If a student’s NetID was kflynn001, then the .zip file downloaded would be one of the following file names, depending on the lecture section.
■ kflynn001_lab2_section001.zip
■ kflynn001_lab2_section002.zip
■ kflynn001_lab2_section003.zip
3. Test HTML code from downloaded .zip file on local machine
● Locate the .zip file you downloaded from Cloud9 in the previous step.
This is typically in your local machine's Downloads, Desktop or Documents folder, unzip it (extract the lab 2 folder and its contents into a folder in the same folder the .zip file is currently in).
● Unzip the downloaded .zip file:
For Windows OS: https://www.howtogeek.com/668409/how-to-zip-and-unzip-files-on-windows-10
For Mac OS: https://www.howtogeek.com/672240/how-to-zip-and-unzip-files-and-folders-on-mac/
● Verify unzipped files are correct:
○ Open index.html in a Chrome web browser. See sample solution.
○ Open academics.html in a Chrome web browser. See sample solution.
○ Open professional.html in a Chrome web browser. See sample solution.
○ Open personal.html in a Chrome web browser. See sample solution.
○ Verify your image displays properly.
○ Verify all links in the navigation bar link to valid HTML files.
○ Verify your resume has the correct information displayed and is displayed correctly.
4. Submit .zip file to Canvas:
○ Correct code in previous step - If your code passed all tests in the previous step (Test HTML code from downloaded .zip file on local machine), upload the .zip file on your local machine to Canvas Lab 2 turn-in.
If there were errors and you still have time before the deadline, go back to Cloud9 and continue working on lab 2. Seek help in office hours if you get stuck. Then repeat this Lab 2 Turn-in process from step 2 (Download .zip file from AWS).
2024-01-24