Your SlideShare is downloading. ×
0
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
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 101

1,267

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.

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,267
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

    ×