1. HTML Introduction

2. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements o paragraphs o headings o block quote o lists  inline elements  empty elements 2

3. First HTML code Lastname, Firstname Welcome to My Homepage. We will start with this simple code. 3 Lecture 7

4. First HTML code Complete html document Body of the html document Title of the html document 4 Lecture 7

5. Tags  HTML document o Consists of tags  Tags - core building block of HTML o marks the presence of an element o marks the “start” and “end” of an element o Two-sided tags vs. single-sided tags  General syntax for two-sided tags content Opening tagClosing tag Lastname, Firstname Welcome to My Homepage. 5

6. Lecture 7 More about tags  special terms surrounded by angle brackets  can be upper, lower or mixed case Math 279 are all ok  most tags come in pairs, some don’t 6

7. Lecture 7 HTML tags  … o tells browser that file contains HTML-coded information o Anything between these two tags makes up the document content, including all other elements, text, and comments 7

8. The Structure of an HTML File  An HTML document is divided into two main elements: the head and the body  head element contains info about the document, for example, the document title or the keywords  … represents the head tags  The content of the head element is not displayed within the Web page Lecture 7 8

9. Title tags  … o used inside … o identify document title o displayed in the title bar at top of browser window o identifies your page for search engines 9

10. Body tags  … o start and end the actual contents (body)  The body element contains all of the content to appear on the Web page  HTML, HEAD, TITLE and BODY are four most basic tags in any html document Lecture 7 10

11. Adding Comments – special tag  The comment tag adds notes to your HTML code  Comments can be spread over several lines  Comments are useful in documenting your HTML code for yourself and others Lecture 7 11

12. (1) Do it yourself!  Add the texts as comments to the first html code o Author: Firstname Lastname o Last modified Date: Feb 22, 2010 Lecture 7 12 Lastname, Firstname Welcome to My Homepage.

13. Block-Level Elements  Block-level elements - distinct blocks within the body  Enhance o Readability o Presentation of the web page  Similar to a technical document o Document title, section title, section text, paragraphs etc.  Most generic and popular o Paragraphs o Headings Lecture 7 13

14. Lecture 7 Paragraphs and Headings  Paragraphs o …  Headings o …, …, …, … o six levels of headings o H1 is largest o H6 the smallest size 14

15. Recap the First HTML code Lastname, Firstname Welcome to My Homepage. 15 Lecture 7

16. (2) Do it yourself! o add another level of heading: … to the existing page o add two paragraphs and execute the html file using your web browser! 16

17. Lecture 7 How to insert texts in such indented manner? How to insert white spaces before and after the texts? 17

18. Block Quote  The syntax for making an extended quote is o …  A browser inserts white space before and after a blockquote element. Lecture 7 18

19. Block Quote Lecture 7 19 Computer Networking: A top down approach, 5th ed. Addison-Wesley by Kurose and Ross, ISBN-10: 0136079679 | ISBN-13: 978-0136079675 HTML A Beginner's Guide, 4th Edition, by Wendy Willard, ISBN-13: 9780071611435 New Perspectives on HTML and XHTML: Comprehensive, 5th Edition, by Patrick M. Carey, ISBN-10: 1423925467 | ISBN-13: 9781423925460

20. Lecture 7 Blockquote indents the texts but what if we want a list of items? 20

21. Lecture 7 List tags  unordered list o Also known as bulleted list …  Try inserting an unordered list in your html code! 21

22. Adding a List  HTML supports three kinds of lists: o unordered o ordered, and o definition  Unordered list for items that do not need to occur in any special order  Ordered list for items that must appear in a numerical order  Definition list for definition items Lecture 7 22

23. Lecture 7 Adding lists  unordered list (bulleted list): o …  ordered list (enumerated list): o … : o … : specify each list item for both unordered and ordered lists  definition list: … o a list of definitions o … : definition term o … : definition description 23

24. Lecture 7 Example for list tags Example for list tags Three kinds of lists are unordered list ordered list definition list unordered list ordered list definition list unordered list: shows bullets ordered list: shows number definition list: lists definitions Creates bulleted list Creates numbered list Creates definition list 24

25. Lecture 7 Other block-level elements - address  HTML supports the address element to indicate contact info. …  Most browsers display an address element in an italicized font e.g. John Jay College of Criminal Justice, New York, NY 10019 25

26. Block-Level Elements at a glance… Lecture 7 26

27. Lecture 7 Working with inline elements  Inline element: marks a section of text within a block-level element  Often used to format characters and words o Also referred to as character formatting elements ,…, : boldface element ,…, : italicizes any text inside 27

28. Lecture 7 28 Make the text bold and italicized

29. Working with Empty Elements  An empty element contains no content  Empty elements appear in code as one-sided tags  General syntax o  line break o  horizontal line o Lecture 7 29

30. Lecture 7 30 Insert a horizontal line in between two paragraphs

31. Lecture 7 31 What if I decide to change the style of the text inside the Tags?

32. Lecture 7 32 Attributes in Tags

33. Lecture 7 33 Attributesin tags  Attribute - a property of an HTML element (tag)  Control appearance of elements in the document  consists of o attribute_name and o attribute_value  used with opening tag  General syntax content

34. The Attributes  Example: ALIGN attribute attribute_name: ALIGN atribute_value: LEFT | CENTER | RIGHT Welcome to MAT 279  More recent, style attribute Lecture 7 34

35. Lecture 7 35 The style attribute  controls how the browser displays an element  used with opening tag  syntax content  rules o a set of style rules o entered by specifying a style name followed by a colon and then a style value style=“name1:value1; name2:value2; …”  e.g. Welcome to MAT 279