Anda di halaman 1dari 61

211714205014

Ex.No: 1
Date:
Topic: <html> tag
AIM:
To create a web page in HTML using <html> tag.
DESCRIPTION:
<html> tag stands for hypertext Markup Language. The markup information, which is
contained in tags consisting of angle brackets tag delimiters plus the text contained between the
delimiters.
SYNTAX:
<html>
..
</html>
PROGRAM:
<html>
<body>
welcome <br>
welcome to 211714205014 page
</body>
</html>

211714205014
OUTPUT:

RESULT:
Thus the HTML code to create web page using <html> tag was executed successfully.

211714205014
Ex.No: 2
Date:
Topic : <title> tag
AIM:
To create a web page in HTML using <title> tag
DESCRIPTION:
Instruction n the title element directs the browser to display the element content as the
window title
SYNTAX:
<title>
..
</ title >
PROGRAM:
<html>
<head>
<title> 211714205014 </title>
</head>
<body>
This is an example for TITLE TAG <br>
</body>
</html>

211714205014
OUTPUT:

RESULT:
Thus the HTML code to design webpage using <title> tag was executed successfully.

211714205014
Ex.No: 3
Date:
Topic : <body> tag
AIM:
To create a web page in HTML using <body> tag
DESCRIPTION:
The body element contains the information that is to be displayed in the client area of the
browser.
SYNTAX:
<body>
..
</ body >
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
This is an example for BODY TAG <br>
</body>
</html>

211714205014
OUTPUT:

RESULT:
Thus the HTML code to design webpage using <body> tag was executed successfully.

211714205014
Ex.No: 4
Date:
Topic: <p> tag
AIM:
To create a web page in HTML using <p> tag
DESCRIPTION:
Contents in <p> tag will be displayed as one paragraph in the web browser.
SYNTAX:
<p>
..
</ p >
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> This is an example for Paragraph TAG </p> <br>
</body>
</html>

211714205014
OUTPUT:

RESULT:
Thus the HTML code to design webpage using <body> tag was executed successfully.

211714205014
Ex.No: 5
Date:
Topic: <h1><h2><h3><h4><h5><h6>tags
AIM:
To create a web page in HTML using various heading tags
<h1><h2><h3><h4><h5><h6> tags.
DESCRIPTION:
<h1><h2><h3><h4><h5><h6>tags are examples of HTML heading elements.
SYNTAX:
<h1>
Some common HTML elements
</ h1 >
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<h1> HELLO </h1>
<h2> HELLO </h2>
<h3> HELLO </h3>
<h4> HELLO </h4>
<h5> HELLO </h5>
<h6> HELLO </h6>
</body>

211714205014
</html>

OUTPUT:

RESULT:
Thus the HTML code to design webpage using
<h1><h2><h3><h4><h5><h6> tags was executed successfully.

various

heading

tags

211714205014
Ex.No: 6
Date:
Topic: <b><em><strong><i><sup><sub><del><code>tag
AIM:
To create a web page in HTML using
<b><em><strong><i><sup><sub><del><code>tag.
DESCRIPTION:
<b> is a bold which is used to display the content in bold
<b> content</b>
<strong> defines the important text
<strong> content </strong>
<i> displays the content in italic
<i> content</i>
<sup>is superscript tag
Content <sup> content</sup>
<sup>is subscript tag
Content <sup> content</sup>
<del> is used to delete the content
<del> content</del>
<code> does not display any space to the content
<code>
PROGRAM:

<html>
<head>

211714205014
<b>211714205014 </b> <br>
</head>
<body>
<b> BOLD TAG </b>
<strong> STRONG TAG </strong>
<i> ITALICS TAG </i>
<br> A <sup> 2 </sup> +B <sup> 2 </sup> Example For Superscript Tag
<br> H <sub> 2 </sub> 0 Example For Subscript <br>
<del> DELETE TAG EXAMPLE </del>
<code> <br> CODE TAG EXAMPLE </code>
</body>
</html>

