Scribd
Upload
5 views

web design

The document outlines a web design project submitted to Punjab Technical University as part of a Bachelor of Computer Applications degree. It includes various HTML coding exercises such as creating a simple HTML page, an index page, a CV, and a dictionary with hyperlinks. Each section demonstrates different HTML tags and web design principles.

Uploaded by

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

web design

The document outlines a web design project submitted to Punjab Technical University as part of a Bachelor of Computer Applications degree. It includes various HTML coding exercises such as creating a simple HTML page, an index page, a CV, and a dictionary with hyperlinks. Each section demonstrates different HTML tags and web design principles.

Uploaded by

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

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
SUBMITTED
BY : TO:

MS. PUNITA KUMARI SUHANI


BCA2023C
2322152

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_PG ~SHYNA </title>

</head>

<body>

<center><img src="c:\Users\PCTE\Downloads\index.png" height="20%" width="20%"></center>

<hr size="3%" color="black">

<font color="BROWN" size="8%">

<B>

<I>

<U>

<CENTER>INDEX OF WEB DESIGING</CENTER>

</U>

</I>

</B>

</font>

<FONT SIZE="5%" >

<UL type="disc">

<DL>

<dt><li>CHAPTER 1 </li></dt>

<FONT COLOR="BLUE" SIZE="4%"><dd>BEGINING OF


DESIGN.............................................................. 5</dd></FONT>

<DT><LI>CHAPTER 2</LI></DT>
<FONT COLOR="BLUE" SIZE="4%"><DD>HYPER TEXT MARKUP
LANGUAGE(HTML).............................................................. 11</DD></FONT>

<LI>CHAPTER 3</LI></DT>

<FONT COLOR="BLUE" SIZE="4%"><DD>BASIC TAGS OF


HTML .............................................................. 18</DD></FONT>

</DL>

<dt><li>CHAPTER 4</li></dt>

<font color="blue" size="4%">

<dd>CSS: CASCADING STYLE SHEETS.............................................................. 25</dd>

</font>

<dt><li>CHAPTER 5</li></dt>

<font color="blue" size="4%">

<dd>INTRODUCTION TO JAVASCRIPT.............................................................. 32</dd>

</font>

<dt><li>CHAPTER 6</li></dt>

<font color="blue" size="4%">

<dd>RESPONSIVE WEB DESIGN.............................................................. 40</dd>

</font>

<dt><li>CHAPTER 7</li></dt>

<font color="blue" size="4%">

<dd>WEB DESIGN PRINCIPLES.............................................................. 48</dd>

</font>

<dt><li>CHAPTER 8</li></dt>

<font color="blue" size="4%">

<dd>USABILITY AND USER EXPERIENCE.............................................................. 55</dd>

</font>

<dt><li>CHAPTER 9</li></dt>
<font color="blue" size="4%">

<dd>SEO: SEARCH ENGINE OPTIMIZATION.............................................................. 62</dd>

</font>

<dt><li>CHAPTER 10</li></dt>

<font color="blue" size="4%">

<dd>WEB HOSTING AND DEPLOYMENT.............................................................. 70</dd>

</font>

</dl>

</UL>

</FONT>

</body>

</html>

Output:
TOPIC 3 – SIMPLE CV USING HTML TAGS
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<title>RESUME ~ SHYNA </title>

</head>

<body >

<font color="#1d3c89" size="8%" >

<b>

<i>

<u>

<center>RESUME</center>

</u>

</i>

</b>

</font>

<img src="c:\Users\PCTE\Downloads\happy-cute-and-kawaii-girl-with-pink-hoodie-bunny-waving-
hand-cartoon-manga-chibi-character-design-for-logo-mascot-illustration-etc-vector.jpg" width="20%"
height="20%" align="right"><br><br>

<hr COLOR="PINK" size="3%">

<font size="6" COLOR="RED">

<B>ABOUT ME</B><br>

</font>

<BR>

<ul type="disc">
<li> <b>SHAINA CHANANA</b> <BR></li>

<li> <B>DOB- </B>02-10-2005<BR></li>

<li> LUDHIANA, PUNJAB<BR></li>

<li> <FONT COLOR="BLUE"><U><I>[email protected]</I></U></FONT> <BR></li>

</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>QUALIFICATIONS:</B><br>

</font>

<BR>

<ul type="disc">

<li>10<SUP>TH </SUP> FROM <A HREF="https://www.uspcldh.com/">USPC JAIN PUBLIC


SCHOOL</A>(2021).<BR> </li>

<li>12<SUP></>TH </SUP> FROM <A HREF="https://www.uspcldh.com/">USPC JAIN PUBLIC


SCHOOL</A>(2023).<BR></li>

<li>BCA FROM <A HREF="https://pcte.edu.in/">PCTE GROUP OF INSTITUTES.</A>(2026)<BR></li>

</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>SKILLS:</B><br>

</font>

<ul>

<li>LEADERSHIP</li>

<li>ACTIVE LISTENING</li>

<li>COMMUNICATION</li>

<li>CODING</li>
</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>HOBBIES:</B><br>

</font>

<ul>

<li>COOKING</li>

<li>DANCE</li>

<li>SCROLLING</li>

<li>BADMINTON</li>

</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>LANGUAGES KNOWN:</B><br>

</font>

<ul>

<li>ENGLISH</li>

<li>HINDI</li>

<li>PUNJABI</li>

</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>PROJECTS</B><br>

</font>

<ul>
<li>SIMPLE CHAT APPLICATION</li>

<li>RESUME</li>

<li>NETLIX</li>

</ul>

<hr COLOR="PINK" size="3%">

<font size="6%" COLOR="RED">

<B>PROGRAMMING LANGUAGES:</B><br>

