Sei sulla pagina 1di 25

4.

Hyper Text Markup Language


Hyper Text Markup Language
4.0 Introduction
1. HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages.
2. HTML was created by Berners-Lee at European laboratory.
3. It is a text file containing small markup tags in which instructions
are given to the browser about how to display the page. It is most
widely used to create web pages.
4. It is a text file containing small tags and HTML file must have an
.htm or .html extension. An HTML file can be created using any text
editor like notepad in windows or vi in linux.
5. To start creating an html webpage, click on start-programsaccessories-notepad. Save the notepad file with appropriate name
and .html extension compulsory.
6. Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists. Now, HTML
is being widely used to format web pages with the help of different
tags available in HTML language.
7. Hypertext is an ordinary text with formatting facilities
8. Markup is the process of taking ordinary text and adding the some
extra features.
9. Thus html document consist of html elements that defines a
document.
Advantages: 1. Html is easy to use, learn, implement and flexible alternative to
traditional software programming.
2. Html contains powerful formatting facilities
3. Html documents are device and platform independent.
4. You can travel to any html document required because of hyper linking
facility by which navigation is possible.
5. You can update existing html pages or source code easily without
changing the whole document.
6. No expensive license software or hardware is required.
Disadvantages: 1. Html doesnt offers programming languages and capability
2. Some special types of software like scripting languages like Vbscript or
JavaScript are required for event handling and validations.
3. It is easy to write bad html contents
4. Complex html code is hard to read and understand. This increase code
complexity. So building complex pages is very time consuming.
5. Cant detect errors easily since no debugging tools are provided.
Creating, Saving and Viewing HTML Documents:Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 1

4. Hyper Text Markup Language


In order to create and save the page we have to perform the following
steps
1. Open text editor like Notepad in Windows or vi in Linux.
2. Type your HTML program in the text editor.
3. Save
the
document
with
extension
.htm/.html
like
test1.htm/test1.html
To view the HTML document perform the following steps
1. Open any web browser like Internet Explorer, Firefox, and Chrome
etc.
2. Then open the HTML document in that browser using proper menu
function.
4.1 HTML Elements
HTML Tags: - As told earlier, HTML is a markup language and makes use
of various tags to format the content.
1. These tags are enclosed within angle braces <Tag Name>.
2. Html tags normally comes in pairs i.e. most of the tags have their
corresponding closing tags. For example an opening tag<html>
has its closing </html> tag and an opening<body> tag has its
closing </body> tag etc.
3. Html tags are not case sensitive.
4. Most of the tags have its closing tags.
5. Syntax<tagname>Element Content </tagname>
OR
<tagname attribute=value> Element Content </tagname>
OR
<tagname>
HTML Attributes: -Tags can have attributes.
1. Attribute provide additional information about the html element on
your page.
2. An attribute is included inside the start tag.
3. Anattribute always come in name\value pair like name=value.
4. Syntax:<tagname attributename=value>
5. For e.g.
<img src=C:\a.jpg>
Here src is the attribute name for image tag. Normally its value is
specified in quotes.
4.3 Minimum Html Document Structure: <Html>
<Head>
<Title>
Heading Section
Title of the Page
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 2

Body Section

4. Hyper Text Markup Language


</Title>
</Head>
<Body>
This is my first web page
</Body>
</Html>
1. Here the first tag above is the <Html> tag. This tag tells the
browser that this is start of an Html document. The last tag in your
document is </html> tag. It tells the browser that this is the end of
the html document.
2. The text between the <head> and </head> is header information.
The header information is not displayed in the browser window.
3. The text between <title> and </title> tag is the text which is
displayed at the title to the browsers caption.
4. The text between the <body> and </body> tag is the text that will
be displayed in your browser.
4.4 Basic HTML Tags
1. <Html>: - this tag indentifies a document as an html document. All
html document should start with <html> tag and end with </html> tag.
Syntax:
<Html>

</html>
For example
<Html>
<Body>
This is html file
</Body>
</Html>

2. <Head>: - The <head> tag generally contains general information


about the document. The <head> tag defines an html document header.
The content of the head is not the part of the document.
Syntax:
<Html>
<Head>

</Head>
</html>
For example: Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 3

