Html intro
- 1. HTML
- 2. HTML
- 3. HTML Hyper
- 7. Markup This is text without markup.
- 8. Markup This is text without markup. <p>This is text <em>with</em> markup.</p>
- 9. Markup It's just text! This is text without markup. <p>This is text <em>with</em> markup.</p>
- 10. HTML is XML
- 14. XML XML tags can be anything
- 15. HTML HTML uses a specific set of tags
- 16. Tags <p>This paragraph has some <strong>bold information</strong> in it.</p> In the browser, this markup will look like: This paragraph has some bold information in it.
- 17. Tags <p>Lorem <strong><em>ipsum dolor</em></strong> sit amet, consectetur elit.</p> • Tags that open must close • First one in, last one out
- 18. Nested tags <div id="content"> <p>This paragraph has some <strong>bold information</strong> in it.</p> </div> • Tags take a hierarchical, parent-child structure
- 19. The DOM • Document Object Model • Represents the nested structure of an HTML document • Tree structure -- think family tree body h1 ul div p strong
- 20. The Skeletal System Every page should have these tags: • <html> • <head> • <title> • <body>
- 21. A Simple Page
- 22. A Simple Page <!DOCTYPE HTML>
- 23. A Simple Page <!DOCTYPE HTML> <html> </html>
- 24. A Simple Page <!DOCTYPE HTML> <html> <head> </head> </html>
- 25. A Simple Page <!DOCTYPE HTML> <html> <head> <title>The name of my page</title> </head> </html>
- 26. A Simple Page <!DOCTYPE HTML> <html> <head> <title>The name of my page</title> </head> <body> </body> </html>
- 27. A Simple Page <!DOCTYPE HTML> <html> <head> <title>The name of my page</title> </head> <body> <p>Some information here.</p> </body> </html>
- 28. In the Browser Title Body
- 29. Doctype • Tells the browser which version of HTML to use. • In HTML 5, the doctype line is short: <!DOCTYPE HTML>
- 30. Head • Provides information that isn't displayed in the body • CSS and Javascript instructions are included here
- 31. Title • Inside the <head> tag • Titles the browser window
- 32. Body • Everything to be displayed in the browser • Most of the HTML goes here
- 33. Set-up • Put the HTML into a text file using Text Wrangler, or the text editor of your choice. • In Firefox, choose "File > Open File" and open your HTML page.
- 34. Exercise
- 35. Tags to Know
- 36. Paragraph • <p> • Creates a line break after closing tag
- 37. Line Breaks • <br/> • Closing slash inside tag because it doesn't enclose anything. • Line breaks in the HTML text do not show up in the browser.
- 38. Bold and Italic • <strong> and <em> • The old way was to use <b> and <i>
- 40. Exercise Create an outline in your HTML using headings and paragraph tags. Examples: •Table of Contents •Proposal •Presentation Notes
- 41. Links • <a> • The most important tag! Link Text href URL What the link looks Hyperlink Reference Name of file to link to like in the browser
- 42. Links • <a> • The most important tag! <a href="page.html">Go to page</a> Link Text href URL What the link looks Hyperlink Reference Name of file to link to like in the browser
- 43. Exercise Create a new HTML page and link to it from your first page.
- 44. Images <img> Closing Slash src URL Tag opens and closes Image Source Name of image file in the same tag
- 45. Images <img> <img src="cats.jpg" /> Closing Slash src URL Tag opens and closes Image Source Name of image file in the same tag
- 46. Exercise Add an image to your page.
- 47. Attributes Extra information inside a tag, as in <a> and <img>
- 48. Attributes Extra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a>
- 49. Attributes Extra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" />
- 50. Attributes Extra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" /> <p class="highlight">My paragraph.</p>
- 51. Attributes Extra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" /> <p class="highlight">My paragraph.</p> <div id="navigation">My navigation</div>
- 52. Inline vs. Block Elements • Block-level elements begin a new line in the flow of a page. • Inline elements stay in the current flow of the page without breaking a line. Block Inline <p> <img> <h1> <strong> <table> <em> <div> <span>
- 53. Lists • <ol> : Ordered list, usually with numbers • <ul> : Unordered list, with bullets • <li> : List item -- each item in list • <ul> or <ol> tags wrap a set of <li> tags
- 54. Unordered List
- 55. Ordered List
- 56. Exercise Create a site navigation using the <ul> and <li> tags. Don't forget the link (<a>) tags!
- 57. Tables • <table> : open and close a table • <tr> : table row • <td> : table data, aka a cell • <th> : table heading
- 58. Building Tables <tr> Jane 555-9871 San Francisco John 555-0862 San Jose Judy 555-9753 Mountain View <td>
- 59. Building Tables <table> <tr> <td>Jane</td> <td>555-9871</td> <td>San Francisco</td> </tr> ... </table>
- 60. Exercise Create a table in HTML
- 61. The <div> tag • Used to group elements semantically, by topic • Useful for layout with CSS • Will usually have an id or class attribute to identify it
- 62. Using <div> Divs identify sections of the document
- 63. The <span> tag • Like div, helps organize code • Inline element • Used for smaller pieces of code than div
- 64. The <span> tag • Like div, helps organize code • Inline element • Used for smaller pieces of code than div <p>Some of <span class="highlight">this text</span> is not like the other</p>
- 65. Exercise Add sections to your HTML document using div tags with id attributes
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n