Curriculum
Ncert-Class 10 computer science
Chapter 1 -Networking
0/6
Chapter 2- HTML
0/4
Chapter 3: Cyber ethics
0/5
Lab Exercises
0/4
Case Based Qquestions
0/1
Assertion and Reason
0/1
Lab Exercises -Part 2 – Class 10 Computer sicence
Add tables and frames in an HTML page:
Task: Create HTML tables to organize data and frames to divide a web page into multiple sections.
Example: Design a webpage with a table displaying product information (name, price, description) and use frames to display different sections such as navigation, content, and footer.
Adding Tables:
To add a table in an HTML page, you can use the <table>, <tr>, <th>, and <td> tags.
Example:
<!DOCTYPE html> <html> <head> <title>Table Example</title> </head> <body> <h2>Table Example</h2> <table border=”1″> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>
|
Explanation:
◆The <table> tag defines a table.
◆The <tr> tag defines a table row.
◆The <th> tag defines a table header cell (for headers).
◆The <td> tag defines a table data cell (for content).
◆The border attribute specifies the border width of the table.
Adding Frames:
To add frames in an HTML page, you can use the <frameset> and <frame> tags.
Example:
<!DOCTYPE html> <html> <head> <title>Frames Example</title> </head> <frameset cols=”25%,75%”> <frame src=”menu.html” name=”menu”> <frame src=”content.html” name=”content”> </frameset> </html> |
(menu.html):
<!DOCTYPE html> <html> <body> <ul> <li><a href=”page1.html” target=”content”>Page 1</a></li> <li><a href=”page2.html” target=”content”>Page 2</a></li> </ul> </body> </html> |
(content.html):
<!DOCTYPE html> <html> <body> <h1>Content Page</h1> <p>This is the content page.</p> </body> </html> |
Explanation:
◆The <frameset> tag defines a frameset, which is used to divide the browser window into multiple frames.
◆The cols attribute specifies the width of each column in the frameset (in percentages).
◆The <frame> tag defines a frame within the frameset, each with its own content (specified by the src attribute).
◆The name attribute specifies the name of the frame, which is used as the target for links.
Decorate web pages using graphical elements:
Task: Incorporate graphical elements such as icons, buttons, and banners into HTML pages.
Example: Use CSS to style buttons with hover effects, add decorative icons next to menu items, and include a banner image at the top of the webpage.
Decorating web pages using graphical elements involves adding visual elements such as icons, buttons, banners, and other graphical components to enhance the appearance and usability of the page.
<!DOCTYPE html> <html> <head> <title>Decorated Web Page</title> <style> /* CSS styles for buttons */ .button { background-color: #4CAF50; /* Green background */ border: none; /* No border */ color: white; /* White text */ padding: 10px 20px; /* Padding */ text-align: center; /* Center-align text */ text-decoration: none; /* No underlining */ display: inline-block; /* Inline block element */ font-size: 16px; /* Font size */ margin: 4px 2px; /* Margin */ cursor: pointer; /* Cursor style */ border-radius: 10px; /* Rounded corners */ transition-duration: 0.4s; /* Smooth transition */ } .button:hover { background-color: #45a049; /* Darker green background on hover */ }
/* CSS styles for icons */ .icon { width: 50px; /* Icon width */ height: 50px; /* Icon height */ background-image: url(‘icon.png’); /* Icon image */ background-size: cover; /* Cover the container */ }
/* CSS styles for banners */ .banner { width: 100%; /* Full width */ height: 200px; /* Banner height */ background-color: #f44336; /* Red background */ color: white; /* White text */ text-align: center; /* Center-align text */ padding-top: 80px; /* Top padding */ } </style> </head> <body> <!– Button –> <button class=”button”>Click Me</button><br><br>
<!– Icon –> <div class=”icon”></div><br><br>
<!– Banner –> <div class=”banner”> <h1>Welcome to My Website</h1> </div> </body> </html> |
Explanation:
Buttons:
The CSS styles for buttons are defined in the .button class.
Various styles such as background color, border, text color, padding, etc., are specified to create visually appealing buttons.
The :hover pseudo-class is used to apply styles when the button is hovered over, providing visual feedback to users.
Icons:
The CSS styles for icons are defined in the .icon class.
An image file (e.g., icon.png) is set as the background of the container div, and its size is adjusted to fit the container.
Banners:
The CSS styles for banners are defined in the .banner class.
A banner with a red background, white text, and centered alignment is created.
Padding is added to vertically center the text within the banner.
Create a website using several web pages:
Task: Develop a multi-page website with a consistent design theme and navigation structure.
Example: Create a website for a fictional business or personal portfolio, including pages such as home, about, services, portfolio/gallery, contact, and blog.