4. Hyper Text Markup Language


<Html>
<Head>
<Title> Welcome to First Webpage </Tile>
<Body>
This is html file
</Body>
</Html>
3. <Title>: - The title of a document is specified by the <Title> tag,
which should be placed in the document <Head> tag. Each document can
have only one title which should identify the document content in a
general way.
For example: <Html>
<Head>
<Title>Welcome</Title>
</Head>
<Body>
This is html file
</Body>
</html>
4. <Script>: -Script is program code which is enclosed within a document,
scripting code when executed can interact with the document. Java script
and vb script are the scripting languages supported by html.
For example: <Html>
<Head>
<script language=vbscript>Script </script>
</Head>
<Body>
..
..
</body>
</html>
5. <Body>: -The <body> tag defines the body of the html document.
The body element contains all the contents of the html document. Various
markup elements are allowed within the body that indicate headings,
paragraphs, lists hyperlinks, images and so on.
Syntax: <Body>
..
..
</Body>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 4

4. Hyper Text Markup Language


Following are the attributes of the <body> tag: a. Background: - This attribute allows you to specify an image file to
use as a background. Image is displayed as a watermark that is
displayed behind the displayed text and graphics
For E.g.: <body background=C:\a.gif>
..
..
</body>
b. Bgcolor:- This attribute allows you to specify the background color.
The color is specified with RGB color value, where RR, GG, BB are
the hexadecimal color codes for the red, green and blue levels
ranging from 0 to 255. That is 00 to FF. The color 000000 is black
and FFFFFF is white.
For E.g.: <body bgcolor=#rrggbb>
Text in the body
</body>
c. Text: - This attribute allows you to specify the text color to the
specified color RGB color value.
For E.g.: <body text=#rrggbb>
Text in the body
</body>
d. Link: - This attribute allows you to specify the text color of the
hypertext anchors to the specified color RGB color value.
For E.g.: <body link=#rrggbb>
Text in the body
</body>
e. Vlink: - This attribute allows you to specify the text color of the
visited hypertext anchors to the specified color RGB color value.
For E.g.: <body vlink=#rrggbb>
Text in the body
</body>
6. <P>: - This tag defines a paragraph which can contain align attribute for
the alignment of the text within paragraph.
For example: <p align=right>this is a paragraph </p>

Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 5

4. Hyper Text Markup Language


7. <Address>:- this tag is used for address information, signatures,
statements of authorship. It is placed at the bottom (or top) of a
document. Most browsers render the address in italics, right justified or
indented.
For example:<p>
<address>Web Designer<br>Tel: - (0231)2644141</address>
</p>
9. <Br>: - This tag inserts a single line break. <br> tag is used when you
want to end a line but dont want to start a new paragraph. The <br> tag
is an empty tag. It has no closing tag.
For example: <p>
This is a <br> line break
</p>
10. <Hr>:- This tag inserts a horizontal line which is of width of the
browser. It allows you to differentiate sections of your document. Size and
width are the attributes that will let you to change the thickness and the
percentage if the window covered by it.
For example: <html>
<body>
<h1>this is my first page</h1>
<hr size=5 width=20%>
</body>
</html>
11. < ! -- Comment ---> you can use comments to explain your code,
which can help you when you edit the source code later. The browser
ignores the comment.
For example: <html>
<body>
< ! This is comment -->
</body>
</html>
12. Headings :- <h1> to <h6> defines heading 1 to heading 6. <h1>
tag defines the largest heading and <h6> defines the smallest heading.
For example: <html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 6

4. Hyper Text Markup Language


<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
</body>
</html>

3</h3>
4</h4>
5</h5>
6</h6>

13. <Pre>: -This tag preformats the text. The text appearing between
<pre> and </pre> is displayed in monospace form. Using this tag we can
position the characters
For example: <html>
<body>
<pre>
Hello
Welcome to
Webpage
</pre>
</body>
</html>
14. <Font>: - To have different sizes and colors to the text rather than
using headings tags, we can use <font> tag. Size, face and color are the
attributes of the <font> tag.
For example: <html>
<body>
<pre>
<font
size=5
face=verdana
color=#AA00FF>
This
is
an
example
of
font
tag
</font>
</pre>
</body>
</html>
15. <Marquee>: - The marquee tag is used to create scrolling text. The
attribute of the marquee tag is direction which defines the direction of the
text. The default direction is right to left.
For example: <html>
<body>
<marquee>
Scrolling from right to left..
</marquee>
</body>
</html>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 7

