This is going to be one heck of a page!

In this lab, you’ll demonstrate your understanding of concepts presented in chapter 6, and enhanceyour previous CSS with the layout techniques discussed in the chapter. You may continue to use thepage started last week in lab #4 or you may begin with a fresh start. The choice is yours!Getting Started1.Read chapter 6 in the ​Murach​ textbook.2.Download the ​CS125hLab05.zip​ file from Moodle and extract its contents onto your drive.3.Rename the folder ​YourLastName-CS125hLab05​.4.Open the folder to explore its contents. The ​town_hall​ folder contains files you’ll need tocomplete practice activities from the end of each chapter. The ​hands-on​ folder will be where youstore your self-generated web page (and any related files).5.Add subfolders that you think are appropriate to the ​hands-on​ folder. You will need one folder toorganize your CSS files and potentially another folder to organize your image files.Adding CSS Layout Concepts to an Existing Web Page6.Follow the directions to improve the format of the San Joaquin Valley Town Hall page that beginon page 233 of the textbook, with the following modifications:a.Add a comment to the ​head​ section of the page that includes your name, the date, andCS 125H - Lab 5b.Add a comment to the ​main.css​​file ​that includes your name, the date, and CS 125H -Lab 5c.Complete sections 6-1 and 6-2 ​only​. You do not need to complete 6-3.d.The index.html and main.css files are located within the ​town_hall​ folder inside theCS125hLab05​ folder that you downloaded. The HTML file is in the root of the ​town_hallfolder and the CSS file is in the ​town_hall/styles​ folder.Adding Layout Concepts to Your Own Page7.Create a structured web page in your text editor (or open the page you worked on last week)and save it inside the ​YourLastName-CS125hLab05/hands-on ​folder as ​index.html ​or begincreating a new page with the name of your choice.8.Create a CSS file in your text editor and save it in an appropriate subfolder of the ​hands-onfolder or move an existing CSS file into the folder. The filename should follow good web namingconventions, but is of your own choosing.9.Add (or modify) a comment to the external stylesheet containing your name, the date, and “CS125H - Lab 5”10.Link your index.html file to the external stylesheet. 11.Add styles to the stylesheet that use the layout concepts to improve the visual appeal andreadability of your page. Demonstrate each of the following in some way:a. Use of width and floats to create an area of the page with side-by-side objectsb.Use of a clear property to create an area of the page that is not affected by one or morefloatsc.Use of the position property to change the default position of an element Absolute? Fixed? Sticky? Up to you!12.Validate your HTML page & CSS file and correct any errors.13.Compress the YourLastName-CS125hLab05 folder and upload through the appropriate link inMoodle.To zip a folder, right-click on the folder and select Send To > Compressed (zipped) folder. Thiswill create a new file with the same name as the folder, but with the .zip file extension addedand a zippered folder icon.

It's about to get even better!

In this lab, you’ll demonstrate your understanding of concepts presented in chapter 6, and enhanceyour previous CSS with the layout techniques discussed in the chapter. You may continue to use thepage started last week in lab #4 or you may begin with a fresh start. The choice is yours!Getting Started1.Read chapter 6 in the ​Murach​ textbook.2.Download the ​CS125hLab05.zip​ file from Moodle and extract its contents onto your drive.3.Rename the folder ​YourLastName-CS125hLab05​.4.Open the folder to explore its contents. The ​town_hall​ folder contains files you’ll need tocomplete practice activities from the end of each chapter. The ​hands-on​ folder will be where youstore your self-generated web page (and any related files).5.Add subfolders that you think are appropriate to the ​hands-on​ folder. You will need one folder toorganize your CSS files and potentially another folder to organize your image files.Adding CSS Layout Concepts to an Existing Web Page6.Follow the directions to improve the format of the San Joaquin Valley Town Hall page that beginon page 233 of the textbook, with the following modifications:a.Add a comment to the ​head​ section of the page that includes your name, the date, andCS 125H - Lab 5b.Add a comment to the ​main.css​​file ​that includes your name, the date, and CS 125H -Lab 5c.Complete sections 6-1 and 6-2 ​only​. You do not need to complete 6-3.d.The index.html and main.css files are located within the ​town_hall​ folder inside theCS125hLab05​ folder that you downloaded. The HTML file is in the root of the ​town_hallfolder and the CSS file is in the ​town_hall/styles​ folder.Adding Layout Concepts to Your Own Page7.Create a structured web page in your text editor (or open the page you worked on last week)and save it inside the ​YourLastName-CS125hLab05/hands-on ​folder as ​index.html ​or begincreating a new page with the name of your choice.8.Create a CSS file in your text editor and save it in an appropriate subfolder of the ​hands-onfolder or move an existing CSS file into the folder. The filename should follow good web namingconventions, but is of your own choosing.9.Add (or modify) a comment to the external stylesheet containing your name, the date, and “CS125H - Lab 5”10.Link your index.html file to the external stylesheet. 11.Add styles to the stylesheet that use the layout concepts to improve the visual appeal andreadability of your page. Demonstrate each of the following in some way:a. Use of width and floats to create an area of the page with side-by-side objectsb.Use of a clear property to create an area of the page that is not affected by one or morefloatsc.Use of the position property to change the default position of an element Absolute? Fixed? Sticky? Up to you!12.Validate your HTML page & CSS file and correct any errors.13.Compress the YourLastName-CS125hLab05 folder and upload through the appropriate link inMoodle.To zip a folder, right-click on the folder and select Send To > Compressed (zipped) folder. Thiswill create a new file with the same name as the folder, but with the .zip file extension addedand a zippered folder icon.