You are on page 1of 20

Practical No: 2

<!--Working with Ordered List-->


<HTML>
<HEAD>
<TITLE>ORDERED LIST</TITLE>
<BODY>
<H5>SYSTEM SOFTWARE</H5>
<OL TYPE="a">
<LI>COMPILERS</LI>
<LI>EDITORS</LI>
<LI>LINKERS</LI>
<LI>LOADERS</LI>
</OL>
</BODY>
</HTML>

<!--Working with Unordered List-->


<HTML>
<HEAD>
<TITLE>UNORDERED LIST</TITLE>
<BODY>
<H5>PROGRAMMING LANGUAGES</H5>
<UL TYPE="CIRCLE">
<LI>BASIC</LI>
<LI>COBOL</LI>
<LI>PASCAL</LI>
</UL>
</BODY>
</HTML>

<!--Working with Definition List-->


<HTML>
<HEAD>
<TITLE>DEFINITION LIST</TITLE>
<BODY>
<DL>
<DT>HTML</DT>
<DD>It stands for Hypertext Markup Language</DD>
<BR>
<DT>XML</DT>
<DD>It stands for Extensible Markup Language</DD>
<BR>
<DT>CSS</DT>
<DD>It stands for Cascading Style Sheets</DD>

</DL>
</BODY>
</HTML>
Practical No: 2

Ordered List:

Unordered List:

Definition List:
<!--Working with Nested Lists-->
<HTML>
<HEAD>
<TITLE>WORKING WITH NESTED LISTS</TITLE>
</HEAD>
<BODY>
<UL>
<LI>SYSTEM SOFTWARE</LI>
<UL TYPE="CIRCLE">
<LI>COMPILERS</LI>
<LI>EDITORS</LI>
<LI>LINKERS</LI>
<LI>LOADERS</LI>
</UL>
<LI>APPLICATION SOFTWARE</LI>
<UL TYPE="SQUARE">
<LI>PROGRAMMING LANGUAGES</LI>
<OL START="1">
<LI>LANGUAGES OF 80'S</LI>
<OL TYPE="a">
<LI>BASIC</LI>
<LI>COBOL</LI>
<LI>PASCAL</LI>
</OL>
<LI>LANGUAGES AFTER 80'S</LI>
<UL TYPE="SQUARE">
<LI>PACKAGES</LI>
<OL TYPE="a">
<LI>DBASE</LI>
<LI>FOXPRO</LI>
<LI>CLIPPERS</LI>
</OL>
<LI>FRONT END TOOLS</LI>
<OL TYPE="a">
<LI>EARLY FRONT END</LI>
<OL START="1">
<LI>FOCUS</LI>
<LI>INTEGER</LI>
<LI>INFOR MIX</LI>
</OL>
<LI>LATE FRONT END</LI>
<OL START="1">
<LI>VB</LI>
<LI>SY BASE</LI>
<LI>POWER BUILDER</LI>
</OL>
</OL>
</UL>
</OL>
</UL>
</UL>
</BODY>
</HTML>
Nested Lists:
Practical No: 5

<!--Working with Forms in HTML-->


