Week 3 Documentation: HTML Images, Tables, and Forms
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
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.widthandheight: 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.cellpaddingandcellspacing: 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
Header Section: Include your name, contact information, and a profile picture.
Education Section: Use a table to list your education history.
Experience Section: List your previous jobs with descriptions.
Skills Section: Use a table or list to outline your skills.
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