HTML 101

HTML 101

8
It’s not rocket scie
nce.
A very basic intro to
understanding HTML code

Understanding HTML
Simpliﬁed. There’s way more to HTML than this.

• Heading
• Title
• Body
• [Structured] Content

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

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...

Step by Step: 2
n’...
any tag you ‘ope ...must be ‘close
d’

8
{
8
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 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...

Step by Step: 3

{
<h1>HTML can be easy!</h1>
 This is what content looks like in HTML (when you are viewing it
in a browser). 

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...

Step by Step: 4

{
 This is what content looks like in HTML (when you are
viewing it in a browser). 

8
So Eric says... 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

So Eric says...

Step by Step: 5

{
 This is what content looks like in HTML 
(when you are viewing it in a browser). 

{
HTML can be easy! bold text

8
8 italicized text
So Eric says...

Step by Step: 6

{
<h1 align=”center”>HTML can be easy!</h1>
So Eric says... 

centered text

{ 8
HTML can be easy!

So Eric says...
8 centered text

Step by Step: 7

{
<img src=”eric-the-great-01.jpg” alt=”Eric as an
icon.” width=”125” height=”125” /> So Eric says... 

{
HTML can be easy!

So Eric says...
8
Image displayed

Step by Step: 8
<html>
<head>
<title>HTML 101: Step-by-Step</title>

{
</head>
<body>
<img src=”eric-the-great-01.jpg” alt=”Eric as an icon.”
width=”125” height=”125” />So Eric says... 
</body>
</html> 8 anything outside t
is not displayed he <body> tags
in the broswer

{
HTML can be easy!

So Eric says...

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

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

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

Beautiful Code
Thanks, Chris Coyier: http://bit.ly/ciimDi

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

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

Thank you.
Feel free to connect with me.
http://ericrasch.com/ http://med.uth.tmc.edu/comm/

at work 8
8 everywhere else

HTML 101

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML 101

Similar to HTML 101 (20)

Recently uploaded

Recently uploaded (20)

HTML 101