Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Technology
2,502 views
Apr. 28, 2011

Html intro

no profile picture user

  • Be the first to comment

Html intro

  1. 1. HTML
  2. 2. HTML
  3. 3. HTMLHyper
  4. 4. HTMLHypertext
  5. 5. HTMLHypertextMarkup
  6. 6. HTMLHypertextMarkupLanguage
  7. 7. MarkupThis is text without markup.
  8. 8. MarkupThis is text without markup.<p>This is text <em>with</em> markup.</p>
  9. 9. MarkupIts 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 XMLeXtensible
  12. 12. HTML is XMLeXtensibleMarkup
  13. 13. HTML is XMLeXtensibleMarkupLanguage
  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>boldinformation</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 SystemEvery 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 BrowserTitle 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 isnt 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 doesnt 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. ExerciseCreate an outline in your HTML using headings andparagraph tags.Examples: •Table of Contents •Proposal •Presentation Notes
  41. 41. Links • <a> • The most important tag! Link Text href URL What the link looksHyperlink 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 looksHyperlink Reference Name of file to link to like in the browser
  43. 43. ExerciseCreate a new HTML page and link to it from your firstpage.
  44. 44. Images<img> Closing Slash src URL Tag opens and closesImage Source Name of image file in the same tag
  45. 45. Images<img> <img src="cats.jpg" /> Closing Slash src URL Tag opens and closesImage Source Name of image file in the same tag
  46. 46. ExerciseAdd an image to your page.
  47. 47. AttributesExtra information inside a tag, as in <a> and <img>
  48. 48. AttributesExtra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a>
  49. 49. AttributesExtra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" />
  50. 50. AttributesExtra 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. AttributesExtra 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. ExerciseCreate a site navigation using the <ul> and <li> tags.Dont 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. ExerciseCreate 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">thistext</span> is not like the other</p>
  65. 65. ExerciseAdd sections to your HTML document using div tagswith id attributes

×