KEMBAR78
HTML | PDF | Html Element | Html
Scribd
Upload
16 views49 pages

HTML

The document outlines the creation of a webpage using basic HTML tags, detailing various HTML elements such as headings, paragraphs, images, links, and forms. It includes a source code example that showcases a webpage about bodybuilding, featuring sections on history, rules, and competitions, along with a table of champions. Additionally, it provides a second example focusing on Kobe Bryant, illustrating the use of hyperlinks and multimedia in web design.

Uploaded by

hitamizha321
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
16 views49 pages

HTML

The document outlines the creation of a webpage using basic HTML tags, detailing various HTML elements such as headings, paragraphs, images, links, and forms. It includes a source code example that showcases a webpage about bodybuilding, featuring sections on history, rules, and competitions, along with a table of champions. Additionally, it provides a second example focusing on Kobe Bryant, illustrating the use of hyperlinks and multimedia in web design.

Uploaded by

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

EX.NO.

3 DESIGN A WEB PAGE CREATION USING HTML BASIC TAGS

AIM:

To develop a webpage using basic HTML tags

DESCRIPTION:

About the basic tags:


<h1> defines the most important heading.
<h6> defines the least important heading.
HTML paragraphs are defined with the <p> tag.
HTML links are defined with the <a> tag.
HTML images are defined with the <img> tag.
The <br> tag defines a line break, and is an empty element without a closing tag.
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed.
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes.
Use text-align for text alignment
Use <b> for Bold text
Use <strong> - Important text
Use <i> - Italic text
<small> - Smaller text
<del> - Deleted text
Use the <a> element to define a link
Use the href attribute to define the link address
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons.
The action attribute defines the action to be performed when the form is submitted.
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
SOURCE CODE:

<!doctype html>
<html>
<head >
<marquee direction="right" style="font-size:medium; color: brown;" > MY FAVOURITE SPORT</marquee>
<br>
</head>
<body background="C:\Users\Admin\Downloads\bg.jpg">
<br>
<h1 align="center">BODYBUILDING</h1>
<p align="center">
<img src="C:\Users\Admin\Desktop\bb.jpg" alt="BB" style="width:300px;height: 380px;" >
</p>
<h2>INTRO :</h2>
<p style=" font-size:x-large;">Bodybuilding is the practice of progressive resistance exercise to build, control,
and develop one's muscles via hypertrophy. An individual who engages in this activity is referred to as a
bodybuilder. It is primarily undertaken for aesthetic purposes over functional ones, distinguishing it from similar
activities such as powerlifting and calisthenics.</p>
<h2>HISTORY : </h2>
<p style="font-size:x-large">Bodybuilding has its origins in the late 19th century with Eugen Sandow, known
as the father of modern bodybuilding. He organized the first bodybuilding contest on September 14, 1901, in
London. The sport emphasizes muscle hypertrophy and aesthetics and has evolved significantly since its inception,
gaining popularity in the 20th century and becoming an organized competition. </p>
<h2>RULES AND REGULATIONS : </h2>
<p style="font-size:x-large">Bodybuilding competitions focus on muscularity, symmetry, and presentation.
Competitors are judged based on muscle size, proportion, and conditioning through mandatory poses, with scoring
heavily influenced by symmetry and leanness. Categories are divided by age, gender, weight, and experience levels.
Some federations test for banned substances, while others don't. Competitors must wear approved attire (posing
trunks, bikinis) and adhere to rules on tanning, hydration, and conduct. Prejudging rounds, posing routines, and
comparisons form the basis of competition, with a strict emphasis on sportsmanship and professionalism.</p>
<a href="https://en.wikipedia.org/wiki/Bodybuilding">To know more </a>
<h2>OLYMPIA</h2>
<p style="font-size: larger;">Mr. Olympia is the premier bodybuilding competition, known for showcasing
some of the best physiques in the world. Over the years, it has expanded to include several divisions to cater to
different body types and goals within the bodybuilding community. Here are the main types of bodybuilding
competitions held at Mr. Olympia:</p>
<dl style="font-size: larger;">
<ul >
<li><dt style="font-weight: 800;">Mr. Olympia (Men’s Open Bodybuilding)</dt></li>
<dd>This is the main and most prestigious competition, often referred to simply as "Mr. Olympia."
Athletes aim for maximum muscle mass, conditioning, symmetry, and posing skills.
Competitors typically weigh over 225 lbs, with no upper weight limit.</dd><br>
<li><dt style="font-weight: 800;">212 Olympia (Men’s 212 Division)</dt></li>
<dd>Designed for bodybuilders who weigh 212 lbs or less.
Competitors in this category focus on a balance of muscle size, symmetry, and aesthetics within the weight
restriction.</dd><br>
<li><dt style="font-weight: 800;">Classic Physique Olympia</dt></li>
<dd>A division created for athletes who emphasize symmetry, proportions, and aesthetics reminiscent of the
"Golden Era" of bodybuilding (like Arnold Schwarzenegger's era).
There are height and weight restrictions to ensure competitors maintain a more "classic" look rather than
focusing on extreme mass.</dd><br>
<li><dt style="font-weight: 800;">Men’s Physique Olympia</dt></li>
<dd>Focuses on overall aesthetics and an athletic, beach-ready physique rather than extreme muscle mass.
Competitors wear board shorts and are judged on their upper body (shoulders, chest, abs), symmetry, and
conditioning.
Emphasis is on a V-taper with a lean, muscular appearance.</dd><br>
<li><dt style="font-weight: 800;">Women’s Bodybuilding Olympia</dt></li>
<dd>The female counterpart to the Men's Open division.
Women in this division aim for maximum muscle mass, conditioning, and symmetry, similar to the Men's
Open Bodybuilding but for women.</dd><br>
<li><dt style="font-weight: 800;">Women’s Physique Olympia</dt></li>
<dd>A middle ground between Women’s Bodybuilding and Figure, with an emphasis on muscle mass,
conditioning, and femininity.
Competitors show muscle separation but avoid the extreme size of Women’s Bodybuilding.</dd><br>
<li><dt style="font-weight: 800;">Figure Olympia</dt></li>
<dd>Focuses on symmetry, conditioning, and overall muscle tone without the emphasis on extreme muscle
mass.
Competitors wear high heels and are judged on their overall structure, posing, and stage presence.</dd><br>
<li><dt style="font-weight: 800;">Fitness Olympia</dt></li>
<dd>In addition to physique, competitors must perform a fitness routine that includes elements of strength,
flexibility, and athleticism.
The routine and the physique are both part of the judging criteria, making this one of the most dynamic
categories.</dd><br>
</ul>
</dl>
<h2 >MR.OLYMPIA CLASSIC PHYSIQUE 2024 CHAMPIONS</h2><br>
<table border="2" align="center" bgcolor="lavender" cellpadding="8" style="width: 60%; border-collapse:
collapse; " >
<tr align="center" >
<th>Position</th>
<th>Bodybuilder</th>
<th>Physique</th>
</tr>
<tr align="center">
<td>1</td>
<td>Chris Bumstead</td>
<td><img src="C:\Users\Admin\Desktop\cbum.jpg" style="height: 100px;width: 110px ;"></td>

</tr>
<tr align="center">
<td>2</td>
<td>Mike Sommerfeld</td>
<td><img src="C:\Users\Admin\Desktop\mike.jpg" style="height: 100px;width: 110px;">
</tr>
<tr align="center">
<td>3</td>
<td>Urs Kalecinski</td>
<td><img src="C:\Users\Admin\Desktop\urs.jpg" style="height: 100px;width: 110px;">
</tr>
<tr align="center">
<td>4</td>
<td>Ramon Dino</td>
<td><img src="C:\Users\Admin\Desktop\ramon.jpg" style="height: 100px;width: 110px;">
</tr>
<tr align="center">
<td>5</td>
<td>Breon Ansley</td>
<td><img src="C:\Users\Admin\Desktop\breon.jpg" style="height: 100px;width: 110px;">
</tr>
</table>
<h2 align="center" style="background:rgb(104, 167, 44);">INDIAN BODYBUILDING
ASSOCIATION</h2>
<marquee behavior="alternate"><a align="center"
href="https://www.indianbodybuilding.co.in/bodybuilding-associations-competitions-india/" >FOLLOW
UP</a></marquee>
<h2 style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"> To enroll in upcoming
events, kindly fill this form...</h2>
<br><h3>APPILCATION FORM</h3><br>
<label>NAME : </label>
<input type="text">
<br><br><label>GENDER :</label><br>
<input type="radio">Male<br>
<input type="radio">Female<br>
<input type="radio">Others<br>
<br><br><label>DATE OF BIRTH</label>
<input type="date">
<br><br><label>DIVISION :
<select>
<option>Men’s Open Bodybuilding</option>
<option>Men’s 212 Division</option>
<option>Classic Physique Olympia</option>
<option>Men’s Physique Olympia</option>
<option>Women’s Bodybuilding Olympia</option>
<option>Women’s Physique Olympia</option>
<option>Figure Olympia</option>
<option>Fitness Olympia</option>
</select>
</label><br>
<br>
<label>HEIGHT : </label>
<input type="text"><br><br>
<label>WEIGHT :</label>
<input type="text"><br><br>
<label>COUNTRY :</label>
<input type="text"><br><br>
<label>ADDRESS</label><br><br>
<textarea cols="30" rows="5"></textarea><br><br>
<label>CONTACT :</label>
<input value="+91" size="2">
<input size="10">
<br><br><label>EMAIL-ID :</label>
<input type="email">
<br><br><center><input type="button" value="Submit"></center><br>
<h2>Social Media Handles</h2>
<a href="https://www.instagram.com/ibbf_india/">Instagram</a><br>
<a href="https://www.facebook.com/share/UCaEDd92FNTBLoKR/?mibextid=qi2Omg">Facebook</a>
</body>
</html>
OUTPUT:
RESULT:

Hence the output for the sample code using basic HTML tags has been displayed
EX.NO. 4 DEVELOP WEB SITE WITH SUITABLE CONTENTS AND LINKS

AIM:

To develop a website using suitable contents and links by using HTML tags.

DESCRIPTION:

The HTML <a> tag defines a hyperlink.


HTML headings are defined with the <h1> to <h6> tags.
The HTML <p> element defines a paragraph.
The HTML <br> element defines a line break.
Setting the style of an HTML element, can be done with the style attribute.
The background-color property defines the background color for an HTML element.
Use font-size for text sizes
The target attribute specifies where to open the linked document.
To use an image as a link, just put the <img> tag inside the <a> tag. The HTML <img> tag
is used to embed an image in a web page.
The style attribute to specify the width and height of an image.
The <ol> tag defines an ordered list.

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url('bryant.jpeg');
}
</style>
</head>
<body bgcolor="orange">
<br>
<marquee style="color:black;"><i>"THE
LEGEND"</i></marquee>
<h1 style="background-color:red;"style="textˇ align:center;"style="font-
family:courier;"style="fontˇ size:60px;"><CENTER>KOBE BRYANT</CENTER></h1>
<br>
<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant"><img
src="https://wallpaperaccess.com/full/698684.jpg"
alt="kobe bryant"
style="width:420px;height:420px;"></a>
-bee; August 23, 1978 January 26, 2020) was an
American professional basketball player. A shooting guard, he spent his entire 20-year
career with the Los Angeles Lakers in the National Basketball Association (NBA).
Regarded as one of the greatest players of all time,[3][4][5][6] Bryant helped the Lakers
win five NBA championships, and was an 18-time All-Star, a 15-time member of the All-
NBA Team, a 12-time member of the All-Defensive Team, the 2008 NBA Most Valuable
Player (MVP), and a two-time NBA Finals MVP. Bryant also led the NBA in scoring twice,
and ranks fourth on the league's all-time regular season scoring and all-time postseason
scoring lists.</p>
<h1 style="border:2px solid Violet;"style="fontˇ size:30px;">PROFESSIONAL
CARRIER:</h1>
<p>1996 NBA draft Before the 1996 NBA draft, Bryant had worked out in Los Angeles,
where he scrimmaged against former Lakers players Larry Drew and Michael Cooper and,
according to then-Laker manager Jerry West, "marched over these people".[50] The Lakers
were looking to trade their starting center Vlade Divac for a player's draft rights to free up
salary cap space to make an offer to free-agent center Shaquille O'Neal. Bill Branch, the
Charlotte Hornets' head scout at he time, said that the Hornets agreed to trade their No. 13
pick to the Lakers the day before the draft. Before the trade agreement, the Hornets never
considered drafting Bryant. During the draft, the Lakers told the Hornets whom to select
minutes before the pick was made.[51] Bryant was the first guard drafted directly out of
high school. After the draft, the trade was put in jeopardy when Divac threatened to retire
rather than be traded from Los Angeles. However, on June 30, Divac relented on his threat
and the trade was made final on July 9, 1996, when the league's off-season moratorium
ended.[52] Since Bryant was still 17 at the time, his parents had to cosign his contract with
the Lakers until he was able to sign his own when he turned 18 before the season
began.[53] Bryant signed a three-year rookie contract totaling $3.5 million.[54]
<p>1.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#1996_
NBA_draft" target="_blank">2.1 1996 NBA draft</a>
<br>
<p>2.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Adjust
ing_to_the_NBA_(1996%E2%80%931999)"
target="_blank">2.2 Adjusting to the NBA (1996
1999)</a>
<br>
<p>3.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Threeˇ peat_(1999%E2%80%932002)"
target="_blank">2.3
Three-peat (1999 2002)</a>
<br>
<p>4.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Comin
g_up_short_(2002%E2%80%932004)"
target="_blank">2.4 Coming up short (2002 2004)</a>
<br>
<p>5.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Scorin
g_records_and_playoff_upsets_(2004%E2%80%932007)"
>2.5Scoring records and playoff upsets (2004 2007)</a>
<br>
<p>6.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Back_
on_top_(2007%E2%80%932010)">2.6 Back on top
(2007 2010)</a>
<br>
<p>7.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Chasin
g_a_sixth_championship_(2010%E2%80%932013)"
target="_blank">2.7 Chasing a sixth championship
(2010 2013)</a>
<br>
<p>8.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Injuryˇ plagued_years_(2013%E2%80%9
32015)"
target="_blank">2.8 Injury-plagued years (2013
2015)</a>
<br>
<p>9.<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Final_
season_(2015%E2%80%932016)" target="_blank">2.9
Final season (2015 2016)</a>
<br>
<h2 style="border:2px solid Violet;"style="fontˇ size:30px;"style="text-
align:center;">DEATH:</h2>
<p>"CLICK THE IMAGE TO KMOW ABOUT HIS
DEATH"</P>
<a
href="https://en.wikipedia.org/wiki/Kobe_Bryant#Death
"><img src="https://caˇ times.brightspotcdn.com/dims4/default/db9a166/21474
83647/strip/true/crop/1658x2068+0+0/resize/840x1048!
/quality/90/?url=https%3A%2F%2Fcalifornia-
timesˇ brightspot.s3.amazonaws.com%2Fd7%2F45%2F56d5fb52
40759e08ca3b4403122c%2Fla-sp-kobe-drawing.JPG"
alt="kobe bryant"
style="width:300px;height:300px;"></a>
</body>