4. Hyper Text Markup Language


OR
<html>
<body>
<marquee direction =left>
Scrolling from left to right..
</marquee>
</body>
</html>
16. <EM>: - This tag is a character formatting tag. This tag gives
emphasis effect to the text. It is typically displayed in italics.
For example: <html>
<body>
<Em> Emphasized Text </em>
</body>
</html>
17. <Strong>: - This tag is a character formatting tag. This tag gives
bold effect to the text. For example: <html>
<body>
<Em> Emphasized Text </em>
</body>
</html>
18. <B>: - This tag is a character formatting tag. This tag gives bold
effect to the text.
For example: <html>
<body>
<b> Bold Text </B>
</body>
</html>
19. <I>: - This tag is a character formatting tag. This tag gives italicize
effect to the text.
For example: <html>
<body>
<i> Italic Text </i>
</body>
</html>
20. <U>: - This tag is a character formatting tag.
underlines effect to the text.
For example: -

This tag gives

Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 8

4. Hyper Text Markup Language


<html>
<body>
<u> Underlined Text </u>
</body>
</html>
21. <Sub>:- It is a subscript tag. The text enclosed in <sub> and </sub>
is displayed in subscript form. This is useful in representation of
mathematical formulas or chemical equations.
For example: <html>
<body>
H<sub>2</sub>SO<sub>4</sub>
</body>
</html>
22. <Sup>: -It is a superscript tag. The text enclosed in <sup> and
</sup> is displayed in superscript form. This is useful in representation of
mathematical formulas or chemical equations.
For example: <html>
<body>
Volume
of
Sphere
=
(4/3)
(3.14)
r<sup>3</sup>
</body>
</html>
23. Hyperlinks: -To create a hyperlink in html <a> and </a> is used.
This tag is used to mark a text or image which gives a hyper textual
relationship to other documents. The text between <a> and </a> can act
as start or destination to link. The HREF attribute marks the anchor as the
start of a link to another document or resource or to a particular place in
another document.
For example: - Click
www.google.com and

Here

<html>
<body>
<a

is

hypertext

link

to

the

website

href=http://www.google.com>

Click

Here </a>
</body>
</html>
For example: - In the example below, image1.gif is a hypertext link to the
image file located in the same directory.
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 9

4. Hyper Text Markup Language


<html>
<body>
<a
scr=image1.gif></a>
</body>
</html>

href=image1.gif><img

For example: - In the example below, Click Here is link to a destination


specified.
<html>
<body>
<a href=d:\soft\a.html>Click Here</a>
</body>
</html>
For example: - In the example below, by which you can send email to a
specified user with mail to feature.
<html>
<body>
<a

href=mailto:emailid@host>Mail

me</a>
</body>
</html>
24. List in Html: HTML supports various types of list such as ordered list,
unordered list and definition list. Different list tags are: a.
b.
c.
d.
e.
f.

<OL> Defines ordered list


<UL> Defines unordered list
<LI> Defines list item
<DL> Defines definition list
<DT> Defines definition term
<DD> Defines definition description

Unordered List: - An unordered list is a list of items. The list items are
marked with bullets. To make an unnumbered bulleted list use <ul> and
</ul> tag. To insert a list item in unordered list use <li> and </li> tag.
Circle, square, disc are the value to type attributes of <ul> tag.
For example: <html>
<body>
<H4> Unordered List </H4>
<ul type =circle>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 10

4. Hyper Text Markup Language


