HTML_PRACTICAL_LAB_ACTIVITY2222PRINT
HTML_PRACTICAL_LAB_ACTIVITY22
HTML(HYPER TEXT MARKUP LANGUAGE) IS THE SCRIPTING LANGUAGE FOR CREATING WEB PAGES. IT IS DEVELOPED BY TIM BERNERS LEE. IN 1980 A MARKUP LANGUAGE WAS DEVELOPED TO CREATE DOCUMENTS, ALL THE WORD PROCESSORS ALLOW TO GIVE FORMATS TO THE TEXT. NOW IF SUCH DOCUMENTS NEED TO BE PUT ON THE WEB THEN THE DOCUMENTS NEEDS TO BE CONVERTED INTO HTML FORMAT WHICH THE BROWSER CAN UNDERSTAND. HTML IS THE LANGUAGE FOR DESIGNING WEB PAGES. HTML TAGS ARE THE HIDDEN KEYWORDS WITHIN WEB PAGES THAT DEFINE HOW YOUR WEB BROWSER MUST FORMAT .
HTML Editors
1
Step 1: Open Notepad (PC) Windows 8 or later: ...
2
Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. ...
3
Step 2: Write Some HTML. Write or copy the following HTML code into Notepad: ...
4
Step 3: Save the HTML Page. Save the file on your computer. ...
5
Step 4: View the HTML Page in Your Browser.
Basic HTML tags
These are the other tags that HTML commonly uses in documents. They are not required but when used are very effective in creating professional effective websites.
|
Open tag |
Close tag |
Description |
Example |
|
<p> |
</p> |
This tag allows you to create paragraphs |
My name is Fred. |
|
<h1> |
</h1> |
This is the largest heading |
Heading 1 |
|
<h2> |
</h2> |
This is second biggest heading |
Heading 2 |
|
<h3> |
</h3> |
This is the next heading |
Heading 3 |
|
<h4> |
</h4> |
This is another heading |
Heading 4 |
|
<h5> |
</h5> |
This is the second smallest heading |
Heading 5 |
|
<h6> |
</h6> |
This is the smallest heading |
Heading 6 |
|
<hr > |
n/a |
This is a horizontal line. You can use width and size attributes |
|
|
<b> |
</b> |
This makes text bold |
Bold text |
|
<i> |
</i> |
This makes text italic |
Italic text |
|
<br /> |
n/a |
This tag allows you to insert line breaks |
abc |
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
====<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Tables</h2>
<p>HTML tables start with a table tag.</p>
<p>Table rows start with a tr tag.</p>
<p>Table data start with a td tag.</p>
<hr>
<h2>1 Column:</h2>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>
<h2>1 Row and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<hr>
<h2>3 Rows and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
<hr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
HTML ELEMENTS: BASIC HTML TAGS SHOULD BE ADDED TO EVERY WEB PAGES OF A WEB SITE.
HTML TAGS:- <HTML>………….</HTML>
HEAD TAGS:-<HEAD>…………</HEAD>
TITLE TAGS:-<TITLE>………..</TITLE>
BODY TAGS:-<BODY>………..</BODY>
MAKING OF WEB PAGES:-NOTE PAD OR WORD PAD
SAVE AS FILENAME.HTML
TYPE :-ALL FILES
DISPLAY IN A WEB BROWSER:-CHROME, INTERNET EXPLORER, MOZILLA
· BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>1
· FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>
· <BODY BGCOLOR=”RED”>
· <BODY TEXT=”YELLOW”>
· <BODY TEXT=”YELLOW” BGCOLOR=”PINK”>
· SECTION TAGS (HEADINGS) :-<H1>…………..</H1> HEADING 1 TO HEADING 6
· BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>
· FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>
· <BODY BGCOLOR=”RED”>
· <BODY TEXT=”YELLOW”>
· <BODY TEXT=”YELLOW” BGCOLOR=”PINK”
OTHER ELEMENTS:-
· <I>…..ITALIC…</I>
· <B>..BOLD..</B>
· <U>..UNDERLINE..</U>
·
<STRIKE>COMPUTER
</STRIKE>
<SUP>…</SUP>
· 10<SUP>2 </SUP>
<SUB>….</SUB>
· H<SUB>2</SUB>O = H2O
·
<STRIKE>COMPUTER
</STRIKE>
TABLES:-
· BORDER=ADD BORDER TO A TABLE
· TH=HEADINGS TO COLUMN
· TR= CREATE ROWS
· TD= TABLE DATAS CELL DATA
· CELL PADDING= SPACING BETWEEN EDGES OF CELL AND ITS DATA
· CELL SPACING= SPACING BETWEEN CELLS
· ALIGN= HORIZONTAL ALIGN OF EACH CELL
· VALIGN=VERTICAL ALIGN
· ROW SPAN=SPAN CELL OR HEADING ACROSS
· COLSAPAN=SPAN CELL OR HEADING ACROSS COLUMNS
LIST :-
ORDER LIST (OL)
· <OL>
· <LI> COST </LI>
· <LI> COMPNANY </LI>
· <LI>ITEM </LI>
· </OL>
UN ORDER LIST (UL)
· <UL>
· <LI> COST </LI>
· <LI> COMPNANY </LI>
· <LI>ITEM </LI>
· </UL>
DEFINATION LIST:- (DL)
· DT (CREATE ITEMS)
· DD (DISPLAY DEFINATION
· EXAMPLE:-
· <DL>
· <DT> COST <DD> HOW MUCH?
· </DL>
DEFINATION LIST:- (DL)
· DT (CREATE ITEMS)
· DD (DISPLAY DEFINATION
EXAMPLE:-
· <DL>
· <DT> COST <DD> HOW MUCH?
· </DL>
|
Open tag |
Close tag |
Description |
Example |
|
<p> |
</p> |
This tag allows you to create paragraphs |
My name is Fred. |
|
<h1> |
</h1> |
This is the largest heading |
Heading 1 |
|
<h2> |
</h2> |
This is second biggest heading |
Heading 2 |
|
<h3> |
</h3> |
This is the next heading |
Heading 3 |
|
<h4> |
</h4> |
This is another heading |
Heading 4 |
|
<h5> |
</h5> |
This is the second smallest heading |
Heading 5 |
|
<h6> |
</h6> |
This is the smallest heading |
Heading 6 |
|
<hr > |
n/a |
This is a horizontal line. You can use width and size attributes |
|
|
<b> |
</b> |
This makes text bold |
Bold text |
|
<i> |
</i> |
This makes text italic |
Italic text |
|
<br /> |
n/a |
This tag allows you to insert line breaks |
abc |
BASIC SKELETON OF HTML:-
<HTML>
<HEAD>
· <MARQUEE> SCROLLING TEXT </MARQUEE>
<TITLE>WEB PAGES </TITLE>
</HEAD>
<BODY>
I AM LEARNING HTML8
</BODY>
</HTML>
LAB. ACTIVITY NO:-1.
<HTML>
<HEAD>
<TITLE>MOVING </TITLE>
</HEAD>
<BODY>
· <MARQUEE BEHAVIOR=”ALTERNATE”BGCOLOR=”RED”WIDTH=”50%”HEIGHT=”100%”DIRECTION=”DOWN”>SCROLLING TEXT </MARQUEE>
· <OL TYPE=”CIRCLE” OR”DIAMOND”>
<LI>I AM LEARNING HTML8
</BODY>
</HTML>
LAB. ACTIVITY NO:-2.
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
<A HREF="….."> GOTO PAGES </A> [ THIS COMMAND IS USED FOR LINKING THE FILE]
<H1> HTML</HTML> </H1>
<H2> HTML</HTML></H2>
<H3> HTML</HTML></H3>
<H4> HTML</HTML></H4>
<H5> HTML</HTML></H5>
<H6> HTML</HTML></H6>
<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-3.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JS BIN</TITLE>
</HEAD>
<BODY>
<A HREF=" D:\HTML">…..</A>
<P>HTML TUTORIAL</P>
<P>PYTHON TUTORIAL</P>
<P>PHP TUTORIAL</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-4.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
<B> BOLD TEXT </B> <BR>
<STRONG>STRONG TEXT</STRONG><BR>
<U>UNDERLINE</U><BR>
<BIG>BIG TEXT</BIG><BR>
<SMALL>SMALL TEXT</SMALL><BR>
<EM>EMPHASIZED TEXT</EM><BR>
</BODY>
</HTML>
LAB. ACTIVITY NO:-5.
<HTML>
<HEAD>
<TITLE> TEST PAGE </TITLE>
</HEAD>
<IMG SRC=" "WIDTH="55" HEIGHT="40">
<BODY>
<H1> HTML</H1>
<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-6.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
</BODY>
<H1 ALIGN=”LEFT”> HEADING 1<H1>
<H2 ALIGN=”RIGHT”> HEADING 2<H2>
<H3 ALIGN=”CENTRE”> HEADING3 <H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> BULLET</TITLE>
</HEAD>
<BODY>
<H4> NUMBERED LIST: </H4>
<OL>
<LI>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
</OL>
</BODY>
</HTML>
BULLET:-
<HTML>
<HEAD>
<TITLE> BULLET</TITLE>
</HEAD>
<BODY>
<UL TYPE=”CIRCLE”>
<LI>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
<UL TYPE=”DISC”>
<L1> ONE</LI>
<LI> TWO</LI>
<LI> THREE</LI>
<UL TYPE=”SQUARE”>
<L1>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
</UL>
</BODY>
</HTML>
LAB. ACTIVITY NO:-7.
<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%” CELLPADDING=”20” CELLSPACING=”4”
<TR>
<TH COLSPAN=3>HTML PRESS</TH>
TH ROWSPAN=4>HTML PRESS </TH>
</TR>
<TR>
<TH> BOOK NAME </TH>
<TH> AUTHOR </TH>
<TH>PRICE</TH>
</TR>
<TD>BASIC COMPUTER </TD>
<TD> R GUPTA</TD>
<TD> RS.199/- </TD>
</TR>
</TABLE>
LAB. ACTIVITY NO:-8
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=”50%,50%”>
<FRAME SRC=””>
</FRAME>
</HTML>
</body>
</html>
LAB. ACTIVITY NO:-9
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
<BODY>
<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>
<FORM METHOD="POST">
<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P>
</FORM>
<HR>
</BODY>
</HTML>
LAB. ACTIVITY NO:-10
<html>
<head>
<title>HTML frame Tag</title>
</head>
<FRAMESET COLS="20%,80%">
<FRAME src=left.html>
<FRAME src=right.html>
</FRAMESET>
<BODY>This is the left frame</BODY>
<BODY BGCOLOR="blue" TEXT="white">This is the right frame with a blue background and white text.</BODY>
<BODY>
This is the left frame <P>
<a href="red.html">red</a> <br>
</BODY>
<BODY bgcolor="red" text="white">
This is the right frame
</BODY>
<FRAMESET COLS = "20%,80%">
<FRAME src = "left.html" name="left" >
</FRAMESET>
</BODY>
</html>
LAB. ACTIVITY NO:-11
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
<BODY>
<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>
<FORM METHOD="POST" ACTION="HTTP://WWW.MCP.COM">
<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P></FORM><HR>
</BODY>
</HTML>
LAB. ACTIVITY NO:-12
<HTML>
<HEAD>
<TITLE> JOB APPLICATION </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER"> FOR THE POST OF COMPUTER</H1>
<HR>
<FORM METHOD="POST">
<P>NAME:<INPUT TYPE=TEXT"NAME=THENAME"></P>
<P>GENDER:
<INPUT CHECKED TYPE="RADIO" NAME=THEGENDER" VALUE="MALE">MALE
<INPUT CHECKED TYPE="RADIO" NAME=THEGENDER" VALUE="FEMALE">FEMALE
</FORM>
<HR>
</BODY>
</HTML>
Solutions
1.
<html>
<head>
<title>Education details</title>
</head>
<body>
<h1 align="center" style="color:blue">EDUCATION DETAILS</h1><br><br>
<table border="1" background="gray" cellspacing="5" cellpadding="5">
<th>SNo</th>
<th>Course</th>
<th>Board/University</th>
<th>School/College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>10</td>
<td>ICSE</td>
<td>DPS</td>
<td>2008</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>ICSE</td>
<td>DPS</td>
<td>2010</td>
<td>95</td>
</tr>
</table>
</body>
</html>
2. <html>
<head>
<title>RESUME | JOHN DOE</title>
</head>
<body>
<!-- BEGIN DIV FOR OVERALL BOX -->
<div id="resume">
<!-- THIS DIV CENTERS OUR HEADING -->
<h1>John Doe</h1>
<h2>4242 Ghila Road</h2>
<h2>Tucson, AZ 85701</h2>
<br />
<!-- END CENTERING DIV -->
</div>
<h2>Profile</h2>
<p>
Desires a resident position in the Bastyr University Acupuncture and Oriental Medicine Residency Program. Able to be effective in a practice of any size.
Draw on experience with a range of patient issues, including additional work in women and children’s care. Interested in health education for homeless. Strong desire to contribute to the success of a program through an ability to initiate and maintain relationships. Creative developer and presenter of educational information.
</p>
<br />
<h2>Education</h2>
<h3>Masters of Acupuncture and Oriental Medicine,
<br />
Graduating June 2003</h3>
<p>
Bastyr University, Kenmore, WA 1999
</p>
<ul>
<li>
Completing an accredited program of coursework and supervised
practice
in Acupuncture and Oriental Medicine. Extensive exposure to issues involving
women and children.
</li>
</ul>
<h3>Research Project</h3>
<ul>
<li>
Assisted the primary investigator in a double blind, randomized controlled
trail conducted at the Bastyr Center for Natural Health that evaluated
the
effectiveness of Chinese herbs towards the control of Diabetes
Mellitus in
post-menopausal women. Co-authored the research report that has
been
submitted for publication to the Journal of Traditional Chinese
Medicine.
</li>
</ul>
<h3>Bachelor of Science, Zoology</h3>
<p>
Miami University, Oxford, OH 1991 - 1995
</p>
<ul>
<li>
Participated in a community service project to increase citizen participation
in a clean up campaign.
</li>
<li>
Served as project leader in a fund raising project sponsored by the
University
Student Council towards helping homeless youths’ return back to
school.
</li>
</ul>
<br />
<h2>Related Experience</h2>
<h3>Bastyr University, Kenmore, WA 1999-present</h3>
<p>
Teaching Assistant
</p>
<ul>
<li>
</li>
<li>
</li>
</ul>
Assists professor in the Anatomy & Physiology class.
Answers questions and demonstrate as needed.
<h3>Kenmore Youth Ministry, Kenmore, WA 2000-2001</h3>
<p>
Camp Group Leader
</p>
<ul>
<li>
</li>
<li> helping
</li>
</ul>
Participated in community youth group activities.
Developed activity programs now utilized by the youth ministry in children improve reading skills.
<h3>Franciscan Care Center Nursing Home,
<br />
Seattle, WA 1999 - 2000 </h3>
<p>
Volunteer Recreation Worker
</p>
<ul>
<li>
</li>
<li>
</li>
</ul>
Provided social support to patients by reading to them, writing letters, and visiting with them.
Formed friendships which enriched lives of patients
<!-- THIS DIV CENTERS OUR LINKS -->
<div id="bottom">
<p>
<a href="index.html">RESUME HOME</a> | <a href="#">SIMPLE RESUME</a> | <a href="resume.html">COMPLEX RESUME</a> | <a href="code.html" target="_blank">SEE HTML</a> | <a href="resume.css" target="_blank">SEE CSS</a>
</p>
</div>
<!-- END CENTERING LINKS -->
<!-- END DIV FOR OVERALL BOX -->
</div>
</body>
</html>
3. <html>
<head>
<title>Gargi's Page</title>
</head>
<body bgcolor="gray">
<font size="8">
<a href="about_us.html">ABOUT US</a>
<a href="biography.html">OUR SERVICES</a>
<a href="contact_us.html">CONTACT US</a></font>
</body>
</html>
4. <div id="login_form">
<form name="f1" method="post" action="profile.html" id="f1">
<table>
<tr>
<td class="f1_label">User Name :</td><td><input type="text" name="username" value="" />
</td>
</tr>
<tr>
<td class="f1_label">Password :</td><td><input type="password" name="password" value="" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="login" value="Log In" style="font- size:18px; " />
</td>
</tr>
</table>
</form>
</div>
5. <html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername" size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress" id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
6.
<html>
<head>
<title>Institute of Engineering</title>
</head>
<body>
<ul>
<li><a href="http://my.wm.edu">myWM</a></li>
<li><a href="http://directory.wm.edu/people/">Directory</a></li>
<li><a href="http://events.wm.edu">Events</a></li>
<li><a href="/about/visiting">Visit</a></li>
<li class="last-side-tactical"><a href="/atoz" id="wm- az">W&M A-Z</a></li>
</ul>
</nav>
<nav id="side_top_nav">
<ul>
<li ><a href="/about" id="about" title="About William & Mary">About</a></li>
<li ><a href="/academics" id="academics" title="InstituteAcademics">Academics</a></li>
<li ><a href="/admission" id="admission" title="InstituteAdmission & Aid">Admission & Aid</a></li>
<li ><a href="/research" id="research" title="InstituteResearch">Research</a></li>
<li ><a href="/campuslife" id="campus" title="InstituteCampus Life">Campus Life</a></li>
<li ><a href="/news" id="news_events" title="InstituteNews">News</a></li>
<li><a href="http://www.tribeathletics.com/" id="athletics" title="InstituteAthletics">Athletics</a></li>
<li><a href="http://www.wmalumni.com/" id="alumni" title="InstituteAlumni">Alumni</a></li>
<li><a href="/giving" id="giving" title="InstituteGiving">Giving</a></li>
</ul>
</nav>
</div>
<header id="main-header"><div id="topbar"><a class="action_left icon-font" href="#" id="menu_btn"></a><a class="mobile-header-logo" href="index.php"><img alt="William and Mary" id="top_mark" src="img/wm_wordmark_single_line_green.png"/></a><a class="action_right icon-font" href="#" id="search_btn"></a></div>
<div id="desktop_header">
<nav id="tactical_nav">
<ul>
<li>
<a href="http://my.wm.edu">myWM</a>
</li>
<li>
<a href="http://directory.wm.edu/people/">Directory</a>
</li>
<li>
<a href="http://events.wm.edu">Events</a>
</li>
<li>
<a href="/about/visiting">Visit</a>
</li>
<li>
<a href="/atoz" id="wm-az">W&M A-Z</a>
</li>
</ul>
<
</nav>
<nav id="global_nav"><ul><li><a href="/about" id="about" >About</a>
</li><li><a href="/academics" id="academics" >Academics</a>
</li><li><a href="/admission" id="admission" >Admission & Aid</a>
</li><li><a href="/research" id="research" >Research</a>
</li><li><a href="/campuslife" id="campus" >Campus life</a>
</li><li><a href="/news" id="news_events" >News</a>
</li><li><a href="http://www.tribeathletics.com/" id="athletics">Athletics</a>
</li><li><a href="http://www.wmalumni.com/" id="alumni">Alumni</a>
</li><li><a href="/giving" id="giving" >Giving</a>
</li></ul>
</nav>
</div>
<!-- end desktop_header -->
</header>
<!-- end main_header -->
<nav class="footer_col" id="audience_links">
<a href="/alumnigateway">Alumni</a>
<a href="/currentstudents">Current Students</a>
<a href="/employers">Employers</a>
<a href="/facultystaff">Faculty & Staff</a>
<a href="/parentsandfamilies">Parents & Families</a>
<a href="/friends">Friends & Neighbors</a>
</nav>
<nav class="footer_col" id="additional_links">
<a href="http://swem.wm.edu">Library</a>
<a href="/offices/hr/careers">Careers at W&M</a>
<a href="/offices/compliance/policies">Policies</a>
<a href="/about/administration/emergency">Emergency Information</a>
<a href="/aboutthissite">About this Site</a>
</nav>
<div id="contact_info">
<a href="/" class="wordmark">
<img alt="The College of William and Mary" id="footer_mark" src="/img/wm_wordmark_single_line_white.png"/>
</a>
<p>Williamsburg, VA
<br/>
<a href="/contactus" class="contact-us">Contact Us</a> All Rights Reserved ©
<span id="footercopyyear"></span>
</p>
</div>
</div>
</footer>
<div></div>
</body>
</html>
7.
<html>
<head>
<title> My First Page </title>
</head>
<body>
<UL type='A'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</UL><br>
<OL type='square'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</OL><br>
<dl>
<dt>Red</dt>
<dd>Red color has the highest wavelength.</dd>
<dt>Violet</dt>
<dd>Violet color has the shortest wavelength.</dd>
</body>
</html>
8.
<html>
<FRAMESET Rows = "30%,*" >
<Frame Src="head.html" >
<FRAMESET Cols = "25%,*">
<Frame Src="navigation.html" >
<Frame Src="content.html" >
</FRAMESET>
</FRAMESET>
</html>
9.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue" align="center">This is a Blue Heading</h1>
<p style="color:red">This is a red paragraph with inline css</p>
</body>
</html>
10.
<!DOCTYPE html>
<html>
<head>
<style> h1 {
color:blue;
font-family:verdana; font-size:300%;
}
p { color:red;
font-family:courier; font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
11.
Css
#para1 { color: red;
text-align: center; font-family:courier;
}
h1{
color:blue; font-size:200%; text-align:right;
background-color: #6495ed;
}
#para {
color: green;
text-align: center; font-size:500%;
}
p{
border:1px solid black; padding:10px; margin:30px;
background-color: #e0ffff;
}
body {
background-image:url("bird.jpeg");
}
div{
text-decoration:overline; font-size:200%;
}
Html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p id="para">This is a green paragraph.</p>
<p id="para1">This is a red paragraph.</p>
<p>This is some paragraph.</p>
<div>html is a markup language. it stands for hypertext mark up language. it is used to create web pages. html has a very simple syntax. html uses tags for formatting and for placing objects. html is interpreted by the browser. it is case-insensitive.</div>
</body>
</html>
12.
<html>
<head>
<title>
Greetings </title>
</head>
<body>
<script language="JavaScript">
firstName = prompt("Please enter your name", ""); document.write("Hello " +
firstName + ", welcome to my Web page.");
</script>
<p> This is my web page... </p>
</body>
</html>
13.
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername" size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress" id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Javascript
function validate()
{
if( document.StudentRegistration.textnames.value == "" )
{
alert( "Please provide your Name!" ); document.StudentRegistration.textnames.focus() ; return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" ); document.StudentRegistration.fathername.focus() ; return false;
}
if( document.StudentRegistration.paddress.value == "" )
{
alert( "Please provide your Postal Address!" ); document.StudentRegistration.paddress.focus() ; return false;
}
if( document.StudentRegistration.personaladdress.value == "" )
{
alert( "Please provide your Personal Address!" ); document.StudentRegistration.personaladdress.focus() ; return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" ); return false;
}
if( document.StudentRegistration.City.value == "-1" )
{
alert( "Please provide your City!" ); document.StudentRegistration.City.focus() ;
return false;
}
if( document.StudentRegistration.Course.value == "-1" )
{
alert( "Please provide your Course!" );
return false;
}
if( document.StudentRegistration.District.value == "-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value == "" || isNaN( document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." ); document.StudentRegistration.pincode.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID") document.StudentRegistration.emailid.focus() ; return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ; return false;
}
if( document.StudentRegistration.mobileno.value == "" || isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." ); document.StudentRegistration.mobileno.focus() ; return false;
}
return( true );
}
14.
<!DOCTYPE html>
<html>
<head>
<title>PHP insertion</title>
<link href="css/insert.css" rel="stylesheet">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database Using PHP.</h2>
</div>
<form action="insert.php" method="post">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label>Name:</label>
<input class="input" name="name" type="text" value="">
<label>Email:</label>
<input class="input" name="email" type="text" value="">
<label>Contact:</label>
<input class="input" name="contact" type="text" value="">
<label>Address:</label>
<textarea cols="25" name="address" rows="5"></textarea><br>
<input class="submit" name="submit" type="submit" value="Insert">
</form>
</div>
</div>
</body>
</html>
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server
$db = mysql_select_db("colleges", $connection); // Selecting Database from Server
if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL
$name = $_POST['name'];
$email = $_POST['email'];
$contact = $_POST['contact'];
$address = $_POST['address']; if($name !=''||$email !=''){
//Insert Query of SQL
$query = mysql_query("insert into students(student_name, student_email, student_contact, student_address) values ('$name', '$email', '$contact', '$address')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank. !!</p>";
}
}
mysql_close($connection); // Closing Connection with Server
?>
15.
<html>
<head>
<title>Browser Information</title>
</head>
<body>
<h1>Browser Information</h1>
<hr>
<p>
The <b>navigator</b> object contains the following information about the browser you are using.
</p>
<ul>
<script LANGUAGE="JavaScript" type="text/javascript"> document.write("<li><b>Code Name:</b> " + navigator.appCodeName); document.write("<li><b>App Name:</b> " + navigator.appName); document.write("<li><b>App Version:</b> " + navigator.appVersion); document.write("<li><b>User Agent:</b> " + navigator.userAgent); document.write("<li><b>Language:</b> " + navigator.language); document.write("<li><b>Platform:</b> " + navigator.platform);
</script>
</ul>
<hr>
</body>
</html>
16.
import java.applet.*; import java.awt.*;
public class Shapes extends Applet{ int x=300,y=100,r=50;
public void paint(Graphics g){ g.drawLine(30,300,200,10); g.drawOval(x-r,y-r,100,100); g.drawRect(400,50,200,100);
}
}
17.
<?xml-stylesheet href="classic.css"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>
ARTICLE {
font-family: serif;
background: white; color: #003
} AUTHOR {
font-size: large; margin: 1em 0
} HEADLINE {
font-size: x-large; margin-bottom: 1em
} PARA {
text-indent: 1em; text-align: justify
} INSTRUMENT {
font-style: italic
}
18.
<?xml-stylesheet href="classic.css"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>
19.
<html>
<head>
<title>PHP Form Validation</title>
</head>
<body>
<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data); return $data;
}
?>
<h2>Tutorials Point Absolute classes registration </h2>
<form method="post" action="/php/php_form_introduction.htm">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>E-mail:</td>
<td> <input type="text" name="email"></td>
</tr>
<tr>
<td>Specific Time:</td>
<td> <input type="text" name="website"></td>
</tr>
<tr>
<td>Class details:</td>
<td><textarea name="comment" rows="5" cols="40"></textarea></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<?php
echo "<h2>Your Given details are as :</h2>"; echo $name;
echo "<br>";
echo $email; echo "<br>";
echo $website; echo "<br>";
echo $comment; echo "<br>";
echo $gender;
?>
</body>
</html>
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
<BODY>
<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>
<FORM METHOD="POST">
<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P>
</FORM>
<HR>
</BODY>
</HTML>
Comments
Post a Comment