Hypertext Markup Language

HYPERTEXT MARKUP LANGUAGE (HTML)
HTML is a language that is used to describe the structure of

a web page. A Web page has some common attributes like a
heading, paragraph text, list bullets, images, footers and a
lot more. A Web page can have a specific style of using
these attributes. In a web page, the text can be marked as
header, paragraph, list bullets, or footer by using tags.
Tags are used to mark a block of text in an HTML page. All
HTML files have an extension of .html or .htm.
What is HYPER TEXT?
Hyper Text is a type of test, which is not linear. It has

some extra features as compared with the normal text. It has
the property of linking with the one page to other page.
This type of page can be associated with the sounds, videos,
animation etc. A user can create his / her own web page with
this type of text.
How to View HTML Source?

Have you ever seen a Web page and wondered "How do they do
that?"
To find out, simply click on the VIEW option in your
browsers toolbar and select SOURCE or PAGE SOURCE. This will
open a window that shows you the actual HTML of the page.
HTML ELEMENTS: -
There are various HTML elements that can be used to

construct an HTML page. A HTML tag comprises a left angular
bracket or a less than symbol (<) followed by the name of
the tag and closed by a right angular bracket or a greater
than symbol (>). HTML elements are categorized as:
Container elements: - A container element must have a

starting and an ending tag. The end tag is identical to the
start tag except that it has a slash that precedes the text
within angular brackets. The document text is placed between
the start and the end tags. For example: <TITLE> INSTITUTE
OF ENGINEERING & MANAGEMENT </TITLE>, is a container
element.
Empty elements: - An empty element has only one tag. It does

not contain any text. For example: - <BR> is an empty
element, used to insert a line break in the document.
DOCUMENT STRUCTURE ELEMENTS: -
There are three HTML elements that form the basic document
structure of a web page. These are: -
HTML element
HEAD element
BODY element
HTML element: - The first document structure element in

every HTML document is the HTML tag. This tag indicates that
the content of a file is in HTML. This tag is mandatory. The
text and all other elements of HTML are placed within the
HTML tags <HTML> and </HTML>. HTML is a container element,
and hence has an opening and closing tag.
HEAD element: - The title of any document tells us about the

contents of the document. We can provide a title to our HTML
page by using the HEAD tag. The HEAD tag specifies that the
contents between the opening and the closing tags of these
elements are a prologue to the rest of the document. This
tag can contain a number of other tags. The TITLE tag,
placed within the HEAD tag, enables us to provide a title
for an HTML page.
<HTML>
<HEAD>
<TITLE> INSTITUTE OF ENGINEERING & MANAGEMENT </TITLE>
<HEAD>
</HTML>
Here we can see that the title of this web page is: -
“INSTITUE OF ENGINEERING & MANAGEMENT.”
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.
Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
EXAMPLES: -
1. DEFINES AN HTML DOCUMENT: -
<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>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>
<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>
<hr>
</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.
COLOR The COLOR attribute changes

the color of the text that
will appear on the screen.
The color can be set by
giving the value as #rrggbb,
a hexadecimal color value, or
it can be set by giving the
name of the color supported
by the browser.
FACE The FACE attribute sets the

typeface of the text that
will appear on the screen,
provided that the type face
is already installed in the
user’s machine. If no match
is found, the text is
displayed in the default
type, according to the
browser preference settings.
10. DEFINES THE SIZE, COLOR AND FACE OF THE ELEMENT: -
<HTML>
<BODY>
<FONT SIZE=6 COLOR=RED FACE="VERDANA">
<B> INSTITUTE OF INGINEERING & MANAGEMENT </B>
</FONT>
</BODY>
</HTML>
Output: -
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text

11. Formatting text in an HTML document: -
<html>
<body>
<p><b>INSTITUTE OF ENGINEERING & MANAGEMENT</b></p>
<p><strong>INSTITUTE OF ENGINEERING &

MANAGEMENT</strong></p>
<p><big>INSTITUTE OF ENGINEERING & MANAGEMENT</big></p>
<p><i>INSTITUTE OF ENGINEERING & MANAGEMENT</i></p>
<p><small>INSTITUTE OF ENGINEERING & MANAGEMENT</small></p>
<p><b>INSTITUTE OF ENGINEERING &

MANAGEMENT</b><sub><b>IEM</b></sub></p>
<p><b>INSTITUTE OF ENGINEERING &

MANAGEMENT</b><sup><b>IEM</b></sup></p>
</body>
</html>
Output: -
LIST ELEMENTS
HTML supports several types of the list

elements that should be included within the
body element of the document. Some of the
commonly used list items are: -
• Directory List
• Ordered List
• Unordered List
• Menu List
• Definition List
Directory List Element: -
A directory list element is used to present a list of items

containing up to 20 characters each. Items in a directory
list may be arranged in columns, typically 24 characters
wide. A directory list begins with <DIR> element immediately
followed by the <LI> element and the list item to be
displayed.
12. Directory List
<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.
13. Ordered Lists
<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>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Output: -
UNORDERED LIST ELEMENT: -
The unordered list element is used to present a list of

