Scribd
Upload
63 views

List of Experiments IWT

The document provides instructions for 10 HTML experiments including creating basic page structure using tags like <html>, <head>, <body>, and inserting text elements, images, and links. It also covers more advanced topics like tables, specifying borders and padding, colspan and rowspan. The experiments are meant to teach essential HTML tags and their usage through hands-on practice building example web pages.

Uploaded by

sandeep rangari
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
63 views

List of Experiments IWT

The document provides instructions for 10 HTML experiments including creating basic page structure using tags like <html>, <head>, <body>, and inserting text elements, images, and links. It also covers more advanced topics like tables, specifying borders and padding, colspan and rowspan. The experiments are meant to teach essential HTML tags and their usage through hands-on practice building example web pages.

Uploaded by

sandeep rangari
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

INTERNET AND WEB TECHNOLOGY LAB MANUAL

BY SANDEEP

List of Experiments (but should not be limited to):

1. Write HTML codes using various Tags, Table Tags, List Tags, Image Tags, Forms.

Description:-

Tags and elements

An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to
create HTML elements, such as paragraphs or links.

Many elements have an opening tag and a closing tag — for example, a p (paragraph) element
has a <p> tag, followed by the paragraph text, followed by a closing </p> tag.

1. <html> … </html> — The root element

All web pages start with the html element. It’s also called the root element because it’s at the
root of the tree of elements that make up a web page.

<html>

(all other page elements go here)

</html>

2. <head> … </head> — The document head

The head element contains information about the web page, as opposed to the web page content
itself. There are many elements that you can put inside the head element, such as:

title (described below)

link, which you can use to add style sheets and favicons to your page

meta, for specifying things like character sets, page descriptions, and keywords for search
engines

script, for adding JavaScript code to the page

<head>

<title>The Adventures of My Cat Lucky</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="description" content="The adventures of my favourite pet cat Lucky, with


stories, pictures and movies.">

<meta name="keywords" content="cat,Lucky,pet,animal">

<link rel="stylesheet" type="text/css" href="/style.css">

<link rel="shortcut icon" href="/favicon.ico">

</head>

3. <title> … </title> — The page title

The title element contains the title of the page. The title is displayed in the browser’s title bar
(the bar at the top of the browser window), as well as in bookmarks, search engine results, and
many other places.

Here’s an example

<title>The Adventures of My Cat Lucky</title>

4. <body> … </body> — The page’s content

The body element appears after the head element in the page. It should contain all the content of
your web page: text, images, and so on. All web pages have 1 single body element, with the
exception of frameset pages, which contain frame elements instead.

<body>

(all page content goes here)

</body>

5. <h1> … </h1> — A section heading

Headings let you break up your page content into readable chunks. They work much like
headings and subheadings in a book or a report.

HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most
important headings, h2 is for less important subheadings, and so on. Typically you won’t need to
use more than h1, h2 and h3, unless your page is very long and complex.

<h1>The Adventures of My Cat Lucky</h1>


6. <p> … </p> — A paragraph

The p element lets you create paragraphs of text. Most browsers display paragraphs with a
vertical gap between each paragraph, nicely breaking up the text.

<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning
she caught two!</p>

7. <a> … </a> — A link

One of the most important elements in a web page, the a element lets you create links to other
content. The content can be either on your own site or on another site.

To create a link, you wrap <a> and </a> tags around the content you want to use for the link, and
supply the URL to link to in the <a> tag’s href attribute.

<a href="http://www.example.com/">Visit this great website!</a>

8. <img> — An image

The img element lets you insert images into your web pages. To insert an image, you first upload
the image to your web server, then use an <img> tag to reference the uploaded image filename.
Here’s an example:

<img src="myphoto.jpg" alt="My Photo">

9. <div> … </div> — A block-level container for content

The div element is a generic container that you can use to add more structure to your page
content. For example, you might group several paragraphs or headings that serve a similar
purpose together inside a div element.

<div id="sidebar">

<h1>Sidebar Heading</h1>

<p>Sidebar text</p>
<p>More sidebar text</p>

