1 / 113

HTML | DOM

HTML | DOM. Objectives. HTML – Hypertext Markup Language Sematic markup Common tags/elements Document Object Model (DOM) Work on page | HTML | CSS | Responsive. HTML: Background. What is Html/Xhtml?. HTML 5 is still a draft HTML (4.01) is subsumed as XHTML 1.0

reegan
Download Presentation

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. 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. • Nav Article Section Aside Footer

  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). <p>This is paragraph one….</p> <p>This is paragraph one….</p> 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 Tags generally come in pairs. Beginning Tag <html> </html> Ending Tag

  10. HTML Elements <header> <hgroup> <h1>Interface design</h1> <p>Tech spotlight on trends</p> <h2>Interface patterns</h2> </hgroup> </header> Beginning Tag Ending Tag

  11. HTML Tags • HTML elements that have no content - empty elements. • Empty elementshave start and end tags run together: <img />, <hr />,… • Empty elements such as: • <hr /> Horizontal rule • <br /> Line break • <img /> Image • <input /> Form element

  12. HTML: Attributes • <a href=“/” title=”google link”>Google.com</a> • <img src=“myimage.jpg” alt=“Company XYZ logo” /> • <article id=“newsGlobal” class=“typeSize”></article>

  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. Step 2: Give the Document Structure <!doctype html> <html> <head> <meta charset=“utf-8”> <title> Registration for W3 App Conference</title> </head> <body> <p>Hello, world!</p> </body> </html> • 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. Document Structure | DocType • If you do not declare a specific DocType correctly a visitor’s browser must "guess" • usually by applying the loosest possible DocType or a "quirks" mode DocType of its own) resulting in slower rendering. • result in display variation between browsers.

  18. Step 2: Give the Document Structure <!doctype html> <html> <head> <meta charset=“utf-8”> <title>Registration for W3 App Conference!</title> </head> <body> <section> <article> <nav></nav> <p>Hello, world!</p> </article> </section> </body> </html> Basic structure even in complex docs. HEAD HTML BODY

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

  20. Inline and Block level elements

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

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

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

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

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

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

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

  28. Structural: Heading Levels • Groups information into major points • <h1>…</h1> Biggest heading level • <h6>…</h6> Smallest heading level

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

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

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

  32. Structural: Unordered Lists • Apples • Oranges • Pears <ul> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </ul>

  33. Structural: Ordered Lists • Step 1 • Step 2 • Step 3 <ol> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> </ol>

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

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

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

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

  38. Commonly used elements

  39. Tags in Every HTML Document <!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body>

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

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

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

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

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

  45. 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> <section></section> <header></header> <footer></footer> <figure></figure> <figcaption></figcaption>

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

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

  48. Blog site

More Related