html crash course n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML Crash Course PowerPoint Presentation
Download Presentation
HTML Crash Course

play fullscreen
1 / 68

HTML Crash Course

107 Views Download Presentation
Download Presentation

HTML Crash Course

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML Crash Course July 2012

  2. Housekeeping Items • Breaks & Lunch • Rooms • Eloqua • USB Sticks

  3. Introductions • Name • Role • Prior experience with HTML & Web Development • How do you expect to use HTML in your role? • What are your take-away goals for this training?

  4. Agenda – Days 1 and 2 Section 1: HTML History and Overview Terminology How the Web Works Protocols Domain Names Query Strings Section 2: HTML Tags Tag Attributes HTML Page Structure Section 3: Building Your First Web Page External Resources Lists • Section 4: • Tables, Element Dimensions • Section 5: • Developing for Email Vs. Websites • HTML Forms • Section 6: • Outlook Emails • Tools Section 7: • Image Editing • Section 8: • Basic CSS • Section 9: • HTML Document Debugging 4

  5. What You Will Need • HTML Editor • Dreamweaver (Best Bet but Pricey) • FrontPage (Second Choice) • MS SharePoint Designer (Free) • Komposer (Free and Portable) • Graphic Design Application • PhotoShop (Best Bet But Pricey) • Pixlr.com (Free and Web Based) • Gimp (Free and Portable)

  6. Birth of the Web • In 1989 while working for CERN, Tim Berners-Lee invented WWW World’s First Web Site

  7. The Web Today In one day…

  8. Terminology • HTTP = HyperText Transport (or Transfer) Protocol • The protocol used to signify an Internet site is a World-Wide Web site. • HTML = HyperText Markup Language • A coding convention used to access documents over the World- Wide Web. The Language of the World Wide Web

  9. Basic Web Technology Web Server Database Web Browser Web Browser Web Browser

  10. HTTP Requests

  11. HTTP Requests- URLs URL Structure / Format

  12. Domain Names Wait!

  13. Domain Names and IP Addresses

  14. Deep Dive Into URLs • http://my.mcafee.com/my-landing-page/ • https://www.mcafee.com/us/business-home.aspx?eid=12345 Domain Page Protocol Sub-Domain Folder Query String

  15. HTTPS – Secure Protocol

  16. Query Strings • http://www.mcafee.com/?iframe=true&height=700&eid=12345 • ?Name=Value • &Name=Value

  17. Query Strings • ?eid=NAMWPFDBDB040

  18. HTML Tags – XHTML 1.0 Specification • HTML elements that contain content need an opening and closing tag. • HTML elements that are stand-alone, should be closed with a slash. <content>some text</content> <html tag with no content />

  19. HTML Tags – Good and Bad <p>My First Paragraph</p> <imgsrc=“http://mcafee.com/icon.gif" /> <p>My First Paragraph</p> </p> <p>My First Paragraph <imgsrc=“http://mcafee.com/icon.gif" >

  20. HTML Tags – Good Example

  21. HTML Tags – Most Common, Current <html> <head> <script> <title> <body> <a> <img> <span> <strong> <p> <h1> … <h6> <ol> <ul> <li> <div> <form> <em>

  22. HTML Tags – Deprecated

  23. HTML Tag Attributes • <img src="http://mcafee.com/icon.gif" /> • <h2 align="center">Centered Heading</h2> • <font size="5">Here is a size 5 font</font> • <div id="myFirstDiv">Content</div>

  24. HTML – Killed By Quotation Marks • <img src="http://mcafee.com/icon.gif" /> • <h2 align="center">Centered Heading</h2> • <font size="5">Here is a size 5 font</font> • <div id="myFirstDiv">Content</div> • <img src="http://mcafee.com/icon.gif/> • <h2 align="center">Centered Heading</h2> • <font size="5">Here is a size 5 font</font> • <div id="myFirstDiv">Content</div>

  25. HTML Page Structure

  26. HTML Tag Nesting - Why do we care?

  27. HTML Special Characters

  28. Exercise Time!!

  29. Build a Web Page • What do we need? • HTML Editor • Web Browser

  30. Your First Web Page Exercise 1 - Build This:

  31. Your First Web Page Exercise 1 – How does it look?

  32. Your First Web Page Exercise 2 – Add a Banner: Get your image from this page: https://planet.mcafee.com/docs/DOC-4192

  33. Your First Web Page Exercise 2 – How does it look?

  34. Build a Web Page • What do we need? • HTML Editor • Web Browser • Place to Host Resources

  35. Web Page Resources External Web Resources • Images • Scripts • Style Sheets • Videos < Not OK in Emails < Not OK in Emails < Iffy in Emails

  36. Web Page Resources Cont’d Web Hosting

  37. Your First Web Page Exercise 3 – Add Link To a PDF – In Eloqua Your PDF: http://bit.ly/NIJxug

  38. Your First Web Page Exercise 3 – Add Link To a PDF – In Eloqua

  39. Your First Web Page Exercise 3 – Add a link to your PDF Let’s fix this too.

  40. Your First Web Page

  41. Your First Web Page Exercise 4 – Should look like this:

  42. HTML Tables Anatomy of Table

  43. Your First Web Page Exercise 5 – Add Table

  44. Your First Web Page Exercise 5 – Should look like this:

  45. Email Vs. Website HTML Vs.

  46. Element Width & Height

  47. Element Width & Height

  48. HTML Forms Standard Eloqua Form

  49. HTML Forms

  50. Your First Web Page Exercise 7 – Add a Simple Form