1 / 68

HTML Crash Course

HTML Crash Course. July 2012. Housekeeping Items. Breaks & Lunch Rooms Eloqua USB Sticks. 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 ?. Agenda – Days 1 and 2.

ikia
Download Presentation

HTML Crash Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related