Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML 101: A very basic intro to understanding HTML code

Eric Rasch
February 22, 2012

HTML 101: A very basic intro to understanding HTML code

I created this presentation for one of UT-Houston's Office of Communications office's weekly professional development sessions (originally posted on February 3, 2010). It was meant to give a basic understanding of HTML. *Very* basic.

Eric Rasch

February 22, 2012
Tweet

More Decks by Eric Rasch

Other Decks in Programming

Transcript

  1. Understanding HTML • Heading • Title • Body • [Structured]

    Content Simplified. There’s way more to HTML than this.
  2. Step by Step HTML can be easy! This is what

    content looks like in HTML (when you are viewing it in a browser). So Eric says... Let’s see how to code the following example in 8 steps. border not included 8
  3. 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... { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { HTML code browser preview 8 8
  4. Step by Step: 2 <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> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { we now have paragraphs 8 any tag you ‘open’... 8 ...must be ‘closed’ 8
  5. 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> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { larger, bold font 8
  6. 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> <p>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... { we have a hard line break within our paragraph 8 this tag is ‘self-closing’ (so are <img> tags for images) 8
  7. 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! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { bold text 8 italicized text 8
  8. 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> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { centered text 8 centered text 8
  9. 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... { Image displayed 8
  10. 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> { HTML can be easy! This is what content looks like in HTML (when you are viewing it in a browser). So Eric says... { anything outside the <body> tags is not displayed in the broswer 8
  11. Classes & ID’s • 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 They serve as ways to describe content in our HTML document. these are HTML 102 concepts... 8
  12. 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> • Home • About Us • Contact Us both these examples have nearly the same visual result, but you can do a whole lot more with the ‘starred’ example... 8
  13. Validating Your Work • World Wide Web Consortium (W3C) http://www.w3.org/

    Validator Tool: http://validator.w3.org/ • Smashing Magazine http://www.smashingmagazine.com/ • Chris Coyier/CSS-Tricks http://css-tricks.com/ • Cheatsheets http://j.mp/8szjMJ • Eric’s Twitter Favorites http://twitter.com/EricRasch/favorites Double-checking that you’re on the right track. Awesome Resources good for checking your work 8 good for learning more 8
  14. That’s it? • CSS • SEO (Search Engine Optimization) •

    Frameworks • Databases • Other Languages Nope. That was just the beginning. ‘next steps’ and ways to extend basic HTML 8
  15. Other Languages XML JavaScript (AJAX, jQuery, MooTools, etc.) PHP JSP

    .NET (ASP.NET, VB.NET, etc.) ASP These can piggyback on, and bring a lot of power to, HTML.
  16. 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)
  17. Thank you. Feel free to connect with me. at work

    8 everywhere else 8 http://ericrasch.com/ http://med.uth.tmc.edu/comm/