KEMBAR78
Web Record | PDF | Html Element | Html
Scribd
Upload
40 views34 pages

Web Record

The document provides a comprehensive overview of various HTML tags and their functionalities, including formatting text, presenting and arranging content, working with images, and creating lists and tables. It also covers advanced topics such as using stylesheets, JavaScript for interactivity, and handling multimedia elements. Each section includes example code snippets to illustrate the concepts discussed.

Uploaded by

srikanthgoud9515
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
40 views34 pages

Web Record

The document provides a comprehensive overview of various HTML tags and their functionalities, including formatting text, presenting and arranging content, working with images, and creating lists and tables. It also covers advanced topics such as using stylesheets, JavaScript for interactivity, and handling multimedia elements. Each section includes example code snippets to illustrate the concepts discussed.

Uploaded by

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

1

1. Formatting Tags in HTML

<HTML>
<HEAD>
<TITLE>Formatting</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Headline 1</H1>
<H2>Headline 2</H2>
<H3>Headline 3</H3>
<H4>Headline 4</H4>
<H5>Headline 5</H5>
<H6>Headline 6</H6>
</CENTER>
<B>The text will be in bold</b>
<I>And text will be in Italic</I><BR>
<U>Under line</U><BR>
<FONT FACE="Old English Text MT" SIZE="20">Font in
Style</FONT><BR>
Here text in<BIG> very Big</BIG><BR>
(a+b)<SUP>2</SUP>=a<SUP>2</SUP>+b<SUP>2</SUP>+2ab<BR>
N<SUB>2</SUB>+3H<SUB>2</SUB>->2NH<SUB>3</SUB> ;
H<SUB>2</SUB>+Cl<SUB>2</SUB>->2HCL
<P>There is a different between Paragraph and br tags. The br element is
empty and does not enclose any text were as the Paragraph tag does enclose
the text.
</P>
<PRE>
Hai Hello"Welcome"
</PRE>
<MARQUEE DIRECTION="RIGHT">Here is a marquee!
</MARQUEE>

</BODY>
</HTML>
2

OUT PUT
3

2. Presenting and Arranging Text By Using HTML Tags

<HTML>
<HEAD>
<TITLE>Presenting And Arranging</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="LEFT">
Manager
<BR>
SlowPoke Products, Inc.
<BR>
Languid. TX
</DIV>
<P>
Dear You:
<DIV ALIGN="CENTER"STYLE="color:red; font=style: italic">
When are you going to ship my order?
</DIV>
</P>
<DIV ALIGN="RIGHT">
<P>
President
<BR>
NeedItNow, Inc.
<BR>
Speed, CO
</P>
</DIV>
</BODY>
</HTML>
4

OUT PUT
5

3. Image in HTML

<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Work with Images</H1>
<IMG SRC="Image.JPG" WIDTH="300" HEIGHT="300"
BORDER="2" ALT="Car">
</CENTER>
</BODY>
</HTML>

OUT PUT
6

4. Overlapping Images

<HTML>
<HEAD>
<TITLE>Overlapping Images</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Overlapping Images</H1>
<DIV STYLE="POSITION:ABSOLUTE; LEFT:100; TOP:60;">
<IMG SRC="Image.jpg" WIDTH="300" HEIGHT="300"
BORDER="2" ALT="Car">
</DIV>
<DIV STYLE="POSITION:ABSOLUTE; LEFT:100; TOP:60;">
<IMG SRC="Image.jpg" WIDTH="300" HEIGHT="300"
BORDER="2" ALT="Car">
</DIV>
<DIV STYLE="POSITION:ABSOLUTE; LEFT:100; TOP:60;">
<IMG SRC="Image.jpg" WIDTH="300" HEIGHT="300"
BORDER="2" ALT="Car">
</DIV>
</CENTER>
</BODY>
</HTML>
7

OUT PUT
8

5. Links in HTML
<HTML>

<HEAD>
<TITLE>LINK</TITLE>

</HEAD>

<STYLE TYPE="text/css">

A:link(color:GREEN)

A:visited(color:BLUE)

A:hover(color:YELLO)

A:active(color:RED)

</STYLE>

<BODY>

<CENTER>

