1 / 38

HTML | DOM

HTML | DOM. Objectives. HTML – Hypertext Markup Language Sematic markup Common tags/elements Document Object Model (DOM) Work on page | HTML | CSS | Responsive. Tags in Every HTML Document. <!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body>. <HTML> Tag.

umay
Télécharger la présentation

HTML | DOM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body>

  4. <HTML> Tag • Reminds the browser that the document is a HTML document <html>….</html>

  5. <HEAD> Tag • Gives the browser information about the document • Comes after the <HTML> tag <head>….</head>

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

  7. Comment Tag • Text that shows up in the HTML source code, but does not show up in the browser window <! - - Comments go here - - >

  8. <BODY> Tag • All the information between the body tags appears in the browser’s window <body>…</body>

  9. Common HTML Tags/elements <!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body> <img> <ol><li></li></ol> <ul><li></li></ul> <blockquote></blockquote> <table></table> <div> <form></form> <input> <h1-6></h1-6> <p></p> <em></em> <br /> New in HTML 5 <article></article> <aside></aside> <canvas></canvas> <nav></nav> <hgroup></ hgroup > (Removed) <section></section> <header></header> <footer></footer> <figure></figure> <figcaption></figcaption> W3Schools

  10. <section> <section> <article> </section> <h1> <section> <address> <time datetime=""> <img> </article> </section> </section>

  11. <article> <h3> <ol> <li></li> </ol> <aside> <p> <h3> <ol> <li></li> </ol> <h3> </article> </aside>

  12. Blog site

  13. <nav> </nav> <section> <header><h2>By the Sea></h2></header> </section> <aside> <section> <header> <h3>Categories</h3> </header> </section> <section> <header> <h3>Archives</h3> </header> </section> </aside> <section> <article> <header><h2>This is the title…</h2></header> </article> </section>

  14. HTML Tree: relationship of one element to another.

  15. HTML Tree <html> <head> <title>My Web Page Description</title> </head> <body> <h1>Main Topic</h1> <p> A web page about the days of the week, specifically<strong>Tuesday.</strong> </p> </body> </html>

  16. HTML Tree | DOM <html> <head> <body> <title> <h1> <p> <strong>

  17. HTML Tree | DOM <html> Ancestor to all tags Ancestor to h1, p, strong <head> <body> Descendent of <html> <title> <h1> <p> Descendent of <html> and <head> Siblings <strong> Child of <p>

  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. <html> <head> <body> <title> <h1> <p> <strong>

  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;} <h1 class=“hiLight”>Hello World</h1> <h2 class=“hiLight”>Hello World</h2> <p class=“hiLight”>Hello World</p> What next? CSS

  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;} <h1 class=“hiLight”>Hello World</h1> <h2 class=“hiLight”>Hello World</h2> <p class=“hiLight”>Hello World</p>

  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. <p>, <h>,<div>, <section>, <article>, etc. • Inline tags don’t create a break before or after element. <span>, <em>, <strong>, <cite>, <abbr>,<kbd>, <a> 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. <cite> <cite>”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45)</cite>, 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 • <table> for tabular data

  27. Structural: Paragraph Tag • <p>…</p> • Gives the appearance of paragraphs

  28. <p> 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 <em>temporal aspects</em> of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. </p> <p> 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. </p>

  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 aspectsof 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 • <h1>…</h1> Biggest heading level • <h6>…</h6> Smallest heading level

  31. Structural: Heading Levels <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>

  32. <h1> Introduction</h1> 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. <h2> Educational Conversations</h2>

  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 <ul> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </ul>

  35. Structural: Ordered Lists • Apples • Oranges • Pears <ol> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </l>

  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 <table> <tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr> </table>

  37. <table> <tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr> </table>

More Related