OUTPUT:

211714205014

RESULT:
Thus
the
HTML
code
to
design
webpage
<b><em><strong><i><sup><sub><del><code>tag was executed successfully.

using

211714205014

Ex.No: 7
Date:
Topic : <br>tag
AIM:
To create a web page in HTML using <br> tag.
DESCRIPTION:
Br element in HTML represents a break line. It causes the browser to start a new line.
SYNTAX:
<br>
Content of the br element
</br>
PROGRAM:

<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<b> BREAK TAG EXAMPLE </b>
<br> <br>
BREAK <br>
TAG
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to design webpage using <br> tag was executed successfully.

211714205014

Ex.No: 8
Date:
Topic : <pre>tag
AIM:
To create a web page in HTML using <pre> tag.
DESCRIPTION:
Pre element is used to override a browsers normal white space processing.
SYNTAX:
<pre>
Content of the pre element
</pre>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<pre> PRE tag example </pre>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to design webpage using <pre> tag was executed successfully.

211714205014

Ex.No: 9
Date:
Topic : title, align attributes
AIM:
To write HTML code to demonstrate title, align attributes.
DESCRIPTION:
Instruction in the title element directs the browser to display the element content as the
window title.
SYNTAX:
<title>
Browser title
</title>
Align attribute is used for alignment. It can have the values as right, left or center.
SYNTAX FOR align ATTRIBUTE:
<element (tag) align = value>
PROGRAM:
<html>
<head>
<title> ALIGN TAG </title>
<b>211714205014 </b> <br>
</head>
<body>
<p align="right"> RIGHT Alignment </p>
</body>

211714205014
</html>
OUTPUT:

RESULT:
Thus the HTML code to demonstrate title, align attributes was executed successfully.

211714205014

Ex.No: 10
Date:
Topic : <font> tag, size, color, face attributes
AIM:
To create web page in HTML using <font> tag, size, color, face attributes
DESCRIPTION:
<font> tag specifies the type of font. Size specifies the size of font. color specifies the
color of the text to be displayed.
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<font size="4" color="red"> Example for font tag </font>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to design webpage using <font> tag, size, colors and face attribute
was executed successfully

211714205014

Ex.No: 11
Date:
Topic : <a> tag, href attribute in global, internal and local pages.
AIM:
To create web page in HTML using <a> tag, href attribute in global, internal and local
pages
DESCRIPTION:
<a> tag defines a hyperlink, which is used to link from one page to another.
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example for hyperlink tag <br>
<a href="http://www.google.com">Visit google.com!</a> <br>
<a href="http://www.yahoo.com">Visit yahoo.com!</a>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to design webpage using <a> tag, href attribute in global, internal
and local pages was executed successfully.

211714205014

Ex.No: 12
Date:
Topic : target attribute, email link, download link, default link
AIM:
To create web page in HTML using target attribute, email link, download link, default
link
DESCRIPTION:
Email link enables to send an email and download link enables us to download any files.
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example for Mail to and Download link<br>
<a href="mailto:ritchennai.edu.in@gmail.com">MAil to ritchennai.edu.in</a> <br>
<a href="file:///C:/Html_3015/sample.txt" download> Download Sample Text Doc </a>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to design webpage using target attribute, email link, download
link, default link was executed successfully.

211714205014
Ex.No:13
Date:
Topic: Comment tag
AIM:
To write HTML code to demonstrate comment tag.
PROCEDURE:
Comment tag is used for giving comments in HTML code.
SYNTAX:
<comment>
Content
</comment>
PROGRAM:

<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example for Comment tag<br>
<!--This is a comment. Comments are not displayed in the browser-->
<p>Comment Tag.</p>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to demonstrate comment tag was executed successfully.

