Curriculum
Ncert-Class 10 computer science
Chapter 1 -Networking
0/6
Chapter 2- HTML
0/4
Chapter 3: Cyber ethics
0/5
Lab Exercises
0/4
Case Based Qquestions
0/1
Assertion and Reason
0/1
Create a website using several web pages- Class 10 – Computer science – Lab exercises
Create a website using several web pages- Class 10 – Computer science – Lab exercises
Create a website using several web pages:
Task: Develop a multi-page website with a consistent design theme and navigation structure.
Example: Create a website for a fictional business or personal portfolio, including pages such as home, about, services, portfolio/gallery, contact, and blog.
Homepage (index.html):
This is the main landing page of the website.
◆The <header> section contains the website’s title and navigation menu, allowing users to navigate to other pages.
◆The <main> section contains the main content of the homepage, such as introductory text or featured content.
◆The <footer> section typically includes copyright information and other footer content.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>My Website</title> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href=”about.html”>About</a></li> <li><a href=”services.html”>Services</a></li> <li><a href=”portfolio.html”>Portfolio</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav> </header> <main> <p>This is the homepage of my website. Feel free to explore!</p> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html> |
About Page (about.html):
◆This page provides information about the website or organization.
◆Similar to the homepage, it includes a header with the website’s title and navigation menu.
◆The main content area provides details about the company, its history, mission, and any other relevant information.
◆The footer section contains copyright information and other footer content, maintaining consistency with other pages.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>About Us</title> </head> <body> <header> <h1>About Us</h1> <nav> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”services.html”>Services</a></li> <li><a href=”portfolio.html”>Portfolio</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav> </header> <main> <p>This is the about page. Learn more about our company.</p> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html> |
Services Page (services.html):
This page details the services offered by the website or organization.
Like other pages, it features a header with the website’s title and navigation menu.
The main content area typically lists the various services provided, along with descriptions and possibly pricing information.
Again, the footer contains copyright information and other relevant content.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Our Services</title> </head> <body> <header> <h1>Our Services</h1> <nav> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About</a></li> <li><a href=”portfolio.html”>Portfolio</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav> </header> <main> <p>This page showcases the services we offer.</p> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html> |
Portfolio Page (portfolio.html):
This page showcases the website or organization’s previous work or projects.
It follows the same structure as the other pages, with a header, main content area displaying the portfolio items, and a footer.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Portfolio</title> </head> <body> <header> <h1>Portfolio</h1> <nav> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About</a></li> <li><a href=”services.html”>Services</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav> </header> <main> <p>This page showcases our portfolio items.</p> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html> |
Contact Page (contact.html):
This page provides contact information for the website or organization.
Users can find email addresses, phone numbers, physical addresses, or contact forms to get in touch.
As with the other pages, it includes a header, main content area with contact details, and a footer.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Contact Us</title> </head> <body> <header> <h1>Contact Us</h1> <nav> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About</a></li> <li><a href=”services.html”>Services</a></li> <li><a href=”portfolio.html”>Portfolio</a></li> </ul> </nav> </header> <main> <p>This page contains our contact information.</p> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> </body> </html> |
Merging the Pages:
◆To merge these pages into a cohesive website:
◆Save each code snippet into separate .html files, named index.html, about.html, services.html, portfolio.html, and contact.html.
◆Ensure all files are in the same directory.
◆Link the pages together using anchor (<a>) tags in the navigation menus. For example, in index.html, link to about.html, services.html, portfolio.html, and contact.html. Repeat this process for the other pages, ensuring consistent navigation throughout.
◆You can add more pages as needed and update the navigation menus accordingly.
◆Customize the content of each page to suit your website’s purpose and branding.
◆Test your website by opening index.html in a web browser and navigating between pages to ensure everything works as expected.