<HTML>
<HEAD>
<TITLE>REGISTRATION FORM</TITLE>
</HEAD>
<FORM NAME="REGISTRATION" ACTION="WWW.YAHOO.COM" METHOD=GET>
<BODY>
<INPUT TYPE="IMAGE" SRC="E:\ToUcH Me NoT\Project\Shraddha 340 HTML\County
Cricket Club\HOME PAGE IMAGE-BIG BALL LOGO.gif" WIDTH="200" HEIGHT="200"
NAME="SUNSET" ALT="LOGO" ALIGN="RIGHT"/>
<LABEL><CENTER>REGISTRATION FORM</CENTER></LABEL>
<TABLE>
<TR>
<TD>NAME</TD>
<TD><INPUT TYPE="TEXT" NAME="TEXTBOX" VALUE="" SIZE="20"
MAXLENGTH="20"/></TD>
</TR>
<TR>
<TD>ADDRESS</TD>
<TD><TEXTAREA NAME="TEXT" ROWS="10"
COLS="30"></TEXTAREA></TD>
</TR>
<TR>
<TD>DATE OF BIRTH</TD>
<TD><INPUT TYPE="TEXT" NAME="TEXTBOX" VALUE="" SIZE="20"
MAXLENGTH="20"/></TD>
</TR>
<TR>
<TD>EMAIL ID</TD>
<TD><INPUT TYPE="TEXT" NAME="TEXTBOX" VALUE="" SIZE="20"
MAXLENGTH="20"/></TD>
</TR>
<TR>
<TD>LOGIN NAME</TD>
<TD><INPUT TYPE="TEXT" NAME="TEXTBOX" VALUE="" SIZE="20"
MAXLENGTH="20"/></TD>
</TR>
<TR>
<TD>PASSWORD</TD>
<TD><INPUT TYPE="PASSWORD" NAME="PASSWORD" VALUE="" SIZE="20"
MAXLENGTH="20"/></TD>
</TR>
<TR>
<TD>HOBBIES</TD>
<TD><INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">MUSIC
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">READING
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">SPORTS</TD>
</TR>
<TR>
<TD>GENDER</TD>
<TD><INPUT TYPE="RADIO" NAME="RADIO" VALUE=""
CHECKED>MALE</TD>
<TD><INPUT TYPE="RADIO" NAME="RADIO" VALUE="">FEMALE</TD>
</TR>
<TR>
<TD>FAVOURITE COLOR</TD>
<TD><SELECT NAME="COMBO" VALUE="" SIZE="1">
<OPTION>RED</OPTION>
<OPTION>YELLOW</OPTION>
<OPTION>BLACK</OPTION>
<OPTION>BLUE</OPTION>
<OPTION>GREEEN</OPTION>
</TD>
</TR>
<TR>
<TD><INPUT TYPE="SUBMIT" VALUE="SUBMIT"/></TD>
<TD><INPUT TYPE="RESET" VALUE="RESET"/></TD>
<TD><INPUT TYPE="BUTTON" VALUE="CANCEL"/></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Practical No: 5

Registration Form:
Practical No: 4

<!--Working with Frames in HTML-->


Top1.Html:

<HTML>
<HEAD>
<TITLE>NIIT</TITLE>
</HEAD>
<FRAMESET ROWS="80,*" FRAMEBORDER="NO" BORDER="0"
FRAMESPACING="0">
<FRAME SRC="TOP.HTML" NAME="TOPFRAME" SCROLLING="NO"
NORESIZE="NORESIZE" ID="TOPFRAME" TITLE="TOPFRAME" />
<FRAMESET ROWS="*" COLS="150,*" FRAMEBORDER="NO" BORDER="0"
FRAMESPACING="0">
<FRAME SRC="LEFT.HTML" NAME="LEFTFRAME" SCROLLING="NO"
NORESIZE="NORESIZE" ID="LEFTFRAME" TITLE="LEFTFRAME" />
<FRAMESET ROWS="*,80" FRAMEBORDER="NO" BORDER="0"
FRAMESPACING="0">
<FRAME SRC="MAIN.HTML" NAME="MAINFRAME" ID="MAINFRAME"
TITLE="MAINFRAME" />
<FRAME SRC="BOTTOM.HTML" NAME="BOTTOMFRAME" SCROLLING="NO"
NORESIZE="NORESIZE" ID="BOTTOMFRAME" TITLE="BOTTOMFRAME" />
</FRAMESET>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY></BODY>
</NOFRAMES>
</HTML>

Top.Html:

<HTML>
<HEAD>
<META>
<TITLE>NIIT</TITLE>
</HEAD>
<BODY>
<IMG SRC="NIIT_LOGO2.GIF" WIDTH="150" HEIGHT="63" />
<IMG SRC="TOP-BG.JPG" WIDTH="654" HEIGHT="55" />
</BODY>
</HTML>
Left.Html:

<HTML>
<HEAD>
<TITLE>NIIT</TITLE>
</HEAD>
<BODY>
<P></P>
<UL>
<LI><A HREF="F:\NOTES\IT.HTML" TARGET="MAINFRAME" CLASS="STYLE6">IT
Education For Schools </A></LI>
<LI></LI>
<LI><A HREF="F:\NOTES\EMP.HTML" TARGET="MAINFRAME"
CLASS="STYLE6">Employability Training </A></LI>
<LI></LI>
<LI><A HREF="F:\NOTES\ABOUT.HTML" TARGET="MAINFRAME"
CLASS="STYLE6">About Us</A></LI>
</UL>
</BODY>
</HTML>

Bottom.html:

