Professional Documents
Culture Documents
There are three HTML elements that form the basic document
structure of a web page. These are: -
HTML element
HEAD element
BODY element
Here we can see that the title of this web page is: -
BODY element: - Other than the HTML and the HEAD tags, all
other tags and the entire text of the HTML page is placed
within the BODY tag. This tag, as the name specifies, forms
the body of an HTML page.
EXAMPLES: -
<html>
<body>
The content of the body element is displayed in your
browser.
</body>
</html>
Output
2. DEFINES PARAGRAPH: -
a.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
Output
B.
<html>
<body>
<p>
This paragraph contains a lot of lines in the source code,
but the browser ignores it.</p>
<p>
This paragraph contains a lot of spaces in the source code,
but the browser ignores it. </p>
<p>
The number of lines in a paragraph depends on the size of
your browser window. If you resize the browser window, the
number of lines in this paragraph will change. </p>
</body>
</html>
Output
3. INSERT LINE BREAK: -
<html>
<body>
<p>To break<br>lines<br>in a<br>paragraph,<br>use the br
tag.</p>
</body
</html>
Output
4. DEFINES HEADER1 TO HEADER6: -
<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>
<p>Use heading tags only for headings. Don't use them just
to make something bold. Use other tags for that.</p>
</body>
</html>
Output
5. DEFINES ALLIGNMENT: - (CENTER ALLIGNMENT)
<html>
<body>
<h1 align="center">IEM</h1>
</body>
</html>
Output
5.1. DEFINES ALLIGNMENT: - (LEFT ALLIGNMENT)
<html>
<body>
<h1 align="left">IEM</h1>
</body>
</html>
Output
5.2. DEFINES ALLIGNMENT: - (RIGHT ALLIGNMENT)
<html>
<body>
<h1 align="right">IEM</h1>
</body>
</html>
Output
HORIZONTAL RULE ELEMENT
Attribute Description
SIZE The SIZE attribute determines
the thickness of the
horizontal rule. The value is
given as a pixel value. For
Example: -
<HR SIZE = 3> will display a
rule or line with a thickness
of 3 pixels.
WIDTH The default horizontal rule
is always as wide as the
page. With the WIDTH
attribute, the user can set
an exact width in pixels or a
relative width as a
percentage of the document
width. For Example: -
<HR WIDTH = 50%> will display
the horizontal rule or line
with a width that is 50% of
the page width.
ALIGN If the horizontal rule or
line size is not equal to the
width of the page, then the
alignment of the rule or line
can be set. It can be left,
right or center.
NOSHADE If a solid bar is required,
the NOSHADE attribute
specifies that the horizontal
rule should not be shaded at
all.
COLOR The COLOR attribute is used
to specify the color of the
horizontal rule. It can be
set in the following way: -
<HR COLOR = NAME#rrggbb>
6. DEFINES HORIZONTAL RULE OR LINE: -
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
Output
6.1. DEFINES HORIZONTAL RULE OR LINE: - (SIZE, WIDTH, ALIGN,
NOSHADE, COLOR)
<HTML>
<BODY>
<FONT SIZE=7 COLOR=GREEN FACE="TIMES NEW ROMAN">
<CENTER><B>I LOVE MY INDIA</B></CENTER>
</FONT>
<HR WIDTH=50% SIZE=10 NOSHADE ALIGN=CENTER COLOR=BLACK>
</BODY>
</HTML>
Output: -
7. DEFINES BACKGROUND COLOUR: -
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
Output
8. SCROLLING A TEXT: (Uni directional)
<html>
<body>
<MARQUEE> <b>INSTITUTE OF ENGINEERING & MANAGEMENT
</b></MARQUEE>
</body>
</html>
Output
8.1 SCROLLING A TEXT: (In Both Directions)
<html>
<body>
<MARQUEE BEHAVIOUR=ALTERNATE> <b>INSTITUTE OF ENGINEERING &
MANAGEMENT </b></MARQUEE>
</body>
</html>
Output: -
FONT ELEMENT
Attribute Description
SIZE The Size attribute is
represented as <FONT SIZE =
VALUE>. The valid value
ranges from 1 – 7 and default
size is 3.
<HTML>
<BODY>
<FONT SIZE=6 COLOR=RED FACE="VERDANA">
<B> INSTITUTE OF INGINEERING & MANAGEMENT </B>
</FONT>
</BODY>
</HTML>
Output: -
Text Formatting Tags
Tag Description
<html>
<body>
</body>
</html>
Output: -
LIST ELEMENTS
• Directory List
• Ordered List
• Unordered List
• Menu List
• Definition List
Directory List Element: -
<HTML>
<BODY>
<DIR>
<LI>A_H</LI><LI>I_M</LI><LI>M_R</LI><LI>S_Z</LI>
</DIR>
</BODY>
</HTML>
OUTPUT: -
ORDERED LIST: -
The ordered list element is used to present a numbered list
of items in the order of importance or sorted by sequence.
An ordered list must begin with the <OL> element followed by
the <LI> element.
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Output
MENU LIST ITEMS: -
<HTML>
<BODY>
<MENU>
<LI> SAURAV GANGULY </LI>
<LI> SACHIN TENDULKAR </LI>
<LI> RAHUL DRAVID </LI>
</MENU>
</BODY>
</HTML>
OUTPUT: -
DEFINITION LIST: -
<HTML>
<BODY>
<dl>
<dt>DBMS</dt>
<dd>Database Management System</dd>
<dt>SQL</dt>
<dd>Structured Query Language</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
</BODY>
</HTML>
OUTPUT: -
The Image Tag and the SRC Attribute
Attributes Description
SRC The SRC attribute of the
<IMG> element is used to
specify the image to be
inserted in the page. SRC is
a mandatory attribute. For
Example: -
BACKGROUND ATTRIBUTE
<html>
<body background= "C:\Documents and
Settings\crystal\Desktop\html pages\060056B.jpg">
<h3>Look: A background image!</h3>
<p>If the image is smaller than the page, the image will
repeat itself.</p>
</body>
</html>
OUTPUT: -
19. Aligning images
<html>
<body>
<p>
An image
<img src = "C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"align="bottom" width="100" height="100">
in the text
</p>
<p>
An image
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"align="middle" width="100" height="100">
in the text
</p>
<p>
An image
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"
align="top" width="100" height="100">
in the text
</p>
<p>
An image
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"
width="100" height="100">
in the text
</p>
<p>
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"width="100" height="100">
An image before the text
</p>
<p>
An image after the text
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"width="100" height="100">
</p>
</body>
</html>
OUTPUT: -
20. Let an image float to the left or right of a paragraph.
<html>
<body>
<p>
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"
align ="left" width="48" height="48">
A paragraph with an image. The align attribute of the image
is set to "left". The image will float to the left of this
text.
</p>
<p>
<img src ="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"
align ="right" width="48" height="48">
A paragraph with an image. The align attribute of the image
is set to "right". The image will float to the right of this
text.
</p>
</body>
</html>
OUTPUT: -
OUTPUT: -
22. Hyperlink of an image
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="C:\Documents and
Settings\Administrator\My Documents\Ocean Wave.jpg"
width="100" height="100">
</a>
</p>
</body>
</html>
OUTPUT: -
Tables
Tables are defined with the <table> tag. A table is divided
into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag). The letters td stands for
"table data," which is the content of a data cell. A data
cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
<html>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>