</div>

10. <span> … </span> — An inline container for content

The span element is similar to div in that it’s used to add structure to your content. The
difference is that div is a block-level element, while span is an inline element:

<p>Some of our products include <span class="product">SuperWidgets</span>, <span


class="product">MegaWidgets</span>, and <span
class="product">WonderWidgets</span>.</p>

Now that you’ve learned these 10 essential HTML tags, let’s put them all together in a single
web page:

<html>
<head>
<title>The Adventures of My Cat Lucky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="The adventures of my favourite pet cat Lucky,
with
stories, pictures and movies.">
<meta name="keywords" content="cat,Lucky,pet,animal">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<h1>The Adventures of My Cat Lucky</h1>
<div id="mainContent">
<p>My cat Lucky has a lot of adventures. Yesterday she <a href="mouse.html">caught
a mouse</a>, and this morning she caught two!</p>
<p>Here's a picture of Lucky:</p>
<img src="lucky.jpg" alt="Lucky">
</div>
<div id="sidebar">
<h2>Buy our stuff!</h2>
<p>Some of our products include <span class="product">SuperWidgets</span>,
<span class="product">MegaWidgets</span>, and <span
class="product">WonderWidgets</span>.</p>
</div>
</body>
</html>

HTML Table Tag

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.

Tag Description

<table> It defines a table.


<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

HTML Table Example

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
</table>
Output:-

First_Name Last_Name Marks


Sonoo
Jaiswal
60
James
William
80
Swati

HTML Table with Border

There are two ways to specify border for HTML tables.

By border attribute of table in HTML


By border property in CSS

1) HTML Border attribute

<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

<style>
table, th, td {
border: 1px solid black;
}
</style>

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

By cellpadding attribute of table in HTML


By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So
let's see the code of CSS.

<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

HTML Table width:

We can specify the HTML table width using the CSS width property. It can be specify in pixels
or percentage.

table{
width: 100%;
}
Example:

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}

</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

HTML code:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>
HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

HTML code:

<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
</body>
</html>

List Tags in HTML


HTML list tags first:

<ul> Used to define an unordered list


<ol> Used to define an ordered list
<li> Used to define a list item
<dl> Used to defines a description list
<dt> Used to defines a term in a description list
<dd> Used to describes the term in a description list

Unordered List
To define an unordered list in HTML we use <ul> tag and then we define the list of items in <li>
tag. By default, the list of items is marked with bullets (i.e. small black circles).

<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Baseball</li>
</ul>
</body>
</html>

Unordered HTML List: Different Item Markers

a list of markers using CSS list-style-type property. Let’s look at different CSS list-style-type
property that you can use to define different style of markers:

disc: Sets the list item marker to bullet


circle: Sets the list item marker to a circle
square: Sets the list item marker to a square
none: The list items will not be marked

Disc:

<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<ul style="list-style-type:disc;">
<li>Cricket</li>
<li>Football</li>
<li>Baseball</li>
</ul>
</body>
</html>
Ordered HTML List – Type Attribute

There are different types of item markers for an ordered list:

type=”1″ The list items will be numbered with numbers (default)

type=”A” The list items will be numbered with uppercase letters

type=”a” The list items will be numbered with lowercase letters

type=”I” The list items will be numbered with uppercase roman numbers

type=”i” The list items will be numbered with lowercase roman numbers

Numbers:

<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<ol type="1">
<li>Cricket</li>
<li>Football</li>
<li>Baseball</li>
</ol>
</body>
</html>
HTML Description Lists

You can also create description lists in HTML. A description list is used to create a list of terms
and adding a description to them. You create a description list using <dl> tag. <dt> tag defines
the term & <dd> tag adds description to them.

<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<dl>
<dt>Cricket</dt>
<dd> Cricket is a bat-and-ball game played between two teams of eleven players on a field at the
centre of which is a 20-metre pitch with a wicket at each end, each comprising two bails
balanced on three stumps.</dd>
<dt>Table Tennis</dt>
<dd> Table tennis, also known as ping-pong, is a sport in which two or four players hit a
lightweight ball back and forth across a table using small rackets. The game takes place on a hard
table divided by a net.</dd>
</dl>
</body>
</html>

