I210 Information Infrastructure Louie Zhu 1 Unit

I210 Information Infrastructure Icopyright Louie Zhu 1unit 01 Html

Build a simple website for a PHP online bookstore comprising four web pages: index.html, books.html, civilwarbattlefieldguide.html, and greaterjourney.html. Each page should feature a consistent layout with a navigation bar (Home and List Books), a banner with the bookstore logo and title, main content area specific to each page, and a footer. The site layout begins with a div block for the navigation bar, followed by a table with two cells: one for the logo image and one for banner headings. The main content varies per page. Images are stored in the www/img/books/ directory, and the logo in www/img/.

Modify index.html by turning "Home" and "List Books" into hyperlinks pointing to index.html and books.html respectively. Insert the bookstore.gif logo image into the designated cell with specified width and alignment. Add headings for the banner text and welcome message. Create paragraphs describing the functionality and features of the site, followed by an unordered list of features. Complete the footer with a horizontal rule and copyright notice.

Duplicate index.html to create books.html and modify it by changing the main heading to "Books in Our Store", deleting existing paragraphs and lists, and inserting a table (6 rows, 4 columns, width 800, border 1, cell spacing 0, cell padding default). Populate the table header with column titles, and include hyperlinks for two book titles: "The Civil War Battlefield Guide" linking to civilwarbattlefieldguide.html, and "The Greater Journey: Americans in Paris" linking to greaterjourney.html. Save and test in browser.

Create individual pages: civilwarbattlefieldguide.html and greaterjourney.html by copying index.html, removing existing main content, and replacing it with specific content. Change the main heading appropriately, insert tables (7 rows, 3 columns, no border, cell padding 5, column widths 200, 65, 300). Merge all seven cells in the first column into a single span and insert respective images (civil_war.jpg and greater_journey.jpg) with specified widths and alternative texts. Fill the remaining cells with relevant details. Save each file and verify in browser.

Finally, open index.html and navigate through all links to ensure proper functionality and layout consistency. Zip the entire Lab01 folder and upload as lab01.zip. Follow the provided grading rubric carefully, ensuring all specified tasks are completed accurately and thoroughly tested.

Paper For Above instruction

The development of a multi-page website for the PHP online bookstore requires careful structuring and consistent layout across all pages. This project emphasizes proficiency in HTML and basic webpage design principles, including navigation, table formatting, image insertion, and hyperlink creation. The process begins with setting up the project directory, extracting provided files, and understanding the existing code structure.

Modifying the main webpage, index.html, involves turning static text into functional hyperlinks and embedding a logo image with specific attributes. The header section features a table with the logo and banner text, which aids in maintaining a uniform appearance across all pages. Inserting headings, descriptive paragraphs, and feature lists informs visitors about the site's capabilities, such as browsing books, searching by keywords, user login, registration, and administrative functionalities.

Creating additional pages follows a pattern of duplication and modification, focusing primarily on the main content area. For the books.html page, the content shifts from introductory text to a detailed table listing available titles, with hyperlinks leading to respective detail pages. The design of these pages incorporates consistent tables with specified dimensions, border styles, and merged cells to display book details effectively.

The individual book pages—civilwarbattlefieldguide.html and greaterjourney.html—highlight specific titles with images and descriptions. Each page features a table where cells are merged to present the cover image prominently, with additional information organized in adjacent cells. This layout creates a clean, professional presentation suitable for an online bookstore interface.

Throughout the implementation, best practices involve validating hyperlinks, verifying image paths, and ensuring page responsiveness and visual consistency. Testing each page thoroughly helps identify broken links or layout issues, crucial for delivering a functional website. The culmination of this project is a cohesive multi-page site that demonstrates core web development skills and readiness for more advanced web programming tasks.

References

  • W3Schools. (2023). HTML Tables. https://www.w3schools.com/html/html_tables.asp
  • MDN Web Docs. (2023). Semantic HTML Elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  • W3Schools. (2023). HTML Images. https://www.w3schools.com/html/html_images.asp
  • CSS-Tricks. (2023). Using the colspan Attribute. https://css-tricks.com/almanac/properties/c/colspan/
  • Stack Overflow. (2023). How to create consistent headers in multiple pages. https://stackoverflow.com/questions/23468656/how-can-i-include-reusable-html-headers-in-multiple-pages
  • HTML.com Tutorials. (2023). Creating Hyperlinks. https://html.com/attributes/a-href/
  • W3Schools. (2023). HTML Layout Elements. https://www.w3schools.com/html/html_layout.asp
  • Freeman, E. (2020). Head First HTML and CSS. O'Reilly Media.
  • Nielsen Norman Group. (2023). Usability of Multi-Page Websites. https://www.nngroup.com/articles/usability-multi-page-sites/
  • PHP.net. (2023). PHP Sessions. https://www.php.net/manual/en/book.session.php

Related Assignments