211714205014
Ex.No:14
Date:
Topic: Unordered List
AIM:
To write HTML code to demonstrate Unordered list.
PROCEDURE:
An unordered list of items is bullet list of items. Each item in unordered list is made the
content of li
SYNTAX:
<ul>
<li>Bulleted list item
<ul>
<li>Nested list item</li>
</ul>
<li>bulleted list item2</li>
</ul>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example For Unordered List </p>
<ul>
<li>apple </li>
<li>mango </li>
<li>orange
<ul>
<li> apple </li>
<li> Mango </li>
<li> orange </li>
</ul>

211714205014
</li>
</ul>
</body>
</html>
OUTPUT;

RESULT:
Thus the HTML code to demonstrate unordered list using <ul> tag was executed
successfully.

Ex.No:15

211714205014
Date:
Topic: Ordered List
AIM:
To write HTML code to demonstrate ordered list.
PROCEDURE:
An ordered list of items is numbered list of items. Each item in ordered list is made the
content of li element.
SYNTAX:
<ol>
<li>Numbered list item</li>
<li> Numbered list item2</li>
</ol>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example For Ordered List </p>
<ol>
<li>apple </li>
<li>mango </li>
<li>orange
<ol>
<li> apple </li>
<li> Mango </li>
<li> orange </li>
</ol>
</li>
</ol>
</body>
</html>
OUTPUT:

211714205014

RESULT:
Thus the HTML code to demonstrate ordered list using <ol> tag was executed
successfully.
Ex.No:16

211714205014
Date:
Topic: Definition List
AIM:
To create web page in HTML to demonstrate definition list using <dl> tag.
PROCEDURE:
Definition list defines the list of terms and definitions for each
SYNTAX:
<dl>
<dt>Term<.dt>
<dd>Definition of term</dd>
<dt>Term2</dt>
<dd>Definition of term2</dd>
</dl>
PROGRAM:

<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example For Definition List </p>
<dl>
<dt> Fruits </dt>
<dd>apple </dd>
<dd>mango </dd>

211714205014
<dd>orange
</dd>
</dl>
</body>
</html>

OUTPUT:

RESULT:
Thus the HTML code to design web page definition list using <dl> tag was executed
successfully.

Ex.No:17

211714205014
Date:
Topic: <img> tag, src, align, width, height attributes.
AIM:
To write html code to display image in web page using <img> tag, src, align, width,
height attributes .
DESCRIPTION:
The image element is the primary means of including a graphic in a document. The src
attribute of this element specifies the URL of n image to be requested via the HTTP GET
method.
The optional height and width attributes can be used to tell the browser to scale an image
to a size other than the one in which it was recorded.
SYNTAX:
<img
Src = http://www.w3.org/items/valid.html/10
Alt=validHTML1.0! height = 3 width=88
Style=float:right/>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example For Image tag </p>
<img src= "file:///C:/Html_3015/Jellyfish.jpg" height= "80" width="88" />
</body>
</html>

OUTPUT:

211714205014

RESULT:
Thus the HTML code to design web page using <img> tag, src, align, width, height
attributes was executed successfully.

Ex.No:18

211714205014
Date:
Topic: border attributes thumbnails
AIM:
To write html code to display image in web page using border attribute and thumbnails
DESCRIPTION:
By default, many browsers add a small border around image links. This default behavior
is intended to give web viewers the ability to quickly decipher the difference between ordinary
images and image links. Since this default is different from web browser to web browser, it may
be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.
Thumbnails are intended to give your audience quick previews of images without them
having to wait for the larger, higher-quality image to load. Photo galleries make heavy use of
thumbnails, and they will allow you to display multiple pictures on one page with ease.
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example For Border tag </p>
<img src= "file:///C:/Html_3015/Jellyfish.jpg" height= "100" width="100" style="float:left"
border="10"/>
</body>
</html>

OUTPUT:

211714205014

RESULT:
Thus the HTML code to design web page to demonstrate border attributes thumbnails
was executed successfully.

Ex.No:19

