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

Intro to Forms

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

Form Input Elements

Asking for Input The <iput> 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

Saving for Web

Generally, images should be less-than 1,000 kB in size (under 1 megabyte).

If you remember from your introductory design classes, creating and saving files for print is much different than for web. For example, printers print at 300 ppi, but screens only need 72 ppi for proper resolution. The larger your files, the longer it will take your page to load. This is important because end-users are not patient. Think about how long you are willing to wait for a page to load. Guess how much time you get before a user leaves your site? Answer: 2-3 seconds.

To optimize images for the web, many image editors have a “Save for Web and Devices” or “Export As” in their save options. There, you can change image formats and sizes to try and get your files of an appropriate size.

Image of 'Save for Web' dialogue in Photoshop CC

Here is the original dog image, which clocks in at an enormous 23.9 mB, and 5597px by 3148px. Watch how long that loads in another tab.

In contrast the one you see below was optimized for web, sized and cropped to 1000px by 500px. It’s much more managble at 110 kB, and is hardly distinguishable from the original (at least on the web).

An image dogs laying in a field while the sun sets