Upcoming SlideShare
Html intro
- 1. HTML
- 2. HTML
- 3. HTMLHyper
- 4. HTMLHypertext
- 5. HTMLHypertextMarkup
- 6. HTMLHypertextMarkupLanguage
- 7. MarkupThis is text without markup.
- 8. MarkupThis is text without markup.<p>This is text <em>with</em> markup.</p>
- 9. MarkupIts just text! This is text without markup. <p>This is text <em>with</em> markup.</p>
- 10. HTML is XML
- 11. HTML is XMLeXtensible
- 12. HTML is XMLeXtensibleMarkup
- 13. HTML is XMLeXtensibleMarkupLanguage
- 14. XML XML tags can be anything
- 15. HTML HTML uses a specific set of tags
- 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. 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 SystemEvery 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 BrowserTitle 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 isnt 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 doesnt 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. ExerciseCreate an outline in your HTML using headings andparagraph tags.Examples: •Table of Contents •Proposal •Presentation Notes
- 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. 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. ExerciseCreate a new HTML page and link to it from your firstpage.
- 44. Images<img> Closing Slash src URL Tag opens and closesImage Source Name of image file in the same tag
- 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. ExerciseAdd an image to your page.
- 47. AttributesExtra information inside a tag, as in <a> and <img>
- 48. AttributesExtra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a>
- 49. AttributesExtra information inside a tag, as in <a> and <img> <a href="page.html">Go to page</a> <img src="cats.jpg" />
- 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. 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. 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. ExerciseCreate a site navigation using the <ul> and <li> tags.Dont 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. ExerciseCreate 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">thistext</span> is not like the other</p>
- 65. ExerciseAdd sections to your HTML document using div tagswith id attributes
Be the first to comment