0% found this document useful (0 votes)
9 views17 pages

HTML Basics: Color, Images, Tables, Lists

The document contains multiple HTML code snippets demonstrating various web design elements including setting background colors, creating tables, lists, and forms. Each section is labeled with an object title and includes specific HTML structures for implementing features like images, headings, and user input forms. The examples illustrate fundamental HTML concepts for building webpages.

Uploaded by

niloo Ram Poyam
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
0% found this document useful (0 votes)
9 views17 pages

HTML Basics: Color, Images, Tables, Lists

The document contains multiple HTML code snippets demonstrating various web design elements including setting background colors, creating tables, lists, and forms. Each section is labeled with an object title and includes specific HTML structures for implementing features like images, headings, and user input forms. The examples illustrate fundamental HTML concepts for building webpages.

Uploaded by

niloo Ram Poyam
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

1.

Object:- set background orange color in html webpage

<html>

<body bgcolor="orange">

</body>

</html>

SAVE [Link]

2. Object:- insert image marquee using in html webpage

<html>

<body>

<center>

<marquee>

<img src ="ashok [Link]">

</marquee>

</center>

</body>

</html>

SAVE [Link]

3. Object:- CREATE TABLE in html webpage

<html>

<head>

<title> use rowspan or colspan </title>

<body>

<table border ="2" cellpadding="4" cellspacing="4">

<caption> <h3>WITI NARAYANPUR </h3> </caption>

<tr>

<th colspan ="4" align="center">


<H2><b> Main Header </b> </H2></th> </tr>

<tr> <th colspan ="4" align = "center">

<b><H3> Details of Students </H3></b> </th> </tr>

<th> BRANCH </th> <th> SECTION </th> <th> NAME </th> <th> ADDRESS </th> </tr>

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

<td rowspan ="3"> section 1 </td> <td> ajay </td>

<td> ahmedabad </td>

</tr>

<td> virat </td> <td> noida </td> </tr>

<tr> <td> suraj </td> <td> allahabad </td> </tr>

<tr> <td> section 2 </td> <td> rashi </td> <td> varanasi </td> </tr>

<tr> <td> sectin 3 </td> <td> ankita </td> <td> bhopal </td> </tr>

</table>

</body>

</html>

4. Object:- CREATE DEFINATION LIST in html webpage

<html>

<head>

<title> defination list </title>

</head>

<body>

<dl>

<dt> iti

<dd> this is skill oriented course

<dt>cti

<dd> this is skill instructor course


</dl>

</body>

</html>

5. Object:- CREATE DIFFRENT LIST in html webpage

<html>

<head>

<title> different lsit presentation </title>

</head>

<body>

<p> list 1

<ol type="1">

<li> part 1

<li> part 2

<li> part 3

</ol></p>

<p> list 2

<ul type="disc">

<li> section 1

<li> section 2

<li> section 3

</ul>

</p>

</body>

</html>

6. Object:- CREATE Nested LIST in html webpage

<html>
<head><title> nesting list </title></head>

<tr> <td> suraj </td> <td> allahabad </td> </tr>

<tr> <td> section 2 </td> <td> rashi </td> <td> varanasi </td> </tr>

<tr> <td> sectin 3 </td> <td> ankita </td> <td> bhopal </td> </tr>

</table>

</body>

</html>

7. Object:- CREATE DEFINATION LIST in html webpage

<html>

<head>

<title> defination list </title>

</head>

<body>

<dl>

<dt> iti

<dd> this is skill oriented course

<dt>cti

<dd> this is skill instructor course

</dl>

</body>

</html>

8. Object:- CREATE DIFFRENT LIST in html webpage

<html>

<head>

<title> different lsit presentation </title>

</head>
<body>

<p> list 1

<ol type="1">

<li> part 1

<li> part 2

<li> part 3

</ol></p>

<p> list 2

<ul type="disc">

<li> section 1

<li> section 2

<li> section 3

</ul>

</p>

</body>

</html>

9. Object:- CREATE NESTING LIST in html webpage

<html>

<head><title> nesting list </title></head>

<body>

<ul type="square">

<li> software

<ol type="1">

<li> ms word

<li> ms excel

<li> ms powerpoint
</ol>

</ul>

</body>

</html>

10. Object:- CREATE ORDER LIST in html webpage

<html>

<head><title> order list </title></head>

<body>

<ol type="1">

<li> copa

<li> steno

<li>fitter

<li>electrician

</ol>

<ol type="A">

<li> theory

<li> practical

<li> employability skill

</ol>

</body>

</html>

11. Object:- CREATE ORDER LIST DIFFERENT TYPE in html webpage

<html>

<head><title> order list different type </title></head>

<body>

<p> ORDERED LIST IN DIFFERENT FORMAT


<ol type="A">

<li>computer

<li>hard disc

<li>cd

<li>floppy

</ol>

<ol type="1">

<li>computer

<li>hard disc

<li>cd

<li>floppy

</ol>

<ol type="i">

<li>computer

<li>hard disc

<li>cd

<li>floppy

</ol>

<ol type="a">

<li>computer

<li>hard disc

<li>cd

<li>floppy

</ol>

</p>

</body>
</html>

12. Object:- CREATE UNORDER LIST TYPE in html webpage

<html>

<head><title> unorder list </title></head>

<body>

<ul type="square">

<li> copa

<li> steno

<li>fitter

</ul>

<ul type="disc">

<li> theory

<li> practical

<li> employability skill

</ul>

</body>

</html>

13. Object:- CREATE UNORDERLIST DIFFERENT TYPE in html webpage

<html>

<head><title> Different type of unorderlist </title></head>

<body>

