© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. "Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Chapter 8 Introduction to HTML Part 4 Common HTML Tags © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

In this lecture, you will learn: How to use the HTML tags: <p>, <br>, <h1>-<h6>, <b>, <i>, <strong>, <em>, <a>, <img>, and tags for tables © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Paragraph: <p></p> Example: <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Line Break: <br /> Example: <p>This is the first paragraph.<br />This is a new line of the same same paragraph.</p> <p>This is the second paragraph.</p> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Headings: <h1> - <h6> Example: <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading 5</h5> <h6>This is a heading 6</h6> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Bold and Italics Bold: <b> </b> <strong> </strong> Italics: <i> </i> <em> </em> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Bold and Italics Example: <p>This is normal text.</p> <p> <b>This text is bold. </b> <i>This text is italic.</i> </p> <b><i>This text is bold and italic.</i></b> <i><b>This text is also bold and italic.</b></i> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Bold and Italics Example: <p>This is normal text.</p> <p> <strong>This text is bold. </strong> <em>This text is italic.</em> </p> <strong><em>This text is bold and italic.</em></strong> <em><strong>This text is also bold and italic.</strong></em> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Bold and Italics © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. List Ordered list: <ol> </ol> Unordered list: <ul> </ul> List item: <li> </li> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. List Ordered list example: <ol> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ol> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Link: <a href="..."></a> General Syntax: <a href="url or file path">whatever to be displayed as a clickable link</a> href is the attribute Example: <a href="http://www.google.com/">Google Web Site</a> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Image: <img src="..."></img> General Syntax: <img src="url or file path" /> or <img src="url or file path"></img> No element content src is the attribute Example: <img src="logo.jpg" /> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Table Table: <table></table> Table row: <tr></tr> Table data: <td></td> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Table Example: A table without a border <table> <tr> <td> row 1, column 1</td> <td> row 1, column 2</td> </tr> <td> row 2, column 1</td> <td> row 2, column 2</td> <td> row 3, column 1</td> <td> row 3, column 2</td> </table> Example: A table with a border <table border="1"> <tr> <td> row 1, column 1</td> <td> row 1, column 2</td> </tr> <td> row 2, column 1</td> <td> row 2, column 2</td> <td> row 3, column 1</td> <td> row 3, column 2</td> </table> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Table Without a table border With a table border © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Questions Note to instructor: Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question The ___ tag is used to create a line break—to force a new line without starting a new paragraph. By default, the line created using this tag has ______-line spacing. <br />; single © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question The ___ tag is used to create a heading 1 element. <h1> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Fill in the blanks for the HTML code below to create a link to your favorite Web site. Use a valid URL. <___ ___ = "___">My Favorite Web site<___> <a href = "http://www.google.com">My Favorite Web site</a> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Fill in the blanks for the HTML code below to embed an image called logo.jpg on a Web page. Suppose logo.jpg is in the same folder as the HTML document that embeds it. <___ ___ = "___" ___> <img src= "logo.jpg" /> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Fill in the blanks for the HTML code to create a list as shown. 1. Preheat oven to 450 degrees. 2. Heat butter and oil in a large saucepan. 3. Cook the shrimp for 10 minutes. <___> <___>Preheat oven to 450 degrees.<___> <___>Heat butter and oil in a large saucepan.<___> <___>Cook the shrimp for 10 minutes.<___> <ol> <li>Preheat oven to 450 degrees.</li> <li>Heat butter and oil in a large saucepan.</li> <li>Cook the shrimp for 10 minutes.</li> </ol> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Fill in the blanks for the HTML code to create a list as shown. Elephants Tigers Frogs <___> <___>Elephants<___> <___>Tigers<___> <___>Frogs<___> <ul> <li>Elephants</li> <li>Tigers</li> <li>Frogs</li> </ul> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Review Question Fill in the blanks for the HTML code to create a table as shown but without a table border. <table> <tr> <td>___</td> <___> Elephants Tulips Tigers Roses <table> <tr> <td>Elephants</td> <td>Tulips</td> </tr> <td>Tigers</td> <td>Roses</td> </table> © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.