Scribd
Upload
3 views

software engeernering

The document is a submission for a web designing course as part of a Bachelor of Computer Applications degree at Punjab Technical University. It includes various HTML coding exercises such as creating simple web pages, CVs, and an index page, demonstrating the use of different HTML tags and formatting. The submission is made by Vishesh Sharma under the supervision of Ms. Punita.

Uploaded by

vishesh01327
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

software engeernering

The document is a submission for a web designing course as part of a Bachelor of Computer Applications degree at Punjab Technical University. It includes various HTML coding exercises such as creating simple web pages, CVs, and an index page, demonstrating the use of different HTML tags and formatting. The submission is made by Vishesh Sharma under the supervision of Ms. Punita.

Uploaded by

vishesh01327
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

WEB DESIGNING (UGCA1928)

Submitted to Punjab Technical


University, Jalandhar

In partial fulfilment
of the requirements
for the degree of
Bachelor of Computer
Applications
(Batch 2023-2026)

SUBMITTED TO: SUBMITTED BY:


MS. PUNITA VISHESH SHARMA
BCA2023C
2322250

PUNJAB COLLEGE OF TECHNICAL EDUCATION, LUDHIANA


CONTENT

SR.NO EXPERIMENT

1. Simple HTML page using different tags

2. Index page of a book

3. Simple CV using HTML tags

4. Hyperlink to move around within a single page

5. Letter using different text formatting tags

6. Time table of our department

7. Student Bio Data

8. Front page of the hospital with different style sheets

9. Login form

10. Web page using two different pages


TOPIC 1 – SIMPLE HTML PAGE USING DIFFERENT
TAGS

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>NETFLIX - shyna</title>

</head>

<body background="c:\Users\PCTE\Downloads\background.png">

<center><img src="c:\Users\PCTE\Downloads\Logonetflix.png" height="25%" ,


width="25%"></center>

<font color="red"><h1>STREAMING PLATFORM</h1></font>

<font color="white" SIZE="5">

Netflix is an American subscription video on-demand over-the-top streaming service.<br>

The service primarily distributes original and acquired films and television shows from
various genres<br>

,and it is available internationally in multiple languages<br>

</font>

<br>

<font color="red" size="6">

TOP PICKS ON NETFLIX<br>

</font>
<img src="c:\Users\PCTE\Downloads\SQUID GAME.jpg" width="8%" , height="8%"> &nbsp;
&nbsp;

<img src="c:\Users\PCTE\Downloads\XO KITTY.jpg" width="8%" , height="8%"> &nbsp;


&nbsp;

<img src="c:\Users\PCTE\Downloads\STRANGER THINGS.jpg" width="8%" ,


height="8%">&nbsp; &nbsp;

<img src="c:\Users\PCTE\Downloads\MADESS.jpg" width="8%" , height="8%">&nbsp;


&nbsp;

<img src="c:\Users\PCTE\Downloads\SWEET HOME.jpg" width="8%" , height="8%">&nbsp;


&nbsp;

<img src="c:\Users\PCTE\Downloads\WEDNESDAT.jpg" width="8%" , height="8%">&nbsp;


&nbsp;

<img src="c:\Users\PCTE\Downloads\HIERARCHY.jpg" width="8%" , height="8%">&nbsp;


&nbsp;

</body>

</html>

Output:
TOPIC 2 – INDEX PAGE OF A BOOK
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>INDEX PAGE</title>

</head>

<body>

<center><img src="c:\Users\PCTE\Downloads\images.jpg" height="17%" width="17%"></center>

<hr size="7%">

<font size="6%" color="red">

<b>

<i>

<u>

<center>Index Page of Web designing</center><br>

</u>

</i>

</b>

</font>

<font size="5%">

<ul type="square">

<dl>

<dt><li>CHAPTER 1.......................................................................1</li><br></dt>

<dt><li>CHAPTER 2.......................................................................5</li><br></dt>

<dt><li>CHAPTER 3.......................................................................7</li><br></dt>

<dt><li>CHAPTER 4.......................................................................10</li><br></dt>
<dt><li>CHAPTER 1.......................................................................11</li><br></dt>

</ul>

</dl>

</font>

</body>

</html>

Output:

TOPIC 3 – SIMPLE CV USING HTML TAGS


Code:
<!DOCTYPE html>

