PROGRAMMING FOR THE WEB: HTML
TASK 2 - CONTACT FORM

Semantic HTML Elements

HTML5 introduced a set of semantic elements to help structure your HTML code and make it more meaningful. Semantic elements provide clear meaning to the content they wrap, which is useful for both developers and search engines.

Common semantic elements include:

<header>: Represents a header for a document or section, typically containing logos or navigation links.
<nav>: Defines a set of navigation links.
<section>: Groups related content together into thematic sections.
<article>: Represents independent, self-contained content (like a blog post or an article).
<footer>: Defines a footer for a document or section, often containing copyright information or links.

Tables

Tables are used to display data in rows and columns.
Tables are made up of rows <tr> and columns represented by data cells <td> or headers <th>.

<table>: Defines the table.
<thead>: Contains the table's header.
<tbody>: Contains the main content of the table.
<th>: Defines a table header.
<td>: Defines a table data cell.

Forms

Forms allow users to submit information that can be sent to a server for processing. Forms contain inputs such as text fields, radio buttons, and dropdown menus.

Key form elements:

<form>: Defines a form and the submission process.
<input>: Creates different types of form controls, like text fields, radio buttons, or submit buttons.
<select> and <option>: Creates a dropdown list.
<label>: Describes the input and is associated with it using the for attribute.

Comments

Comments allow you to leave notes in your HTML code. These are invisible to users viewing the page and are helpful for explaining sections of code.

: Everything between  will be ignored by the browser.

Task 2: Contact Form

For this task, you'll create a Contact Form that allows users to select a team member from a profile table and send a message. You’ll also structure your page using semantic HTML elements and properly organise the form inputs on separate lines for clarity.

Semantic HTML Structure:

Use semantic elements such as <header>, <section>, and <footer> to structure your page.
Include a navigation menu in the header with links (they don't need to lead anywhere).

Team Profile Table:

Create a table that displays two team members side by side. Include:
- Name (in the table header)
- Profile picture (use placeholder images from via.placeholder.com)
- Role (like Developer, Designer, etc.)

Contact Form:

Add a form below the team profile table with the following fields:
- Your Name (input field)
- Your Email (input field)
- Your Message (textarea for a message)
Include radio buttons to allow the user to select which team member they want to contact.
Each form input should be on a new line and clearly labeled.

Form Submission Button:

Add a "Send Message" button at the bottom of the form that allows users to submit the form.
You don't need to make the form functional.

Instructions:

Open your project-16-html folder using VS Code
Fetch any changes using GitHub in the terminal. E.g. git fetch
If there are any changes, we need to pull them. E.g. git pull
Create the task2.html file using the terminal.

Remember to commit and push your code when done! Here are the terminal commands to do so:

Include any new files to be commited. E.g.
git add task2.html
Commit your changes with a meaningful message:
git commit -am "Your message here"
Note: The -a flag automatically stages all modified files before committing, -m is to add a message.
Push your changes to GitHub:
git push origin main

Version control software such as GitHub is a huge part of Software Engineering and Web Development. It allows you to keep track of your progress, revert to older versions, collaborate with others, and access your code through the cloud from anywhere.

Page updated