1. Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 2: More HTML

2. Quick Recap 0 HTML is case insensitive is OK

3. Quick Recap 1 An HTML page is a tree of HTML elements The beginning and end of each element in an HTML page must be marked by start and end tags Some elements may be declared minus their end tags For example, void elements with no content such as BR Use instead of Some elements may be declared with self-closing tags For example, void elements with no content such as BR Use instead of or

4. Quick Recap 2 An HTML page always begins with a DOCTYPE header (it is not an HTML element or tag) Required for legacy reasons (XHTML) Next up we place the HTML element Must contain a HEAD element, followed by a BODY element The HEAD element contains metadata, such as the TITLE element

5. Quick Recap 3 The BODY element contains flow content Flow content is any element that can be used within the BODY element (stuff you want to show up in your webpage) Paragraphs, images, tables, code, etc. Here are the flow content elements we covered in class last week P, BR, H1, H2, H3, H4, H5, H6 B, I, STRONG, EM, SMALL, SUB, SUP

6. Quick Recap (The P Element) Description Used to mark paragraphs. The P element should always be a part of flow content. Comments Start Tag: Required End Tag: Optional Self-Closing Tag: Works, but not technically legal Example The is paragraph text. Type more here…

7. Quick Recap (The BR Element) Description Marks a line break within phrasing content (text, video and audio). Comments Start Tag: Required End Tag: Forbidden Self-Closing Tag: Works, but technically illegal Example Steven Emory 10298 Atlantic Ave. Beverly Hills, CA 90210

8. Quick Recap (The H1 - H6 Elements) Description Marks a new heading (H1 largest, H6 smallest). Comments Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example Chapter 1 Section 1.1 Section 1.2 Section 1.2.1

9. Quick Recap (The B and I Elements) Description Marks bold and italic phrasing content. Comments Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example Sometime long ago, in a land far, far away…

10. Quick Recap (The STRONG and EM Elements) Description Marks strong and emphatic phrasing content. Comments Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example Sometime long ago, in a land far, far away…

11. Quick Recap (The STRONG and EM Elements) The STRONG and EM elements by default behave similarly to B and I respectively, but there is a difference We can make STRONG and EM behave differently using CSS Try the code on the next slide! We haven’t covered CSS, but we can make them behave differently!

12. Quick Recap (The STRONG and EM Elements) STRONG versus B example: Lab strong{color:#FF0000;font-size:xx-large} This is strong text. This is bold text.

13. Quick Recap (The SMALL Element) Description Marks phrasing content that will be rendered small. Comments Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example *Your results may vary. You will more than likely not experience the same results.

14. Quick Recap (The SUB and SUP Elements) Description Marks subscript and superscript phrasing content. Comments Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example b 0 2 0 + b 1 2 1 + … + b n–1 2 n–1

15. Comments It is really easy to add a comment in HTML Syntax: Comment text may not contain two double dashes Comment text should not contain either Example:

16. Global Attributes HTML elements may specify attributes within the start tag Global attributes are attributes common to all HTML elements For now, we are only going to worry about two global attributes TITLE DIR

17. The TITLE Attribute Description Displays a tooltip when you hover the mouse over an HTML element Values Text content Example When you place the mouse over this text, you will get a tooltip!

18. The DIR Attribute Description Controls the direction of the content. Values RTL (right-to-left) LTR (left-to-right) Example Hey look, this is really weird!

19. More HTML Elements The HR Element (Horizontal Rule) The PRE Element (Preformatted Text) The ABBR Element (Abbreviation) The BDO Element (Bidirectional Override) The OL and UL Elements (Lists) The LI Element (List Item) The DL Element (Definition List) The DT Element (Definition Term) The DD Element (Definition Description)

20. The HR Element Description: Used to render a horizontal rule (line) Comments: Start Tag: Required End Tag: Forbidden Self-Closing Tag: Works, but technically illegal Example:

21. The PRE Element Description: Used to render preformatted text Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: Preformatted text!

22. The ABBR Element Description: Used to mark an abbreviation or acronym Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: AUS

23. The BDO Element Description: Controls the direction of text You should override the DIR attribute Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: Hey look, this is really weird!

24. The OL Element Description: Defines an ordered list Optional START attribute may be overridden Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: 1 2

25. The UL Element Description: Defines an unordered list Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden Example: 1 2

26. The LI Element Description: Defines an ordered or unordered list item You may override the VALUE attribute Comments: Start Tag: Required End Tag: Optional Self-Closing Tag: Works, but technically illegal Example: 1 2

27. The LI Element Description: Defines an ordered or unordered list item You may set the VALUE attribute to skip numbers in an ordered list (see example on next slide) Comments: Start Tag: Required End Tag: Optional Self-Closing Tag: Works, but technically illegal

28. The LI Element (Example) Example: 1 2 3 Note that START and VALUE are not global attributes. They are attributes specific to OL and LI, respectively.

29. The DL Element Description: Defines a definition list Useful for things like a list of dictionary entries that have many definitions Must contain zero or more DT elements (terms) Comments: Start Tag: Required End Tag: Required Self-Closing Tag: Forbidden

30. The DT Element Description: Defines a definition term within a definition list Useful to describe something (a term) that has multiple meanings (definitions) Must contain one or more DD elements (definitions) Comments: Start Tag: Required End Tag: Optional Self-Closing Tag: Works, but technically illegal

31. The DD Element Description: Defines a definition description for a definition term Comments: Start Tag: Required End Tag: Optional Self-Closing Tag: Works, but technically illegal

32. DL Element Example Example Steven Old graduate student Funny-looking guy Your CS120 instructor Joe Steven's crazy newphew Silly kid Crazy about fishing