Downloaded 21 times
More Related Content
Html intro
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. Markup This is textwithout markup.
- 8. Markup This is textwithout 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.
- 11.
- 12.
- 13.
- 14. XML XML tags can be anything
- 15. HTML HTML uses a specific set of tags
- 16. Tags <p>This paragraph hassome <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> sitamet, 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 • DocumentObject Model • Represents the nested structure of an HTML document • Tree structure -- think family tree body h1 ul div p strong
- 20. The Skeletal System Everypage should have these tags: • <html> • <head> • <title> • <body>
- 21.
- 22.
- 23. A Simple Page <!DOCTYPEHTML> <html> </html>
- 24. A Simple Page <!DOCTYPEHTML> <html> <head> </head> </html>
- 25. A Simple Page <!DOCTYPEHTML> <html> <head> <title>The name of my page</title> </head> </html>
- 26. A Simple Page <!DOCTYPEHTML> <html> <head> <title>The name of my page</title> </head> <body> </body> </html>
- 27. A Simple Page <!DOCTYPEHTML> <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 thebrowser which version of HTML to use. • In HTML 5, the doctype line is short: <!DOCTYPE HTML>
- 30. Head • Provides informationthat 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 tobe displayed in the browser • Most of the HTML goes here
- 33. Set-up • Put theHTML 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.
- 35.
- 36. Paragraph • <p> • Createsa 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>
- 39.
- 40. Exercise Create an outlinein 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 newHTML 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 imageto your page.
- 47. Attributes Extra information insidea tag, as in <a> and <img>
- 48. Attributes Extra information insidea tag, as in <a> and <img> <a href="page.html">Go to page</a>
- 49. Attributes Extra information insidea tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" />
- 50. Attributes Extra information insidea 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 insidea 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.
- 55.
- 56. Exercise Create a sitenavigation 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 tablein 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 toyour 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