computer lab HTML for School

by

Answers to Lab Work Questions for HTML

Basic Level

  1. HTML Structure:
  • What is the purpose of the <html>, <head>, and <body> tags in an HTML document?
    • <html>: Encloses the entire HTML document, representing the root element.
    • <head>: Contains metadata, such as the title, styles, scripts, and links to external resources.
    • <body>: Contains the content of the webpage that is visible to users.
  • Basic structure of an HTML document:
    <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <title>Document Title</title>
  • </head>
  • <body> <!-- Content goes here -->
  • </body>
  • </html>
  1. Headings and Paragraphs:
  • Example code:
  • <h1>Welcome to HTML</h1>
  • <h3>Learning is fun</h3>
  • <p>HTML is a markup language used to create webpages. It is easy to learn and essential for web development.</p>
  • Lists:
  • Ordered list:
  • <ol>
  • <li>Apple</li>
  • <li>Banana</li>
  • <li>Cherry</li>
  • </ol>
  • Unordered list:
  • <ul>
  • <li>Reading</li>
  • <li>Cooking</li>
  • <li>Traveling</li>
  • </ul>
  1. Links:
  • Link to Google:
    html <a href="https://www.google.com">Visit Google</a>
  • Open in a new tab:
    html <a href="https://www.google.com" target="_blank">Open Google in new tab</a>
  1. Images:
   <img src="image.jpg" alt="Description of the image" width="300">
  1. Tables:
   <table border="1">
       <tr>
           <th>Name</th>
           <th>Age</th>
           <th>Grade</th>
       </tr>
       <tr>
           <td>John</td>
           <td>14</td>
           <td>A</td>
       </tr>
       <tr>
           <td>Jane</td>
           <td>15</td>
           <td>B</td>
       </tr>
   </table>
  1. Formatting Tags:
   <p><b>HTML is amazing!</b></p>
   <p><i>HTML is amazing!</i></p>
   <p><u>HTML is amazing!</u></p>

Intermediate Level

  1. Forms:
   <form>
       <label for="name">Name:</label>
       <input type="text" id="name" name="name"><br>
       <label for="email">Email:</label>
       <input type="email" id="email" name="email"><br>
       <label for="password">Password:</label>
       <input type="password" id="password" name="password"><br>
       <label>Gender:</label>
       <input type="radio" name="gender" value="Male"> Male
       <input type="radio" name="gender" value="Female"> Female<br>
       <label>Hobbies:</label>
       <input type="checkbox" name="hobby" value="Reading"> Reading
       <input type="checkbox" name="hobby" value="Traveling"> Traveling<br>
       <button type="submit">Submit</button>
   </form>
  1. Attributes:
  • Difference between id and class:
    • id: Unique identifier for an element. It can only be used once in a document.
    • class: Used to group elements with a shared style or functionality. Example:
    <div id="uniqueElement">This is unique</div> <div class="commonElement">This is common</div> <div class="commonElement">This is also common</div>
  1. Semantic Tags:
   <header>
       <h1>Welcome to My Website</h1>
   </header>
   <nav>
       <a href="#home">Home</a>
       <a href="#about">About</a>
   </nav>
   <main>
       <section>
           <h2>About Me</h2>
           <p>This is the main content of the website.</p>
       </section>
   </main>
   <footer>
       <p>Copyright © 2025</p>
   </footer>
  1. Links to Sections:
   <a href="#section1">Go to Section 1</a>
   <a href="#section2">Go to Section 2</a>

   <h2 id="section1">Section 1</h2>
   <p>This is Section 1 content.</p>

   <h2 id="section2">Section 2</h2>
   <p>This is Section 2 content.</p>

Reflection Answers

  1. Differences between HTML4 and HTML5:
  • HTML5 includes new semantic tags like <article> and <section>.
  • HTML5 supports multimedia with <audio> and <video> tags.
  • HTML5 does not require a strict document type declaration like HTML4.
  1. Importance of Semantic Tags:
  • They improve accessibility and SEO.
  • They make the code easier to read and maintain.
  1. Purpose of alt in <img>:
  • It provides alternative text if the image fails to load.
  • It helps visually impaired users by describing the image through screen readers.
  1. Purpose of Comments:
  • They document the code for future reference or for other developers.
  • Example:
    html ¨K33K

Leave a Comment