Your SlideShare is downloading. ×
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html intro

1,907

Published on

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

No Downloads
Views
Total Views
1,907
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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

    ×