Web Technologies - Lab Record 2023

Name : ______________________ B.
Com (Computers) II yr IV Sem OU ID : __________________
1. Write a HTML program to implement Formatting tags .
<html>
<head>
<title> implement Formatting tags Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses an <i>italicized</i> typeface.</p>
<p>The following word uses an <u>underlined</u> typeface.</p> <p>The
following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
<p>The following word uses a <big>big</big> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
<p>This is the example of <span style = "color:green">span tag</span> and
the <span style = "color:red">div tag</span>alongwith CSS</p>
</body>
</html>
ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 1|Page

Name : ______________________ B.Com (Computers) II yr IV Sem OU ID : __________________
2. Write a HTML program to demonstrate all Logical tags.
<html>
<head>
<title> demonstrate all Logical tags Example</title>
</head>
<em>This is emphasized text</em>
<cite>This is cited text</cite>
<strong>This is strong text</strong>
<samp>This is sample text</samp>
<code>This is code text</code>
<kbd>This is keyboard text</kbd>
</body>
</html>

3. Write a HTML program to implement all Header tags.
<html>
<head>
<title>To implement all Header tags Example</title>
</head>
<body>
<h1>Heading level 1</h1>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<p>This is some other text.</p>
<hr>

<p>This is some other text.</p>
</body>
</html>

4. Write a HTML program to illustrate Anchor tag along with all its
attributes.
<html>
<head>
<title>To illustrate Anchor tag along with all its attributes Example</title>
</head>
<body>
<p>This is a link to <a href="http://www.wfp.org/">World Food

Programme</a>. </p>
<p>This is a link to our <a href="default.asp">HTML reference</a>.</p>
<p>An image as a link: <a href="https://www.google.com">
<img border="0" alt="google.com" src="logo_w3s.gif" width="100"

height="100"></a></p>
<a href="https://www.google.com" target="_blank">Visit google.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new
browser window or a new tab.</p>
<p>This is an email link:

<a href="mailto:someone@example.com?Subject=Hello%20again"
target="_top">Send Mail</a></p>
<p><b>Note:</b> Spaces between words should be replaced by %20 to ensure

that the browser will display the text properly.</p>
<p>This is another mailto link:

<a
href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=an
ds
omeoneelse@example.com&subject=Summer%20Party&body=You%20are%2

0in vited%20to%20a%20big%20summer%20party!" target="_top">Send

mail!</a></p>
<p><b>Note:</b> Spaces between words should be replaced by %20 to ensure

that the browser will display the text properly.</p>
<p>This is a phone link:

<a href="tel:+4733378901">+47 333 78 901</a></p>
<h2 id="top">Top of page!</h2>
<p>In my younger and more vulnerable years my father gave me some advice
that
I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just remember
that all the people in this world haven't had the advantages that you've
had."</p> <p>He didn't say any more, but we've always been unusually
communicative in a reserved way, and I understood that he meant a great deal
more than that. In consequence, I'm inclined to reserve all judgments, a habit
that has opened up many curious natures to me and also made me the victim of
not a few veteran bores. The abnormal mind is quick to detect and attach itself
to this quality when it appears in a normal person, and so it came about that in
college I was unjustly accused of being a politician, because I was privy to the
secret griefs of wild, unknown men. Most of the confidences were unsought-
frequently I have feigned sleep, preoccupation, or a hostile levity when I
realized by some unmistakable sign that an intimate revelation was quivering on
the horizon; for the intimate revelations of young men, or at least the terms in
which they express them, are usually plagiaristic and marred by obvious
suppressions. Reserving judgments is a matter of infinite hope. I am still a little
afraid of missing something if I forget that, as my father snobbishly suggested,
and I snobbishly repeat, a sense of the fundamental decencies is parcelled out
unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it
has a limit. Conduct may be founded on the hard rock or the wet marshes, but
after a certain point I don't care what it's founded on. When I came back from
the East last autumn I felt that I wanted the world to be in uniform and at a sort
of moral attention forever; I wanted no more riotous excursions with privileged

glimpses into the human heart. Only Gatsby, the man who gives his name to
this book, was exempt from my reaction-Gatsby, who represented everything
for which I have an unaffected scorn. If personality is an unbroken series of
successful gestures, then there was something gorgeous about him, some
heightened sensitivity to the promises of life, as if he were related to one of
those intricate machines that register earthquakes ten thousand miles away. This
responsiveness had nothing to do with that flabby impressionability which is
dignified under the name of the "creative temperament"-it was an extraordinary
gift for hope, a romantic readiness such as I have never found in any other
person and which it is not likely I shall ever find again. No-Gatsby turned out
all right at the end; it is what preyed on Gatsby, what foul dust floated in the
wake of his dreams that temporarily closed out my interest in the abortive
sorrows and short-winded elations of men.</p>
<a href="#top">Go to top</a>
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

</body>
</html>