<html lang="en">

<head>
<title>RESUME</title>

</head>

<body>

<font color=#521103 SIZE="8" >

<b>

<u>

<i>

<center>RESUME</center>

</i>

</u>

</b>

</font>

<hr size="5">

<img src="c:\Users\PCTE\Downloads\pngtree-cartoon-happy-school-boy-waving-hand-png-
image_4691658.png" width="17%" hight="17%" align="right"><br>

<font size="6" color="red">

About me: <br>

</font>

<ul type="disc">

<li>Vishesh Sharma<br></li>

<li> DOB - 20-05-2005<br></li>

<li>Ludhiana, Punjab <br></li>

<li><font color="blue"><u><i>[email protected]</i></u></font></li>

<hr size="5">

</ul>

<font size="6" color="red">

Qualifications: <br>
</font>

<ol type="num">

<li>10<sup>th</sup> from<a href="https://adnschool.in/"> Atam Devki Niktan


School</a>(2021)<br></li>

<li>12<sup>th</sup> from<a href="https://adnschool.in/"> Atam Devki Niktan


School</a>(2023)<br></li>

<li>BCA from<a href="https://pcte.edu.in/"> PCTE Group of institutes</a>(2026)<br></li>

</ol>

<hr size="5">

<font size="6" color="red">

Skills: <br>

</font>

<ul type="disc">

<li>Leadership<br></li>

<li>Active Listening<br></li>

<li>communication<br></li>

</ul>

<hr size="5">

<font size="6" color="red">

Hobbies: <br>

</font>

<ul type="disc">

<li>Photography<br></li>

<li>playing cricket<br></li>

<li>travelling<br></li>

</ul>

<hr size="5">
<font size="6" color="red">

Languages: <br>

</font>

<ul type="disc">

<li>English<br></li>

<li>Hindi<br></li>

<li>Punjabi<br></li>

</ul>

<hr size="5">

</body>

</html>

Output:

TOPIC 4 – HYPERLINK TO MOVE AROUND WITHIN


A SINGLE PAGE
Code:
<!doctype html>

<html lang="en">

<head>

<title>Dictonary ~ shyna</title>

</head>

<body>

<a id="top">top</a>

<a href="#a">A</a>

<a href="#b">B</a>

<a href="#c">C</a>

<a href="#d">D</a>

<a href="#e">E</a>

<a href="#f">F</a>

<a href="#g">G</a>

<a href="#h">H</a>

<a href="#i">I</a>

<a href="#j">J</a>

<a href="#k">K</a>

<a href="#l">L</a>

<a href="#m">M</a>

<a href="#n">N</a>

<a href="#o">O</a>

<a href="#p">P</a>

<a href="#q">Q</a>

<a href="#r">R</a>

<a href="#s">S</a>
<a href="#t">T</a>

<a href="#u">U</a>

<a href="#v">V</a>

<a href="#w">W</a>

<a href="#x">X</a>

<a href="#y">Y</a>

<a href="#z">Z</a><br>

<font color="red" size="8">DICTIONARY</font><br>

<font color="GREEN" size="6">A...</font>

<a href="#top">Back to Top</a>

<a id="a"></a>

<dl>

<ul>

<li><dt>Abundant</dt></li>

<dd>Existing or available in large quantities; plentiful.</dd>

<img src="c:\Users\PCTE\Downloads\a.png" height="200" width="200" align="right">

<li><dt>Aesthetic</dt></li>

<dd>Concerned with beauty or the appreciation of beauty; artistic.</dd>

<li><dt>Ambiguous</dt></li>

<dd>Open to more than one interpretation; unclear.</dd>

<li><dt>Analyze</dt></li>

<dd>To examine in detail for explanation or interpretation.</dd>

<li><dt>Anticipate</dt></li>

<dd>To expect or predict something.</dd>

<li><dt>Authentic</dt></li>

<dd>Genuine; not a copy or imitation.</dd>


<li><dt>Aspire</dt></li>

<dd>To have a strong desire to achieve something.</dd>

<li><dt>Amicable</dt></li>

<dd>Characterized by friendliness and absence of conflict.</dd>

<li><dt>Articulate</dt></li>

<dd>Able to express thoughts and ideas clearly.</dd>

<li><dt>Altruistic</dt></li>