</html>
OUTPUT:
RESULT:

Hence the output has been displayed.


EX.NO:05 DESIGN WEB PAGES USING LISTS AND TABLES

AIM:

To develop a webpage using suitable table, ordered and unordered list tags.

DESCRIPTION:

The <table> tag defines an HTML table.


Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

SOURCE CODE:

<html>
<head>
<style>
table, th, td {
border: 10pX solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
border-spacing: 15px;
text-align: center;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h1>EXPERIMENT-3:</h1>
<table style="width:100%">
<caption>Weekly Timetable</caption>
<br/>
<br/>
<tr style="color:black" bgcolor="red">
<th>DAYS</th>
<th>10 A.M-11 A.M</th>
<th>11 A.M-12 P.M</th>
<th style="bgcolor:green" rowspan="6">12 P.M-2
P.M:BREAK </th>
<th>2 P.M-3 P.M</th>
<th>3 P.M-4 P.M</th>
</tr>
<tr bgcolor="faded green">
<td>MONDAY</td>
<td>EG</td>
<td>Eng.Maths-1</td>

<td>TCS</td>
<td>PP</td>
</tr>
<tr bgcolor="faded green">
<td>TUESDAY</td>
<td>PP</td>
<td>ADP</td>

<td>Eng.Chemistry-1</td>
<td>TCS</td>
</tr>
<tr bgcolor="faded green">
<td>WEDNESDAY</td>
<td>Eng.Maths-1</td>
<td>PP</td>

<td>ADP</td>
<td>Eng.Chemistry-1</td>
</tr>
<tr bgcolor="faded green">
<td>THURSDAY</td>
<td>Eng.Chemistry-1</td>
<td>Eng.Maths-1</td>

<td>PP</td>
<td>TCS</td>
<tr bgcolor="faded green">
<td>FRIDAY</td>
<td>Eng.Chemistry-1</td>
<td>TCS</td>

<td>Eng.Maths-1</td>
<td>ADP</td>
</tr>
</table>
<br>
<h1>Instructions:</h1>
<ol>
<li>students should join to class before attendance</li>
<li>Any queries contact Class Tutor.</li>
<li>CIA will be conduced every month</li>
</ol>
<br>
<h1>ANY QUERIES:</h1>
<ul style="list-style-type:disc;">
<li>Class tutor-Ms.Jayapradha:9876543210</li>
<li>Class advisor-Dr.Amudha:9786543253</li>
</ul>
</body>
</html

OUTPUT:

RESULT:
Hence the output has been displayed.
EX.NO. 6 BUILD A WEB CLIENT-SIDE LOGIN, REGISTRATION FORM AND
DASHBOARD WITH DROP DOWN MENUS

AIM:

To build a web client-side Login, Registration form and Dashboard with drop down menus.

DESCRIPTION:

The <table> tag defines an HTML table.


Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag.
Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
HTML headings are defined with the <h1> to <h6> tags.
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <input type="radio"> defines a radio button.
The action attribute defines the action to be performed when the form is submitted.
The target attribute specifies where to display the response that is received after submitting
the form.
The HTML <form> element can contain one or more of the following form elements:
To define a pre-selected option, add the selected attribute to the option.

To define a pre-selected option, add the selected attribute to the option.


Use the size attribute to specify the number of visible values
SOURCE CODE:

1. Code for the Login Page:


<html>
<head>
<title>
login Page
</title>
</head>
<body bgcolor="red">
<marquee style="color:BLACK;"><i>LOGIN NOW!.</i></marquee>
<H1><CENTER><B>LOGIN HERE</B></CENTER></H1>
<CENTER>
<BR>
<bR>
Email:
<input type="email"/> <br>
<br> <br>
Password:
<input type="Password"> <br>
<br> <br>
</CENTER>
<BR>
<CENTER>
<button
onclick="document.location='file:///D:/ADP/registration%20form.html'">LOGIN</button>
</CENTER>

2. Code for Registration Form:

<html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="BLUE">
<marquee style="color:BLACK;"><i>REGISTER NOW!.</i></marquee>
<H1> <CENTER> " SPORTS QUOTA APPLICATION " </CENTER> </H1>
<CENTER><h2><b><u>REGISTRATION FORM </u></b></h2></CENTER>
<br>
<br>
<form>
<label>FIRST NAME : </label>
<input type="text"/> <br><br>
<label> LAST NAME: </label>
<input type="text"/> <br> <br>
<label>FATHER/GAURDIAN NAME: </label>
<input type="text"/> <br><br>
<label for="DOB">dob :</label>
<input type="date">
<br>
<br>
<label>
SPORT :
<select>
<option>HOCKEY</option>
<option>CRICKET</option>
<option>FOOTBALL</option>
<option>BASKETBALL</option>
<option>BADMINTON</option>
<option>TENNIS</option>
<option>ATHLETICS</option>
<option>TABLE TENNIS</option>
</select>
<br>
</label>
<br>
<label>
Gender :
</label><br>
<input type="radio"/> Male <br>
<input type="radio"/> Female <br>
<input type="radio"/> Other
<br>
<br>
<label>
EMINENT SPORTS PERSON:</label><br>
<input type="radio"/> YES <br>
<input type="radio"/> NO <br>
<br>
<br>
<label> ACHIVEMENTS: </label>
<select>
<option>National level</option>
<option>State level</option>
<option>District level</option>
<option>Zonal level</option>
</select>
<br>
<br>
<br>
<label>
Phone :
</label>
<input type="text" value="+91" size="2"/>
<input type="text" size="10"/> <br> <br>
Address:
<br>
<textarea cols="40" rows="5">
</textarea>
<br> <br>
Email:
<input type="email"/> <br>
<br> <br>
Password:
<input type="Password"> <br>
<br> <br>
<button
onclick="document.location='file:///D:/ADP/SUBMIT%20PAGE.HTML'">LOGIN</button>
</form>
</body>

3. Code for Completed Page:

<HTML>
<HEAD>
<TITLE>
SUBMIT PAGE
</TITLE>
</HEAD>
<BODY>
<CENTER>
<img src="https://www.clearsteps.com/wordpress/wp-content/uploads/2017/12/Green-
Check.png"
alt="SUCESSFULL" width="345" height="345">
</CENTER>
<P><CENTER><B><FONT SIZE=10>APPLICATION REGISTERED
SECCESFULLY</B></CENTER></P>
</BODY>
</HTML>
OUTPUT:
NOTE: After filling all the details in each page when we click submit the respective next page will be
displayed.

RESULT:

Hence the output has been displayed


EX.NO.7 DEVELOP A HTML FORM AND VALIDATION USING HTML 5 FEATURES

AIM:

To develop a HTML form and validation using basic HTML 5

DESCRIPTION:

About the basic tags:


<h1> defines the most important heading.
The <br> tag defines a line break, and is an empty element without a closing tag.
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes.
Use text-align for text alignment
Use <b> for Bold text
<input> tag specifies an input field where the user can enter data
<label> tag defines label for several element
Minlength attribute defines the minimum number letters to be entered
Pattern attribute defines the type of inputs to be entered
Required is used to define an compulsory input
Use the href attribute to define the link address
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons.
The action attribute defines the action to be performed when the form is submitted.

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title>FORM CREATION AND VALIDATION USING HTML5</title>
</head>
<body style="background:black;color:white">
<h1 style="margin-left:35%">VALIDTION FORM</h1>
<form style="margin-left:35%">
<label style="font-weight:bold" >FIRSTNAME:</label>&emsp;
<input type="textbox" required pattern="[a-z A-Z]+"
placeholder="firstname"><br><br><br><br>
<label style="font-weight:bold">LASTNAME:</label>&emsp;
<input type="textbox" required pattern="[a-z A-Z]+"
placeholder="Lastname"><br><br><br><br>
<label style="font-weight:bold">FATHER/GAURDIAN:</label>&emsp;
<input type="textbox" required pattern="[a-z A-Z]+"
placeholder="father/gaurdian"><br><br><br><br>
<label style="font-weight:bold">D.O.B:</label>&emsp;
<input type="date" required><br><br><br><br>
<label style="font-weight:bold">GENDER:</label>&emsp;
<label style="font-weight:bold">MALE:</label>
<input type="radio" name="a">&emsp;
<label style="font-weight:bold">FEMALE:</label>
<input type="radio" name="a"><br><br><br><br>
<label style="font-weight:bold">GMAIL:</label>&emsp;
<input type="email" pattern="[a-z A-Z @ 1-100]"placeholder="abcd123@gmail.com"
required><br><br><br><br>
<label style="font-weight:bold">PASSWORD:</label>&emsp;
<input type="password" required minlength=6 pattern="[a-z A-Z 1-10 * # @ !]">
</form>
</body>
</html>

OUTPUT
RESULT:
Hence the output for the sample code using HTML 5 has been displayed
EX.NO. 8 CREATE A WEBSITE USING HTML: TO EMBED AN IMAGE MAP IN A WEB
PAGE, TO FIX THE HOT SPOTS

AIM:

To create a web page with the following using HTML


a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.

DESCRIPTION:

<img> tag is used to add the image to our webpage.

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title>INDIA MAP</title>
</head>

<body>

</map>
-

</body>
</html>
OUTPUT:
RESULT:

Thus the program is executed and results were obtained successfully.


EX.NO. 9 APPLY STYLE SPECIFICATIONS IN HTML PAGE USING CSS

AIM:

To apply the style specifications in HTML page using CSS

DESCRIPTION:

CSS is used to apply the style in the web page which is made up of HTML elements. It describes
the look of the webpage.
CSS provides various style properties such as background color, padding, margin, border-color,
and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

To use CSS with HTML documents, there are three ways:

o Inline CSS: Define CSS properties using style attribute in the HTML elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
o External CSS: Define all CSS property in a separate .css file, and then include the file with
HTML file using tag in section.
1) Inline CSS:

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.
To apply inline CSS, you need to use style attributes within HTML element. We can use as many
properties as we want, but each property should be separated by a semicolon (;).