5. Write a HTML program to insert Image tag with all its attributes.
<html>
<head>
<title>To insert Image tag with all its attributes Example</title>
</head>
<body style="background-image:url('clouds.jpg')">
<p style="background-image:url('clouds.jpg')">
<h2>HTML Image</h2>
<imgsrc="pic_trulli.jpg" alt="Trulli" width="500" height="333">
<h2>HTML Image</h2>
<imgsrc="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<h2>HTML Image</h2>
<imgsrc="img_chania.jpg" alt="Flowers in Chania" width="460"
height="345">
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot
see the image gets an understanding of what the image contains:</p>
<imgsrc="img_chania.jpg" alt="Flowers in Chania" width="460"
height="345">
<p>If a browser cannot find the image, it will display the alternate text:</p>
<imgsrc="wrongname.gif" alt="Flowers in Chania">
<h2>Styling Images</h2>
<p>The image below has the width attribute set to 128 pixels, but the
stylesheet overrides it, and sets the width to 100%.</p> <imgsrc="html5.gif"
alt="HTML5 Icon" width="128" height="128">
<p>The image below uses the style attribute, where the width is set to 128
pixels which overrides the stylesheet:</p>
<imgsrc="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
<p>Insert an image from another folder:</p>
<imgsrc="/images/stickman.gif" alt="Stickman" width="24" height="39">
<p>Insert an image from a web site:</p>
<imgsrc="https://www.w3schools.com/images/lamp.jpg" alt="Lamp"
width="32" height="32"><p> An image that is a link:
<a href="https://www.w3schools.com">

<imgsrc="smiley.gif" alt="Go to W3Schools!" width="42" height="42"

border="0">
</a>
</p>
<h2>Images on Another Server</h2>
<imgsrc="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" style="width:104px;height:142px;">
<h2>Animated Images</h2>
<p>The GIF standard allows moving images.</p>
<imgsrc="programming.gif" alt="Computer man"
style="width:48px;height:48px;">
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<imgsrc="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border
around the image.</p>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p><imgsrc="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
A paragraph with a floating image.A paragraph with a floating image. A
paragraph with a floating image.</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<imgsrc="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
A paragraph with a floating image.A paragraph with a floating image.A
paragraph with a floating image.</p>
</body>
</html>

6. Create a Web Page to display the text “ALL THE BEST" aligned with
images
<html>
<head>
<title>Totext “ALL THE BEST" aligned with imagesExample</title>
</head>
<body>
<h1>Theimg align attribute</h1>
<p><strong>Note:</strong> The align attribute is not supported in HTML5.

Use
CSS instead!</p>
<h2>align="bottom" (default):</h2>
<p>ALL THE BEST.<imgsrc="smiley.gif" alt="Smiley face" width="42"
height="42"> This is some text.</p>
<h2>align="middle":</h2>
height="42" align="middle">ALL THE BEST.</p>
<h2>align="top":</h2>
height="42" align="top">ALL THE BEST.</p>
<h2>align="right":</h2>
height="42" align="right">ALL THE BEST.</p>
<h2>align="left":</h2>
height="42" align="left">ALL THE BEST.</p>
</body> </html>

7. Write a HTML program to implement Font tags along with its

attributes.
<html>
<head>
<title>To implement Font tags along with its attributes Example</title>
</head>
<body>
<p><font face="verdana">This is some text!</font></p>
<p>The face attribute is not supported HTML5. Use CSS instead.</p>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
<p><strong>Note:</strong> The font element is not supported in HTML5. Use

CSS instead.</p>
<p style="font-family:verdana">This is a paragraph.</p>

<p style="font-family:'Courier New'">This is another paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>

<p style="font-size:11px">This is another paragraph.</p>
</body>
</html>
ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 10 | P a g e

8. Write a HTML program to illustrate List formatting tags for the streams
available in College :
a. Ordered list b. Unordered list
c. Menu List. d. Definition List
<html>
<head>
<title>To illustrate List formatting tags for the streams available in College
Example</title>
</head>
<body>
<h1>EThames Degree College Courses</h1>
<ul>
<li> Bachelors in Commerce (B.Com)
<ul TYPE = "SQUARE">
<li> Computers </li>
<li>Foriegn Trade </li>
<li TYPE = "DISC"> General </li>
<li TYPE = "CIRCLE"> Sales and Marketing </li>
</ul>
</li>
<li> Bachelors in Busines Management (BBA)</li>
</ul>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List / Menu List</h2>
<ol>
<li>Coffee</li>

<li>Tea</li>
<li>Milk</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

9. Create a Web Page to display ordered list, unordered list on the subjects
available in Fifth Semester.
<html>
<head>
<title>To display ordered list, unordered list on the subjects available in Fifth
semester Example</title>
</head>
<body>
<h2>Unordered List</h2>
<h1>Osmania University</h1>
<ul>
<li>Bachelors in Commerce (B.Com) - subjects in V Semester
<ul TYPE = "SQUARE">
<li> Practice of General Insurance </li>
<li> Introduction to Indian Economy </li>
<li> Cost Accounting </li>
<li> Business Law </li>
<li> Banking Theory & Practice</li>
<li> Excel Foundation</li>
<li>Computerized Accounting/Business Analytics</li>
<li> Web Technology / Business Simulation</li>
</ul>
</li>
</ul>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List / Menu List</h2>