<dd>Showing selfless concern for the well-being of others.</dd>

</ul>

</dl>

<font color="GREEN" size="6">B...</font>

<a href="#top">Back to Top</a>

<a id="b"></a>

<dl>

<ul>

<li><dt>Beneficial</dt></li>

<dd>Producing good results or helpful effects; advantageous.</dd>

<img src="c:\Users\PCTE\Downloads\b.png" height="200" width="200" align="right">

<li><dt>Brilliant</dt></li>

<dd>Very bright or radiant; exceptionally clever or talented.</dd>

<li><dt>Bold</dt></li>

<dd>Showing courage; daring; not afraid to take risks.</dd>

<li><dt>Blissful</dt></li>

<dd>Full of joy; extremely happy; delightful.</dd>

<li><dt>Burden</dt></li>

<dd>A heavy load; something that is difficult to bear.</dd>


<li><dt>Bewildered</dt></li>

<dd>Confused or perplexed; unable to understand something.</dd>

<li><dt>Benefactor</dt></li>

<dd>A person who gives money or other help to a person or cause.</dd>

<li><dt>Brisk</dt></li>

<dd>Quick and active; lively; energetic.</dd>

<li><dt>Benevolent</dt></li>

<dd>Well-meaning and kindly; charitable.</dd>

<li><dt>Blatant</dt></li>

<dd>Obvious or conspicuous, especially in an offensive manner.</dd>

</ul>

</dl>

<font color="GREEN" size="6">C...</font>

<a href="#top">Back to Top</a>

<a id="c"></a>

<dl>

<ul>

<li><dt>Compassionate</dt></li>

<dd>Feeling or showing sympathy and concern for others.</dd>

<img src="c:\Users\PCTE\Downloads\c.webp" height="200" width="200" align="right">

<li><dt>Curious</dt></li>

<dd>Eager to know or learn something; inquisitive.</dd>

<li><dt>Conscientious</dt></li>

<dd>Wishing to do what is right, especially to do one's work well and thoroughly.</dd>

<li><dt>Creative</dt></li>

<dd>Having the ability to create; imaginative or inventive.</dd>


<li><dt>Collaborate</dt></li>

<dd>To work jointly with others, especially in an intellectual endeavor.</dd>

<li><dt>Comprehensive</dt></li>

<dd>Including all or nearly all elements or aspects of something; thorough.</dd>

<li><dt>Charismatic</dt></li>

<dd>Having a compelling charm or appeal; inspiring devotion in others.</dd>

<li><dt>Candid</dt></li>

<dd>Truthful and straightforward; frank.</dd>

<li><dt>Challenging</dt></li>

<dd>Testing one's abilities; demanding; difficult but rewarding.</dd>

<li><dt>Conventional</dt></li>

<dd>Based on or in accordance with what is generally done or believed; traditional.</dd>

</ul>

</dl>

<font color="GREEN" size="6">D...</font>

<a href="#top">Back to Top</a>

<a id="d"></a>

<dl>

<ul>

<li><dt>Diligent</dt></li>

<dd>Showing care and effort in one's work or duties.</dd>

<img src="c:\Users\PCTE\Downloads\d.webp" height="200" width="200" align="right">

<li><dt>Dynamic</dt></li>

<dd>Characterized by constant change, activity, or progress.</dd>

<li><dt>Deferential</dt></li>

<dd>Showing respect and esteem for the opinions or decisions of others.</dd>


<li><dt>Discerning</dt></li>

<dd>Having or showing good judgment; perceptive.</dd>

<li><dt>Disruptive</dt></li>

<dd>Causing or tending to cause disruption; disturbing.</dd>

<li><dt>Diverse</dt></li>

<dd>Showing a great deal of variety; very different.</dd>

<li><dt>Decisive</dt></li>

<dd>Having the power to make decisions quickly and effectively.</dd>

<li><dt>Deliberate</dt></li>

<dd>Done consciously and intentionally; careful and unhurried.</dd>

<li><dt>Definitive</dt></li>

<dd>Conclusive; providing a final solution or answer.</dd>

<li><dt>Desirable</dt></li>

<dd>Wanted or wished for as being an attractive, useful, or necessary course of action.</dd>

</ul>

</dl>

<dd>Open to physical or emotional harm; susceptible.</dd>

</ul>

</dl>