<p> UNORDERED LIST IN DIFFERENT FORMAT

<ul type="square">

<li> computer

<li> hard disc

<li> cd
<li> floppy

</ul>

<ul type="circle">

<li> computer

<li> hard disc

<li> cd

<li> floppy

</ul>

<ul type="disc">

<li> computer

<li> hard disc

<li> cd

<li> floppy

</ul>

</p>

</body>

</html>

15. Object:- CREATE TABLE ALL SET 1in html webpage

<html>

<head>

<title> table all set </title>

</head>

<body>

<table border = "3">

<tr> <td colspan ="5" align="center">

<font color="blue"> <b> Personal Information </b>


</td> </tr>

<tr>

<td rowspan="5" align="center">

<b> WITI NARAYANPUR </b>

</tr>

<tr>

<th> NAME </th>

<th> POST </th>

<th> INSTITUTE </th>

<th> TRADE </th></tr>

<tr>

<td> NILOO </td>

<td>TO </td>

<td> WITI </td>

<td> copa </td>

</tr>

<tr>

<td> SURAJ </td>

<td> TO </td>

<td> WITI </td>

<td> STENO </td>

</tr>

</table>

</body>

</html>

Object:- CREATE A SIMPLE TABLE in html webpage


<html>

<head>

<title> create table in html </title>

</head>

<body>

<table bgcolor="pink" border="5" width="75" cellpadding="5">

<caption><h1> <marquee>student information table </marquee></h1></caption>

<tr>

<th> ROLL NO </th>

<th> NAME </th>

<th> TRADE </th>

<th> EMAIL ID </th>

<th> ADDRESS </th>

</tr>

<tr>

<td> 01 </td>

<td> DIPAK </td>

<td> COPA </td>

<td> dpkburman3@[Link] </td>

<td> DHANGAON </td>

</tr>

<tr>

<td> 02 </td>

<td> SHWETA </td>

<td> CSA </td>

<td> shwetadipak5@[Link] </td>


<td> HASUWA </td>

</tr>

</table>

</body>

</html>

TABLE 3

<html>

<head>

<title> add border and change cell color example </title>

</head>

<body>

<center>

<table border="4">

<tr> <th bgcolor="lightpink"></th>

<th bgcolor="lightblue"> theory </th>

<th bgcolor="red"> practical </th>

</tr>

<tr>

<th bgcolor="blue"> test1</th>

<td> 86</td>

<td> 88</td>

</tr>

<tr>

<th bgcolor="lightpink"> test2</th>

<td> 92</td>

<td> 89 </td>
</center>

</table>

</body>

</html>

16. Object:- CREATE TABLE 4 html webpage

<html>

<head>

<title> table 5 </title>

</head>

<body>

<table width="550" border ="5" cellspacing="7" cellpadding="10">

<td align ="center" valign="top"> cell at top</td>

<td align="center" valign="middle"> cell in middle </td>

<td align ="center" vlign="bottom"> cell at bottom </td>

</table>

</body>

</html>

16. Object:- CREATE TABLE 5 html webpage

<html>

<head>

<title> html 7 </title>

</head>

<table border ="5" bordercolor="red"

<tr> <td> border="4" </td>

<td> border color="red" </td> </tr>

<tr> <td> row 2 column 1 </td>


<td> row 2 column2 </td> </tr>

</table?

</body>

</html>

LOGIN USER

<html>

<head>

<title> login user </title>

</head>

<body>

<form>

<fieldset> <legend>

user id : <input type = "text"placeholder="enter your id">

password : <input type = "password" placeholder="******">

</legend> </fieldset>

</form>

<a href = "[Link]">

click online form </a>

</body>

</html>

17. Object:- CREATE HEADING TAGS INhtml webpage

<html>

<head>

<title> different lsit presentation </title>

</head>

<body>
<h1> heading one </h1>

<h2> heading two </h2>

<h3> heading three </h3>

<h4> heading four </h4>

<h5> heading five </h5>

<h6> heading six </h6>

</body>

</html>

18. Object:- CREATE GOOGLE SEARCH ENGINE html webpage

<html>

<head>

<title> google search engine </title>

</head>

<body>

<br> <br>

<center>

<h1>

<font color="skyblue"> G

<font color="red"> O

<font color="orange"> O

<font color="skyblue"> G

<font color="green"> L

<font color="red"> E

</h1></center>

<center>

<input type="text" name="name" placeholder="search">


<input type="button" olclick=button" value="search">

</center>

</body>

</html>

OBJECT- CREATE A SIMPLE WEBPAGE IN HTML FORM

<html>

<head>

<title> form 1 </title>

</head>

<body bgcolor="lightpink">

<form method ="post" action "[Link]

<b> user information </b> <br><br>

first name : <input type = "text"placeholder = "FIRST NAME" size="20" maxlength = "30" name =

"firstname"> <br><br>

last name : <input type = "text"placeholder = "LAST NAME" size = "20" maxlength = "30" name =

"last name "><br><br>

password : <input type = "password" placeholder = "PASSWORD" size = "20" maxlenght = "20"

name = "password"><br> <br>

gender : <input type = "radio" name="sex" value="male"> male

<input type = "radio" name="sex" value="female"> female <br> <br>

qualification : <input type = "checkbox"> 10th

<input type = "checkbox"> 12th

<input type = "checkbox"> iti

<input type = "checkbox"> cti <br> <br>

<select name = "address">

<option> pamgarh </option>


<option> champa </option>

<option> akaltara </option>

<option> nawagarh </option>

<option> baloda </option>

</select> <br> <br>

form submit : <input type = "submit"> submit

<input type = "reset"> reset

</form>

</body>

</html>

You might also like