<ol>
<li>Bachelors in Commerce (B.Com) - subjects in V Semester
<ol TYPE = "SQUARE">
<li> Practice of General Insurance </li>
<li> Introduction to Indian Economy </li>
<li> Cost Accounting </li>
<li> Business Law </li>
<li> Banking Theory & Practice</li>
<li> Excel Foundation</li>
<li>Computerised Accounting/Business Analytics</li>
<li> Web Technology / Business Simulation</li>
</ol>
</li>
</ol>
</body>
</html>

10. Create a Table with Four rows and four columns in HTML.
<html>
<head>
<title>Table with four rows and four columns</title>
<style> table
{ border: 5px solid black; width: 50%;
} td { width: 50%; height: 80px; border: 1px solid;
}
</style> </head>
<body>
<table>
<tbody>
<tr><td align="center">1</td><td align="center">2</td></tr>
</tbody>
</table>
</body>
</html>

11. Write a HTML program to create a Time-table of your College using

necessary options such as Cellpadding, Cellspacing ,colspan , rowspan .
<html>
<head>
<title>To illustrate time tableExample</title>
</head>
<body>
<H1><CENTER>COLLEGE TIME TABLE</H1>
<table border="2" cellpadding="10" cellspacing="3" align="center"> <tr>
<td align="center">
<td align="center">1:00-1:45
</tr>
<tr>
<td align="center">MONDAY
<td align="center">BL<td align="center"><font color="blue">WEB<br>
<td rowspan="5"align="center">B<br>R<br>E<br>A<br>K
<td align="center"><font color="pink">BTP<br>
<td align="center"><font color="red">CA<br>
<td align="center"><font color="maroon">EXCEL<br>
</tr>
<tr>
<td align="center">TUESDAY
<td align="center"><font color="blue">BTP<br>
<td align="center"><font color="red">BL<br>
<td align="center"><font color="pink">EXCEL<br>
<td align="center"><font color="orange">CA<BR>
<td align="center">IE
</tr>
<tr>
<td align="center">WEDNESDAY

<td align="center"><font color="pink">CA<br>

<td align="center"><font color="orange">COSTACCOUNTING<BR>
<td align="center"><font color="brown">BTP<br>
<td align="center"><font color="green">WEB
<td align="center"><font color="green"> SEMINAR
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">WEB<br>
<td align="center"><font color="brown">WEB<br>
<td align="center"><font color="orange">EXCEL<BR>
<td align="center"><font color="blue">BL<br>
<td align="center">COSTING
</tr>
<tr>
<td align="center">FRIDAY
<td align="center"><font color="orange">BL<BR>
<td align="center"><font color="maroon">BTP<br>
<td align="center"><font color="blue">CA<br>
<td align="center"><font color="pink">WEB<br>
<td align="center">BTP
</tr>
</body>
</html>

12. Write a HTML program to marquee the image and text.
<html>
<head>
<title>To illustrate marquee the image and text</title>
</head>
<body>
<marquee behavior="scroll" direction="right">

<imgsrc="slack.jpg" width="100" height="100" alt="EThames">
<p>MARQUEE IMAGE AND TEXT <br> EThames</p>
</marquee>
</body>
</html>

13. Create a Web Page in which the text " WEB TECHNOLOGY " should
scroll in different directions for four times
<html>
<head>
<title>To illustratethe text " WEB TECHNOLOGY " should scroll in different
directions for four times</title>
</head>
<body>
<marquee behavior="scroll" direction="right" loop="4">
<h3 align="center"><b>WEB TECHNOLOGY<b></H3>
</marquee>
<br>
<br>
<br>
<br>
<br>
<marquee behavior="scroll" direction="LEFT" loop="2"> <h3
align="center"><b>WEB TECHNOLOGY<b></H3>
</marquee>
<br>
<br>
<br> <br>
<br>
<marquee behavior="scroll" direction="UP" loop="3">
<h3 align="center"><b>WEB TECHNOLOGY<b></H3>
</marquee>
<br>
<br>
<br>
<br>
<br>
<marquee behavior="scroll" direction="DOWN" loop="4">
<h3 align="center"><b>WEB TECHNOLOGY<b></H3> </marquee>
</head> </html>

14. Create a table using all its attributes and sub tags to execute the
following Information .
S.No. Name Specialization

1. Ada Lovelace She is World's first Computer Programmer.
2. Adam Osborne Creator of the first commercially available
Portable Computer.
3. AbhayBhushan Author of the File Transfer Protocol.
4. Alan Cooper Father of Visual Basic.
5. Alan Emtage Developer of “Archie " which is
considered to be the first search engine.
6. Alan Schaaf Founder of " Imgur " which is the world's
largest image hosting site .
7. Alexander Created the first graphical Computer game,
Douglas OXO .
8. Andreas Co-founder of Sun Microsystems.
Bechtolsheim
<html>
<head>
<title>EThames</title>
</head>
<body>
<table border="1" style="border-collapse:collapse;">
<tr>
<td><b>S.No.</b></td>
<td><b>NAME</b></td>
<td><b>SPECIALIZATION</b></td>
</tr>
<tr>
<td>1. </td>
<td>Ada Lovelace</td>
<td>She is World's first Computer Programmer.</td> </tr>
<tr>