<H1>SETTING HYPERLINK</H1>

Click this hyperlink to go to image<BR>

<A HREF="3 Image.html"> Click Me</A>

</CENTER>

</BODY>

</HTML>
9

OUT PUT

BEFORE CLICKED

AFTER CLICKED
10

6.Ordered and Unordered List


<HTML>

<HEAD>

<TITLE>Ordered and Unordered List</TITLE>


</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Creating an Ordered List
</H1>
Assemble Computer Requirement:
<OL TYPE="1">
<LI>ATX Cabinet</LI>
<LI>ATX SMPS</LI>
<LI>ATX Mother Board</LI>
<LI>RAM 4GB</LI>
<LI>VGA Card 2GB</LI>
<LI>I5 Processer</LI>
<LI>1TB Hard Disk</LI>
</OL>
<H1 ALIGN="CENTER">
Creating an Unordered List
</H1>
Computer Features:
<UL TYPE="CIRCLE">
<LI>Speed</LI>
<LI>Accuracy</LI>
<LI>Correctness</LI>
<LI>Accurate</LI>
<LI> Cryptograph </LI>
</UL>
</BODY>
</HTML>
11

OUT PUT
12

7.Table in HTML
<HTML>
<HEAD>
<TITLE>Time Table</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial Black"><CENTER><H1>BCA 3RD YEAR 1ST
SEMISTER TIME TABLE</CENTER></H1></FONT>
<TABLE BORDER="2" BORDERCOLOR="BLACK"
CELLPADDING="4" CELLSPACING="4">
<TR>
<TH>DAYS/TIME</TH>
<TH>9AM TO 10AM</TH>
<TH>10AM TO 11AM</TH>
<TH>11AM TO 12PM</TH>
<TH>12PM TO 1PM</TH>
<TH>1PM TO 1:30PM</TH>
<TH>1:30 TO 2:30PM</TH>
<TH>2:30 TO 3:30PM</TH>
<TH>3:30PM TO 4:30PM</TH>
</TR>

<TR>
<TD ALIGN=CENTER>MONDAY</TD>
<TD ALIGN=CENTER COLSPAN="4">JAVA/UNIX
LAB</TD>
<TD ROWSPAN="6" ALIGN=CENTER
VALIGN=MIDDLE>L<BR>U<BR>N<BR>C<BR>H</TD
>
<TD ALIGN=CENTER>IP</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>*****</TD>
</TR>

<TR>
<TD ALIGN=CENTER>TUESDAY</TD>
<TD ALIGN=CENTER>OOSD</TD>
<TD ALIGN=CENTER>IP</TD>
<TD ALIGN=CENTER>JAVA/UNIX</TD>
<TD ALIGN=CENTER>WEB</TD>
<TD COLSPAN="4" ALIGN=CENTER>WEB LAB</TD>
</TR>

<TR>
<TD ALIGN=CENTER>WEDNESDAY</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>WEB</TD>
<TD ALIGN=CENTER>IP</TD>
<TD ALIGN=CENTER>OOSD</TD>
<TD ALIGN=CENTER COLSPAN="2">PSP</TD>
13

<TD ALIGN=CENTER>*****</TD>
</TR>

<TR>
<TD ALIGN=CENTER>THURSDAY</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>WEB</TD>
<TD ALIGN=CENTER>JAVA</TD>
<TD ALIGN=CENTER>OOSD</TD>
<TD ALIGN=CENTER COLSPAN="4">WEB LAB</TD>
</TR>

<TR>
<TD ALIGN=CENTER>FRIDAY</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>OOSD</TD>
<TD ALIGN=CENTER>IP</TD>
<TD ALIGN=CENTER>WEB</TD>
<TD ALIGN=CENTER COLSPAN="4">JAVA/UNIX
LAB</TD>
</TR>

<TR>
<TD ALIGN=CENTER>SATURDAY</TD>
<TD ALIGN=CENTER COLSPAN="4">SEMINAR</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>*****</TD>
<TD ALIGN=CENTER>*****</TD>
</TABLE>

</BODY>
</HTML>
14

OUT PUT
15

8.Frame in HTML
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>