</font>

<ul>

<li>C++</li>

<li>C</li>

<li>PYTHON</li>

<li>HTML</li>

</ul>

<hr COLOR="PINK" size="3%">

<hr COLOR="PINK" size="3%">

</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 - Shaina</title>

<style>

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

h2 { color: #4CAF50; }

p { color: #333; }

b { color: #000080; }

mark { background-color: #FFD700; }


strong { color: #D32F2F; }

</style>

</head>

<body>

<h2><u>Letter of Appreciation</u></h2>

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

<strong>Shaina Chanana</strong><br>

#69, Street Number 3<br>

Ludhiana, India<br>

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

</p>

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

<em>John Doe</em><br>

ABC Company<br>

Mumbai, India

</p>

<p><b>Subject:</b> <mark>Gratitude for Your Support</mark></p>

<p>Dear <b>John,</b></p>

<p>I am writing to sincerely thank you for your guidance. Your support has made a significant impact
on my journey. Your expertise and kindness are truly appreciated.</p>

<p>Looking forward to staying connected.</p>

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

<strong>Shaina Chanana</strong></p>

</body>

</html>

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

<html lang="en">

<head>

<title>Time-Table</title>

</head>

<body>

<table border="2px" style="text-align: center;" width="100%">

<caption ><b>BCA 2023 C</b> </caption>

<thead style="background-color: lightpink;">

<th rowspan="2">DAYS</th>

<th rowspan="2">9:00-10:00</th>

<th rowspan="2">10:05-11:05</th>

<th rowspan="2">11:05-11:25</th>

<th rowspan="2">11:25-12:25</th>

<th rowspan="2">12:30-1:30</th>

<th rowspan="2">1:35-2:35</th>
<th rowspan="2">2:40-3:40</th>

<th rowspan="2">3:40-4:40</th>

</thead>

<tbody>

<tr>

<th>MONDAY</th>

<td>DBMS LAB</td>

<td>DBMS LAB</td>

<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>DBMS</td>

<td>SE</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>SE LAB</td>

<td>WD LAB</td>

</tr>

<tr>

<th>TUESDAY</th>

<td>OS</td>

<td>SE</td>

<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>DBMS</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>WD</td>

<td>SE LAB</td>

<td>SE LAB</td>

</tr>
<tr>

<th>WEDNESDAY</th>

<td>DBMS LAB</td>

<td>DBMS LAB</td>

<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>SE</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>OS</td>

<td>WD</td>

<td>OS LAB</td>

</tr>

<tr>

<th>THURSDAY</th>

<td>OS LAB</td>

<td>OS LAB</td>

<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>WD LAB</td>

<td>DBMS</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>WD</td>

<td>SE</td>

</tr>

<tr>

<th>FRIDAY</th>

<td>OS LAB</td>

<td>OS</td>
<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>WD LAB</td>

<td>DBMS</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>WD</td>

<td>SE</td>

</tr>

<tr>

<th>SATURDAY</th>

<td>SE LAB</td>

<td>OS</td>

<td style="background-color: rgb(239, 239, 80);">TEA BREAK</td>

<td>WD LAB</td>

<td style="background-color: rgb(91, 172, 91);">LUNCH BREAK</td>

<td>DBMS</td>

<td colspan="2"></td>

</tr>

</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> Kumari Suhani</li>

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

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

<li><strong>Phone:</strong> 7098842355</li>

<li><strong>Address:</strong> GTB 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\PCTE\Downloads\STUDENTLOGO-removebg-preview.png" alt="Passport


Photo" />

</div>

(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>

<meta charset="UTF-8">

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

<title>Registration Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f3dad9;

margin: 0;

padding: 0;

display: flex;

justify-content: center;
align-items: center;

height: 100vh;

.form-container {

background-color: #f39d9d;

border: 2px solid #590505;

padding: 10px;

width: 400px;

max-width: 100%;

box-shadow: 0 4px 6px rgba(74, 3, 3, 0.1);

border-radius: 17px;

transition: ease-out 0.2S;

.form-container:hover{

transform:scale(1.1);

legend {

font-size: 20px;

font-weight: bold;

color: #333;

margin-bottom: 10px;

padding: 0;

text-align: center;

border: none;

label {
font-size: 13px;

color: #0b0b0b;

input, select, textarea {

width: 100%;

padding: 4px;

border: 2px solid #a83a3a;

border-radius: 9px;

font-size: 13px;

box-sizing: border-box;

textarea {

resize: vertical;

button {

width: 48%;

padding: 10px;

font-size: 14px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

button[type="submit"] {

background-color: #8f0606;

color: white;
}

button[type="reset"] {

background-color: #8f0606;

color: white;

button:hover {

opacity: 0.6;

input[type="radio"] {

margin-right: 5px;

width: 15px;

display: inline-flex;

.radio-group {

display: inline-flex;

align-items: center;

margin-bottom: 10px; /* Space below the radio buttons */

.radio-group input {

margin-right: 5px; /* Space between radio button and label */

</style>

</head>

<body>

<div class="form-container">

<form>
<legend>Registration Form</legend>

<label>Username</label>

<input type="text" placeholder="Enter name"><br>

<label>Password</label>

<input type="password" placeholder="Enter password"><br>

<label>Email</label>

<input type="email" placeholder="Enter e-mail"><br>

<label>Phone-No</label>

<input type="number" placeholder="Enter phone number"><br>

<label>Select Gender</label><br>

<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>B.COM</option>

<option>MCA</option>

<option>B-Tech</option>

</select><br>

<label>Hobbies</label>

<textarea rows="4" placeholder="Enter your hobbies"></textarea><br><br>

<button type="submit">Submit</button>

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

</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