211714205014
Date:
Topic: Basic Table
AIM:
To create a web page in HTML that contains table
DESCRIPTION:
The table element is used to define an HTML table. Columns and rows will be
automatically size to contain their data.
SYNTAX:
<table>
<tr>
<td>content1</td>
<td>content1</td>
</tr>
<tr>
<td>content1</td>
<td>content1</td>
</tr>
</table>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example for TAble Creation </p>
<table border="1">

211714205014
<tr>
<td> Reg no </td>
<td> Class </td>
</tr>
<tr>
<td> 211714205014 </td>
<td> IIIyr </td>
</tr>
</table>
</body>
</html>

211714205014
OUTPUT:

RESULT:
Thus the HTML code to display web page with basic table was executed
successfully.

211714205014
Ex.No:20
Date:
Topic: Basic Table with colors
AIM:
To write HTML code to display basic table with colors.
DESCRIPTION:
The table element with bgcolor attribute is used to define an HTML table with
specification.
SYNTAX:
<table bgcolor=any color>
<tr>
<td>content1</td>
<td>content1</td>
</tr>
<tr>
<td>content1</td>
<td>content1</td>
</tr>
</table>
PROGRAM:
<html>
<head>
<b>211714205014 </b> <br>
</head>
<body>
<p> Example for TAble Creation </p>

211714205014
<table border="1" bgcolor="red">
<tr>
<td> Reg no </td>
<td> Class </td>
</tr>
<tr>
<td> 211714205014 </td>
<td> IIIyr </td>
</tr>
</table>
</body>
</html>
OUTPUT:

RESULT:
Thus the HTML code to display web page with basic table with colors was
executed successfully.

211714205014

Ex.No:21
Date:
Topic: Basic Table with spanning
AIM:
To write HTML code to create basic table with spanning.
DESCRIPTION:
Spanning is used to span the table cells. There are two types of span:
(i)
(ii)

Rowspan
Columnspan

SYNTAX:
<th rowspan=value colspan=value>
.
</th>
PROGRAM

<html>
<title>211714205014 </title>
<head>Table</head>
<body>
<table border="">
<tr>
<th rowspan="2" colspan="1">Name</th>
<th>Roll no</th>
<tr>
<td>Hemnath</td>
<td>201403015</td>
</tr>
</table>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to display web page with basic table with spanning was
executed successfully.

211714205014
Ex.No:22
Date:
Topic: Basic Table with cell spacing and cell padding
AIM:
To write HTML code to create basic table with cell spacing and cell padding.
DESCRIPTION:
Cell spacing is used to increase distance between the cells.
SYNTAX:
<table cellspacing=anywhere>
Cell padding is used to create more white space between cell content and its
borders.
SYNTAX:
<table cellpadding=anywhere>
PROGRAM:
<html>
<title>211714205014</title>
<head>Table</head>
<body>
<table border="">
<tr>
<th>Name</th>
<th>Roll no</th>
<tr>
<td>Hemnath </td>
<td>201403015</td>
</tr>

211714205014
</table>
<table border="" cellspacing="anywhere">
<tr>
<th>Name</th>
<th>Class</th>
<tr>
<td>Hemnath</td>
<td>87</td>
</tr>
</table>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to display web page with basic table with cell spacing
and cell padding was executed successfully.

211714205014

Ex.No:23
Date:
Topic: bgcolor attribute
AIM:
To create a web page in HTML using bgcolor attribute.
DESCRIPTION:
Bgcolor attribute is used to change the background color of the webpage.
SYNTAX:
<tag bgcolor=pink>
.
</tag>
PROGRAM:
<html>
<title>211714205014</title>
<head>
</head>
<body bgcolor="LightGoldenRodYellow">
<font color="red">This is a red text in Light Golden background.</p>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to display web page using bgcolor attribute was
executed successfully.

211714205014