<td>2. </td>
<td>Adam Osborne</td>
<td>Creator of the first commercially available Portable Computer . </td>
<tr>
<tr>
<td>3.</td>
<td>AbhayBhushan</td>
<td>Author of the File Transfer Protocol . </td>
</tr>
<tr>
<td>4.</td>
<td>Alan Cooper</td>
<td>Father of Visual Basic .</td>
</tr>
<tr>
<td>5.</td>
<td>Alan Emtage</td>
<td>Developer of " Archie " which is considered to be the first search
engine.</td>
</tr>
<tr>
<td>6.</td>
<td>Alan Schaaf</td>
<td>Founder of " Imgur " which is the world's largest image hosting site .</td>
</tr>
<tr>
<td>7.</td>
<td>Alexander Douglas</td>
<td>Created the first graphical Computer game, OXO .</td> </tr>
<tr>
<td>8.</td>
<td>Andreas Bechtolsheim</td>
<td>Co-founder of Sun Microsystems.</td>
</tr>
</table> </body> </html>

15. Create a Program on the concept of Form containing Textboxes, Radio

Buttons and Check boxes.
<html>
<head>ethames</head
<body>
<form>
<table>
<tr>
<td><label for="uname">Name</label></td>
<td><input type="text" id="uname" name="username"></td> </tr>
<tr>
<td><label for="uemail">Email</label></td>
<td><input type="text" id="uemail" name="usermail"><button
type="button">Check</button></td>
</tr>
<tr>
<td><label for="age">Age</label></td>
<td><input type="text" name="userage" id="age" size="2"
maxlength="2"></td> </tr>
<tr>
<td><label>Country</label></td>
<td><input type="text" value="India" name="country" disabled></td> </tr>
<tr>
<td><label for="pass">Password</label></td>
<td><input type="password" id="pass" ></td>
</tr>
<tr>
<td><label for="res">Resume</label></td>
<td><input type="file" id="res" ></td>
</tr>
<tr>
<td><label >Hobbies</label></td>
<td><label><input type="checkbox" checked> Cricket</label><label><input
type="checkbox"> Football</label></td>
</tr>
<tr>

<td><label >Gender</label></td>
<td><label><input type="radio" value="f" name="gender">
Female</label><label><input value="m" type="radio" name="gender">
Male</label></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Channai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"><input type="reset"></td> </tr>
</table>
</form>
</body>
</html>

16: Create a Program on Employee Information Form.

<html>
<head>
<title> "Employee Form" </title>
<body>
<center><h3>EMPLOYEE INFORMATION FORM</h3></center>
<table align="center" cellpadding = "10">
<tr>
<td>Associate ID</td>
<td><input type="text" name="associate_id" maxlength="6"></td> </tr>
<tr>
<td>First Name</td>
<td><input type="text" name="first_name" maxlength="30"></td> </tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="Last_Name" maxlength="30"/></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="10">10</option> <option value="11">11</option>

</select>
<select id="Birthday_Month" name="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>
<select name="Birthday_Year" id="Birthday_Year">
<option value="-1">Year:</option>

</select></td>
</tr>
<tr>
<td> Date of Joining </td>
<td>
<select name= "Day" id = "day">

</select>
<select name = "Month" id = "month"> <option value="-1">Month:</option>
<option value="December">Dec</option> </select>
<select name = "Year" id = "year">

</select></td>
</tr>
<tr>
<td> Associate Location </td>
<td><input type = "text" name:"associate_location">
</td>
</tr>
<tr>
<td> Designation </td>
<td><input type = "text" name="designation" maxlength = "50"></td> </tr>
<tr>
<td>Contact Number</td>
<td><input type="text" name="contact_number" maxlength="12"></td> </tr>
<tr>
<td>Project</td>
<td><input type="text" name="project"></td>
</tr>
<tr>
<td> Reporting Manager </td>
<td><input type="text" name="reporting_manager"></td>
</tr>
<tr>
<td> Email ID </td>
<td><input type="text" name="email_id"></td>
</tr>
</table></body></html>

17. Create a program on Pull down menu on the universities available in

Telangana State.
<html>
<head>
<title> Universities </title>
<style> h1 { color : blue; }
</style>
</head>
<body>
<h1 align="center"> Top Universities in Telangana</h1>

<center><select name ="select:" id = "select:">
<option value = "-1"> select </option>
<option value = "Osmania University"> Osmania University </option>
<option value = "Kakatiya University">Kakatiya University </option>
<option value = "JNTU"> JNTU </option>
<option value = "NIT"> NIT </option>
</select></center>
</body>
</html>