<li>Honda</li>
<li>Hundai</li>
<li>Suzuki</li>
<li>Wolkswagan</li>
<li>Tata</li>
</ul>
</body>
</html>
Ordered List: - An ordered list is a list of items. The list items are marked
with bullets. To make a numbered bulleted list use <ol> and </ol> tag. To
insert an list item in unordered list use <li> and </li> tag. An ordered list
is also called as numbered list.
You can specify style for the numbering for the list items by
giving type attribute in <ol> tag which can take values I for uppercase
roman letter, i for lowercase roman letter, A for uppercase letter, a
for lower case letter.
You can also specify start attribute to start the list from the
specific number.
For example: <html>
<body>
<H4> Ordered List </H4>
<ol type =i>
<li>Wipro</li>
<li>Infosys</li>
<li>Persistent</li>
<li>Capgemini</li>
<li>TCS</li>
</ol>
</body>
</html>
And
For example: <html>
<body>
<H4> Ordered List </H4>
<ol start =6>
<li>Coca Cola</li>
<li>Thumps Up</li>
<li>Sprite</li>
<li>Frooti</li>
<li>Mirinda</li>
</ol>
</body>
</html>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 11

4. Hyper Text Markup Language


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 <dl> tag. Thus
definition list unusually consist of alternating a definition term with <dt>
tag and a definition description with <dd> tag.
For example: <html>
<body>
<H4> this is a definition List</H4>
<dl>
<dt>VB</dt>
<dd>Programming Language</dd>
<dt>Html</dt>
<dd>Markup Language</dd>
<dt>Java Script</dt>
<dd>Scripting Language</dd>
</dl>
</body>
</html>
24. Tables in Html: - The <table> tag defines a table on web page. The
<table> tag uses <tr> tag to define row in the table and the <th> tag is
used to define column in the table.
Following are the elements of <table> tag
a. <table>..</table> defines the table in html.
b. <caption>..</caption> defines the caption for the title of the
table. The default position is at the top.
c. <tr>..</tr> defines a table row within a table by align(left, center,
right) or valign (top, middle, bottom)
d. <th>..</th> defines the table header. By default the text in this
cell is bold and centered
e. <td>..</td> defines the table data cell. By default the text in this
cell is aligned left and centered vertically.
The attributes for table tag are
a. Align- which aligns the table to center or right or left.
b. Bgcolor-specifies the background color of the table
c. Border- specifies the border of the table in pixels
d. Cellpadding- determines the amount of space in pixels between the
border of cell and
content of the cell. No border means value 0
e. Cellspacing- determines the amount of space in pixels between the
individual cells in the table
f. Height- specifies the height of table
g. Width-specifies the width of the table
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 12

4. Hyper Text Markup Language


h. Cols- specifies the number of columns in table
i. Hspace-specifies the horizontal margin
j. Vspace- specifies the vertical margin

Similarly you define the attributes of <th>or <td> tags like


a. Align(Left, center, right) Horizontal alignment for cell
b. Valign(Top, Middle, Bottom) Vertical alignment for cell
c. Colspan=n the number(n) of columns a cell spans
d. Rowspan= n the number(n) of rows a cell spans
For example:1. Table with no border
<html>
<body>
<table>
<caption>Table with no border</caption>
<tr>
<td>Rice</td>
<td>Jowar</td>
<td>Bajra</td>
</tr>
<tr>
<td>Mango</td>
<td>Apple</td>
<td>Grapes</td>
</tr>
</table>
<body>
<html>
2. Table with background color and image and no border
<html>
<body>
<H4>Background Color</H4>
<table bgcolor=blue border=2>
<caption>Table with border and color</caption>
<tr>
<td>Rice</td>
<td>Jowar</td>
<td>Bajra</td>
</tr>
</table>
<H4>Background Image</H4>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 13

4. Hyper Text Markup Language


<table border=2 background=C:\processor .jpg>
<caption>Table with border and image</caption>
<tr>
<td>Mango</td>
<td>Apple</td>
</tr>
<tr>
<td>Orange</td>
<td>Grapes</td>
</tr>
</table>
<body>
<html>
3. Table with cell spacing
<html>
<body>
<H4>Without Cellspacing</H4>
<table border=2>
<tr>
<td>Sunday</td>
<td>Monday</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Thursday</td>
</table>
<H4>With Cellspacing</H4>
<table border=2 Cellspacing=10>
<tr>
<td>Sunday</td>
<td>Monday</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Thursday</td>
</table>
<body>
<html>
4. Table with cell padding
<html>
<body>
<H4>Without Cellpadding</H4>
<table border=2>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 14

