Topic Overview

HTML Images, Tables, and Forms

Topic Overview

Image Integration

Images in HTML Saving for Web The <img> Tag Source Alt Title Width and Height The <img> Element TODO

Table Structure

Tables in HTML The <table> Tags Rows Cells Headings The <table> Element TODO

Table Styling

Styling Borders Cell Padding TODO

Intro to Forms

Web Forms The <form> Tags Action Method ID and Class The <form> Element TODO

Form Input Elements

Asking for Input The <input> Tag Type Name ID The <input> Element TODO

Text Types

Text Input Plain Text Password Text Area Maxlength Columns and Rows Placeholder Size Value Autofocus TODO

Selection Types

Selection Input Radio Buttons The Checkbox Element The Select Box (AKA Dropdown Select) TODO

Button Types

Buttons The Upload Button The Submit Button The Image Button The Button Element TODO

Form Management

Keeping Track Labels and IDs Fieldsets and Legends TODO

HTML5 Inclusions

New in HTML5 Validation Date E-Mail Search Figure and Figcaption TODO

HTML Images, Tables, and Forms

In this topic, we will look further into HTML images, you’ll be introduced to some additional elements such as images, tables, and one of the foundations of web development - forms.

As we saw earlier, we can add images in by using the <img> tag along with the src= attribute, but there are more attributes that we should consider particularly when it comes to accessibility.

Although tables may appear antiquated by today’s visual standards, HTML tables are still used quite often when presenting data in a structured format.

Forms allow us to collect data from visitors where users enter data which is then sent to a server for processing. One of the most common forms you encounter daily is the user login.

By the end of this Topic, you will understand:

Some of the additional attributes of images
How to combine elements to better describe, present, and gather information
Experiment with form elements, and explore how data is presented and collected on websites.