Due Week 3 And Worth 40 Points Deliverable Three: Web Pages

Due Week 3 And Worth 40 Pointsdeliverable Three 3 Web Pages And Two

Complete the weekly lab based on the following: Write the code for each lab assignment. The code is to be submitted in a single compressed folder (zip file) to the online course shell. The file must contain all .htm files, along with any other files that may be necessary for your project to run (ex: text files, images, etc.). When saving the file, it should be saved as Lab_#_Last name_First initial.htm. For example, if your name is Mary Smith the file for Lab 1 should be saved as Lab_1_Smith_M.htm Any and all written answers must be entered into the online course shell with the submission of the attached lab assignment.

Follow the directions below to complete Lab Assignment 4: Re-create the sample Web pages listed below with nested ordered lists and nested unordered lists. This Web page will be reused for each part below. (As shown in Figure 1.) Create the Web page from number 1 with silver background color set by a Cascading Style Sheet (.css). (As shown in Figure 2.) Create the Web page from number 1 with silver background color and Comic Sans MS font set by a Cascading Style Sheet (.css). (As shown in Figure 3.) Re-create the Web page set from number 1 with Silver background color and Comic Sans MS font set by a Cascading Style Sheet (.css). Then, using in-page tags to override the CSS, set only the font of the sentence “Here is an Unordered list with several levels of sub-lists” to red, Arial font (different than the rest of the page). (As shown in Figure 4.)

Paper For Above instruction

The task outlined involves creating three interconnected web pages that incorporate nested lists, styled with CSS, and demonstrate the use of both external and inline styling techniques. The aim is to understand how CSS can influence webpage design and how to override styles locally within HTML elements. This project emphasizes practical web development skills, combining HTML structure with CSS styling to produce visually organized and responsive pages.

Introduction

Creating multiple web pages with graded styling and nested lists enables students to grasp essential web development concepts such as CSS styling, list nesting, and inline overrides. The primary focus is on applying styles via an external stylesheet and manipulating specific elements' styles inline to contrast the global styles set through CSS. By doing so, students learn the importance of cascade rules, specificity, and the mechanisms for overriding styles in web design.

Creating the Basic Web Page with Nested Lists

The initial step involves building an HTML page that contains nested ordered (

  1. ) and unordered (
  • ) lists, mimicking the sample structure provided in the assignment. This base web page acts as a foundation for subsequent styling efforts. The nested lists should be properly indented and structured to reflect multiple levels, such as sub-lists within main list items. The content of the lists could be thematic or generic, depending on the project’s context. Proper semantic HTML tags should be used to enhance accessibility and ensure valid code.
  • Applying External CSS for Visual Styling
  • Once the HTML structure is established, a separate CSS file must be created. The initial CSS file will set a silver background color for the entire page, demonstrating the application of background colors via CSS. This involves selecting the body element and applying the background-color property. The CSS should be saved as a separate file, for example, style.css, and linked within the HTML document’s head section. This promotes separation of content and style, adhering to best practices.
  • Adding Font Styles with External CSS
  • Further modification involves setting a specific font, Comic Sans MS, for the entire page through the CSS file. This is achieved by adding a font-family property in the stylesheet. The goal is to observe how CSS influences font rendering across the entire webpage, providing a consistent look and feel. The stylesheet is linked as before, ensuring that the font styling applies universally to the page elements unless overridden.
  • Overriding Styles with In-Page Tags
  • The final task introduces inline styles within the HTML document to override the external stylesheet for a specific element. Using the in-line style attribute, the sentence “Here is an Unordered list with several levels of sub-lists” will have its font color set to red and its font family set to Arial, differing from the page’s global styles. This illustrates the CSS specificity hierarchy and how inline styles take precedence over external styles in case of conflicts.
  • Conclusion
  • This project encapsulates fundamental web development principles: structuring content with HTML lists, styling with CSS, and managing style precedence through external and inline CSS. It demonstrates hands-on skills necessary for creating visually appealing and well-structured web pages, deepening understanding of style cascading and overriding. Completing this assignment prepares students for more complex web design tasks involving layered styles and responsive layouts.
  • References
  • Ray, S. (2020). HTML and CSS: Design and Build Websites. O'Reilly Media.
  • Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
  • W3Schools. (2023). CSS Tutorial. Retrieved from https://www.w3schools.com/css/
  • Mozilla Developer Network. (2023). CSS basics. Retrieved from https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
  • Keith, J. (2019). HTML and CSS: Visual QuickStart Guide. Peachpit Press.
  • Kernighan, B. W., & Ritchie, D. M. (1988). The C Programming Language. Prentice Hall.
  • Orlando, S. (2018). Web Design with HTML, CSS, JavaScript and jQuery Set. Pearson.
  • Almeida, P. (2021). Responsive Web Design. Packt Publishing.
  • Hicks, R. (2017). The Principles of Beautiful Web Design. SitePoint.
  • Fitzgerald, S. (2020). CSS Pocket Reference. O'Reilly Media.

Related Assignments