<HTML>
<HEAD>
<TITLE>NIIT</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="RIGHT"><A HREF="F:\NOTES\IT.HTML" TARGET="MAINFRAME"
CLASS="STYLE6">IT Education For Schools </A>|
<A HREF="F:\NOTES\EMP.HTML" TARGET="MAINFRAME"
CLASS="STYLE6">Employability Training </A>|<A HREF="F:\NOTES\ABOUT.HTML"
TARGET="MAINFRAME" CLASS="STYLE6"> About Us</A></DIV>
</BODY>
</HTML>

Main.Html:

<HTML>
<HEAD>
<TITLE>NIIT</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

IT.Html:

<HTML>
<HEAD><TITLE>IT EDUCATION FOR SCHOOLS</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE= "24" WEIGHT= "BOLD">IT Education For Schools</FONT> </P>
<P>To cater to the IT and IT enabled learning requirements of school children, NIIT
has an Independent Business Unit, named School Learning Solutions (SLS), to focus
on the implementation of projects for Government and Private schools in India and
abroad.</P>

<P>NIIT has partnered with the State Governments of Tamil Nadu, Karnataka,
Andhra Pradesh, West Bengal, Assam, Meghalaya, Himachal Pradesh, Chhattisgarh,
Tripura, Bihar, Maharashtra and Uttar Pradesh covering about 9,000 schools to bring
cutting edge IT Education using state of art computing resources to more than
70,00,000 students across rural and urban India. We have deployed more than
40,000 computers in schools across the country. We have designed and developed
courseware and textbooks in many Indian languages</P>

<P>NIITs solutions to the State Governments have been highly appreciated and
have provided immense benefit especially to the rural students.</P>

</BODY>
</HTML>

Emp.Html:

<HTML>
<HEAD><TITLE>EMPLOYABILITY TRAINING</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE= "24" WEIGHT= "BOLD">Employability Training</FONT> </P>
<P>Bookish knowledge can only take you that far! After a while how you use your
knowledge in the real dynamic scenario is what matters. We at NIIT believe that to
compete in todays environment it is imperative that any education should be based
on Industry norms. Today employers want entry level employees to possess various
basic to complex skill sets such as the basic functional and effective communication
skills to the complex thinking and affective skills. In such a scenario, you need not
just training but also mentoring, which NIIT provides.</P>
<P> Our Value Proposition </P>
<UL>
<LI>End-to-End Solution from Sourcing to Placement </LI>
<LI>Training mapped to industry requirements Bridging the Gap between academic
education and industry needs </LI>
<LI>Active, problem based learning pedagogy to balance Knowledge, Skills &
Attitude </LI>
<LI>Right blend of ILT and eLearning to prepare Students for Continuous
Professional Development and life long learning rather than first destination </LI>
</UL>
</BODY>
</HTML>

About.Html:

<HTML>
<HEAD><TITLE>ABOUT</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE= "24" WEIGHT= "BOLD">About NIIT </FONT></P>
<P>Founded in 1981, NIIT began with a vision to bring people and computers
together. Since then, with its unique business model, which works on the synergy
between its software solutions, training and educational multimedia businesses have
thus fulfilled the massive requirements for IT talent in a world, which is moving into
an information-based economy. </P>

<P>Keeping with the emergence of various specialties/ domains in the IT market,


NIIT offers comprehensive education and training solutions in Software
Development, Networking and Information Systems Security for individuals and
organizations.</P>

<P>These solutions are powered by NIIT's revolutionary Learning Architecture based


on Collaborative Constructivism (LACC). They prepare the learners to be multi-skilled
professionals so that they are able to adequately meet the demands of an ever
growing/changing global market place.</P>

</P>
</BODY>
</HTML>
Practical No: 4

Frames in HTML:
Practical No: 6

Working with StyleSheets in HTML

<!—Working with Inline StyleSheets-->


<HTML>
<HEAD>
<TITLE>INLINE STYLE SHEETS</TITLE>
</HEAD>
<BODY>
<B><CENTER>THIS IS INLINE STYLE SHEET PRACTICALS</B>
<P ALIGN="CENTER">
<FONT COLOR="RED">THIS IS EXAMPLE OF INLINE STYLE SHEETS</FONT>
</P>
</BODY>
</HTML>

<!—Working with Internal StyleSheets-->