<FRAMESET COLS="30%,70%">
<NOFRAMES>Your Browser does not support frames...</NOFRAMES>
<FRAME SRC="5 Ordered and Unordered List.html">
<FRAMESET ROWS="25%,25%,50%">
<FRAME SRC="2 Presenting And Arranging.html">
<FRAME SRC="6 Tables.html">
<FRAME SRC="3.1 DIVIMAGE.html">
</FRAMESET>
</FRAMESET>
</HTML>

OUT PUT
16

9.Multimedia in HTML
<HTML>
<HEAD>
<TITLE>Multimedia</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
Playing Sound
</H1>
<EMBED SRC="Support/Audio.wma" WIDTH="200"
HEIGHT="100" LOOP="INFINITE">
</EMBED>
<NOEMBED>
This Browser does not support Multimedia.
</NOEMBED>
</CENTER>
</BODY>
</HTML>
OUT PUT
17

10.Inline Style Sheet in HTML


<HTML>
<HEAD>
<TITLE>Style Differences</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Style Differences</H1>
</CENTER>
<SPAN STYLE="letter-spacing: 20px">letter-spacing:
20px</SPAN><BR>
vertical-align:<SPAN STYLE="vertical-align:
super">super</SPAN><BR>
<SPAN STYLE="text-decoration: underline">text-decoration:
underline</SPAN><BR>
<SPAN STYLE="text-indent: 20px">text-indent:
20px</SPAN><BR>
<SPAN STYLE="text-decoration: overline">text-decoration:
overline</SPAN>
</BODY>
</HTML>

OUT PUT
18

11. External Style Sheet

BODY {background-color: yellow; font-family: Arial}


A:link {color: blue}
A:visited {color: red}
A:hover{color: green}
A:active{color: cyan}
P {font-style: italic}

Save it as .CSS Extension

<HTML>
<HEAD>
<TITLE>External StyleSheet</TITLE>
<LINK REL="Stylesheet" HREF="Support\external.css">
</HEAD>
<BODY>
<CENTER>
<H1>External StyleSheet</H1>
<P>Text undr Paragraph</P><BR>
<A HREF="3.1 DIVIMAGE.HTML">Hyperlink</A>
<CENTER>
</BODY>
</HTML>
OUT PUT
19

12. Embedded Style Sheet

<HTML>
<HEAD>
<TITLE>Embedded StyleSheet</TITLE>
<STYLE TYPE="text/css">
BODY {background: white; color: black}
A:link{color: blue}
A:visited{color: red}
A:hover{color: green}
A:active{color: cyan}
P{font-style: italic}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<H1>Embedded StyleSheet</H1>
<P>Text undr Paragraph</P><BR>
<A HREF="3.1
DIVIMAGE.HTML">Hyperlink</A>
</CENTER>
</BODY>
</HTML>

OUT PUT
20

13. Java Script


<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE= "JavaScript">
var factorial = 1
for(var loopIndex = 1;loopIndex <= 10; loopIndex++)
{
factorial = factorial * loopIndex
document.writeln(loopIndex + "! =" + factorial +
"<BR>")
}
</SCRIPT>

<NOSCRIPT>This Browser does not Support Java Script</NOSCRIPT>

<CENTER>
<H1>Using The For Statement</H1>
</CENTER>
</BODY>
</HTML>
OUT PUT
21

14. Forms in HTML


