HTML Programs Assignment Practice

 

1. Basic HTML Structure

This program sets up the basic structure of any HTML document.

<!DOCTYPE html> <html> <head> <title>Basic HTML Structure</title> </head> <body> <h1>Welcome to HTML</h1> <p>This is a simple HTML document.</p> </body> </html>

Explanation:

  • <!DOCTYPE html>: Declares the document type.
  • <html>: The root element.
  • <head>: Contains metadata and the title of the document.
  • <body>: Contains the visible content of the web page.

2. Using Headings and Paragraphs

This program demonstrates headings and paragraphs.

<!DOCTYPE html> <html> <head> <title>Headings and Paragraphs</title> </head> <body> <h1>Main Heading</h1> <h2>Subheading</h2> <p>This is a paragraph under the subheading.</p> </body> </html>

Explanation:

  • <h1>...<h6>: Represent headings of different levels (largest to smallest).
  • <p>: Defines a paragraph.

3. Creating Links

This program shows how to create hyperlinks.

<!DOCTYPE html> <html> <head> <title>Links</title> </head> <body> <a href="https://www.example.com">Visit Example</a> </body> </html>

Explanation:

  • <a href="URL">: Creates a hyperlink. The href attribute specifies the link's destination.

4. Adding Images

This program demonstrates embedding an image.

<!DOCTYPE html> <html> <head> <title>Images</title> </head> <body> <img src="image.jpg" alt="A beautiful view" width="300"> </body> </html>

Explanation:

  • <img>: Embeds an image.
  • src: Specifies the image's path.
  • alt: Provides alternative text if the image cannot be displayed.
  • width: Sets the image's width.

5. Creating Lists

This program creates ordered and unordered lists.

<!DOCTYPE html> <html> <head> <title>Lists</title> </head> <body> <h2>Ordered List</h2> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <h2>Unordered List</h2> <ul> <li>Item A</li> <li>Item B</li> </ul> </body> </html>

Explanation:

  • <ol>: Ordered list (numbered).
  • <ul>: Unordered list (bulleted).
  • <li>: List item.

6. Table Creation

This program creates a simple table.

<!DOCTYPE html> <html> <head> <title>Table</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>25</td> </tr> <tr> <td>Bob</td> <td>30</td> </tr> </table> </body> </html>

Explanation:

  • <table>: Creates a table.
  • <tr>: Table row.
  • <th>: Table header.
  • <td>: Table data cell.

7. Adding Forms

This program demonstrates an HTML form.

<!DOCTYPE html> <html> <head> <title>Form</title> </head> <body> <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Submit</button> </form> </body> </html>

Explanation:

  • <form>: Creates a form.
  • <input>: Takes user input.
  • <button>: Adds a clickable button.

8. Using Inline CSS

This program shows how to style elements inline.

<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style="color: red; font-size: 20px;">This is a styled paragraph.</p> </body> </html>

Explanation:

  • style: Applies CSS styles directly to an HTML element.

9. Embedding Videos

This program embeds a video.

<!DOCTYPE html> <html> <head> <title>Video</title> </head> <body> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>

Explanation:

  • <video>: Embeds a video.
  • controls: Adds play, pause, and other controls.

10. Using Iframes

This program demonstrates embedding another webpage using an iframe.

<!DOCTYPE html> <html> <head> <title>Iframe</title> </head> <body> <iframe src="https://www.example.com" width="600" height="400"></iframe> </body> </html>

Explanation:

  • <iframe>: Embeds another webpage.
  • src: Specifies the source URL.

Comments

Popular posts from this blog

Introduction to Computer

History of Computer

Computer Generation