<HTML>
<HEAD>
<TITLE>INTERNAL STYLE SHEETS</TITLE>
<STYLE TYPE="TEXT/CSS">
.HEAD1{COLOR:RED;FONT-SIZE:18PT ;}
.HEAD2{COLOR:BLUE;FONT-WEIGHT:BOLD;}
A:LINK.RED{COLOR:RED}
A:LINK.YELLOW{COLOR:YELLOW}
A:LINK.GREEN{COLOR:GREEN}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="HEAD1">THIS IS HEADING 1</H1>
<H2 CLASS="HEAD2">THIS IS HEADING 2</H2>
<A CLASS="RED" HREF="www.yahoo.com">YAHOO!</A><BR>
<A CLASS="YELLOW" HREF="www.gmail.com">GMAIL!</A><BR>
<A CLASS="GREEN" HREF="www.rediff.com">REDIFF!</A>
</BODY>
</HTML>
Practical No: 6

Inline StyleSheet:

Internal StyleSheet:
Practical No: 6

Working with StyleSheets in HTML

Style.Html:

<!—Working with External StyleSheet-->


<HTML>
<HEAD>
<TITLE>STYLE</TITLE>
<LINK REL="STYLESHEET" HREF="STYLE.CSS" TYPE="TEXT/CSS"/>
</HEAD>
<BODY>
<H1><CENTER>STYLE SHEETS</CENTER></H1>
<P>THIS IS PARAGRAPH TAG</P><BR>
<H1>DIFFERENT APPROACHES TO STYLE SHEETS</H1>
<B>1.EXTERNAL/LINKED STYLES
2.EMBEDDED STYLE SHEETS
3.INLINE STYLE SHEETS
</B>
<BR>
<A HREF="www.yahoo.com">YAHOO!</A>
</BODY>
</HTML>

Style.CSS:

P
{
FONT-WEIGHT:BOLD;
MARGIN-LEFT:O.5IN;
}
H1
{
FONT-SIZE:20PT;
COLOR:RED;
}
B
{
FONT-WEIGHT:BOLD
}
Practical No: 6

External StyleSheet:
Practical No: 7

Form Validation using Javascript

<!—Form Validation Using Javascript-->


<HTML>
<HEAD>
<TITLE>REGISTRATION FORM</TITLE>
<script language="Javascript">
function checkname()
{
if(document.registration.name.value=="")
{
alert("Enter the Name");
document.registration.name.focus();
return false;
}
else
{
return true;
}
}
function checkemail()
{
if((document.registration.email.value=="") ||

(document.registration.email.value.indexOf('@',0)==-1) ||
(document.registration.email.value.indexOf('.',0)==-1))
{
alert("Enter Valid Email Id-Check for '@' and '.'");
document.registration.email.focus();
return false;
}
else
{
return true;
}
}

</script>

</HEAD>
<FORM NAME="registration" ACTION="WWW.YAHOO.COM" METHOD=GET>
<BODY>
<LABEL><CENTER>REGISTRATION FORM</CENTER></LABEL>
<TABLE>
<TR>
<TD>NAME</TD>
<TD><INPUT TYPE="TEXT" NAME="name" onblur="checkname();"/></TD>
</TR>
<TR>
<TD>ADDRESS</TD>
<TD><TEXTAREA NAME="TEXT" ROWS="10"
COLS="30"></TEXTAREA></TD>
</TR>
<TR>
<TD>EMAIL ID</TD>
<TD><INPUT TYPE="TEXT" NAME="email" onblur="checkemail();"/></TD>
</TR>
<TR>
<TD>HOBBIES</TD>
<TD><INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">MUSIC
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">READING
<INPUT TYPE="CHECKBOX" NAME="CHECKBOX" VALUE="">SPORTS</TD>
</TR>
<TR>
<TD>GENDER</TD>
<TD><INPUT TYPE="RADIO" NAME="RADIO" VALUE=""
CHECKED>MALE</TD>
<TD><INPUT TYPE="RADIO" NAME="RADIO" VALUE="">FEMALE</TD>
</TR>
<TR>
<TD>SELECT COUNTRY</TD>
<TD><SELECT NAME="COMBO" VALUE="" SIZE="1">
<OPTION>INDIA</OPTION>
<OPTION>U.S.A</OPTION>
<OPTION>U.K</OPTION>
<OPTION>AUSTRALIA</OPTION>
<OPTION>CHINA</OPTION>
</TD>
</TR>
<TR>
<TD><INPUT TYPE="SUBMIT" VALUE="SUBMIT"/></TD>
<TD><INPUT TYPE="RESET" VALUE="RESET"/></TD>
<TD><INPUT TYPE="BUTTON" VALUE="CANCEL"/></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Practical No: 7
Form Validation Using Javascript
Practical No: 8.3

JavaScript Code to convert Celsius to Fahrenheit

You might also like