Scribd
Upload
34 views

Ict Lab 5 Final

Uploaded by

hassnatmuhammadriaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Ict Lab 5 Final

Uploaded by

hassnatmuhammadriaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

CSC101 APPLICATIONNS OF INFORMATION

AND COMMUNICATION TECHNOLOGIES


LAB REPORT 5

Name
Ali Haider

Registration Number FA23-BEE-059

Class BEE-2B

Instructor’s Name Dr. Asma Jadoon

Lab Assessment

Post Lab Total


In-Lab Data
Data Analysis Writing Style
Presentation
Lab 5 Introduction to HTML

Objective:
The objective of this lab will be to learn about HTML and create web pages.

Lab Activities:
Home page Development static pages (using Only HTML) of an online Book store. The website should
consist the following pages.

• Registration and user Login


• User Profile Page
• Books catalog
• Shopping Cart
• Payment By credit card
• Order Conformation

Source code 1:
<!-- Start of HTML document -->

• <html>
• <head>

<!-- Title of the webpage -->

• <title>ONLINE BOOK STORES</title>


• </head>
• <body bgcolor="pink">

<!-- Creating frameset with two rows -->

• <frameset rows="20%,*">

<!-- Frame for displaying head.html -->

• <frame name="A2" scrolling="yes" src="head.html">


• </frameset>

<!-- Heading of the webpage -->

• <h1 align="center"><u><font color="purple">WELCOME TO ONLINE BOOK


• SHOPPING<italic></italic></font></u></h1>
• <h2><font color="white"></font></h2> <!-- Empty heading -->
<!-- Hyperlinks for different sections -->

• <h3 align="center">
• <a href="reg.html"><br><br><font color="black"><italic>REGISTRATION
• FORM</italic></font><br><br></a>
• <br><br><a href="user profile.html"><font color="black"><italic>USER
• PROFILE</italic></font><br><br></a>
• <br><br><a href="user login.html"><font color="black"><italic>USER
• LOGIN</italic></font><br><br></a>
• <br><br><a href="book catalog.html"><font color="black"><italic>BOOKS
• CATALOG</italic></font><br><br></a>
• <br><br><a href="confim.html"><font color="black"><italic>BOOKS
• CART</italic></font><br><br></a>
• <br><br><a href="payment.html"><font
• color="black"><italic>PAYMENT</italic></font></a><br>
• </h3>
• </body>
• </html>

Picture:

Source Code 2 for Registration and user Login:


<!-- Start of HTML document -->

• <html>
• <head>

<!-- Centered and underlined heading -->


• <center><u><h1>Registration Form</h1></u></center>
• </head>
• <body>

<!-- Fieldset with legend for styling -->

• <fieldset width=300><legend class=heading>Registration Form</legend>

<!-- Form with action attribute pointing to a server endpoint -->

• <form actions="http://localhost:8080//servlet-examples//KiranUserProfile">

<!-- Preformatted text for better alignment -->

• <pre class="reg">

<!-- Text input for First Name -->

• First Name : <input type="text" size=30>

<!-- Text input for Last Name -->

• Last Name : <input type="text" size=30>

<!-- Text input for Age with onFocus event -->

• Age : <input type="text" size=30 onFocus="kirandisp()">

<!-- Email input for Email Id -->

• Email Id : <input type="email" size=30>

<!-- Email input for Alternate Email Id -->

• Alternate Email Id : <input type="email" size=30>

<!-- Textarea for Address -->

• Address :<textarea cols=50 rows=3></textarea>

<!-- Text input for Phone -->

• Phone : <input type="text" size=30>

<!-- Text input for Occupation -->

• Occupation : <input type="text" size=30>

<!-- Radio buttons for agreeing/disagreeing to terms and conditions -->

• <input type="radio" name="agree" value="i agree">I Agree Terms & conditions


• <input type="radio" name="agree" value="i disagree">I DisAgree

<!-- Submit and Reset buttons -->


• <input type="submit" value=submit> <input type="Reset" value=" reset ">
• </form>
• </fieldset>
• </body>
• </html>

Picture:

Lab Task 1:
Create your own website for Hosptal Management system.The site may includes the following pages.

• Doctor Login
• User/patient Login
• Appointment Resevation
• Patient History
• Doctor profile

CODE FOR WEBSITE:


Main Page:

• <html>
• <head>
• <title> AH HOSPITAL</title>
• </head>
• <style>
•
• body {
• font-family: Arial, sans-serif;
• margin: 0;
• padding: 0;
• }
• header, footer {
• background-color: #333;
• color: #fff;
• text-align: center;
• padding: 10px 0;
• }
• nav {
• background-color: #f4f4f4;
• padding: 10px;
• text-align: center;
• }
• nav a {
• text-decoration: none;
• color: #333;
• padding: 10px 20px;
• }
• nav a:hover {
• background-color: #ddd;
• color: #333;
• }
• section {
• padding: 20px;
• text-align: center;
• }
• </style>
• </head>
• <body bgcolor="pink">>
• <header>
• <h1>Hospital Management System</h1>
• </header>
• <nav>
• <a href="#doctorlogin">Doctor Login</a>
• <a href="#user-login">User/Patient Login</a>
• <a href="#appointment-reservation">Appointment Reservation</a>
• <a href="#patient-history">Patient History</a>
• <a href="#doctor-profile">Doctor Profile</a>
• </nav>
• <img src="hospital.jpeg" alt="Hospital Image" width="1300" height="400">
• <footer>
• <p>&copy; 2024 Hospital Management System</p>
• </footer>
• </BODY>
• </HTML>

Picture:

Doctor Login:
• <html>
• <head>
• <style>
• body {
• display: flex;
• justify-content: center;
• align-items: center;
• height: 100vh;
• font-family: Arial, sans-serif;
• }
• form {
• width: 300px;
• padding: 20px;
• border: 1px solid #ddd;
• border-radius: 5px;
• box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1);
• }
• h2 {
• text-align: center;
• margin-bottom: 20px;
• }
• label {
• display: block;
• margin-bottom: 10px;
• }
• input[type="text"], input[type="password"] {
• margin-bottom: 10px;
• width: 100%;
• padding: 8px;
• border: 1px solid #ddd;
• border-radius: 5px;
• box-sizing: border-box;
• }
• input[type="submit"] {
• width: 100%;
• padding: 10px;
• background-color: #007bff;
• color: white;
• border: none;
• border-radius: 5px;
• cursor: pointer;
• }
• input[type="submit"]:hover {
• background-color: #0069d9;
• }
• </style>
• </head>
• <body>
• <form method="post" action="login.php">
• <h2>Doctor Login</h2>
• <label for="username">Username:</label>
• <input type="text" id="username" name="username" required>
• <label for="password">Password:</label>
• <input type="password" id="password" name="password" required>
• <input type="submit" value="Login">
• </form>
• </body>
• </html>

Picture:
User Login:
• <html>
• <head>
• <style>
• body {
• display: flex;
• justify-content: center;
• align-items: center;
• height: 100vh;
• font-family: Arial, sans-serif;
• }
• form {
• width: 300px;
• padding: 20px;
• border: 1px solid #ddd;
• border-radius: 5px;
• box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1);
• }
• h2 {
• text-align: center;
• margin-bottom: 20px;
• }
• label {
• display: block;
• margin-bottom: 10px;
• }
• input[type="text"], input[type="password"] {
• margin-bottom: 10px;
• width: 100%;
• padding: 8px;
• border: 1px solid #ddd;
• border-radius: 5px;
• box-sizing: border-box;
• }
• input[type="submit"] {
• width: 100%;
• padding: 10px;
• background-color: #007bff;
• color: white;
• border: none;
• border-radius: 5px;
• cursor: pointer;
• }
• input[type="submit"]:hover {
• background-color: #0069d9;
• }
• </style>
• </head>
• <body>
• <form method="post" action="login.php">
• <h2>User Login</h2>
• <label for="username">Username:</label>
• <input type="text" id="username" name="username" required>
• <label for="password">Password:</label>
• <input type="password" id="password" name="password" required>
• <input type="submit" value="Login">
• </form>
• </body>
• </html>

