HTML 2017
1. Add a tooltip to the paragraph below with the text "About Computer".
<html>
<head>
<title>About Computets</title>
</head>
<body>
Computer image
<img src="computer.jpg" height="400" width="250" alt="computer"></img>
</body>
</html>
<head>
<title>About Computets</title>
</head>
<body>
Computer image
<img src="computer.jpg" height="400" width="250" alt="computer"></img>
</body>
</html>
3. Transform the text below into a link that goes to computer page (e.g. compter.html).
<html>
<head>
<title>About Computers</title>
</head>
<body>
<a href="2017_1.html">about computers</a>
</body>
</html>
<head>
<title>About Computers</title>
</head>
<body>
<a href="2017_1.html">about computers</a>
</body>
</html>
4. Create time table using table tags that cover all days’ time schedules.
<html>
<head>
<title>Time scheduales</title>
</head>
<body>
<h1>Time Scheduales</h1>
<table border="2" cellspacing="5">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr>
<td>FOP</td>
<td>DBMS</td>
<td>FOM</td>
<td>MAGT</td>
<td>FAM</td>
<td>FCO</td>
</tr>
<tr>
<td>FCO</td>
<td>FOP</td>
<td>DBMS</td>
<td>FOM</td>
<td>MAGT</td>
<td>CS</td>
</tr>
<tr>
<td colspan="6" align="center">break</td>
</tr>
<tr>
<td>CS</td>
<td>FAM</td>
<td>FOP</td>
<td>FOP</td>
<td>FCO</td>
<td>CS</td>
</tr>
</table>
</body>
</html>
<head>
<title>Time scheduales</title>
</head>
<body>
<h1>Time Scheduales</h1>
<table border="2" cellspacing="5">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr>
<td>FOP</td>
<td>DBMS</td>
<td>FOM</td>
<td>MAGT</td>
<td>FAM</td>
<td>FCO</td>
</tr>
<tr>
<td>FCO</td>
<td>FOP</td>
<td>DBMS</td>
<td>FOM</td>
<td>MAGT</td>
<td>CS</td>
</tr>
<tr>
<td colspan="6" align="center">break</td>
</tr>
<tr>
<td>CS</td>
<td>FAM</td>
<td>FOP</td>
<td>FOP</td>
<td>FCO</td>
<td>CS</td>
</tr>
</table>
</body>
</html>
5. Write the HTML for the following to appear one after the other:
- A small Heading with the words, “We are Proud to Present”
- A Horizontal rule Across the Page.
- A large heading with the one word, “Orbit”.
- A Medium‐Sized Heading with The words, “The Geometric Juggler”. Another horizontal rule.
- A small Heading with the words, “We are Proud to Present”
- A Horizontal rule Across the Page.
- A large heading with the one word, “Orbit”.
- A Medium‐Sized Heading with The words, “The Geometric Juggler”. Another horizontal rule.
<html>
<head>
<title>Index</title>
</head>
<body>
<h4>we are proud to present</h4>
<hr/>
<h1>Orbit</h1>
<hr/>
<h3>The geometric juggler</h3>
<hr/>
</body>
</html>
<head>
<title>Index</title>
</head>
<body>
<h4>we are proud to present</h4>
<hr/>
<h1>Orbit</h1>
<hr/>
<h3>The geometric juggler</h3>
<hr/>
</body>
</html>
<html>
<head>
<title>Favorite Hero</title>
</head>
<body bgcolor="green">
<h1><center><font color="red" face="Comic Sans MS">Steve Jobs</center></h1>
<hr/></font>
<p> Steve Jobs was an American businessman, an early proponent of personal computers (PCs) and a cultural icon. He’s best known for his two wildly successful tenures as co-founder and CEO of Apple, as well as his time as CEO of Pixar Animation Studios. When Jobs died, at the age of 56 in 2011, he had a net worth of $10.2 billion.</p>
</body>
</html>
<head>
<title>Favorite Hero</title>
</head>
<body bgcolor="green">
<h1><center><font color="red" face="Comic Sans MS">Steve Jobs</center></h1>
<hr/></font>
<p> Steve Jobs was an American businessman, an early proponent of personal computers (PCs) and a cultural icon. He’s best known for his two wildly successful tenures as co-founder and CEO of Apple, as well as his time as CEO of Pixar Animation Studios. When Jobs died, at the age of 56 in 2011, he had a net worth of $10.2 billion.</p>
</body>
</html>
7. Create table as below. Set background color of table.
<html>
<head>
</head>
<body>
<table border=4 bgcolor=yellow cellpadding=10 >
<tr>
<td>1</td>
<td rowspan=2>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table border=4 bgcolor=yellow cellpadding=10 >
<tr>
<td>1</td>
<td rowspan=2>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
8. Create table as below. Set alternate row color of table and center alien table.
<html>
<head>
</head>
<body>
<table border=4 cellpadding=10 >
<tr>
<td rowspan=2 ><center>Browser</td></center>
<td colspan=2><center>Visitors</td></center>
</tr>
<tr>
<td>Number</td>
<td>Percentage</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>163</td>
<td>59%</td>
</tr>
<tr>
<td>Google Chorome</td>
<td>78</td>
<td>28%</td>
</tr>
<tr>
<td>safari</td>
<td>35</td>
<td>13%</td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table border=4 cellpadding=10 >
<tr>
<td rowspan=2 ><center>Browser</td></center>
<td colspan=2><center>Visitors</td></center>
</tr>
<tr>
<td>Number</td>
<td>Percentage</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>163</td>
<td>59%</td>
</tr>
<tr>
<td>Google Chorome</td>
<td>78</td>
<td>28%</td>
</tr>
<tr>
<td>safari</td>
<td>35</td>
<td>13%</td>
</tr>
</table>
</body>
</html>
9. Create table as below.
<html>
<head>
<title> EX-9 </title>
</head>
<body bgcolor=white>
<center>
<table border=3 rules=all width=40% height=40% bgcolor=white bordercolor=teal>
<tr>
<td colspan=2 rowspan=2>r1c1</td>
<td>r1c3</td>
<td rowspan=2>r1c4</td>
<td colspan=2 rowspan=2>r1c5</td>
</tr>
<tr>
<td rowspan=2>r2c3</td>
</tr>
<tr>
<td colspan=2>r3c1</td>
<td colspan=2>r3c4</td>
<td>r3c6</td>
</tr>
<tr>
<td>r4c1</td>
<td colspan=2>r4c2</td>
<td rowspan=2>r4c4</td>
<td colspan=2>r4c5</td>
<tr>
<td colspan=2 rowspan=2>r5c1</td>
<td rowspan=2>r5c3</td>
<td colspan=2 rowspan=2>r5c5</td>
</tr>
<tr>
<td>r6c4</td>
</tr>
</table>
</body>
</html>
<head>
<title> EX-9 </title>
</head>
<body bgcolor=white>
<center>
<table border=3 rules=all width=40% height=40% bgcolor=white bordercolor=teal>
<tr>
<td colspan=2 rowspan=2>r1c1</td>
<td>r1c3</td>
<td rowspan=2>r1c4</td>
<td colspan=2 rowspan=2>r1c5</td>
</tr>
<tr>
<td rowspan=2>r2c3</td>
</tr>
<tr>
<td colspan=2>r3c1</td>
<td colspan=2>r3c4</td>
<td>r3c6</td>
</tr>
<tr>
<td>r4c1</td>
<td colspan=2>r4c2</td>
<td rowspan=2>r4c4</td>
<td colspan=2>r4c5</td>
<tr>
<td colspan=2 rowspan=2>r5c1</td>
<td rowspan=2>r5c3</td>
<td colspan=2 rowspan=2>r5c5</td>
</tr>
<tr>
<td>r6c4</td>
</tr>
</table>
</body>
</html>
10. Create table as below.
<html>
<body>
<table border="7">
<tr>
<td colspan=3>car</td>
<td>price</td>
</tr>
<tr>
<td colspan=2 rowspan=4>maruti</td>
<td>omni van</td>
<td>20000</td>
</tr>
<tr>
<td>maruti 800</td>
<td>242000</td>
</tr>
<tr>
<td>maruti 1000</td>
<td>31000</td>
</tr>
<tr>
<td>maruti zen</td>
<td>39000</td>
</tr>
<tr>
<td rowspan=3 colspan=2>tata</td>
<td>sumo</td>
<td>462000</td>
</tr>
<tr>
<td>sieera</td>
<td>462000</td>
</tr>
<tr>
<td>estae</td>
<td>47000</td>
</tr>
<tr>
<td rowspan=2 colspan=2>ambassdor</td>
<td>patrol</td>
<td>324000</td>
</tr>
<tr>
<td>diesel</td>
<td>387000</td>
</tr>
</table>
</body>
</html>
<body>
<table border="7">
<tr>
<td colspan=3>car</td>
<td>price</td>
</tr>
<tr>
<td colspan=2 rowspan=4>maruti</td>
<td>omni van</td>
<td>20000</td>
</tr>
<tr>
<td>maruti 800</td>
<td>242000</td>
</tr>
<tr>
<td>maruti 1000</td>
<td>31000</td>
</tr>
<tr>
<td>maruti zen</td>
<td>39000</td>
</tr>
<tr>
<td rowspan=3 colspan=2>tata</td>
<td>sumo</td>
<td>462000</td>
</tr>
<tr>
<td>sieera</td>
<td>462000</td>
</tr>
<tr>
<td>estae</td>
<td>47000</td>
</tr>
<tr>
<td rowspan=2 colspan=2>ambassdor</td>
<td>patrol</td>
<td>324000</td>
</tr>
<tr>
<td>diesel</td>
<td>387000</td>
</tr>
</table>
</body>
</html>
11. Write below paragraph.
<html>
<body>
<u>new</u> <sup>super<sup><b><mark>strength</mark></b>h<sub>2</sub>0 <i>plus</i> will<strike>etrike out</strike>any
stain,bid or small.<br>look for new <sup>super</sup><b><mark>strength</mark></b> h<sub>2</sub>0 plus in stream near you.
</body>
</html>
<body>
<u>new</u> <sup>super<sup><b><mark>strength</mark></b>h<sub>2</sub>0 <i>plus</i> will<strike>etrike out</strike>any
stain,bid or small.<br>look for new <sup>super</sup><b><mark>strength</mark></b> h<sub>2</sub>0 plus in stream near you.
</body>
</html>
12. UnOrderlist demo
fco
fop
maths
You can use Unorder list with different types
dics of list item
o circle of list item
square of list item
You can use nested unorder list
no 1
o no 2
no 3
1. one
2. two
3. three
fco
fop
maths
You can use Unorder list with different types
dics of list item
o circle of list item
square of list item
You can use nested unorder list
no 1
o no 2
no 3
1. one
2. two
3. three
<html>
<body>
<u1>
<li> fco </li>
<li> fop </li>
<li> maths </li>
</ul>
<ul>
<li> dice of list item
</li>
<li type=circle> circle
of list item</li>
<li type=square> square
of list item</li>
</ul>
<ul>
<li> no 1</li>
<ul>
<li>no 2</li>
<ul>
<li>no 3</li>
</ul> </ul> </ul>
<ol type=1>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
<body>
<u1>
<li> fco </li>
<li> fop </li>
<li> maths </li>
</ul>
<ul>
<li> dice of list item
</li>
<li type=circle> circle
of list item</li>
<li type=square> square
of list item</li>
</ul>
<ul>
<li> no 1</li>
<ul>
<li>no 2</li>
<ul>
<li>no 3</li>
</ul> </ul> </ul>
<ol type=1>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
13. You can use order list with different types
1. Numerical
B. capital letter
c. small letter
IV. capital roman letter
v. small roman letter
You can use different types with different values
D. start from D
E. for E
J. it should be J
K. it should be K
4. number should be 12
1. Numerical
B. capital letter
c. small letter
IV. capital roman letter
v. small roman letter
You can use different types with different values
D. start from D
E. for E
J. it should be J
K. it should be K
4. number should be 12
<html>
<body>
<ol>
<li>numerical</li>
<li type=A>capital letter</li>
<li> small letter</li>
<li type=I>capital roman letter</li>
<li type=i>small roman letter</li>
</ol>
<br>
<br>
<br>
<ol type=A start=4>
<li>star from D</li>
<li>for E</li></ol>
<ol type=A start=10>
<li>it should be j</li>
<li>it should be k</li>
</ol>
<ol type=1 start=4>
<li>number should be 12</li>
</ol>
</ol>
</body>
</html>
<body>
<ol>
<li>numerical</li>
<li type=A>capital letter</li>
<li> small letter</li>
<li type=I>capital roman letter</li>
<li type=i>small roman letter</li>
</ol>
<br>
<br>
<br>
<ol type=A start=4>
<li>star from D</li>
<li>for E</li></ol>
<ol type=A start=10>
<li>it should be j</li>
<li>it should be k</li>
</ol>
<ol type=1 start=4>
<li>number should be 12</li>
</ol>
</ol>
</body>
</html>
14. Use <marquee> tag with all attributes.
Write a HTML Code Produce Scrolling Text.
a. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior alternate.
b. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Scroll, Loop 3 times.
c. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Slide.
d. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior alternate, and Direction Right.
e. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Scroll, Height 25, Width =300.
Write a HTML Code Produce Scrolling Text.
a. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior alternate.
b. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Scroll, Loop 3 times.
c. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Slide.
d. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior alternate, and Direction Right.
e. Size 4, Face Courier, Color Blue, Scrolling Text Background Yellow, Behavior Scroll, Height 25, Width =300.
<html>
<head>
</head>
<body>
<font size=4 face=courier> <marquee behavior=alternate bgcolor=red> US ARMY </marquee>
</font>
<font size=4 face=courier color=blue> <marquee behavior=scroll loop=3 bgcolor=orange> abcd </marquee>
</font>
<font size=4 face=courier color=blue> <marquee behavior=slide bgcolor=yellow> abcd </marquee>
</font>
<font size=4 color=blue face=courier> <marquee behavior=alternet bgcolor=teal> abcd </marquee>
</font>
<font size=4 color=blue face=courier>
<marquee behavior=scroll height=25 width=300 bgcolor=yellow> abcd </marquee>
</body>
</html>
<head>
</head>
<body>
<font size=4 face=courier> <marquee behavior=alternate bgcolor=red> US ARMY </marquee>
</font>
<font size=4 face=courier color=blue> <marquee behavior=scroll loop=3 bgcolor=orange> abcd </marquee>
</font>
<font size=4 face=courier color=blue> <marquee behavior=slide bgcolor=yellow> abcd </marquee>
</font>
<font size=4 color=blue face=courier> <marquee behavior=alternet bgcolor=teal> abcd </marquee>
</font>
<font size=4 color=blue face=courier>
<marquee behavior=scroll height=25 width=300 bgcolor=yellow> abcd </marquee>
</body>
</html>
HTML 2016
1.
<html>
<head>
<frameset cols=33%,33%,33%>
<frameset rows=25%,25%,25%,*%>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
</frameset>
<frameset rows=50%,50%>
<frame src=001.html>
<frame src=001.html>
</frameset>
<frameset rows=25%,50%,25%>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
</frameset>
</frameset>
</head>
</html>
<head>
<frameset cols=33%,33%,33%>
<frameset rows=25%,25%,25%,*%>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
</frameset>
<frameset rows=50%,50%>
<frame src=001.html>
<frame src=001.html>
</frameset>
<frameset rows=25%,50%,25%>
<frame src=001.html>
<frame src=001.html>
<frame src=001.html>
</frameset>
</frameset>
</head>
</html>
2.
<html>
<head>
<frameset rows="33%,33%,33%">
<frameset cols="50%,50%">
<frame src="002.html"> <!..here you have to write your file name which is created>
<frame src="002.html">
</frameset>
<frameset cols="20%,40%,40%">
<frame src="002.html">
<frame src="002.html">
<frame src="002.html">
</frameset>
<frameset cols="20%,20%,60%">
<frame src="002.html">
<frame src="002.html">
<frame src="002.html">
</frameset>
</frameset>
</head>
<body>
</body>
</html>
<head>
<frameset rows="33%,33%,33%">
<frameset cols="50%,50%">
<frame src="002.html"> <!..here you have to write your file name which is created>
<frame src="002.html">
</frameset>
<frameset cols="20%,40%,40%">
<frame src="002.html">
<frame src="002.html">
<frame src="002.html">
</frameset>
<frameset cols="20%,20%,60%">
<frame src="002.html">
<frame src="002.html">
<frame src="002.html">
</frameset>
</frameset>
</head>
<body>
</body>
</html>
3.
<html>
<head>
<frameset cols="33%,33%,33%" bordercolor=red>
<frame src=003_3.html> <!...Here you should add your file name inplace of 003_3.html>
<frame src=003_3.html>
<frameset rows="10%,50%,40%">
<frame src="003_3.html">
<frame src="003_3.html">
<frame src="003_3.html">
</frameset>
</frameset>
</head>
</html>
<head>
<frameset cols="33%,33%,33%" bordercolor=red>
<frame src=003_3.html> <!...Here you should add your file name inplace of 003_3.html>
<frame src=003_3.html>
<frameset rows="10%,50%,40%">
<frame src="003_3.html">
<frame src="003_3.html">
<frame src="003_3.html">
</frameset>
</frameset>
</head>
</html>
4.
<html>
<body>
<form>
username:<input value="">
password:<input value="">
<br>
<input type="submit" name="submit">
<input type="reset">
</form>
</body>
</html>
<body>
<form>
username:<input value="">
password:<input value="">
<br>
<input type="submit" name="submit">
<input type="reset">
</form>
</body>
</html>
5.
<html>
<form>
Name:<input value="">
<br>
Sex:<input type="radio">male
<input type="radio">female
<br>
city:<select>
<option>Mumbai</option>
<option>Kolkata</option>
</select>
</form>
hobby:<input type="checkbox">reading
<input type="checkbox">Cricket
<br>
<input type="reset" value="startover">
<input type="submit" value="sendplease">
</html>
<form>
Name:<input value="">
<br>
Sex:<input type="radio">male
<input type="radio">female
<br>
city:<select>
<option>Mumbai</option>
<option>Kolkata</option>
</select>
</form>
hobby:<input type="checkbox">reading
<input type="checkbox">Cricket
<br>
<input type="reset" value="startover">
<input type="submit" value="sendplease">
</html>
6.
<html>
<head>
<frameset cols=33%,33%,33%>
<frameset rows=33%,33%,33%>
<frame src=007_1.html>
<frame src=007_4.html>
<frame src=007_4.html>
</frameset>
<frameset rows=33%,33%,33%>
<frame src=007_4.html>
<frame src=007_2.html>
<frame src=007_4.html>
</frameset>
<frameset rows=33%,33%,33%>
<frame src=007_4.html>
<frame src=007_4.html>
<frame src=007_3.html>
</frameset>
</frameset>
</head>
</html>
<head>
<frameset cols=33%,33%,33%>
<frameset rows=33%,33%,33%>
<frame src=007_1.html>
<frame src=007_4.html>
<frame src=007_4.html>
</frameset>
<frameset rows=33%,33%,33%>
<frame src=007_4.html>
<frame src=007_2.html>
<frame src=007_4.html>
</frameset>
<frameset rows=33%,33%,33%>
<frame src=007_4.html>
<frame src=007_4.html>
<frame src=007_3.html>
</frameset>
</frameset>
</head>
</html>
7.
<html>
<head>
<frameset rows="20%,70%,10%" box>
<frame src="008_1.html">
<frameset cols="20%,60%,20%">
<frame src="008_2.html">
<frame src="008_3.html">
<frame src="008_4.html">
</frameset>
<frame src="008_5.html">
</frameset>
</head>
<body>
</body>
</html>
<head>
<frameset rows="20%,70%,10%" box>
<frame src="008_1.html">
<frameset cols="20%,60%,20%">
<frame src="008_2.html">
<frame src="008_3.html">
<frame src="008_4.html">
</frameset>
<frame src="008_5.html">
</frameset>
</head>
<body>
</body>
</html>
Are you satisfied with the HTML Solutions?
© 2016 Support Technical Team | All right reserved.