<font color="GREEN" size="6">W...</font>

<a href="#top">Back to Top</a>

<a id="w"></a>

<dl>

<ul>

<li><dt>Wise</dt></li>
<dd>Having or showing experience, knowledge, and good judgment.</dd>

<li><dt>Witty</dt></li>

<dd>Showing quick and inventive verbal humor; clever.</dd>

<li><dt>Wholesome</dt></li>

<dd>Conducive to health or well-being; morally good.</dd>

<li><dt>Welcoming</dt></li>

<dd>Friendly or making you feel welcome; hospitable.</dd>

<li><dt>Wondrous</dt></li>

<dd>Inspiring a feeling of wonder or delight; marvelous.</dd>

<li><dt>Willing</dt></li>

<dd>Ready, eager, or prepared to do something; agreeable.</dd>

<li><dt>Whimsical</dt></li>

<dd>Playfully quaint or fanciful; unusual in a playful way.</dd>

<li><dt>Wary</dt></li>

<dd>Feeling or showing caution about possible dangers or problems.</dd>

<li><dt>Worldly</dt></li>

<dd>Experienced and sophisticated; relating to the material world.</dd>

<li><dt>Winning</dt></li>

<dd>Having a quality that attracts or pleases; successful.</dd>

</ul>

</dl>

<font color="GREEN" size="6">X...</font>

<a href="#top">Back to Top</a>

<a id="x"></a>

<dl>

<ul>
<li><dt>Xenial</dt></li>

<dd>Relating to hospitality or relations between host and guest.</dd>

<li><dt>Xenophobic</dt></li>

<dd>Having or showing a dislike of or prejudice against people from other countries.</dd>

<li><dt>Xerophytic</dt></li>

<dd>Relating to or denoting plants that grow in dry conditions; drought-resistant.</dd>

<li><dt>Xenon</dt></li>

<dd>A chemical element (Xe) that is a colorless, dense, odorless noble gas.</dd>

<li><dt>Xerography</dt></li>

<dd>A dry photocopying technique that uses electrostatic charges to transfer images.</dd>

<li><dt>Xylophone</dt></li>

<dd>A musical instrument consisting of a series of wooden bars struck by mallets.</dd>

<li><dt>X-ray</dt></li></li>

<dd>A form of electromagnetic radiation used for imaging and diagnostics.</dd>

<li><dt>Xenolith</dt></li>

<dd>A rock fragment that becomes enveloped in a larger rock during the latter's development.</dd>

</ul>

</dl>

<font color="GREEN" size="6">Y...</font>

<a href="#top">Back to Top</a>

<a id="y"></a>

<dl>

<ul>

<li><dt>Yearning</dt></li>

<dd>A feeling of intense longing for something; desire.</dd>

<li><dt>Yielding</dt></li>
<dd>Giving way to pressure; flexible; submissive.</dd>

<li><dt>Yonder</dt></li>

<dd>At some distance in the direction indicated; over there.</dd>

<li><dt>Yummy</dt></li>

<dd>Delicious; very pleasant to taste.</dd>

<li><dt>Youthful</dt></li>

<dd>Having the qualities of youth; energetic and lively.</dd>

<li><dt>Yoke</dt></li>

<dd>A device for joining together a pair of animals, especially oxen, for work.</dd>

<li><dt>Yare</dt></li>

<dd>Quick, agile, or lively; ready and prepared.</dd>

<li><dt>Yarn</dt></li>

<dd>A long, continuous length of interlocked fibers, used for knitting or weaving.</dd>

<li><dt>Yonderly</dt></li>

<dd>Having a distant or absent-minded quality; dreamy.</dd>

<li><dt>Yoke-like</dt></li>

<dd>Resembling a yoke; used to describe something that binds or connects.</dd>

</ul>

</dl>

<font color="GREEN" size="6">Z...</font>

<a href="#top">Back to Top</a>

<a id="z"></a>

<dl>

<ul>

<li><dt>Zealous</dt></li>

<dd>Having or showing zeal; passionate and enthusiastic.</dd>


<li><dt>Zenith</dt></li>

<dd>The highest point; peak.</dd>

<li><dt>Zestful</dt></li>

<dd>Characterized by great enthusiasm and energy; lively.</dd>

<li><dt>Zephyr</dt></li>

