1. HTML | DOM

2. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML | CSS | Responsive  Assignment

3. HTML: BACKGROUND

4. What is Html/Xhtml?  HTML 5 is still a draft  HTML (4.01) is subsumed as XHTML 1.0  Extensible HyperText Markup Language (XHTML) extends HTML - reformulated in XML

5. What is Html/Xhtml?  XHTML was a cleaner and clearer standard compared to early versions of HTML.  HTML 5 offers new elements for better semantics, structure, drawing, media content, and handling of forms.  NavArticleSectionAsideFooter

6. HTML 5  Emphasizes semantics.  Removes some presentational elements.  Introduces new elements such as header, footer, article, sections, nav.  Use elements that best describe your content.  Work from the content outward.

7. HTML Elements  HTML markup divides a document into elements (i.e., paragraphs). This is paragraph one…. Element Content Element

8. HTML  Each individual markup code is referred to as an element or tag.  Each type of element has a name.  A, P, DIV, ARTICLE, IMG, ETC.  Each element is introduced by a start tag and terminated by an end tag

9. HTML: Tags  Hypertext MarkUp Language - HTML Beginning Tag Ending Tag Tags generally come in pairs.

10. HTML Elements Interface design Tech spotlight on trends Interface patterns Beginning Tag Ending Tag

11. HTML Tags  HTML elements that have no content - empty elements.  Empty elements have start and end tags run together:,,…  Empty elements such as:  Horizontal rule  Line break  Image  Form element

12. HTML: Attributes  Google.com 

13. DOCUMENT STRUCTURE HTML

14. HTML: Getting started - Robbins Robbins suggest beginning with the following steps:  Step 1: Start with Content  Examine content so you can determine appropriate markup  Step 2: Give the Document Structure  Step 3: Identify Text Elements  semantic markup E.g., h1-6, p, em, blockquote, q

15. Step 2: Give the Document Structure

16. Registration for W3 App Conference Hello, world!  A DTD – “defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD."  Definition of what is legal syntax in HTML and what isn't.

17. Step 2: Give the Document Structure Registration for W3 App Conference! Hello, world! HEAD BODY HTML Basic structure even in complex docs.

18. Step 3: Identify Text Elements  semantic markup h1-6 p br em blockquote q cite code

19. INLINE AND BLOCK LEVEL ELEMENTS

20. Block boxes and inline boxes  Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.

21. Block boxes and inline boxes  A block-level tag creates a break before and after the element.,,,,, etc.  Inline tags don’t create a break before or after element.,,,,,, See page 85 in Robbins text for list of inline elements

22. Block boxes and inline boxes  Inline tags don’t create a break before or after element. ”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45), it can be used on …

23. Structural: Block-Level Elements p – paragraphs h1, h2,…,h6 – level 1, 2,…,6 headers blockquote – long quotations (not indented paragraphs) section aside article div – arbitrary division ol, ul, dl - list for tabular data

24. Structural: Paragraph Tag  …  Gives the appearance of paragraphs

25. In the summer of 2008, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

26. In the summer of 2008, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

27. Structural: Heading Levels  Groups information into major points  … Biggest heading level  … Smallest heading level

28. Structural: Heading Levels Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

29. In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. Introduction Educational Conversations

30. Structural: HTML Lists  ul – unordered list  ol – ordered list  li – list element  dl – definition list Use pairs of dt (term) and dd (definition) elements within dl

31. Structural: Unordered Lists  Apples  Oranges  Pears Apples Oranges Pears

32. Structural: Ordered Lists 1. Step 1 2. Step 2 3. Step 3 Step 1 Step 2 Step 3

33. Structural: HTML Tables  Table elements contain tr (row) elements containing td (data, i.e. cell) elements  Tables are used for tabular data  Tables commonly used for page layout – not recommended Row 1Col 1 Row 2 Col 1

34. Tables commonly used for page layout – not recommended Proper use of table

35. Tables commonly used for page layout – not recommended Should not uses tables for layout.

36. Row 1Col 1 Row 2 Col 1

37. Row 1 Column 1 Row 2 Column 1

39. COMMONLY USED ELEMENTS

40. Tags in Every HTML Document … …. …

41. Tag  Reminds the browser that the document is a HTML document ….

42. Tag  Gives the browser information about the document  Comes after the tag ….

43. Tag  Places information in the title bar of the browser’s window, used by search engines optimization (SEO). ….

44. Comment Tag  Text that shows up in the HTML source code, but does not show up in the browser window

45. Tag  All the information between the body tags appears in the browser’s window …

46. … …. … Common HTML Tags/elements New in HTML 5

49. Blog site

50. By the Sea> This is the title… Categories Archives

51. HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

52. HTML Tree My Web Page Description Main Topic A web page about the days of the week, specifically Tuesday.

53. HTML Tree | DOM

54. HTML Tree | DOM Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and

55. HTML Tree Document Object Model – DOM Markup gives document structure. Underlying document hierarchy is important. Elements follow or nested within one another - creates relationships between elements. Gives browsers cues on how to handle content. Foundation on which we add styles and behaviors with JavaScript.