Nested List in HTML


You can also create a nested list in HTML.

<!DOCTYPE html>
<html>
<body>
<h2>Sports</h2>
<ul>
<li>Table Tennis</li>
<li>Cricket
<ul>
<li>Virat Kohli</li>
<li>Joe Root</li>
</ul>
</li></pre>
<pre><li>Basketball</li>
</ul>
</body>
</html>

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web
server and inserts it into the page. Therefore, make sure that the image actually stays in the same
spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken
link icon and the alt text are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Coding:-
<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image get an
understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

The alt Attribute


The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we use the style attribute to specify the width and height of an image:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>
Coding:2

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we specify the width and height of an image with the width and height attributes:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Coding:-

<!DOCTYPE html>
<html>
<body>

<h2>Images in Another Folder</h2>


<p>It is common to store images in a sub-folder. You must then include the folder name in the
src attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Output:-

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src
attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notes on external images: External images might be under copyright. If you do not get
permission to use it, you may be in violation of copyright laws. In addition, you cannot control
external images; they can suddenly be removed or changed.

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"


style="width:104px;height:142px;">

</body>
</html>

Output:-

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Coding:-
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

HTML Form
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.
HTML Form Syntax

<form action="server url" method="get|post">


//input controls e.g. textfield, textarea, radiobutton, button
</form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.


<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield
control. The name attribute is optional, but it is required for the server side component such as
JSP, ASP, PHP etc.

<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>

Output:-

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML Password Field Control

The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Output:

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user clicks
on submit button, then form get submit to the server.

Syntax:

<input type="submit" value="submit">


The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:

<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
lt;/form>

HTML Form Example

Following is the example for a simple form of registration.

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
HTML Form Example
Let's see a simple example of creating HTML form.

<!DOCTYPE>
<html>
<body>
<form action="http://www.javatpoint.com/javascriptpages/valid.jsp">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
<td><input type="text" name="name" value="" id="register_name"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter
password:</label></td>
<td><input type="password" name="password" id="register_password"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select
Country:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>

Output:-

2. Design a home page which will display your information i.e. Bio data.

Coding:-

<!DOCTYPE html>

<html>

<head>

<title>BIODATA</title>

</head>

<marquee>

<body bgcolor="pink"><font color="black"><font size=30>Biodata</font>

</marquee>
<hr>

<body><font size=5><font color="blue">

<img src="Desert.jpg" align="right" height=50 width=50 1px>

Name:S.Nandhini<br>

Father's name:S.Selvarajan<br>

Mothers's name:S.Usha<br>

DOB:18:12:1997<br>

Address:Chennai-19<br>

Mobile no:1234566543<br>

Religion:Hindu<br>

Nationality:Indian<br>

Gender:Female<br>

Qualification:BCA<br>

<table style="width:50%"border=3>

<tr>

<th>semester</th>

<th>grade</th>

<th>cpga %</th>

</tr>

<tr>

<th>1</th>

<th>S</th>

<th>80%</th>

</tr>

<tr>

<th>2</th>
<th>A</th>

<th>78 %</th>

</tr>

</body>

</html>

3. Create Hyperlinks in home page i.e educational details, Hobbies, Achievement, My


Ideals etc.

4. Design a webpage i.e. Biodata using CSS.

5. Design a web page using CSS (Cascading Style Sheets) which includes the different font,
styles.

6. Write an HTML page that contains a selection box with a list of 5 countries, when the
user se- lects a country, its capital should be printed next to the list; Add CSS to customize
the proper- ties of the font of the capital (color, bold and font size).

7. Embedding Javascripts in HTML pages.

8. Write a java script program to test the first character of a string is uppercase or not.

9. Write a java script for loop that will iterate from 0 to 15 for each iteration, it will check if
the current number is odd or even, and display a message to the screen.

10. Write a java script program to sum the multiple s of 3 and 5 under 1000.

11. Design a Signup form with all validations.

You might also like