A5 – Structured Web Page

Before attempting this assignment, please read the tutorials in the section named HTML Revisited.  After reading, this assignment will help you practice using semantic and other HTML elements to structure the contents of a web page and to use CSS to style the content.


For this assignment you must follow all of the rules specified below.  Failure to follow any of the rules will result in a grade of zero for the assignment.

1. Create a file named structured_web_page.html in …/public_html/courses/csci240/ and a file named structured_web_page.css in …/public_html/courses/csci240/css/.

2. Add HTML code to structured_web_page.html so that it contains similar content to this web page..  The only differences between my web page and yours should be the Lorem Ipsum text (both headings and paragraph text) and the images.

3. Your web page must satisfy the following:

  • You must use only the following tags in exactly the quantity specified.
    • a (4)
    • body (1)
    • footer (1)
    • h1 (1)
    • h2 (4)
    • head (1)
    • header (1)
    • html (1)
    • img (3)
    • li (2)
    • link (1)
    • main (1)
    • meta (1)
    • nav (1)
    • p (5)
    • section (4)
    • title (1)
    • ul (1)
  • The Lorem Ipsum text should be randomly generated using the generator at www.lipsum.com.
  • The images should be randomly generated using the generator at loremflickr.com.
  • You must use an external stylesheet to stylize the elements.
  • The Home link should redirect the user to your domain’s home page.
  • The Lorem Ipsum link should link to www.lipsum.com.
  • The bulleted links should take the user to the sections of text below them.
  • There should be enough Ipsum Lorem text so that you can verify that the bulleted links are working properly.
  • Your domain name should replace your-url in the copyright statement.

4. The HTML elements should be stylized as follows:

  • The title text should be centered
  • The title text and heading text should be blue.
  • All unvisited links should be orange.
  • All visited links should be purple.
  • The copyright statement should be centered.

© 2020 – 2021, Eric. All rights reserved.