Muhammad Sufiyan's Blog

Week 3 Documentation: HTML Images, Tables, and Forms

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

4 min read

In the third week of our training, we delved into the intricacies of HTML images, tables, and forms, referencing chapters 5 to 7 of John Duckett's "HTML & CSS: Design and Build Websites."

Chapter 5: Images

Inserting Images

To insert an image into a webpage, use the <img> tag. This tag is self-closing and requires the src attribute, which specifies the path to the image file, and the alt attribute, which provides alternative text for the image.

<img src="path/to/image.jpg" alt="Description of the image">
Image Attributes

  • src: Specifies the path to the image file.

  • alt: Provides alternative text for the image if it cannot be displayed.

  • width and height: Set the width and height of the image.

<img src="path/to/image.jpg" alt="Description of the image" width="300" height="200">
Image Alignment

Align images using CSS for better control over layout and styling.

<img src="path/to/image.jpg" alt="Description of the image" style="float: left; margin-right: 10px;">
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Images Example</title>
</head>
<body>
  <h1>My Favorite Animals</h1>
  <img src="elephant.jpg" alt="An elephant" width="300" height="200">
  <p>Elephants are the largest land animals on Earth.</p>
</body>
</html>

Chapter 6: Tables

Creating Tables

Tables are created using the <table> tag, with rows defined by <tr>, headers by <th>, and data cells by <td>.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Table Attributes

  • border: Adds a border around the table cells.

  • cellpadding and cellspacing: Add space within and between cells.

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Table Caption

Use the <caption> tag to add a title to your table.

<table border="1">
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>A</td>
  </tr>
</table>
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tables Example</title>
</head>
<body>
  <h1>Classroom Attendance</h1>
  <table border="1" cellpadding="5" cellspacing="0">
    <caption>Attendance Record</caption>
    <tr>
      <th>Name</th>
      <th>Present</th>
      <th>Absent</th>
    </tr>
    <tr>
      <td>John</td>
      <td>10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>8</td>
      <td>4</td>
    </tr>
  </table>
</body>
</html>

Chapter 7: Forms

Creating Forms

Forms are created using the <form> tag, which can contain various input elements such as text fields, checkboxes, radio buttons, and submit buttons.

<form action="submit_form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>
Input Types

  • text: Single-line text input.

  • password: Password input.

  • checkbox: Checkbox input.

  • radio: Radio button input.

  • submit: Submit button.

<form action="submit_form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <label for="remember">Remember me:</label>
  <input type="checkbox" id="remember" name="remember"><br>

  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male"> Male
  <input type="radio" id="female" name="gender" value="female"> Female<br>

  <input type="submit" value="Login">
</form>
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Forms Example</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="submit_form.php" method="post">
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea><br>

    <input type="submit" value="Send">
  </form>
</body>
</html>

Assignment: Create a Resume in HTML

Using what you've learned about images, tables, and forms, create a simple HTML resume.

Assignment Instructions

  1. Header Section: Include your name, contact information, and a profile picture.

  2. Education Section: Use a table to list your education history.

  3. Experience Section: List your previous jobs with descriptions.

  4. Skills Section: Use a table or list to outline your skills.

  5. Contact Form: Include a form for potential employers to contact you.

Example HTML Resume

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Resume</title>
</head>
<body>
  <header>
    <h1>John Doe</h1>
    <p>Email: john.doe@example.com | Phone: 123-456-7890</p>
    <img src="profile.jpg" alt="John Doe" width="150">
  </header>

  <section>
    <h2>Education</h2>
    <table border="1" cellpadding="5" cellspacing="0">
      <tr>
        <th>School</th>
        <th>Degree</th>
        <th>Year</th>
      </tr>
      <tr>
        <td>University of Example</td>
        <td>Bachelor of Science</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>Example High School</td>
        <td>High School Diploma</td>
        <td>2016</td>
      </tr>
    </table>
  </section>

  <section>
    <h2>Experience</h2>
    <h3>Software Developer</h3>
    <p>XYZ Company, 2020-Present</p>
    <ul>
      <li>Developed web applications using HTML, CSS, and JavaScript.</li>
      <li>Collaborated with designers to create user-friendly interfaces.</li>
    </ul>

    <h3>Intern</h3>
    <p>ABC Company, Summer 2019</p>
    <ul>
      <li>Assisted in the development of internal tools using Python.</li>
      <li>Performed data analysis and created reports.</li>
    </ul>
  </section>

  <section>
    <h2>Skills</h2>
    <table border="1" cellpadding="5" cellspacing="0">
      <tr>
        <th>Skill</th>
        <th>Proficiency</th>
      </tr>
      <tr>
        <td>HTML</td>
        <td>Expert</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>Expert</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>Intermediate</td>
      </tr>
      <tr>
        <td>Python</td>
        <td>Intermediate</td>
      </tr>
    </table>
  </section>

  <section>
    <h2

>Contact</h2>
    <form action="submit_form.php" method="post">
      <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="message">Message:</label>
      <textarea id="message" name="message"></textarea><br>

      <input type="submit" value="Send">
    </form>
  </section>
</body>
</html>

By following these instructions, you should be able to create a detailed and professional-looking HTML resume. This exercise will help reinforce your understanding of images, tables, and forms in HTML.

Instructor: Muhammad Sufiyan

Linkedin: linkedin.com/in/innosufiyan

saylanismitHTML5imagestablesforms