4. Hyper Text Markup Language


<tr>
<td>Sunday</td>
<td>Monday</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Thursday</td>
</tr>
</table>
<H4>With Cellpadding</H4>
<table border=2 Cellpadding=20>
<tr>
<td>Sunday</td>
<td>Monday</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Thursday</td>
<tr>
</table>
<body>
<html>
25. Images in Html: An <img> tag specifies an image to be displayed in
an html document. An image can be embedded in an <a href> tag so that
the user can click it to open an URL. An image can be an image map,
which has multiple clickable areas that each link to different URLs.
The height and width attributes indicate the dimensions of the image. An
image can be in the following types of formats like gif, jpeg, jpg,xpm,xbm
etc.
Syntax:<img
src=location,
alt=alternative
text
align=alignment
border=BorderWidth
height=height
width=width
Hspace=HorizontalMargin Vspace=VerticalMargin>
The attributes are as follows
src=location this specifies the URL of the image to be displayed in the
document.
alt=AlternativeText this specifies alternative text when browser does
not support the img tag or if the user has suspended image loading in the
browser.

Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 15

4. Hyper Text Markup Language


Align=alignment specified the alignment of the image at right, top,
texttop, middle, baseline, bottom
For example:<html>
<body>
<p>
<img src=C:\processor.jpg width=12 height=20>
</p>
<p>
<img src=C:\processor.jpg width=50 height=70>
</p>
</body>
<html>

26. Html scripts


A high-level programming language that is interpreted by another
program at runtime Scripting languages, which can be embedded within
HTML, commonly are used to add functionality to a Web page, such as
different menu styles or graphic displays or to serve dynamic
advertisements.
These types of languages are client-side scripting languages, affecting the
data that the end user sees in a browser window. Other scripting
languages are server-side scripting languages that manipulate the data,
usually in a database, on the server.
Vbscript
VBScript is a Microsoft scripting language.VBScript is a light version of
Microsoft's programming language Visual Basic.VBScript is the default
scripting language in ASP (Active Server Pages).
<html>
<body>
<script language=vbscript>
document.write ("<h1>Hello World!</h1>")
</script>
</body>
</html>
<html>
<body>
<script language=vbscript>
document.write("Today's date is " & Date())
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 16

4. Hyper Text Markup Language


document.write("<br>")
document.write("The time is " & Time())
</script>
</body>
</html>
Try it out:Program 1 : <html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow"
background="Desert.jpg">
This is an Illustration of body tag with its properties
<pre>
This text uses
pre tag and preserves
nextline and spaces </pre>
This text doesnt uses
pre tag so doesnt preserves
nextline and spaces.. everything
will be printed in the same line
</body>
</html>
Program 2: <html>
<title> Font tag Example </title>
<body>
<font face="arial" size="1" color="blue"> WELCOME
</font><br>
<font size="2" color="cyan"> WELCOME </font><br>
<font size="3" color="red"> WELCOME </font><br>
<font size="4" color="yellow"> WELCOME </font><br>
<font size="5" color="green"> WELCOME </font><br>
<font size="6" color="brown"> WELCOME </font><br>
<font size="7" color="pink"> WELCOME </font><br>
<font size="20" color="gray"> WELCOME </font><br>
</body>
</html>
Program 3: <html>
<head>
<title> Illustrating comment, h1...h6 tags </title>
</head>
<body>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 17

4. Hyper Text Markup Language


<!-- THIS IS A COMMENT LINE -->
<h1 align="center">This is h1 tag text with center aligned
</h1>
<h2 align="left">This is h2 tag text with left aligned </h2>
<h3 align="right">This is h3 tag text with right aligned </h3>
<h4>This is h4 tag text without alignment</h4>
<h5>This is h5 tag Text without alignment </h5>
<h6>This is h6 tag text without alignment </h6>
</body>
</html>
Program 4: <html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P><marquee behavior="alternate">This is an alternate
Marquee text
</marquee>
<p>This is <i>italized</i></p>
<p>This is <u> underlined </u></p>
<p>This is <b> bold </b></p>
<p>This is <em> emphasized </em></p>
<p>This is <Strong> Strong Text </strong></p>
<p>This is <s>striked text </s></p>
<p>This is <code> computer code </code></p>
<p>This is <sup> superscript </sup> code </p>
<p>This is <sub> subscript </sub> code </p>
<p>This is <big> big text </big></p>
<p>This is <small> small text </small></p>
</center>
</body>
</html>
Program 5: <html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list
tags</h3>
<hr COLOR="RED">
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 18

