Html intro

2,089 views
2,012 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,089
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×