1. 1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner

2. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 Objectives Control the size, style, and color of fonts. Download pictures from the Web. Insert pictures into your Web page. Change the size of graphics. Use tables to organize information.

3. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Objectives (continued) Turn pictures into hyperlinks. Insert a variety of data input options.

4. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 Vocabulary.gif.jpg or.jpeg.png Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics

5. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 Texting to Perfection Fonts define the style for letters and numbers. Each font has a unique, well-defined style. Fonts can be altered with HTML and CSS styles, attributes, and values. You can change the size, color, or style of a single paragraph, a single sentence, or even a single word, with the tag.

6. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 Downloading and Inserting Graphics Three common file types for graphics used in Web pages are GIF, JPEG, and PNG. GIF files can be used as regular images, allow transparency, and can be animated. JPEG images are compact enough for Internet use, and are supported by most digital cameras. PNG was designed to replace GIF files.

7. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E Downloading and Inserting Graphics (continued) A GIF image as seen in the Internet Explorer browser 7

8. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 Creating Pictures of All Sizes Pictures can be altered by changing a tag’s values. They can be aligned in the center, to the left side, or to the right side of a page. You can also change the size of the picture by using the height and width attributes.

9. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E Creating Pictures of All Sizes (continued) GIF images with changing attributes and values in a Firefox browser 9

10. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 10 Creating Orderly Tables Tables are a grid of columns and rows that create boxes that can contain text and images. Each intersection of a column and a row creates a box or cell. defines a table row defines a table header defines a table cell

11. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E Creating Orderly Tables (continued) An HTML table as seen in a Chrome browser 11

12. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 12 Adding Extraordinary Extras Data input or tag options give you ways to ask questions of Web page visitors. – Text box: A box where visitors can enter responses. – Drop-down list: Appears when a Web site visitor clicks an arrow to display a list of possible options. – Radio button: Circular button that allows a Web site visitor to choose one option from a group of options. – Check box: Allows a user to select more than one option from a group of options.

13. Lesson 3 Barksdale / TurnerHTML and JavaScript BASICS 4E 13 Summary In this lesson, you learned: How to control the size, style, and color of fonts. How to download and insert graphics into your Web page. How to change the size and placement of graphics. How to create tables to organize information. How to insert a variety of data input options into a Web page.