1. HTML | DOM

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

3. Tags in Every HTML Document … …. …

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

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

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

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

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

9. … …. … Common HTML Tags/elements New in HTML 5 (Removed) W3Schools

12. Blog site

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

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

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

16. HTML Tree | DOM

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

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

19. Types of selectors | Dependent Classes  Dependent Classes (when the class is applied to a specific tag.) h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;} Hello World

20. Types of selectors | Dependent Classes  Dependent Classes (when the class is applied to a specific tag.) h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;} Hello World

21. VISUAL VS. STRUCTURAL Markup

22. Visual vs. Structural  HTML - evolved from original version with tags suitable for marking up scientific papers.  Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions.

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

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

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

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

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

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

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

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

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

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

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

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

35. Structural: Ordered Lists 1. Apples 2. Oranges 3. Pears Apples Oranges Pears

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

37. Row 1Col 1 Row 2 Col 1

38. Row 1 Column 1 Row 2 Column 1