<HTML>
<HEAD>
<TITLE>Forms</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function displayMessege()
{
document.form1.textfield.value="Hello From HTML"
}
function ClearMessege()
{
document.form1.textfield.value=" "
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1> Creating HTML Forms</H1>
<FORM Name="form1">
<INPUT TYPE="TEXTBOX" NAME="textfield"
SIZE="25">
<BR>
<BR>
<INPUT TYPE="BUTTON" VALUE="Display Messege"
onClick="displayMessege()">
<INPUT TYPE="BUTTON" VALUE="Clear Messege"
onClick="ClearMessege()">
</FORM>
<CENTER>
</BODY>
</HTML>
OUT PUT
22

15. Alert Dialog Box in HTML


<HTML>
<HEAD>
<TITLE>Alert Dialog Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
if(location.href !="3.1 DivIMAGE.HTML")
{
window.alert("Hey! You Copied my Page without
Permission")
}
else
{
document.writeln("Welcome to My Web Page")
}
</SCRIPT>
</BODY>
</HTML>
OUT PUT
23

16. Confirmation Dialog Box in HTML

<HTML>
<HEAD>
<TITLE>Confirmation Dialog Box</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Using A Confirmation Dialog Box</H1>
<SCRIPT LANGUAGE="JavaScript">
if(confirm(
"Your total comes to $34.23. Click ok to Complete the
order.")
){
document.write("<BR> Thanks for Purchase.")
}
else
{
document.write("<BR>Would you like to order
something else?")
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
OUT PUT
24

17. Prompt Dialog Box in HTML

<HTML>
<HEAD>
<TITLE>Prompt Dialog Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var text = prompt("Enter the text you want in this page.")
if (text == "")
{
alert("You didn't enter anyting.")
}
else
{
document.writeln("<CENTER><H1>" + text +
"</H1></CENTER>")
}
</SCRIPT>
</BODY>
</HTML>

OUT PUT
25

18. History Object in HTML

<HTML>
<HEAD>
<TITLE>History Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goBack()
{
window.history.back()
}
function goForward()
{
window.history.forward()
}
function goBackTwo()
{
window.history.go(-2)
}
function goFarwardTwo()
{
window.history.go(2)
}

</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>
Browser is using the history object
</H1>
<FORM>
<INPUT TYPE="BUTTON" Value="< Back One Page"
onClick="goBack()">
<INPUT TYPE="BUTTON" Value="Forward One page"
onClick="goForward()">
<BR>
<BR>
<INPUT TYPE="BUTTON" Value="<<Back Two Page "
onClick="goBackTwo()">
<INPUT TYPE="BUTTON" Value="Farward Two Page"
onClick="goFarwardTwo()">
</FORM>
</CENTER>
</BODY>
</HTML>
26

OUT PUT
27

19. Dynamic Style in HTML


<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1 onmouseover="this.style.color='red';"
onmouseout="this.style.color='black';">
Turn me red with the mouse.
</H1>
</BODY>
</HTML>
OUT PUT
28

20. Fly Web Page in HTML


<HTML>
<HEAD>
<TITLE>Using Dynamic Styles</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Using Dynamic Styles.</H1>
<SPAN onmouseover="this.style.fontSize = '48'">
This text gets bigger when you move the mouse over it!
</SPAN>
</CENTER>
</BODY>
</HTML>
OUT PUT
29

21. MSHTML in HTML


<HTML>
<HEAD>
<TITLE>DATABASE</TITLE>
</HEAD>
<BODY>

Employee Name:<SPAN ID="ENAME">ABC</SPAN><BR>


GENDER:<SPAN ID="GENDER">MALE</SPAN><BR>
DOB:<SPAN ID="DOB">01-01-1994</SPAN><BR>
DESIGNATION:<SPAN ID="DESIGN">CEO</SPAN><BR>

Employee Name:<SPAN ID="ENAME">LMN</SPAN><BR>


GENDER:<SPAN ID="GENDER">MALE</SPAN><BR>
DOB:<SPAN ID="DOB">01-01-1996</SPAN><BR>
DESIGNATION:<SPAN ID="DESIGN">HR</SPAN><BR>

Employee Name:<SPAN ID="ENAME">XYZ</SPAN><BR>


GENDER:<SPAN ID="GENDER">MALE</SPAN><BR>
DOB:<SPAN ID="DOB">01-01-1992</SPAN><BR>
DESIGNATION:<SPAN ID="DESIGN">CHAIRMAN</SPAN><BR>

</BODY>
</HTML>
OUT PUT
30

<HTML>
<HEAD>
<TITLE>DATAFORM</TITLE>
</HEAD>
<BODY>
<OBJECT ID="DSO" DATA="SUPPORT\DATABASE.HTM"
HEIGHT=0 WIDTH=0>
</OBJECT>
<P>
NAME:<INPUT TYPE="TEXT" DATASRC="#DSO"
DATAFLD="ENAME" SIZE="25">
<P>
GENDER:<INPUT TYPE="TEXT" DATASRC="#DSO"
DATAFLD="GENDER" SIZE="25">
<P>
DOB:<INPUT TYPE="TEXT" DATASRC="#DSO"
DATAFLD="DOB" SIZE="25">
<P>
DESIGNATION:<INPUT TYPE="TEXT" DATASRC="#DSO"
DATAFLD="DESIGN" SIZE="25">
<P>
<BUTTON ONCLICK="DSO.recordset.MoveFirst()">
&lt;&lt;</BUTTON>
<BUTTON ONCLICK="if (!DSO.recordset.BOF)
DSO.recordset.MovePrevious() ">&lt;</BUTTON>
<BUTTON ONCLICK="if (!DSO.recordset.EOF)
DSO.recordset.MoveNext() ">&gt;</BUTTON>
<BUTTON ONCLICK="DSO.recordset.MoveLast()">
&gt;&gt;</BUTTON>
</BODY>
</HTML>
OUT PUT
31

22. Tabular Data Control in HTML

EMPLOYEENAME:STRING;GENDER:STRING;DOB:DATE;DESIGNATION:STRING
ABC;MALE;01-01-1994;CEO
LMN;MALE;01-01-1996;HR
XYZ;MALE;01-01-1992;CHAIRMAN

Save it as Text File.

<HTML>
<HEAD>
<TITLE>Tabular Data Control</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Using the Tabular Data Control</H1>
<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-
0080C7055A83"
ID="DSO" WIDTH="0" HEIGHT="0">
<PARAM NAME="DataURL" VALUE="Support\Database.txt">
<PARAM NAME="FieldDelim" VALUE=";">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="Sort" VALUE="10">
</OBJECT>
<TABLE DATASRC="#DSO" CELLSPACING="10">
<THEAD>
<TR>
<TH>EMPLOYEE NAME</TH>
<TH>GENDER</TH>
<TH>DOB</TH>
<TH>DESIGNATION</TH>
</TR>
</THEAD>

<TBODY>
<TR>
<TD><SPAN DATAFLD= "EMPLOYEENAME"
DATAFORMATAS= "HTML"></SPAN></TD>
<TD><SPAN
DATAFLD="GENDER"DATAFORMATAS="HTML">
</SPAN></TD>
<TD><SPAN DATAFLD="DOB"
DATAFORMATAS="HTML"></SPAN> </TD>
<TD><SPAN DATAFLD= "DESIGNATION"
DATAFORMATAS= "HTML"></SPAN></TD>
</THEAD>
</TABLE>
</CENTER>
</BODY>
</HTML>
32

OUT PUT
33

23. Data Type Definition in XML


<?xml version="1.0"?>
<!DOCTYPE DOCUMENT [
<!ELEMENT P (#PCDATA)>
<!ELEMENT DOCUMENT (TITLE,SUBTITLE,PREFACE?,(SECTION |
PART)+)>
<!ELEMENT TITLE (TITLE2)*>
<!ELEMENT TITLE2 (#PCDATA)>
<!ELEMENT SUBTITLE (P)+>
<!ELEMENT PREFACE (HEADING, P+)+>
<!ELEMENT PART (HEADING.CHAPTER+)>
<!ELEMENT SECTION (HEADING, P+)>
<!ELEMENT HEADING (#PCDATA)>
<!ELEMENT CHAPTER (CHAPTERTITLE, P+)>
<!ELEMENT CHAPTERTITLE (#PCDATA)>
]>
<DOCUMENT>
<TITLE>
<TITLE2>
MY NOVEL
</TITLE2>
</TITLE>
<PART>
<HEADING>Ice Cream</HEADING>
<CHAPTER>
<P>I enjoy fishing.</P>
<P>I enjoy travel.</P>
<P>How about you?</P>
</CHAPTER>
</PART>
</DOCUMENT>
OUT PUT
34

24. XML Schema


<?xml version="1.0"?>
<TASKFORCE XMLS="x-scheme:schema1.xml">
<EMPLOYEE>George Patton</EMPLOYEE>
<EMPLOYEE>Douglas MacArthur</EMPLOYEE>
<DESCRIPTION>XML Programing Taskforce</DESCRIPTION>
</TASKFORCE>

OUT PUT

You might also like