<dd>A gentle, mild breeze; a soft wind.</dd>

<li><dt>Zany</dt></li>

<dd>Amusingly unconventional and idiosyncratic; quirky.</dd>

<li><dt>Zealot</dt></li>

<dd>A person who is fanatical and uncompromising in pursuit of their ideals.</dd>

<li><dt>Zodiac</dt></li>

<dd>A circle of twelve 30° divisions of celestial longitude that are centered upon the ecliptic.</dd>

<li><dt>Zoom</dt></li>

<dd>To move quickly; to increase rapidly.</dd>

<li><dt>Zest</dt></li>

<dd>Great enthusiasm and energy; enjoyment or appreciation.</dd>

<li><dt>Ziggurat</dt></li>

<dd>A rectangular stepped tower, sometimes surmounted by a temple, characteristic of ancient


Mesopotamian architecture.</dd>

</ul>

</dl>

</body>

</html>

Output:
TOPIC 5 – LETTER USING DIFFERENT TEXT
FORMAT TAGS
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>Letter - Prince</title>

<style>

body { background-color: #E3F2FD; font-family: Arial, sans-serif; }

h2 { color: #673AB7; }

p { color: #333; }

b { color: #D84315; }

mark { background-color: #00BCD4; color: white; }

strong { color: #FFEB3B; }


</style>

</head>

<body>

<h2><u>Job Application</u></h2>

<p><b>From:</b><br>

<strong>Prince Khatri</strong><br>

House Number 95, Street Number 14<br>

Transport Nagar, Ludhiana, India<br>

<i>Date:</i> <time datetime="2025-02-22">February 22, 2025</time>

</p>

<p><b>To:</b><br>

<em>HR Manager</em><br>

ABC Corporation<br>

New Delhi, India

</p>

<p><b>Subject:</b> <mark>Application for Job Position</mark></p>

<p>Dear <b>HR Manager,</b></p>

<p>I am writing to express my interest in the open job position at your esteemed organization. My
skills and experience align well with the requirements, and I am eager to contribute to your team.</p>

<p>I have attached my resume for your review. Looking forward to your response.</p>

<p><b>Best Regards,</b><br>

<strong>Prince Khatri</strong></p>

</body>

</html>

Output:
TOPIC 6 – TIME TABLE OF OUR DEPARTMENT
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>time table</title>

<style>

tr{

text-align:center;

</style>

</head>

<body>

<table border="2px" width="100%">

<caption style="text-align:center;"><b>BCA 2023 C</b></caption>

<thead>

<tr>

<th rowspan="2" style="color:red"; > DAYS </th>


<th rowspan="2" style="color:red"; > 9:00-10:00 </th>

<th rowspan="2" style="color:red"; > 10:05-11:05 </th>

<th rowspan="2" style="color:red"; > 11:05-11:25 </th>

<th rowspan="2" style="color:red"; > 11:25-12:25 </th>

<th rowspan="2" style="color:red"; > 12:30-1:30 </th>

<th rowspan="2" style="color:red"; > 1:35-2:35 </th>

<th rowspan="2" style="color:red"; > 2:40-3:40 </th>

<th rowspan="2" style="color:red"; > 3:40-4:40 </th>

</tr>

</thead>

<tbody>

<tr>

<th>Monday</th>

<td>DBMS LAB</td>

<td>DBMS LAB</td>

<td>TEA BREAK</td>

<td>SE</td>

<td>OS</td>

<td>LUNCH BREAK</td>

<td>WD</td>

<td>SE LAB</td>

</tr>

<tr>

<th>TUESDAY</th>

<td>SE</td>

<td>WD</td>
<td>TEA BREAK</td>

<td>DBMS</td>

<td>OS</td>

<td>LUNCH BREAK</td>

<td>DBMS LAB</td>

<td>WD LAB</td>

</tr>

<tr>

<th>WEDNESDAY</th>

<td>SE LAB</td>

<td>SE LAB</td>

<td>TEA BREAK</td>

<td>WD LAB</td>

<td>OS LAB</td>

<td>LUNCH BREAK</td>

<td>DBMS LAB</td>

<td>SE LAB</td>

</tr>

<TR>

<th>THURSDAY</th>

<td>DBMS LAB</td>

<td>DBMS LAB</td>

<td>TEA BREAK</td>

<td>SE</td>

<td>OS</td>

<td>LUNCH BREAK</td>
<td>WD</td>

<td>SE LAB</td>

</TR>

<TR>

<th>FRIDAY</th>

<td>SE</td>

<td>WD</td>

<td>TEA BREAK</td>

<td>DBMS</td>

<td>OS</td>

<td>LUNCH BREAK</td>

<td>DBMS LAB</td>

<td>WD LAB</td>

</TR>

<TD COLSPAN="9"><B> SECOND SATURDAY (HOLIDAY) </B></TD>

</tbody>

</table>

</body>

</html>

Output:
TOPIC 7 – STUDENT BIO DATA

Code :
(bio.html):
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Bio Data</title>

<link rel="stylesheet" href="bio.css">

</head>

<body>

<div class="container">

<header>

<h1>*STUDENT BIO DATA*</h1>

<hr size="6px" color="rgb(116, 90, 5);" />

</header>
<div class="bio-content">

<section class="personal-info">

<h2>Personal Information</h2>

<ul>

<li><strong>Name:</strong> Vishesh Sharma</li>

<li><strong>Age:</strong> 20</li>

<li><strong>Email:</strong> [email protected]</li>

<li><strong>Phone:</strong> 7009912453</li>

<li><strong>Address:</strong> shivaji nagar, Ludhiana, India</li>

</ul>

</section>

<section class="education">

<h2>Education</h2>

<ul>

<li><strong>Degree:</strong> Bachelor of Computer Application</li>

<li><strong>University:</strong> PCTE Group of Institute</li>

<li><strong>Year of Graduation:</strong> 2026</li>

<li><strong>GPA:</strong> 3.8/4.0</li>

</ul>

</section>

<section class="skills">

<h2>Skills</h2>

<ul>

<li>Web Development (HTML, CSS, JavaScript)</li>

<li>Programming (Python, Java, C++)</li>

<li>Problem Solving & Algorithms</li>


<li>Database Management (MySQL, MongoDB)</li>

</ul>

</section>

<section class="hobbies">

<h2>Hobbies</h2>

<ul>

<li>Reading Books</li>

<li>Travelling</li>

<li>Coding and Problem Solving</li>

</ul>

</section>

</div>

<div class="photo">

<img src="c:\Users\ACER\Downloads\stu.jpg" alt="Passport Photo" />

</div>

</div>

</body>

</html>

(bio.css):
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;


background-color: #b3a52d;

color: #333;

.container {

max-width: 800px;

margin: 20px auto;

background-color: #ebe7ba;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

position: relative;

header h1 {

text-align: center;

font-family: 'Verdana', sans-serif;

color: rgb(129, 111, 8);

margin-bottom: 20px;

hr {

margin-bottom: 20px;

section h2 {

font-family: 'Verdana', sans-serif;

color: rgb(116, 90, 5);

margin-bottom: 10px;

}
section {

margin-bottom: 20px;

ul {

list-style-type: none;

padding-left: 0;

li {

margin: 8px 0;

font-size: 16px;

strong {

color: #2c3e50;

.photo img {

width: 150px;

height: 150px;

border-radius: 30%;

object-fit: cover;

border: 2px solid rgb(160, 160, 90);

.photo {

position: absolute;

top: 120px;

background-color: rgb(208, 226, 126, 0.5);

right: 20px;
}

.bio-content {

padding-right: 170px;

section:last-child {

margin-bottom: 0;

Output:

TOPIC 8 – FRONT PAGE OF THE HOSPITAL


WITH DIFFERENT STYLE SHEETS
Code:
(hospital.html):
<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CarePlus Hospital</title>

<link rel="stylesheet" href="hospital.css">

</head>

<body>

<header>

<nav class="navbar">

<div class="logo">CarePlus Hospital</div>

<ul class="nav-links">

<li><a href="#">Home</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<section class="hero">

<div class="hero-text">

<h1>Welcome to CarePlus Hospital</h1>

<p>Your Health, Our Priority</p>

</div>

</section>

<section class="services">

<h2>Our Services</h2>
<div class="service-container">

<div class="service-box">

<h3>Emergency Care</h3>

<p>24/7 emergency support with experienced doctors.</p>

</div>

<div class="service-box">

<h3>Outpatient Services</h3>

<p>Efficient and caring treatment for all your health needs.</p>

</div>

<div class="service-box">

<h3>Diagnostics</h3>

<p>Modern lab facilities and precise testing services.</p>

</div>

</div>

</section>

</body>

</html>

(hospital.css):
/* Reset and Base */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, sans-serif;

body {
background-color: #e0f7fa;

color: #004d40;

/* Navbar */

.navbar {

background-color: #b2dfdb;

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 30px;

.logo {

font-size: 1.5rem;

font-weight: bold;

color: #00695c;

.nav-links {

list-style: none;

display: flex;

gap: 20px;

.nav-links a {

text-decoration: none;

color: #00695c;

font-weight: bold;

}
/* Hero Section */

.hero {

background-image: url(/https/www.scribd.com/bdy/hospital.jpg);

background-size: cover;

background-position: center;

height: 400px;

display: flex;

align-items: center;

justify-content: center;

color: white;

text-align: center;

.hero-text h1 {

font-size: 3rem;

background-color: rgba(0, 105, 92, 0.7);

padding: 10px 20px;

border-radius: 10px;

.hero-text p {

font-size: 1.2rem;

margin-top: 10px;

background-color: rgba(0, 150, 136, 0.6);

display: inline-block;

padding: 8px 16px;

border-radius: 8px;

}
/* Services Section */

.services {

padding: 50px 30px;

background-color: #e0f2f1;

text-align: center;

.services h2 {

margin-bottom: 30px;

font-size: 2rem;

color: #00796b;

.service-container {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

gap: 20px;

.service-box {

background-color: #b2dfdb;

border-radius: 10px;

padding: 20px;

width: 250px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

.service-box h3 {

margin-bottom: 10px;
color: #004d40;

Output:

TOPIC 9 – LOGIN FORM


Code:
<!doctype html>

<html lang="en">

<head>

<title>form</title>

<style>

.box{

width:30%;

height:40%;

border:2px;

text-align: left;

margin-top:8%;
margin-left: 35%;

border:2px solid rgba(0, 0, 0, 0);

padding: 20px;

border-radius: 15px;

background-color: rgba(54, 109, 137, 0.28);

legend{

color:rgba(34, 115, 156, 0.937);

font-size: 35px;

font-weight: bolder;

font-family:'Arial';

text-align: center;

label{

font-weight: bolder;

font-family:'Times New Roman', Times, serif;

font-size: 18px;

input{

border-radius: 5px;

border: none;

height: 30px;

font-size: 15px;

button{

background-color: rgb(27, 94, 145);


color: white;

width: 200px;

height: 40px;

font-size: 20px;

border:none;

font-family: Georgia;

border-radius: 10px;

</style>

</head>

<body>

<div class="box">

<form >

<legend>Registration Form</legend><br>

<label>Username:</label><br>

<input type="text" placeholder="Enter name" style="width: 100%;"><br>

<label>Password:</label><br>

<input type="password" placeholder="Enter Password" style="width: 100%";><br>

<label>Email:</label><br>

<input type="Email" placeholder="Enter E-mail" style="width: 100%;"><br>

<label>Phone no:</label><br>

<input type="tel" placeholder="Enter Phone_No" style="width: 100%;"><br>

<label>Select gender:</label>

<input type="radio" name="Gender">Male

<input type="radio" name="Gender" >Female<br>

<label>Choose course:</label>
<select>

<option>BBA</option>

<option>BCA</option>

<option>MCA</option>

<option>MBA</option>

</select>

<br>

<label>Choose hobbies:</label>

<input type="checkbox">travel

<input type="checkbox">Cooking

<br>

<label>Address:</label><br>

<textarea rows="5" cols="63"> </textarea><br>

<br>

<div class="button" style="text-align: center;">

<button type="submit">Sumit</button>&nbsp;&nbsp;

<button type="Reset">Reset</button></div>

</form>

</div>

</body>

</html>
Output:

TOPIC 9 – WEB PAGE USING TWO DIFFERENT


PAGES
Code:
<!DOCTYPE html>

<html>

<head>

<title>Two Pages Using Frames</title>

</head>

<frameset cols="50%,50%">
<frame src="https://example.com" name="leftFrame">

<frame src="https://wikipedia.org" name="rightFrame">

</frameset>

</html>

Output:

You might also like