Your SlideShare is downloading. ×
  • Like
HTML 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML 101

  • 1,223 views
Published

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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
4

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

Transcript

  • 1. HTML 101 It’s not rocket science.
  • 2. Understanding HTML Simplified. There’s way more to HTML than this. • Heading • Title • Body • [Structured] Content
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Beautiful Code Thanks, Chris Coyier: http://bit.ly/ciimDi
  • 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. 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. 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. Thank you. Feel free to connect with me. http://ericrasch.com/ http://med.uth.tmc.edu/comm/ at work 8 8 everywhere else