18. Create a program on Pull down menu on the best Web Designing
software’s.
<html>
<head>
<title> Web Designing softwares</title>
<style> h1 { color: green; }
</style>
</head> <body>
<h1 align="center"> WEB DESINGNING SOFTWARES </h1>
<center>
<select>
<option value = "-1"> select </option>
<option value = "Adobe Photoshop"> Adobe Photoshop </option>
<option value = "GIMP"> GIMP </option>
<option value = "Sketch"> Sketch </option>
<option value = "Adobe Dreamweaver"> Adobe Dreamweaver </option>
<option value = "Color Wheel"> Color Wheel </option>
<option value = "Pictaculous">Pictaculous</option>
</select></center>
</body>
</html>

19. Create a Web Page of student information form, when the information
is submitted message should be displayed.
<html>
<head>
<title>Student Registration Form</title>
<style> h3{
font-family: Calibri;
font-size: 25pt; fontstyle: normal; fontweight: bold; color:SlateBlue;
text-align: center; text-decoration: underline
}
table{ font-family: Calibri; color:white; font-size:

11pt; font-style: normal; font-weight: bold;
text-align:; background-color: SlateBlue;
border-collapse: collapse; border:
2px solid navy } table.inner{ border: 0px
}
</style>
</head>
<body>
<h3>STUDENT REGISTRATION FORM</h3>
<table align="center" cellpadding = "10">


<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>


<tr>

<td>LAST NAME</td>
<td><input type="text" name="Last_Name" maxlength="30"/>
</td>
</tr>


<tr>
<td>DATE OF BIRTH</td>
<td>
<select name="Birthday_day" id="Birthday_Day">

</select>
<select id="Birthday_Month" name="Birthday_Month">

<option value="-1">Month:</option>
<option value="December">Dec</option>
</select>
<select name="Birthday_Year" id="Birthday_Year">


</select>
</td>
</tr>
 <tr>

<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="100" /></td> </tr>
 <tr>

<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />

(10 digit number)

</td>
</tr>
 <tr>

<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>
 <tr>

<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="30"></textarea></td> </tr>


<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
</td>
</tr>


<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
(6 digit number)
</td>
</tr>
 <tr>

<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />
</td>

</tr>
 <tr>

<td>COUNTRY</td>
<td><input type="text" name="Country" value="India" readonly="readonly"
/></td>
</tr>

<tr>
<td>HOBBIES <br /><br /><br /></td>
<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" /> Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" /> Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" /> <br
/>
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>
 <tr>

<td>QUALIFICATION <br /><br /><br /><br /><br /><br /><br /></td>
<td>
<table>
<tr>
<td align="center"><b>Sl.No.</b></td>
<td align="center"><b>Examination</b></td>
<td align="center"><b>Board</b></td>

<td align="center"><b>Percentage</b></td>
<td align="center"><b>Year of Passing</b></td>
</tr>
<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name="ClassX_Board" maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing" maxlength="30" /></td>
</tr>
<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board" maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing" maxlength="30"
/></td> </tr>
<tr>
<td>3</td>
<td>Graduation</td>
<td><input type="text" name="Graduation_Board" maxlength="30" /></td>
<td><input type="text" name="Graduation_Percentage" maxlength="30"
/></td>
<td><input type="text" name="Graduation_YrOfPassing" maxlength="30"
/></td> </tr>
<tr>
<td>4</td>
<td>Masters</td>
<td><input type="text" name="Masters_Board" maxlength="30" /></td>
<td><input type="text" name="Masters_Percentage" maxlength="30" /></td>
<td><input type="text" name="Masters_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td></td> <td></td>
<td align="center">(10 char max)</td>
<td align="center">(upto 2 decimal)</td>
</tr>
</table>
</td>
</tr>
 <tr>

<td>COURSES<br />APPLIED FOR</td>
<td>
BCA
<input type="radio" name="Course_BCA" value="BCA">
B.Com
<input type="radio" name="Course_BCom" value="B.Com"> B.Sc
<input type="radio" name="Course_BSc" value="B.Sc"> B.A
<input type="radio" name="Course_BA" value="B.A">
</td>
</tr>
 <tr>

<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

20 . Write a HTML program to create Four Vertical Frames .
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "20%,40%,20%,20%">

<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<frame name = "four" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

21. Write a HTML program to create Four Horizontal Frames.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "20%,40%,20%,20%">

<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<frame name = "four" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

22. Write a DHTML program for Cascading style Sheets
<html>
<head>
<title> </title> <style> h1 { color: green; } p { color: red;
}
</style>
</head>
<body>
<h1>ETHAMES</h1>
<p>Ethames Degree College</p>
</body>
</html>
ETHAMES DEGREE COLLEGE WEB TECHNOLOGIES 41 | P a g e

23. Write a DHTML program to demonstrate Inline Style Sheets.
<html>
<head>
<title>HTML Inline CSS</title> </head> <body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>

24. Write a DHTML program to demonstrate External Style Sheets
Save this style .css
h1 { color:
green; }
p { color: red; }
NOW STYLE.CSS FILE IN HTML AS FOLLOWS:
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Cascading Sheets</title>
</head>
<body>
<center><h1> Web Technology</h1></center>
<center><p> our subject </p></center>
</body>
</html>

25. Write a DHTML program to demonstrate Embedded Style Sheets

