1. Advanced Web Designing | Exercise Solutions | Maharashtra Board

0
विद्यार्थी मित्रांनो या पोस्ट मध्ये आपण Class 12th Information Technology (IT) या विषयामधील Chapter No - 1 : Advanced Web Designing मधील Exercise Question आणि त्यांचे Solutions पाहणार आहोत. एकंदरीत, या पोस्ट मध्ये तुम्हाला Exercise Solutions Provide केलेले आहेत. हे Solutions तुम्हाला Guidance साठी Provide केलेले आहेत. Q.7) Programs - या Question चे Answer तुम्ही आणखी वेगळया पद्धतीने ही लिहू शकता.

Q.1) Fill in the blanks.

1) The _____ element is a starting element in an HTML, it indicates that document type definition being used by the document.
Ans : <!DOCTYPE html>

2) The _____ is a tag in html that describe some aspects of contents of a webpage.
Ans : <meta>

3) The <ol> tag defines an _____.
Ans : Ordered List

4) An unordered list created using the _____ tag.
Ans : <ul>

5) The _____ element creates an inline frame.
Ans : <iframe>

6) _____ tag used to specify video on an HTML document.
Ans : <video>

7) If a web developer wants to add the description to an image he must use _____ attribute of <img> tag.
Ans : alt

8) The _____ property is used to set position for an element.
Ans : Position

9) The float property defines the _____ of content.
Ans : Flow

10) ______ is used with elements that overlap with each other.
Ans : Positioning

Q.2) State whether the following statements is True or False.

1) HTML is an Object Oriented Programming Language.
Ans : False

2) Charset is used for character encoding declaration.
Ans : True

3) An unordered list can be numerical or alphabetical.
Ans : False

4) Multilevel list can be created in HTML5.
Ans : True

5) Srccode specifies the HTML content of the page to show in the <iframe>
Ans : True

6) The 'Controls' attribute is not used to add play, pause and volume.
Ans : False

7) .cs is the extension of CSS file
Ans : False

Q.3) Choose Single correct answer from the given options.

1) _____ element used to create a linking image 
a) <img>
b) <td>
c) <map>
d) <usemap>
Ans : a) <img>

2) The _____ tag is used to embed audio files on webpages.
a) <sound>
b) <audio>
c) <video>
d) <embeded>
Ans : b) <audio>

3) A programmer wants to define range for age between 18 to 50, he will use a form with following appropriate control.
a) number 
b) compare 
c) range 
d) textboxes
Ans : c) range

4) _____ character is used to create I'd in CSS.
a) %
b) $
c) @
d) #
Ans : d) #

Q.4) Choose two correct answers from the given options.

1) List within another list either _____ list or _____ list is called nested list.
a) Multilevel
b) order
c) unordered
d) general
e) cascading
Ans : b) order, c) unordered

2) Image maps are of two types _____ and _____.
a) Network side 
b) Client side
c) Computer side
d) Server side
e) n-computing
Ans : b) Client side, d) Server side

3) A CSS rule set contains _____ and _____.
a) set
b) selector 
c) post
d) declaration 
e) block 
Ans : b) selector, d) declaration

4) Client - side image map can be created using two elements _____ and _____.
a) <area>
b) <image>
c) <usemap>
d) <map>
e) <server>
Ans : a) <area>, d) <map>

Q.5) Choose Three Correct Answer from the given options.

1) Attributes of <area> tag is _____.
a) href
b) src
c) coords
d) data
e) alt
f) usemap 
Ans : a) href, c) coords, e) alt

2) Attributes used with iframe are _____
a) srcdoc
b) name 
c) alt
d) src
e) href
f) loop
Ans : a) srcdoc, b) name, d) src

3) Following are the form controls _____
a) email 
b) search 
c) label 
d) video 
e) tel
f) audio 
Ans : a) email, b) search, e) tel

4) Attributes used with <audio> tag _____
a) autoplay
b) href
c) controls
d) cntrl
e) loop
f) bgsoundt
Ans : a) autoplay, c) controls, e) loop

5) CSS types are _____ ,_____ and _____
a) internal 
b) external 
c) control 
d) inline 
e) loop
f) style 
Ans : a) internal, b) external, d) inline

6) Positioning types in CSS are _____
a) static
b) fixed 
c) absolute 
d) position 
e) dynamic 
f) nested 
Ans : a) static, b) fixed, c) absolute

7) Types of floating properties are _____
a) left
b) Zero 
c) right 
d) all
e) none
f) dock
Ans : a) left, c) right, e) none

Q.6) Match the pair

               A                                     B
1) <ul>                                 a) client side                                                         image map 
2) usemap                          b) CSS property 
3) color                               c) bulleted list
4) <img>                             d) Image as a                                                       submit button 
5) <input type=image>     e) insert an                                                            image
Ans : 1)-c), 2)-a), 3)-b), 4)-e), 5)-d)

