Successfully reported this slideshow.
Your SlideShare is downloading. ×

Html intro

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Introduction to HTML
Introduction to HTML
Loading in …3
×

Check these out next

1 of 65 Ad

More Related Content

Slideshows for you (20)

Advertisement

Recently uploaded (20)

Html intro

  1. 1. HTML
  2. 2. HTML
  3. 3. HTML Hyper
  4. 4. HTML Hypertext
  5. 5. HTML Hypertext Markup
  6. 6. HTML Hypertext Markup Language
  7. 7. Markup This is text without markup.
  8. 8. Markup This is text without markup. <p>This is text <em>with</em> markup.</p>
  9. 9. Markup It's just text! This is text without markup. <p>This is text <em>with</em> markup.</p>
  10. 10. HTML is XML
  11. 11. HTML is XML eXtensible
  12. 12. HTML is XML eXtensible Markup
  13. 13. HTML is XML eXtensible Markup Language
  14. 14. XML XML tags can be anything
  15. 15. HTML HTML uses a specific set of tags
  16. 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. 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. 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. 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. 20. The Skeletal System Every page should have these tags: • <html> • <head> • <title> • <body>
  21. 21. A Simple Page
  22. 22. A Simple Page <!DOCTYPE HTML>
  23. 23. A Simple Page <!DOCTYPE HTML> <html> </html>
  24. 24. A Simple Page <!DOCTYPE HTML> <html> <head> </head> </html>
  25. 25. A Simple Page <!DOCTYPE HTML> <html> <head> <title>The name of my page</title> </head> </html>
  26. 26. A Simple Page <!DOCTYPE HTML> <html> <head> <title>The name of my page</title> </head> <body> </body> </html>
  27. 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. 28. In the Browser Title Body
  29. 29. Doctype • Tells the browser which version of HTML to use. • In HTML 5, the doctype line is short: <!DOCTYPE HTML>
  30. 30. Head • Provides information that isn't displayed in the body • CSS and Javascript instructions are included here
  31. 31. Title • Inside the <head> tag • Titles the browser window
  32. 32. Body • Everything to be displayed in the browser • Most of the HTML goes here
  33. 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. 34. Exercise
  35. 35. Tags to Know
  36. 36. Paragraph • <p> • Creates a line break after closing tag
  37. 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. 38. Bold and Italic • <strong> and <em> • The old way was to use <b> and <i>
  39. 39. Headings <h1>,<h2>,<h3>, <h4>,<h5>,<h6>
  40. 40. Exercise Create an outline in your HTML using headings and paragraph tags. Examples: •Table of Contents •Proposal •Presentation Notes
  41. 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. 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. 43. Exercise Create a new HTML page and link to it from your first page.
  44. 44. Images <img> Closing Slash src URL Tag opens and closes Image Source Name of image file in the same tag
  45. 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. 46. Exercise Add an image to your page.
  47. 47. Attributes Extra information inside a tag, as in <a> and <img>
  48. 48. Attributes Extra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a>
  49. 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. 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. 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. 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. 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. 54. Unordered List
  55. 55. Ordered List
  56. 56. Exercise Create a site navigation using the <ul> and <li> tags. Don't forget the link (<a>) tags!
  57. 57. Tables • <table> : open and close a table • <tr> : table row • <td> : table data, aka a cell • <th> : table heading
  58. 58. Building Tables <tr> Jane 555-9871 San Francisco John 555-0862 San Jose Judy 555-9753 Mountain View <td>
  59. 59. Building Tables <table> <tr> <td>Jane</td> <td>555-9871</td> <td>San Francisco</td> </tr> ... </table>
  60. 60. Exercise Create a table in HTML
  61. 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. 62. Using <div> Divs identify sections of the document
  63. 63. The <span> tag • Like div, helps organize code • Inline element • Used for smaller pieces of code than div
  64. 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. 65. Exercise Add sections to your HTML document using div tags with id attributes

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×