Internal (also called Embedded) style sheet is defined within the head
section of a page. Applies to that page only
<html>
<head>
<style type="text/css"> p
{ font-family: georgia, serif; font-size: x-large;
color:#ff9900;
} a:hover { color: LimeGreen; textdecoration: none;
}
</style>
</head>
<body>
<p>This paragraph tag has been preset using embedded style sheets. Same for
the horizontal rule below and the hyperlink under that. </p>
<p>Also see <a href="http://www.ethames.ac.in" target="_blank">external
style sheets</a></p>
</body>
</html>

Name : ______________________ B.Com (Computers) III yr V Sem OU ID : __________________
26. Write a DHTML program to illustrate Id and Class Selectors using

CSS
<html>
<head>
<style> #para1 { text-align: center; color: red; } .center { text-align:
center; color:
red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

27. Write a DHTML program to demonstrate Filters
<html>
<head> <style> img { webkit-filter:
grayscale(100%); filter: grayscale(100%);
}
</style>
</head>
<body>
<h1> Filter Property </h1>
<p> convert the image to grayscale </p>
<img src="img.jpg" alt="img" width="300">
</body>
</html>

28. Write a DHTML program to demonstrate Transitions.
<html>
<head> <style> div { width: 100px; height: 100px; background: red;
transition: width 2s;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
}
div:hover {
width: 300px;
}
</style>
</head> <body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>

29 Write a DHTML program to demonstrate changing text and attributes

