Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
Html intro
- 1. HTML
- 2. HTML
- 3. HTML Hyper
- 4. HTML Hypertext
- 5. HTML Hypertext Markup
- 6. HTML Hypertext Markup Language
- 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
- 11. HTML is XML eXtensible
- 12. HTML is XML eXtensible Markup
- 13. HTML is XML eXtensible Markup Language
- 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>
- 39. Headings <h1>,<h2>,<h3>, <h4>,<h5>,<h6>
- 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