Download presentation
Presentation is loading. Please wait.
Published byDinah Palmer Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.