using CSS
<html>
<head>
<style>
div { border: 1px solid gray; padding: 8px;
}
h1 { text-align: center;
text-transform: uppercase; color: #4CAF50;
}
p { text-indent: 50px; text-align:

justify; letterspacing: 3px;
}
a { text-decoration: none; color:

#008CBA; }
</style> </head>
<body>
<div>
<h1>text formatting</h1>
<p>This text is styled with some of the text formatting properties. The heading
uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is
specified.
The underline is removed from this colored
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it
Yourself"</a> link.</p>
</div>
</body> </html>

30. Write a Java Script program to calculate Area and circumference of a

Circle.
<html>
<head>
<title>Find the area and circumference of a circle</title>
</head>
<body>
<script language="JavaScript"> function CalculateArea(){ var radius
=document.form1.txtRadius.value; document.write("<P>The area of the
circle is " + (radius * radius * Math.PI) +
"</p>");
document.write("<P>The circumference of the circle is " + (2 * radius *
Math.PI) + "</p>");
}
</script>
<form name=form1>
Enter the radius of circle:
<input type="text" name="txtRadius" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea();'>
</form>
</script>
</body>
</html>

31. Java Script program to display Greatest Number among Three

Numbers
<script>
function largest()
{
var, num1, num2, num3;
num1 = Number(document.getElementById("N").value);
num2 = Number(document.getElementById("M").value);
num3 = Number(document.getElementById("O").value);
if(num1>num2 && num1>num3)

{
window.alert(num1+"-is greatest");
}
else if(num2>num1 && num2>num3)
{
window.alert(num2+"-is greatest");
}
else if(num3>num1 && num3>num1)
{
window.alert(num3+"is greatest");
}
}
</script>
Save this as Greatest.js and add to HTML

<html>
<head>
<script type="text/JavaScript" src="Greatest.js">
</script>
</head>
<body>

<h1>Calculate largest among three numbers</h1>

<hr color="red">
<br>
Enter number 1: <input type="text" id="N"></input><br>
Enter number 2: <input type="text" id="M"></input><br>
Enter number 3: <input type="text" id="O"></input><br>
<hr color="red">
<center><button onclick="largest()">OK</button></center>
</body>
</html>

32. Java Script program to demonstrate Arithmetic Operations using

Switch case.
<html>
<head>
<title>math</title>
<script type= "text/javascript ">



</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......
<input type="submit" value="Submit" />
</form>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">

<h2> This is inside the division </h2>
</div>
</body>
</html>

36. Write a Java Script program to print N-natural numbers using For
loop
<html>
<head>
<script type='text/javascript'> var num = prompt("Enter a Number")
var num = parseInt(num);var i = 0;
for(i=0;i<=num;i++) {
document.write(i);
}
</script>
</head>
<body>
</body>
</html>

37. Write a Java Script program to print Factorial of a given number.
<html>
<head> <script> function show(){
var i, no, fact; fact=1;

no=Number(document.getElementById("num").value); for(i=1; i<=no; i++)
{ fact= fact*i;
}
document.getElementById("answer").value= fact;
}
</script>
</head>
<body>
Enter Num: <input id="num">
<button onclick="show()">Factorial</button>
<input id="answer">
</body>
</html>

38. Write a Java Script program to demonstrate Arrays.
<html>
<head>
<title>Basic Javascript Array Example</title>
<script language="javascript">
var empty = [];
var fruits = ['ethames', 'ethames2', 'ethames3'];
alert(fruits[1]);
</script>
</head>
<body>
</body>
</html>

39. Write a Java Script program to demonstrate String manipulating

functions.
Manipulating string values is a common developer chore. This ranges from

extracting portions of a string to determining if a string contains a specific
character.
<html>
<head>
<title>JavaScript String split() Method</title>
</head>
<body>
<script type="text/javascript"> var str = "Apples are round, and apples

are juicy."; var splitted = str.split(" ", 3);
document.write( splitted );
</script>
</body>
</html>

40. Write a Java Script program to demonstrate Math objects
<html>
<body>
<script type="text/javascript">
document.write(Math.round(7.25))
document.write(Math.max(2,4))
document.write(Math.min(2,4))
</script>
</body>
</html>

41. Create a Web page with an image, when the mouse is doubled clicked
new image should replace the existing
<html>
<head><title>ondblclick event demo</title>
</head>
<body>
<h3>ondblclick event demo</h3>
<p>Fires when the element is double-clicked.</p> <img
style="width:300px;height:100px;border:1px solid;"
ondblclick="javascript:alert('event has been triggered');">Demo text</img>
</body>
</html>

42. Create a Web page and apply mouse effects to change text color, size,
family etc on the text
<html>
<head> <style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes
color</a></b></p>

<p><b><a class="two" href="default.asp" target="_blank">This link changes

fontsize</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes
background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes
font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes
textdecoration</a></b></p>
</body>
</html>

43. Create a Web page which displays a line of text, when you click on the
text a new line of text should overwrite the existing text.
<html>
<body>
<p>This example uses the HTML DOM to assign an "ondblclick" event to a p

element.</p>
<p id="demo">Double-click me.</p>
<script> document.getElementById("demo").ondblclick = function()

{myFunction()};
function myFunction() { document.getElementById("demo").innerHTML =

"I was double-clicked!"; }
</script>
</body>
</html>

44. Create a program on the event onkeypress.
<html>
<head> <script> function myFunction() { alert("You pressed a key inside the
input field");
}
</script>
</head>
<body>
<p>A function is triggered when the user is pressing a key in the input
field.</p>
<input type="text" onkeypress="myFunction()">
</body>
</html>

45. Create a program on the event onreset.
<html>
<head> <script> function message() { alert("This alert box was triggered by
the onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>

46. Create a XML document for employee database with 10 records and 5
columns in each record.
<?xml version = "1.0" encoding="UTF-8" standalone="yes"?>

<document>
<employee>
<name>
<lastname>Kelly</lastname>
<firstname>Grace</firstname>
</name>
<hiredate>October 15, 2005</hiredate>
<projects>
<project>
<product>Printer</product>
<id>111</id>
<price>$111.00</price>
</project>
<project>
<product>Laptop</product>
<id>222</id>
</project>
</projects>
</employee>
<employee>
<name>
<lastname>Grant</lastname>
<firstname>Cary</firstname>
</name>
<projects>
<project>

<product>Desktop</product>
<id>333</id>
</project>
<project>
<product>Scanner</product>
<id>444</id>
</project> </projects>
</employee>
<employee>
<name>
<lastname>Gable</lastname>
<firstname>Clark</firstname>
</name>
<projects>
<project>
<product>Keyboard</product>
<id>555</id>
</project>
<project>
<product>Mouse</product>
<id>666</id>
</project>
</projects>
</employee>
<employee>
<name>
<lastname>Harry</lastname>
<firstname>Dou</firstname>

</name>
<projects>
<project>
<product>Printer</product>
<id>111</id>
</project>
<project>
<product>Laptop</product>
<id>222</id>
</project>
</projects>
</employee> <employee>
<name>
<lastname>Lary</lastname>
<firstname>Cary</firstname>
</name>
<projects>
<project>
<product>Desktop</product>
<id>333</id>
</project>
<project>
<product>Scanner</product>
<id>444</id>
</project>
</projects>
</employee>

</document>
47. Create a XML document for student database and apply the style sheet
effects.
Steps to Apply CSS to XML Document
Step 1 : Create XML
Create Sample XML File same like shown above. (Say Student.xml)
<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?>
<Students>
<Student>
<Name>Ra.One</Name>
<Address>New Delhi</Address>
</Student>
<Student>
<Name>Krishh</Name>
<Address>New Mumbai</Address>
</Student>
</Students>
Step 2 : Create CSS File

Now create CSS file with following content and write save it as “Student.css”.
Students { fontfamily:verdana,helvetica,sans-serif;
}
Name
{ display:block; font-weight:bold; font-size :18px;
}
Address
{ font-size
:15px;
}
Step 3 : Include CSS file in the XML Document

Applying css to the XML document is much easy task. we need to include
css
<?xml-stylesheet type="text/css" href="Student.css"?>
After Including above line in the XML document complete XML document will
looks like –
<?xml-stylesheet type="text/css" href="Student.css"?>
<Students>
<Student>
<Name>Ra.One</Name>
</Student>
<Student>
<Name>Krishh</Name>
</Student>
</Students>

48. Create a XML document with simple links
<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">
<book title="Harry Potter">

<description xlink:type="simple" xlink:href="/images/HPotter.gif"
xlink:show="new">
As his fifth year at Hogwarts School of Witchcraft and Wizardry approaches,
15-year-old Harry Potter is.......
</description>
</book>
<book title="XQuery Kick Start">

<description xlink:type="simple" xlink:href="/images/XQuery.gif"
xlink:show="new">
XQuery Kick Start delivers a concise introduction to the XQuery
standard.......
</description>
</book>
</bookstore>

49. Create a XML document for the Marketing department of an

organization and apply style effects.
Step 1 : Create CSS File

Create CSS file with following content and write save it as “marketing.css”.
Marketing
{ font-family:verdana,helvetica,sans-serif;
}
Name
{ display:block; font-weight:bold; font-size :18px;
}
Address
{ font-size
:15px;
}
Step 2 : Include CSS file in the XML Document
Applying css to the XML document is much easy task. we need to include
css
<?xml-stylesheet type="text/css" href=" marketing.css"?>
< marketing >
<sales>
<Name>Ra.One</Name>
</Student>
<Student>
<Name>Krishh</Name>
</sales>
</ marketing >

50. Create a program on XML Document Object Model.
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>ContactNo:</b> <span id = "ContactNo"></span><br>
<b>Email:</b> <span id = "Email"></span>
</div>
<script>
//if browser supports XMLHttpRequest if
(window.XMLHttpRequest)
{ // Create an instance of XMLHttpRequest object. code for IE7+,
Firefox, Chrome, Opera, Safari xmlhttp = new
XMLHttpRequest();
} else { // code for IE6, IE5 xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}
// sets and sends the request for calling "node.xml"

xmlhttp.open("GET","/dom/node.xml",false); xmlhttp.send();
// sets and returns the content as XML DOM xmlDoc =

xmlhttp.responseXML;
//parsing the DOM object

document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =

xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("ContactNo").innerHTML =
xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0].nodeValue;
document.getElementById("Email").innerHTML =
xmlDoc.getElementsByTagName("Email")[0].childNodes[0].nodeValue;
</script> </body>
</html>
Create node.xml
<Company>
<Employee category = "Technical" id = "firstelement">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>tanmaypatil@xyz.com</Email>
</Employee>
<Employee category = "Non-Technical">

<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<Email>taniyamishra@xyz.com</Email>
</Employee>
<Employee category = "Management">

<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<Email>tanishasharma@xyz.com</Email>
</Employee>
</Company>

Web Technologies - Lab Record 2023

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies - Lab Record 2023

Uploaded by

Copyright:

Available Formats

Name : ______________________ B.

Com (Computers) II yr IV Sem OU ID : __________________

1. Write a HTML program to implement Formatting tags .

<div id = "content" align = "left" bgcolor = "white">

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 1|Page

2. Write a HTML program to demonstrate all Logical tags.

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 2|Page

3. Write a HTML program to implement all Header tags.

<h2>This is heading 2</h2>

<h2>This is heading 2</h2>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 3|Page

<p>This is a link to <a href="http://www.wfp.org/">World Food

<p>This is a link to our <a href="default.asp">HTML reference</a>.</p>

<p>An image as a link: <a href="https://www.google.com">

<img border="0" alt="google.com" src="logo_w3s.gif" width="100"

<a href="https://www.google.com" target="_blank">Visit google.com!</a>

<p>This is an email link:

<p><b>Note:</b> Spaces between words should be replaced by %20 to ensure

<p>This is another mailto link:

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 4|Page

0in vited%20to%20a%20big%20summer%20party!" target="_top">Send

<p><b>Note:</b> Spaces between words should be replaced by %20 to ensure

<p>This is a phone link:

<h2 id="top">Top of page!</h2>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 5|Page

<a href="#top">Go to top</a>

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 6|Page

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 7|Page

<imgsrc="smiley.gif" alt="Go to W3Schools!" width="42" height="42"

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 8|Page

<p><strong>Note:</strong> The align attribute is not supported in HTML5.

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 9|Page

7. Write a HTML program to implement Font tags along with its

<p>The face attribute is not supported HTML5. Use CSS instead.</p>

<p><font size="3" color="red">This is some text!</font></p>

<p><font size="2" color="blue">This is some text!</font></p>

<p><font face="verdana" color="green">This is some text!</font></p>

<p><strong>Note:</strong> The font element is not supported in HTML5. Use

<p style="font-family:verdana">This is a paragraph.</p>

<p style="font-size:30px">This is a paragraph.</p>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 10 | P a g e

<h2>An Unordered HTML List</h2>

<h2>An Ordered HTML List / Menu List</h2>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 11 | P a g e

<h2>A Description List</h2>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 12 | P a g e

<h2>An Unordered HTML List</h2>

<h2>An Ordered HTML List / Menu List</h2>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 13 | P a g e

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 14 | P a g e

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 15 | P a g e

11. Write a HTML program to create a Time-table of your College using

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 16 | P a g e

<td align="center"><font color="pink">CA<br>

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 17 | P a g e

12. Write a HTML program to marquee the image and text.

<marquee behavior="scroll" direction="right">

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 18 | P a g e

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 19 | P a g e

S.No. Name Specialization

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 20 | P a g e

ETHAMES DEGREE COLLEGE WEB TECHNOLOGY 21 | P a g e