Scribd
Upload
40 views

Design An HTML Page Using Basic HTML Tags

The document contains examples of using various HTML tags to design webpages, including basic tags, lists, tables, links, formatting, and images. It provides 10 sections where each section demonstrates how to create an HTML page using different features, such as ordered and unordered lists, tables to display student details, internal and external links, frames, colored text, and a form to display biographical data.

Uploaded by

Paras Sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views

Design An HTML Page Using Basic HTML Tags

The document contains examples of using various HTML tags to design webpages, including basic tags, lists, tables, links, formatting, and images. It provides 10 sections where each section demonstrates how to create an HTML page using different features, such as ordered and unordered lists, tables to display student details, internal and external links, frames, colored text, and a form to display biographical data.

Uploaded by

Paras Sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.

) 2019-20

1. Design An Html Page Using Basic HTML Tags.


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<center>
<!-- This is paragraph tag-->
<p>
Information can be defined as a collection of symbols and<br>
information technology means, those those latest inventions<br>
through which we easily communicates or convey amessafe <br>
or information from one place to another.
</p>
<hr>
<!-- This is heading tag-->
<h1>This is heading</h1>
<h2>This is heading</h2>
<h3>This is heading</h3>
<h4>This is heading</h4>
<h5>This is heading</h5>
<h6>This is heading</h6>
</center>
</body>
</html>

NITESH KUMAR B.Sc.(cs)-II Page 1


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

2. Design An HTML Page Using Ordered And Unordered List


<html>

<head>

<title> LIST</title>

<body>

<h2> ORDERED LIST </h2>

<ol font size="8">

<li>Ayush</li>

<li>Bhupesh</li>

<li>Niraj</li>

<li>Sarad</li>

<li>Yushma</li>

</ol>

<h2>UNORDERED LIST</h2>

<ul>

<li>Kite</li>

<li>Drake</li>

<li>Eagle</li>

<li>Pigeon</li>

<li>Pig</li>

</ul>

</body>

</head>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 2


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

3. Design An HTML Page Using Table


<html>

<head>

<title> my html</title>

</head>

<body>

<center>

<h1>Table</h1>

<table border="1" height="50%" width="50%">

<tr>

<th colspan="4">Main Header</th></tr>

<th colspan="4"> Details Of Students</th>

</tr>

<tr>

<th>Branch</th>

<th>Section</th>

<th>Name</th>

<th>Address</th>

</tr>

<tr>

<td rowspan="5"> computer science</td>

<td rowspan="3">section1</td>

<td>Aman</td>

<td>Bharda </td>

<tr>

NITESH KUMAR B.Sc.(cs)-II Page 3


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

<td>Raj</td>

<td> Katni</td>

<tr>

<td>Suraj</td>

<td>Bhopal</td>

</tr>

<tr>

<td>section2</td>

<td>Rahul</td>

<td>Pachpedhi</td></tr>

</tr>

<tr>

<td>section3</td>

<td>Roshni</td>

<td> Parewadih</td>

</tr>

</table>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 4


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

4. Design An HTML Page Using External Linking.


<html>

<head>

<title>external linking</title>

</head>

<body>

<center>

<h1>Welcome to my Webpage</h1>

<h3>To khnow more about this</h3>

<h2><a href="vibgyor.html">Click here</a></h2>

<h2><a href="table1.html">Click here</a></h2>

<h4>Thanks for visiting my webpage</h4>

</center>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 5


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

5. Design An HTML Page Using Internal Linking

<html>

<head> <title>Display HTML page using internal linking</title>

</head>

<body>

<p><a href="#C4">Jump to Chapter 5</a></p>

<p><a href="#C5">Jump to Chapter 6</a></p>

<h2>Chapter 1</h2>

<p>convargence of sequence</p>

<h2>Chapter 2</h2>

<p>alternating series</p>

<h2>Chapter 3</h2>

<p>change the varivable</p>

<h2>Chapter 4</h2>

<p>enelopes and evolutes</p>

<h2>Chapter 5</h2>

<p>continuitiy of function</p>

<h2>Chapter 6</h2>

<p>jacobian</p>

<h2>Chapter 7</h2>

<p>limit and contiutiy</p>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 6


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

6 Design An HTML Page Using Frame.


<html>

<head>
<title> frameset</title>
</head>
<frame>
<frameset cols="50%,50%">
<frame src="vibgyor.html">
<frameset rows="50%,50%">
<frame src="tag.html">
<frame src="internal link.html">
</frame>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 7


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

7 Design An HTML Page VIBGYOR In Different Color And


Different Size.
<html>

<head>

<title> vibgyor </title>

</head>

<body>

<center>

<font color="violet" size="10"> V </font>

<font color="indigo" size="5"> I</font>

<font color="blue" size="10"> B </font>

