Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML 101

1,596 views

Published on

I created this presentation for one of our office's weekly professional development sessions. It was meant to give a basic understanding of HTML. *Very* basic.

Published in: Technology, Design
  • Be the first to comment

HTML 101

  1. 1. HTML 101 It’s not rocket science.
  2. 2. Understanding HTML Simplified. There’s way more to HTML than this. • Heading • Title • Body • [Structured] Content
  3. 3. Step by Step Let’s see how to code the following example in 8 steps. HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 border not included
  4. 4. Step by Step: 1 { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 HTML code browser preview 8 { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  5. 5. Step by Step: 2 n’... any tag you ‘ope ...must be ‘close d’ 8 { 8 <p>HTML can be easy!</p> <p> This is what content looks like in HTML (when you are viewing it in a browser). </p> <p>So Eric says... </p> we now have par { agraphs 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  6. 6. Step by Step: 3 { <h1>HTML can be easy!</h1> <p> This is what content looks like in HTML (when you are viewing it in a browser). </p> <p>So Eric says... </p> larger, bold font { 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  7. 7. Step by Step: 4 { <h1>HTML can be easy!</h1> <p> This is what content looks like in HTML <br />(when you are viewing it in a browser). </p> 8 <p>So Eric says... </p> g’ ag is ‘seglf-fcolosin ages) this t g> ta s r im (so are <im { HTML can be easy! we have a hard within our parliange break 8 raph This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  8. 8. Step by Step: 5 { <h1>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p>So Eric says... </p> { HTML can be easy! bold text 8 This is what content looks like in HTML (when you are viewing it in a browser). 8 italicized text So Eric says...
  9. 9. Step by Step: 6 { <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”>So Eric says... </p> centered text { 8 HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 centered text
  10. 10. Step by Step: 7 { <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an icon.” width=”125” height=”125” /> So Eric says... </p> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... 8 Image displayed
  11. 11. Step by Step: 8 <html> <head> <title>HTML 101: Step-by-Step</title> { </head> <body> <h1 align=”center”>HTML can be easy!</h1> <p> This is what content looks like in <strong>HTML</strong> <br /> <em>(when you are viewing it in a browser)</em>. </p> <p align=”center”><img src=”eric-the-great-01.jpg” alt=”Eric as an icon.” width=”125” height=”125” />So Eric says... </p> </body> </html> 8 anything outside t is not displayed he <body> tags in the broswer { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says...
  12. 12. Classes & ID’s They serve as ways to describe content in our HTML document. these are HTML 102 concepts... 8 • ID’s are unique • Each element can have only one ID • Each page can have only one element with that ID • Classes are not unique • You can use the same class on multiple elements • You can use multiple classes on the same element
  13. 13. Classes & ID’s: Example They serve as ways to describe content in our HTML document. <ul id=”navigation”> <li class=”menu item1”><a href=”index.html” title=”Our Homepage” class=”active”>Home</a></li> <li class=”menu item2”><a href=”about.html” title=”About the OOC”>About Us</a></li> <li class=”menu item3”><a href=”contact.html” title=”Contact our company”>Contact Us</a></li> </ul> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About Us</a></li> <li><a href=”contact.html”>Contact Us</a></li> </ul> 8 both these exam the same visual ples have nearly can do a whole result, but you • Home • About Us the ‘starred’loex more with t ample... • Contact Us
  14. 14. Validating Your Work Double-checking that you’re on the right track. • World Wide Web Consortium (W3C) http://www.w3.org/ Validator Tool: http://validator.w3.org/ • Smashing Magazine 8 Awesome Resources good for checkin http://www.smashingmagazine.com/ g your work • Chris Coyier/CSS-Tricks 8 good for learning more http://css-tricks.com/ • Cheatsheets http://j.mp/8szjMJ • Eric’s Twitter Favorites http://twitter.com/EricRasch/favorites
  15. 15. Beautiful Code Thanks, Chris Coyier: http://bit.ly/ciimDi
  16. 16. That’s it? Nope. That was just the beginning. ‘next steps’ and • CSS extend basic Hways to 8 TML • SEO (Search Engine Optimization) • Frameworks • Databases • Other Languages
  17. 17. Other Languages These can piggyback on, and bring a lot of power to, HTML. XML JavaScript (AJAX, jQuery, MooTools, etc.) PHP JSP .NET (ASP.NET,VB.NET, etc.) ASP
  18. 18. Tools of the Trade Dreamweaver ($399 | Mac/PC | http://www.adobe.com/dreamweaver/) Coda ($99 | Mac | http://www.panic.com/coda/) Textmate ($56 | Mac with a PC equivalent | http://macromates.com/) Komodo Edit (FREE | Mac/PC | http://www.activestate.com/komodo_edit/) Other ‘Open Source’ Tools (Mac/PC) Frontpage (PC) Notepad (PC)
  19. 19. Thank you. Feel free to connect with me. http://ericrasch.com/ http://med.uth.tmc.edu/comm/ at work 8 8 everywhere else

×