Picture:
Appointment Resevation:
• <html>
• <head>
• <title>
• Appointment Reservation
• </title>
• <style>
• h1{
• background-color: pink;
• font-style: italic;
• text-align: center;
• }
• input[type="text"], input[type="email"], input[type="number"]{
• width: 300px;
• height: 30px;
• border-radius: 5px;
• border: 1px solid #ccc;
• margin-bottom: 10px;
• }
• input[type="submit"]{
• width: 300px;
• height: 35px;
• background-color: #f06;
• color: white;
• border-radius: 5px;
• font-size: 16px;
• cursor: pointer;
• }
• </style>
• </head>
• <body>
• <h1> Appointment Reservation</h1>
• <form>
• First Name <input type="text" name="form_firstname" required><br><br>
• Last Name <input type="text" name="form_lastname" required><br><br>
• Contact Number <input type="number" name="form_contactnumber" required><br><br>
• Email Address <input type="email" name="form_emailaddress" required><br><br>
• <input type="submit" value="Submit">
• </form>
• </body>
• </html>

Picture:

Patient History:
• <html>
• <head>
• <style>
• table {
• width: 100%;
• border-collapse: collapse;
• }
• th, td {
• border: 1px solid #ddd;
• padding: 8px;
• text-align: left;
• }
• th {
• background-color: #4CAF50;
• color: white;
• }
• tr:nth-child(even) {
• background-color: #f2f2f2;
• }
• h2 {
• text-align: center;
• margin-bottom: 20px;
• }
• </style>
• </head>
• <body>
• <h2>Patient History</h2>
• <table>
• <tr>
• <th>NAME</th>
• <th>GENDER</th>
• <th>AGE</th>
• <th>PROBLEM</th>
• <th>CONTACT</th>
• <th>MEDICAL RECORD</th>
• </tr>
• <tr>
• <td>John Doe</td>
• <td>Male</td>
• <td>35</td>
• <td>Headache</td>
• <td>555-1234</td>
• <td>
• <button>View Record</button>
• </td>
• </tr>
• <tr>
• <td>Jane Smith</td>
• <td>Female</td>
• <td>42</td>
• <td>Fever</td>
• <td>555-5678</td>
• <td>
• <button>View Record</button>
• </td>
• </tr>
• <tr>
• <td>Bob Johnson</td>
• <td>Male</td>
• <td>28</td>
• <td>Flu</td>
• <td>555-9012</td>
• <td>
• <button>View Record</button>
• </td>
• </tr>
• </table>
• </body>
• </html>

Picture:

Doctor profile:
• <html>
• <head>
• <style>
• table {
• width: 100%;
• border-collapse: collapse;
• }
• th, td {
• border: 1px solid #ddd;
• padding: 8px;
• text-align: left;
• }
• th {
• background-color: #4CAF50;
• color: white;
• }
• tr:nth-child(even) {
• background-color: #f2f2f2;
• }
• h2 {
• text-align: center;
• margin-bottom: 20px;
• }
• </style>
• </head>
• <body>
• <h2>Doctor Specialization</h2>
• <table>
• <tr>
• <th>NAME</th>
• <th>SPECIALIZATION</th>
• <th>EXPERIENCE</th>
• <th>CONTACT</th>
• </tr>
• <tr>
• <td>John Doe</td>
• <td>Cardiology</td>
• <td>15 years</td>
• <td>555-1234</td>
• </tr>
• <tr>
• <td>Jane Smith</td>
• <td>Neurology</td>
• <td>10 years</td>
• <td>555-5678</td>
• </tr>
• <tr>
• <td>Bob Johnson</td>
• <td>Orthopedics</td>
• <td>20 years</td>
• <td>555-9012</td>
• </tr>
• </table>
• </body>
• </html>

Picture:

Conclusion:
In conclusion, I learned that HTML is the fundamental language for building web
pages, providing structure and organization to content. Mastering HTML empowers
individuals to create captivating online experiences and serves as the cornerstone
of web development knowledge.

You might also like