Ex.No:24
Date:
Topic: background color attribute
AIM:
To create a web page in HTML using background color attributes.
DESCRIPTION:
Background attribute for body tag is used for setting image or picture as a
background.
SYNTAX:
<body background="./test.jpg">
</body>
PROGRAM:
<html>
<title>211714205014</title>
<head>Image background</head>
<body background="C:\Users\Hemnath\Desktop\Chrysanthemum.jpg">
WELCOME!!
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML code to display web page using background color attribute
was executed successfully.

211714205014

Ex.No:26
Date:
Topic: Internal CSS
AIM:
To write a HTML PROGRAM to demonstrate internal CSS.
DESCRIPTION:
An internal style sheet should be used when a single document has a unique
style.
SYNTAX:
<style> content</style>
PROGRAM:

<html>
<title>211714205014</title>
<head><h2>Internal CSS</h2>
<style>
body {background-image:url("C:/Users/Pictures/Epic.jpg");}
</style>
</head>
<body>
<font size="12pt face="Times new roman">WEB TECHNOLOGY</font>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML PROGRAM to demonstrate internal style sheet was executed
successfully.

211714205014

Ex.No:27
Date:
Topic: External CSS
AIM:
To write a HTML PROGRAM to demonstrate external CSS.
DESCRIPTION:
External style sheets can be used when we need to apply particular style tore
than one web documents. The desires style is stored in one css file and the name of
that file has to be mentioned in our web pages.
PROGRAM:
CSS:
body
{background-color:LightGoldenRodYellow;}
p
{color:blue;}
h3
{color:Brown;}
Html:

<html>
<title>ex_no:29</title>
<head>
<h2>Styling Links</h2>
<link rel="stylesheet" type="text/css" href="29.css"></link>
</head>

211714205014
<body>
<a href="file:///C:/Users/suhanya/Desktop/mm.html" target="_blank">Link-1</a>
<br>
<a href="file:///C:/Users/suhanya/Desktop/27.html">Link-2</a>
</body>
</html>

OUTPUT:

RESULT:

211714205014
Thus the HTML PROGRAM to demonstrate external style sheet was executed
successfully.

Ex.No:28
Date:
Topic: Inline CSS
AIM:
To write a HTML PROGRAM to demonstrate inline CSS.
DESCRIPTION:
In inline CSS, style element is used as an attribute.
SYNTAX:
<tagname style=property:value> content </tagname>
PROGRAM:
<html>
<title>ex_no:28</title>
<head>
<h2>INLINE CSS</h2>
</head>
<body style="background-color:sienna;">
<p style="color:Yellow;font-family:Lucida calligraphy;font-size:8pt;">
Rajalakshmi Intitute of Technology
</p>
</body>
</html>

211714205014

OUTPUT:

RESULT:
Thus the HTML PROGRAM to demonstrate inline style sheet was executed
successfully.

211714205014

Ex.No:29
Date:
Topic: CSS Classes
AIM:
To write HTML PROGRAM to demonstrate CSS classes
PROCEDURE:
Class selector is used to specify style for a group of elements. . Is used to
represent class
:link use this class to add special style to an unvisited link
:visited use this class to add special style to an visited link
:hover use this class to add special style to an element when you mouse
over it.
:active use this class to add special style to an active element.
SYNTAX:
a : link {color:anycolor}
a : visited {color:anycolor}
a : hover {color:anycolor}
a : active {color:anycolor}
PROGRAM:
CSS:
a:link
{color:red;}
a:visited

211714205014
{color:green;}
a:hover
{color:hotpink;}
a:active
{color:yellow;}
HTML:
<html>
<title>ex_no:29</title>
<head>
<h2>Styling Links</h2>
<link rel="stylesheet" type="text/css" href="29.css"></link>
</head>
<body>
<a href="file:///C:/Users/suhanya/Desktop/mm.html" target="_blank">Link-1</a>
<br>
<a href="file:///C:/Users/suhanya/Desktop/27.html">Link-2</a>
</body>
</html>

211714205014

OUTPUT:

RESULT:

211714205014
Thus the HTML PROGRAM to demonstrate CSS classes was executed
successfully