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.
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
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
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
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
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
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
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
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
<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
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
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
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
ericrasch
masaki12
yusukebe
javiergs
krpk1900
junk0612
mot_techtalk
petamoriken
ysk8hori
satoshi7190
tsoshiro
otakakot
cer
addyosmani
bluesmoon
pauljervisheath
jponch
holman
eitanlees
philnash
tammyeverts
geoffreycrofte
lauravandoore
3n
![Understanding HTML • Heading • Title • Body • [Structured]](https://files.speakerdeck.com/presentations/4f45717ff91a24001f0077b4/slide_1.jpg){kind=link}
