1. © 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.

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

3. 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.

4. 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.

5. 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.

6. 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.

7. © 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.

8. © 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.

9. © 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.

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

11. © 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.

12. © 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.

13. 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=" Web Site</a>
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. 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.

15. © 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.

16. © 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.

17. © 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.

18. © 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.

19. © 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.

20. © 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.

21. © 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 = " Favorite Web site</a>
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

22. © 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.

23. © 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.

24. © 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.

25. © 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.