Q.7 Programs.

1) Write a program using html with following css specification-
1. The background color of the company name should be in green.
2. The text colour of the company name should be red.
3. The heading should be large with font "comic sans ms"
4. The description of the company should be displayed in blue color in a paragraph.
Ans : 
Code : 

    
<!DOCTYPE html>
<html>
<head>
 <title>Company Information</title>
 <style>
  .company-name {
   background-color: green;
   color: red;
  }
  
  h1 {
   font-size: 36px;
   font-family: "comic sans Ms";
  }
  
  p {
   color: blue;
  }
 </style>
</head>
<body>
 <div class="company-name">
  <h1>ABC Company</h1>
 </div>

 <p>ABC Company is a leading provider of innovative solutions for businesses worldwide.</p>
</body>
</html>

Output : 


2) Write HTML5 code with CSS as follows -
1. To create form to accept name, age, email address from the user.
2. Create a submit button to send the data.
3. The heading of the form should have a background color and a different font style.
Ans : 
Code : 

    
<!DOCTYPE html>
<html>
<head>
 <title>Form Submission</title>
 <style>
  h1 {
   background-color: #4CAF50; /* green background color */
   color: white;
   font-family: Arial, sans-serif; /* different font style */
   padding: 20px; /* add padding for better appearance */
  }
  
  form {
   margin: 20px;
  }
  
  label {
   display: block;
   margin: 10px 0;
   font-family: Arial, sans-serif;
  }
  
  input[type="text"], input[type="email"] {
   padding: 5px;
   font-size: 16px;
   border-radius: 5px;
   border: none;
   width: 100%;
   margin-bottom: 10px;
   box-sizing: border-box;
  }
  
  input[type="submit"] {
   background-color: #4CAF50;
   color: white;
   padding: 10px;
   font-size: 18px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
  }
  
  input[type="submit"]:hover {
   background-color: #3e8e41;
  }
 </style>
</head>
<body>
 <h1>Enter Your Details</h1>

 <form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required>
  
  <label for="age">Age:</label>
  <input type="text" name="age" id="age" required>
  
   <label for="email">Email:</label>
  <input type="email" name="email" id="email" required>
  
  <input type="submit" value="Submit">
 </form>
</body>
</html>

Output : 


3) Write HTML5 code with CSS as follows -
1. Create ordered list with names of tourist cities
2. Create unordered list with tourist places of those cities.
3. Divide the list into two sections left and right by using CSS.
Ans : 
Code : 

    
<!DOCTYPE html>
<html>
<head>
 <title>Tourist Places</title>
 <style>
  .container {
   display: flex; /* use flexbox for layout */
   justify-content: space-between; /* divide list into two sections */
   align-items: flex-start; /* align items to top of container */
   width: 80%; /* set container width */
   margin: 0 auto; /* center container horizontally */
  }
  
  .container ul {
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 18px;
   font-family: Arial, sans-serif;
  }
  
  .container ol {
   margin: 0;
   padding: 0;
   list-style: decimal;
   font-size: 20px;
   font-family: Arial, sans-serif;
  }
  
  .container ul li, .container ol li {
   margin: 10px 0;
   padding: 0;
  }
  
  .container ul li:before {
   content: "\2022"; /* use bullet point for unordered list */
   margin-right: 10px;
   color: #4CAF50; /* use green color for bullet */
  }
  
  .container h2 {
   font-size: 24px;
   font-family: Arial, sans-serif;
   margin-bottom: 10px;
  }
  
  .container .left {
   flex: 1; /* use flexbox to divide container into two sections */
   margin-right: 20px; /* add margin between sections */
  }
  
  .container .right {
   flex: 1; /* use flexbox to divide container into two sections */
   margin-left: 20px; /* add margin between sections */
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="left">
   <h2>Tourist Cities</h2>
   <ol>
    <li>New York</li>
    <li>Paris</li>
    <li>Tokyo</li>
    <li>Rome</li>
   </ol>
  </div>
  <div class="right">
   <h2>Tourist Places</h2>
   <ul>
    <li>Statue of Liberty</li>
    <li>Eiffel Tower</li>
    <li>Tsukiji Fish Market</li>
    <li>Colosseum</li>
    <li>Central Park</li>
    <li>Louvre Museum</li>
    <li>Sensoji Temple</li>
    <li>Vatican Museums</li>
   </ul>
  </div>
 </div>
</body>
</html>

Output : 


अशा प्रकारे Chapter 1st Exercise Solutions आहे. यापुढील Chapter चे Exercise Solutions क्रमवार पाहण्यासाठी "Next" आणि "Previous" buttons चा उपयोग करावा.

टिप्पणी पोस्ट करा

0 टिप्पण्या
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
टिप्पणी पोस्ट करा (0)
To Top