items, separated by white space or marked by bullets. An
unordered list starts with the <UL> element followed by the
<LI> element.
14. Unordered Lists
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Output: -
15. Nested List

<html>
<body>
<h4>A nested List:</h4>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output
MENU LIST ITEMS: -
The menu list element displays a list of items, one per

line. The menu list style is more compact than the style of
an unordered list. A menu list must begin with a <MENU>
element, immediately followed by the <LI> element.
16. Menu List
<HTML>
<BODY>
<MENU>
<LI> SAURAV GANGULY </LI>
<LI> SACHIN TENDULKAR </LI>
<LI> RAHUL DRAVID </LI>
</MENU>
</BODY>
</HTML>
OUTPUT: -
DEFINITION LIST: -
A definition list is not a list of items. This is a list of

terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-
list term starts with the <dt> tag. Each definition-list
definition starts with the <dd> tag.
17. 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
The image element is used to incorporate graphics into an

HTML document. It is an empty element. The image element has
the following attributes: -
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: -
<IMG SRC = “welcome.gif>

ALIGN The ALIGN attribute is used
to determine the vertical
alignment of the text
adjacent to the image. It can
have left right or center
values for aligning the image
towards the left, right and
center of the document
respectively.
ALT The ALT attribute is used to
specify an alternate text
that can be displayed in
place of the image. This is
required, when the user needs
to stop the display if the
images while retrieving a
document in order to make
retrieval faster.
BACKGROUND ATTRIBUTE
The BACKGROUND attribute is specified along with the <BODY>

element. This attribute is used to point to an image file
that will be tiled across the browser window, providing a
background for the document. For Example: -
<BODY BACKGROUND = “XMASTREE.GIF”>

18. Background image
<html>
<body background= "C:\Documents and
Settings\crystal\Desktop\html pages\060056B.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML

backgrounds.</p>
<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
pages\060056B.jpg"
align="top" width="100" height="100">
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
pages\060056B.jpg"
width="100" height="100">
in the text
</p>
<p>
pages\060056B.jpg"width="100" height="100">
An image before the text
</p>
<p>
An image after the text
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>
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>
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: -
21. Adjust images to different sizes.

<html>
<body>
<p>
<img src="C:\Documents and Settings\crystal\Desktop\html
pages\060056B.jpg"
</p>
<p>
pages\060056B.jpg"
</p>
<p>
pages\060056B.jpg"
</p>
<p>
You can make a picture larger or smaller changing the values
in the "height" and "width" attributes of the
img tag.
</p>
</body>
</html>
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"
</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.
23. 1st program of table: -
<html>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
24. Headings in a Table

<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Hypertext Markup Language

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Hypertext Markup Language

Hochgeladen von

Copyright:

Verfügbare Formate

HYPERTEXT MARKUP LANGUAGE (HTML)

HTML is a language that is used to describe the structure of

What is HYPER TEXT?

Hyper Text is a type of test, which is not linear. It has

How to View HTML Source?

There are various HTML elements that can be used to

Container elements: - A container element must have a

Empty elements: - An empty element has only one tag. It does

DOCUMENT STRUCTURE ELEMENTS: -

HTML element: - The first document structure element in

HEAD element: - The title of any document tells us about the

“INSTITUE OF ENGINEERING & MANAGEMENT.”

Basic HTML Tags

1. DEFINES AN HTML DOCUMENT: -

COLOR The COLOR attribute changes

FACE The FACE attribute sets the

<b> Defines bold text

<big> Defines big text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<p><b>INSTITUTE OF ENGINEERING & MANAGEMENT</b></p>

<p><strong>INSTITUTE OF ENGINEERING &

<p><big>INSTITUTE OF ENGINEERING & MANAGEMENT</big></p>

<p><i>INSTITUTE OF ENGINEERING & MANAGEMENT</i></p>

<p><small>INSTITUTE OF ENGINEERING & MANAGEMENT</small></p>

<p><b>INSTITUTE OF ENGINEERING &

<p><b>INSTITUTE OF ENGINEERING &

HTML supports several types of the list

A directory list element is used to present a list of items

12. Directory List

13. Ordered Lists

<h4>Lowercase letters list:</h4>

<h4>Roman numbers list:</h4>

<h4>Lowercase Roman numbers list:</h4>

The unordered list element is used to present a list of

14. Unordered Lists

<h4>Circle bullets list:</h4>

<h4>Square bullets list:</h4>

15. Nested List

<h4>A nested List:</h4>

The menu list element displays a list of items, one per

16. Menu List

A definition list is not a list of items. This is a list of

17. Definition List

The image element is used to incorporate graphics into an

<IMG SRC = “welcome.gif>

The BACKGROUND attribute is specified along with the <BODY>

<BODY BACKGROUND = “XMASTREE.GIF”>

<p>Both gif and jpg files can be used as HTML

<p>Note that bottom alignment is the default alignment</p>

21. Adjust images to different sizes.

23. 1st program of table: -

24. Headings in a Table

Das könnte Ihnen auch gefallen