4. Hyper Text Markup Language


<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase 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>
Program 6: <html>
<head>
<title> Unordered List </title>
</head>
<body>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 19

4. Hyper Text Markup Language


<h3 align="center">To illustrate unordered list tags </h3>
<hr color="red">
<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>
Program 7: <html>
<head>
<title> Nested and Definition List <title>
</head>
<body>
<h3 align="center">To illustrate Nested and Definition List Tags
</h3>
<hr color="red">
<h4>An ordered nested List: </h4>
<ol>
<li> Coffee </li>
<li> Tea
<ol type= "a">
<li> Black tea </li>
<li> Green tea </li>
<ol type= "i" >
<li> China </li>
<li> Africa </li>
</ol>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 20

4. Hyper Text Markup Language


</ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl>
<dt> Bangalore </dt>
<dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt>
<dd> -Capital city of Maharashtra </dd>
</dl>
</body>
</html>
Program 8: <html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center">To illustrate image tags</h3><hr>
<p>
<img src="flower.bmp" align="right" height="100"
width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br>
<hr>
<p>
<img src="flower.bmp" align="left" height="100"
width="100"/>
This image is left aligned with the text
</p>
<br><br><br><br>
<hr>
<p>
<img src="flower.bmp" align="middle" height="100" width="100"/>
This image is center aligned with the text.
</p>
<br><br><br><br>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 21

4. Hyper Text Markup Language


<hr>
<p>
<img src="flower.bmp" align="bottom" height="100"
width="100"/>
This image is bottom aligned with the text.
</p>
<br><br><br><br>
<hr>
<p>
<img src="flower.bmp" align="top" height="100"
width="100"/>
This image is top aligned with the text.
</p>
</body>
</html>
Program 9: Home.html
<html>
<head>
<title> Link Tag </title>
</head>
<body>
<h3 align="center">To illustrate link Tags</h3><hr>
Text as a link/hyperlink to another page:
<a href="page1.html "> Click here!!!</a>
<hr>
Image as a link/hyperlink:
<a href="page1.html">
<img src="flower.bmp" width="32" height="32"
align="bottom"/></a>
<hr>
<p>
<a href="#C8">See also Chapter 8 (link within a page)</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains Pointers</p>
<h2>Chapter 2</h2>
<p>This chapter explains variables</p>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 22

4. Hyper Text Markup Language


<h2>Chapter 3</h2>
<p>This chapter explains operator</p>
<h2>Chapter 4</a></h2>
<p>This chapter explains structure</p>
<h2>Chapter 5</h2>
<p>This chapter explains arrays</p>
<h2>Chapter 6</h2>
<p>This chapter explains linked list</p>
<h2>Chapter 7</h2>
<p>This chapter explains expressions</p>
</body>
</html>
Page1.html
<html>
<head>
<title> Page1.html </title>
</head>
<body>
<h1 align="center"> Hello!!! This is a new chapter </h1>
<a href="home.html"> Go to home </a>
</body>
</html>
Program 10: <html>
<head>
<title> Table tag </title>
</head>
<body>
<center>
<h4>Table with border, vertical headers, cellpadding and
cellspacing</h4>
<table border="10" cellpadding="10" cellspacing="10">
<tr>
<td></td>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 23

4. Hyper Text Markup Language


</tr>
<tr>
<th>Student 1</th>
<td>Radha Desai</td>
<td>20</td>
<td>123 456 789</td>
</tr>
<tr>
<th>Student 2</th>
<td>GeethaBharadwaj</td>
<td>21</td>
<td>267 891 281</td>
</tr>
</table>
<hr>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Radha</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<hr>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 24

4. Hyper Text Markup Language


</table>
</center>
</body>
</html

Mr. Vinayak Hirave (MSC MCA) E-Vision Technology And Education (9890972928)
Page 25

Potrebbero piacerti anche