2) Internal CSS:

An Internal stylesheet contains the CSS properties for a webpage in <head> section of HTML
document. To use Internal CSS, we can use class and id attributes.
We can use internal CSS to apply a style for a single HTML page.

3) External CSS:

An external CSS contains a separate CSS file which only contains style code using the class
name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in
HTML file using <link> tag.
If we have multiple HTML pages for an application and which use similar CSS, then we can use
external CSS.
There are two files need to create to apply external CSS

o First, create the HTML file


o Create a CSS file and save it using the .css extension (This file only will only contain the styling
code.)
o Link the CSS file in your HTML file using tag in header section of HTML document.

SOURCE CODE:

Index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>

Style.css:

body{
background-color:lavender;
text-align:center;
}
h2{
font-style:italic;
size:30px;
color:#f08080;
}
p{
font-size:20px;
}

.blue{
color:blue;
}
.red{
color:red;
}
.green{
color:green

OUTPUT:
RESULT:

Hence the output for the sample code using basic HTML tags has been displayed
EX.NO. 10 DEVELOPING DYNAMIC WEB APPLICATION USING HTML, CSSAND
JAVASCRIPT
AIM:

To develop a dynamic web application using HTML, CSS and JavaScript.


DESCRIPTION:

Step1: Create a HTML, CSS and JavaScript files and link them using style tag and script tag
Respectively.

Step 2:
Step 3: Using JavaScript manipulate the buttons to increase and decrease the size of the heading.

Step 4: Now create an input box and


Step 5: Now in JavaScript create an variables templi, tempdiv and tempbtn and create element by create
Element function and create li, div, button and equate it to the above variables.
Step 6: Now manipulate it such that when user clicks enter the input get displayed as list and when we
click on the element then we should strike the list and when we click the button the entire element gets
removed using addEventListener function.
Step 7: Create two input boxes such that we could select colors in it.
Step 8: Now manipulate it such that when we change colors then the linear gradient of the background
changes.

SOURCE CODE:

Homepage.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<div class="button-container">
<button id ="inc" class="top">Increase</button>
<button id ="dec" class="top">Decrease</button>
</div>

<p id="first">Get it done today</p>


<input id="input" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="todo">
</ul>
<label for ="color">Enter the color</label>
<input id="color1" type="color" name="color" class="col">
<input id="color2" type="color" name="color" class="col">
<script type="text/javascript" src="script.js"></script>

<h3> </h3>
</body>
</html>

CSS:
Style.css
*{
font-size: medium;
}

body{
margin-left: 40%;
background-image: linear-gradient(to right,yellow,red);
}

h1{
font-size: 32px;
}

.coolTitle {
text-align: center;
font-family: 'Oswald', Helvetica, sans-serif;
font-size: 40px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: tomato;
text-shadow:
-1px -1px firebrick,
-2px -2px firebrick,
-3px -3px firebrick,
-4px -4px firebrick,
-5px -5px firebrick,
-6px -6px firebrick,
-7px -7px firebrick,
-8px -8px firebrick,
-30px 20px 40px dimgrey;
}

.done {
text-decoration: line-through;
}
li{
font-size: larger;
}

.button-container{
display: flex;
gap:20px;

}
.top{
font-size: 15px;
background-color: green;
color: #f5f5f6;
border:0;
border-radius: 20px;

}
.top:hover{
background-color:red;
}

.flex{
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
margin-bottom: 10px;

}
.buttons {

margin-left: 10px;
border:0;
border-radius: 20px;
background-color: green;
color: #f5f5f6;
}
.buttons:hover{
background-color:red;
}

.col{
margin: 10px;
}

h3{
color: #f5f5f6;
}

JAVASCRIPT
Script.js
let h1 = document.querySelector("h1");
let inc=document.querySelector("#inc");
let dec =document.querySelector("#dec");
let s = 32;
function SizeIncrement(){

s+=2;
h1.style.fontSize=s+"px";

}
function SizeDecrement(){
s-=2;
h1.style.fontSize=s+"px";
}
inc.addEventListener("click", SizeIncrement);
dec.addEventListener("click", SizeDecrement);
let btn=document.querySelector("#enter");
let input=document.querySelector("#input");
let ul=document.querySelector("#todo");

function checkLength(){
return input.value.length;
}
function Adder(){
var templi=document.createElement("li");
var tempbtn=document.createElement("button");
var tempdiv=document.createElement("div");

tempbtn.classList.add("buttons");
tempdiv.classList.add("flex");
templi.classList.add("lii");
templi.appendChild(document.createTextNode(input.value));
tempbtn.innerHTML="delete";
ul.appendChild(tempdiv);
tempdiv.append(templi,tempbtn);
input.value="";
}

function AddByClick(){

if(checkLength()>0){
Adder();
}
}
function AddByPress(event){
if(checkLength()>0 &&event.which===13){
Adder();
}
}

function deleted(element){
if(element.target.className==="buttons")
{
element.target.parentElement.remove();
}
}
var con=1;
function done(element){
if(element.target.className==="lii"&&con==1)
{
element.target.classList.add("done");
con = 0;
}
else if(element.target.className==="lii"&&con==0)
{
element.target.classList.remove("done");
con = 1;
}
}
function Checker(element){
deleted(element);
done(element);
}
btn.addEventListener("click",AddByClick);

input.addEventListener("keypress",AddByPress);

ul.addEventListener("click",Checker);

let body = document.querySelector("body");


let c1= document.querySelector("#color1");
let c2= document.querySelector("#color2");
let p=document.querySelector("h3");
function ColorOneChanger(){
body.style.backgroundImage="linear-gradient(to right,"+c1.value+","+c2.value+")";
// p.innerHTML= c1.value+","+c2.value;
p.textContent = c1.value+","+c2.value; }
function ColorTwoChanger(){
body.style.backgroundImage="linear-gradient(to right,"+c1.value+","+c2.value+")" }

c1.addEventListener("input",ColorOneChanger);
c2.addEventListener("input",ColorTwoChanger);
OUTPUT:

Homepage.html
RESULT:
Thus the above program was successfully completed and verified.

You might also like