HTML - Coder Lab

Draw the following 3 tables:

2. Create a survey form with radio buttons, checkboxes, name input and a submit button

3. Draw a smiley face

4. Draw a star using polyline

5. Create a website with a YouTube video that plays automatically

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Class Exercise</title>
    <style>
      table {
        width: 200px;
        border-collapse: collapse;
        margin: 10px;
      }
      th,
      td {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Class Exercise</h1>

    <h2>Tables</h2>

    <table>
      <tr>
        <th colspan="2">NAME</th>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>

        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <table>
      <tr>
        <th rowspan="3">APRIL</th>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <table>
      <tr>
        <th colspan="3">2022</th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th colspan="2">FIESTA</th>
        <th>
          <tr>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <h2>Survey Form</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required /><br /><br />

      <label>Choose a gender:</label><br />
      <input type="radio" name="gender" value="male" /> Male
      <input type="radio" name="gender" value="female" /> Female<br />

      <label>Select interests:</label><br />
      <input type="checkbox" name="interest" value="gaming" /> Gaming
      <input type="checkbox" name="interest" value="reading" /> Reading
      <input type="checkbox" name="interest" value="traveling" />
      Traveling<br /><br />

      <input type="submit" value="Submit" />
    </form>

    <h2>Smiley Face</h2>
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="2"
        fill="yellow"
      />
      <circle cx="35" cy="40" r="5" fill="black" />
      <circle cx="65" cy="40" r="5" fill="black" />
      <path
        d="M 35 60 Q 50 75, 65 60"
        stroke="black"
        stroke-width="2"
        fill="transparent"
      />
    </svg>

    <h2>Star</h2>
    <svg width="200" height="200">
      <polyline
        points="100,10 40,180 190,60 10,60 160,180 100,10"
        stroke="black"
        stroke-width="2"
        fill="transparent"
      />
    </svg>

    <h2>YouTube Video</h2>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/otqAvzihPB8?si=4DZPiOKjLv8L2wOW&autoplay=1&mute1"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>
  </body>
</html>

OutPut:

Class Exercise

Tables

NAME

APRIL

2022

FIESTA

Coder Lab

In class Exercise 3

Class Excercise 2

Class Exercise

Tables

Survey Form

Smiley Face

Star

YouTube Video

Hello World!

Archives

Categories