<font color="green" size="5">G</font>

<font color="yellow" size="10">Y</font>

<font color="orenge" size="5">O</font>

<font color="red" size="10">R</font>

</center>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 8


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

8 Design An HTML Using Different Text Formatting Tags.

<html>

<head>

<title>Design an HTML using Different text formatting tags</title>

</head>

<body>

<center>

<h1>Design an HTML using Different text formatting tags</h1>

<h3><p>The following word uses a <b>bold</b></p></h3>

<p>The following word uses a <i>Italic</i></p>

<p>The following word uses a <u>Underlined</u></p>

<p>The following word uses a <strike>strikethrough</strike></p>

<p>The following word uses a <tt>monospaced</tt></p>

<p>The following word uses a <sup>superscript</sup></p>

<p>The following word uses a <sub>subscript</sub></p>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

<p>The following word uses a <big>big</big></p>

<p>The following word uses a <small>small</small></p>

NITESH KUMAR B.Sc.(cs)-II Page 9


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

<p><em>Text in Emphasize</em></p>

<p><mark>Text in Highlight</mark></p>

<p><ins>Text in Insert</ins></p>

</center>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 10


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

9 Design An HTML Page To Insert Image In Your Page.

<html>

<head>

<title>Insert Image in HTML</title>

</head>

<body>

<center>

<h1>Welcome to my web page!!</h1>

<h2>This is a my Photography</h2>

<img src="cg.jpg" height="500" width="720" align="center">

</center>

</body>

</html>

NITESH KUMAR B.Sc.(cs)-II Page 11


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

10 Display Bio Data Using Form In HTML.


<html>

<head>

<title>BioData form</title>

</head>

<body>

<form>

<h3>Personal Details:</h3>

<table cellspacing="5" cellpadding="5">

<tr><td>

Your Name:</td><td><input type="text" placeholder="Your Name" required>

</td><td rowspan="6"><img src="digvijay.jfif" border="2" height="200" width="150">


</td></tr>

<tr><td>

Father's Name:</td><td><input type="text" placeholder="Father's name" name=" "


required>

</td></tr>

<tr><td>

Mother's Name:</td><td><input type="text" placeholder="Mother's name" name=" "


required>

</td></tr>

<tr><td>

Date of Birth:</td><td><input type="text" placeholder="DD/MM/YY" name=" "


required>

NITESH KUMAR B.Sc.(cs)-II Page 12


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

</td></tr>

<tr><td>

Pin Code:</td><td><input type="number" placeholder="pin code" name=" " required>

</td></tr>

<tr><td>

Address:</td><td><textarea size="30"></textarea>

</td></tr>

<tr><td>

College Name:</td><td><input type="name" placeholder="college" name="">

</td><td>

Email:</td><td><input type="mail" placeholder="Email" name="">

</td></tr>

<tr><td>

Gender:</td><td><input type="radio" name="Gender">Male

<input type="radio" name="Gender">Female

<input type="radio"name="Gender">transegender

</td><td>

password:</td><td><input type="password" placeholder="password" name="">

</td></tr>

<tr><td>

phone number:</td><td><select name="+India">

<option> +91</option>

<option> +92</option>

<option> +93</option>

<option> +94</option>

NITESH KUMAR B.Sc.(cs)-II Page 13


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

</select>

<input type="number" placeholder="9878345621" name=" " required>

</td></tr>

</table>

<h3>Qualifiction Details:</h3>

<TABLE BORDER="1" CELLSPACEING="3" CELLPADDING="3" >

<tr>

<td>S.N.</td>

<td>CLASS</td>

<td>C.G.BOARD/UNIVERSITY</td>

<td>YEAR</td>

<td>TOTAL/OBTAINED MARKS</td>

<td>AGRIGATE (%)</td></tr>

<tr>

<td>1.</td>

<td>10 th</td>

<td>CG Board</td>

<td>2016</td>

<td>600/408</td>

<td>68 %</td></tr>

<tr>

<td>2.</td>

<td>12 th</td>

<td>CG Board</td>

<td>2018</td>

NITESH KUMAR B.Sc.(cs)-II Page 14


Govt. Digvijay Auto P.G. College Rajnandgaon (C.G.) 2019-20

<td>500/350</td>

<td>70 % </td></tr>

<tr>

<td>3.</td>

<td>B.Sc. I st Year</td>

<td>Durg University</td>

<td>2019</td>

<td>600/324 </td>

<td> 54%</td></tr>

</TABLE><BR>

<input type="Submit" value="Submit" name="Save " >

<input type="Reset" value="Clear" name="Clear">

<input type="button" value="Cancel" name="Cancel">

</form>

</body>

</html

NITESH KUMAR B.Sc.(cs)-II Page 15

You might also like