HTMLBasics Usinf HTML Web Authoring

How to make a simple web page using HTML
Introduction to HTML
HTML
For this class, you will have to create a web page using HTML
Joke: (from http://www.w3schools.com/html/html_layout.asp):

Student: How do you spell HTML?
HTML stands for Hyper Text Markup Language

Used to create web pages
Made up of Tags - commands enclosed in < and >, example <HTML>
Opening tag: <HTML> Closing tag: </HTML>
HTML page “skeleton”
<HTML> - opening HTML tag
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
Page Body
</BODY>
</HTML> - closing HTML TAG
Not all tags need a closing tag, but its always safer to include it
An html document should end with the extension “.html” or “.htm”
As I will demonstrate, an html document can be written using notepad; no special
software is needed
HTML Tags
First tag: <HTML>
First tag in document
Tag tells the Internet browser that it is reading an

HTML document
Without it, the browser would think it was viewing a text document
Closed at end of document with </HTML> tag
All content of web page is between <HTML> and </HTML>
Can think of the <HTML> tag as being a container, since it “holds”

the entire content of the web page between the <HTML> and
</HTML> tags
HTML Tags
Next tag: <HEAD>
Think of it as a container for aspects of the page that aren't part of the “meat” of the page
For the purposes of this intro, will look at the <TITLE> tag and
<META name=“description” content=”...”> tag that go within the <HEAD> container;
that is, between the <HEAD> and </HEAD> tags
Closed with </HEAD> tag
<TITLE> Tag
Belongs inside the <HEAD> container; between <HEAD> and </HEAD>
Defines the title of the page that you see at the top of web browser
<META name=“description” content=”Page description“> tag

Belongs inside the <HEAD> container; between <HEAD> and </HEAD>
Not something you see when viewing a web site, but used by search engines
Example: <META name = "description" content = "This is a web page about my trip to the arctic.">
Head examples
HTML is “open”, possible to see the source code of any web page you visit
In Firefox, can get source code by clicking on “View” menu, then selecting “Page Source”
Show HTML source of a couple web pages that many of you visited yesterday
Ignore all the “other (more “advanced”) stuff' and note that:
they all have an <HTML> tag near the top
followed by a <HEAD> tag
followed soon by a <TITLE> tag
and a <META name=“description” content=”...”> tag
then a </HEAD> tag before the <BODY> tag
and eventually have </BODY> and </HTML> tags
ESPN Example
ESPN Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ESPN: The Worldwide Leader In Sports</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="description" CONTENT="ESPN.com provides comprehensive sports coverage.

Complete sports information including NFL, MLB, NBA, College Football, College Basketball scores and news." />
<meta name="keywords" CONTENT="ESPN.com, ESPN, ESPN2, ESPNews, ESPN Classic, ESPNU, Insider,
sports scores, sports news, MLB scores, NFL scores, NBA scores, NHL scores, College Football scores, College Basketball scores,
sports videos, sports information, Fantasy sports, Fantasy games, Fantasy football, Fantasy baseball" />
<meta http-equiv="refresh" content="900" />

<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<style type="text/css">
@import url(http://assets.espn.go.com/insertfiles/css/frontpage_re_1005a.css);
@import url(http://assets.espn.go.com/insertfiles/css/design06/universalLogin.css);
</style>
<script language="Javascript" src="http://assets.espn.go.com/insertfiles/javascript/frontpage21.js" type="text/javascript"></script>
<script language="Javascript" src="http://assets.espn.go.com/insertfiles/javascript/frame07.js" type="text/javascript"></script>
<script src="http://content.dl-rms.com/rms/11107/nodetag.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="http://sports-ak.espn.go.com/espn/rss/news" />
</head><body>
<div id="container">

<script type="text/javascript">
var returnURL = document.location.href;
.................................................... (REST OF BODY)

</div></div></body></html>
Facebook Example
Facebook Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="facebook">
<head>
<title>Facebook | Welcome to Facebook!</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noodp" />
<meta name="description" content="Facebook is a social utility that connects people with friends and others who work, study and
live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and
learn more about the people they meet." />
<script type="text/javascript">var cc=new Image();cc.onload=function(){cc.hit=(typeof(Env)=="undefined");};cc.src="http://static.ak.facebook.com
<link rel="stylesheet" href="http://static.ak.facebook.com/css/apps_menu.css?12:43718" type="text/css"/>
..................................
<link rel="stylesheet" href="http://static.ak.facebook.com/css/intl.css?12:58147" type="text/css"/><!--[if lte IE 6]><style type="text/css" media="s

<!--[if gte IE 7]><style type="text/css" media="screen">/* <![CDATA[ */ @import url(http://static.ak.facebook.com/css/ie7.css?12:62698); /* ]]> */<
<script type="text/javascript" src="http://static.ak.facebook.com/js/base.js?12:63576"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/extended.js?12:62780"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/string.js?12:62769"></script>
...........................................................................
<script type="text/javascript" src="http://static.ak.facebook.com/js/intl.js?12:62026"></script><link rel="search" type="application/opensearchdes

<link rel="shortcut icon" href="http://static.ak.facebook.com/favicon.ico" />
</head>
<body class="welcome">
<div id="book">
<div id="sidebar"><a href="http://www.facebook.com" class="go_home"> </a><div id="sidebar_content"><script type="text/javascript">
function quicklogin() { document.cookie = "test_cookie=1;domain=.facebook.com";}</script>
<div id="squicklogin">
........................
...................................
........................
</body>
</html>
How search Engines use the <META name=“Description” content=”...” tag
From HTML source code of ESPN web site

<meta name="description" CONTENT="ESPN.com provides comprehensive sports coverage.
Complete sports information including NFL, MLB, NBA, College Football, College Basketball scores and news." />
Google search result:
“Blurb” about website on Google comes from META tag with name=”description”
How search Engines use the <META name=“Description” content=”...” tag
From HTML source code of Facebook web site

<meta name="description" content="Facebook is a social utility that connects people with friends and others who work, study and
live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and
learn more about the people they meet." />
Google search result:
“Blurb” about website on Google comes from META tag with name=”description”
The <BODY> Tag
The actual “content” of the website lives within the <BODY> tag container, after the </HEAD>
tag and between the <BODY> and </BODY> tags
All the text, images, and links on the webpage belong within the <BODY> tag
container
HTML page “pageSkeleton.html”
<HTML>
<HEAD>
</HEAD>
<BODY>
Page Body
</BODY>
</HTML>
pageSkeleton.html
“pageSkeleton.html” is a valid html page and has all the necessary tags
Note that the “title” of “pageSkeleton.html” is “Page Title”, and it is displayed at the
top of the browser and at the top of the Tab with the page. This title was defined
between the <TITLE> and </TITLE> tag as discussed earlier
Right now, the only text on the page is “Page Body” since that is the only content between
the <BODY> and </BODY> tags. There are no images or links on the page, and the text
is not formatted in any specific way (so the default formatting is used)
What if the title were not defined?
“pageSkeletonNoTitle.html” is the same as “pageSkeleton.html” except no title is defined;

that is, there is no <TITLE>Page Title</TITLE> in the html document between <HEAD>
and </HEAD>
Display of pageSkeletonNoTitle.html in browser
When pageSkeletonNoTitle.html is displayed in the web browser, all it says is

“Mozilla Firefox” at the top of the browser, nothing about the page being shown,
and the Tab contains the file path of the page rather than the page title
(and it looks quite messy)
Using the <BODY> Tag
The “meat” of the web page, including all text, images, links, etc., are defined inside the <BODY>
container (between the <BODY> and </BODY> tags
First, define parameters/attributes within the <BODY> tag to control the “look” of the page
* TEXT - this will determine the color of your text throughout your page.
* LINK - This will determine the color of your links through-out your page.
* VLINK - This will determine the color of your visited links through-out your page.
* ALINK - This will determine the color of your active links through-out your page.
* BGCOLOR - This will determine the color of your background through-out your
page.
* BACKGROUND - This will determine the background image you load
through-out your page.
NOTE: None of these are required, if you do not set them, the default is
TEXT=black, LINK=blue, VLINK=purple, ALINK=red, and
BGCOLOR=white. Also, when you define these, it is not necessary
to use all of them. If you set a background image then you would not
need to define a background color etc...
Example using BGCOLOR:

<BODY TEXT="red" LINK="black" VLINK="red" ALINK="purple" BGCOLOR="yellow">
Example using BACKGROUND:

<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple" BACKGROUND="image.gif">
pageSkeletonRedTextYellowBg.html
Example of parameters/attributes within the <BODY> tag
pageSkeletonRedTextYellowBg.html is the same as “pageSkeleton.html”,

except parameters added to BODY tag
pageSkeletonRedTextYellowBg.html
<HTML>
<HEAD>
</HEAD>
<BODY TEXT="red" LINK="black" VLINK="red" ALINK="purple" BGColor="yellow">
Page Body
</BODY>
</HTML>
pageSkeleton.html vs. pageSkeletonRedTextYellowBg.html
pageSkeleton.html in browser
pageSkeletonRedTextYellowBg.html in browser
Easy to experiment with different text colors, backgrounds, link colors, etc by
adjusting the parameters within the BODY tag
Adding Content to the Web Page
Need a topic for a web page (unless you want to go the “Seinfeld route” and make it
a web page about nothing)
Possible topics:
Hobby/interest of yours that you want to share with “the world”
Promote a politician or some editorial point of view (for example,

maybe you want to let everyone know why you support Mitt Romney
for President)
Part of some club/organization and a website is a good way to keep

everyone informed about the club's latest news and events
My topic:
Trip to Arctic in April of 2007

Creating the Web Page
Start with “pageSkeleton.html”, add a description (described earlier), and
add the parameters/attributes of the body tag
●Decide that I want

● Text Color: blue
● (Unvisited) link Color: black
● Visited link color: red
● Active link color: purple
● Background Color: yellow
Decide to call the page “arctic.html” and with a title “My Trip To The Arctic”
Written using Notepad, which on every computer with some version of Windows
<HTML>
<HEAD>
<META name = "description" content = "This is a web page about my trip to the arctic.">
<TITLE>My Trip To The Arctic</TITLE>
</HEAD>
<BODY TEXT="blue" LINK="black" VLINK="red" ALINK="purple" BGColor="yellow">
</BODY>
</HTML>
REMEMBER TO SAVE THE DOCUMENT AS A .html FILE (not as a .txt file)

What I want to include
Page “heading” that says “My Trip To The Arctic” where the text is larger than the
text in the rest of the page
Bulleted list of information about me with a bold and underlined heading
Bulleted list of information about my research relating to the trip with a bold heading
Bulleted list of information about the ice camp
Pictures from the Arctic that are currently on my local computer
An image from the web that consists of a map of the arctic
Four paragraph write-up about my experience, where each paragraph is nicely
formatted
Right now, you don't know how to do any of this! (unless you already
have some experience with HTML)
I'll demonstrate adding some of these things in the coming slides, and by the
end of the semester, you should know how to add all these components to a website
Adding the page heading
Want the page heading to say “My Trip to the Arctic”
First I simply add the text “My Trip To the Arctic”, to the .html document after
the <BODY> tag
<HTML>
<HEAD>
</HEAD>
My Trip to the Arctic
</BODY>
</HTML>
arctic.html in browser:
Text is there, but its not the “right size”

Adding the page heading
Want the text “My Trip to the Arctic”, to be relatively large
Solution: Use the formatting tag <H1> before the text, which causes the text to be larger
Instead of simply adding “My Trip to the Arctic” to the .html document after the
<BODY> tag, I add“<H1>My Trip to the Arctic”</H1> to the .html document after
the <BODY> tag
arctic.html with <H1> tag

<HTML>
<HEAD>
</HEAD>
<H1>My Trip to the Arctic</H1>
</BODY>
</HTML>
arctic.html (with <H1> tag) in browser
Formatting Tags
<H1> is an example of a formatting tag
Formatting tags:
Used to format the text for display in the browser,
With formatting tags, you can make the text bold, underlined, italicized, and
add line breaks and new paragraphs (among other things)
Just like many other HTML tags, many (but not all) formatting tags have an open tag
(example: <H1>) and a closing tag (example: </H1>). All the text between the <H1>
and </H1> will be formatted according to the “rules” of the <H1> tag
The rule of the <H1> tag is to make the text a certain (and relatively large) size, so
all text between the <H1> and </H1> tags will be relatively large
Tags <H1>, <H2>, <H3>, <H4>, <H5>, and <H6> all used for text size choice:
<H1> for largest-sized text, <H6> for smallest-sized text

Demonstration of header tags (and <BODY> tag attributes)
HTML document
<HTML>
<HEAD>
<META NAME="Description" Content="Demonstration of heading tags">
<TITLE>Demonstration of <H1> to <H6> heading tags</TITLE>
</HEAD>
<BODY TEXT="yellow" BGCOLOR="black">

<H1>This would be the largest text - H1 tag used</H1>
<H2>This would be the second largest text - H2 tag used</H2>
<H3>This would be the third largest text - H3 tag used </H3>
<H4>This would be the fourth largest text - H4 tag used</H4>
<H5>This would be the fifth largest text - H5 tag used</H5>
<H6>This would be the smallest text - H6 tag used </H6>
This is regular text - no tag used
</BODY>
</HTML>
Demonstration of header tags (and <BODY> tag attributes)
Result in web browser

Adding “About Me” bulleted list with bold heading
Want to add “About Me” heading, formatted so that it is bold and underlined:
Use the <B> tag to make the text bold
Use the <U> tag to make the text underlined
Add to “arctic.html” (right after <H1>My Trip to the Arctic</H1> and before </BODY>):
<B><U>About Me</U></B>
arctic.html in browser:
Adding the bulleted list
Use the <UL> tag to begin a bulleted list – UL stands for unordered list
Use the <LI> tag to begin a new “bulleted item” in the list; LI stands for List Item
No “closing” </LI> tag is needed for each item, but you do need a
closing </UL> tag to “end” the bulleted list
Bulleted list I want to add

● Name is Scott Grauer-Gray
● Originally from Massachusetts (Go Sox!)
● Graduated from UMASS in 2006
● Currently a grad student at the University of Delaware
Want to start with <UL> to begin the unordered list, then add the 4 bulleted “list items”,
putting a <LI> tag in front of each one, finally I use a </UL> tag to end the list
Adding the bulleted list
Added to arctic.html after the <B><U>About Me</U></B> and before </BODY> tag
<UL>
<LI>Name is Scott Grauer-Gray
<LI>Originally from Massachusetts (Go Sox!)
<LI>Graduated from UMASS in 2006
<LI>Currently a grad student at the University of Delaware
</UL>
Display of arctic.html in the browser

Add Two More Bulleted Lists to arctic.html
Now add a second bulleted list with the following heading and information:
Arctic-related research
● Looked at the motion of sea ice

● Another grad student developed an algorithm that takes two images and finds the motion between the two, he
implemented the algorithm in Matlab, and I converted the implementation into java
● Looked at video and pictures of sea ice with the hope of being able to get information about the 3D-structure of
the ice from the 2D pictures and video
Now add a third bulleted list with the following heading and information:
The Ice Camp
● One of the first events of "International Polar Year"

● The International Polar Year is a large scientific programme focused on the Arctic and the Antarctic from
March 2007 to March 2009.
● Actually the fourth polar year; others were in 1882-1883, 1932-1933, and 1957-1958
● Concern about climate change part of the reason for IPY
● I went to get the pictures and video of sea ice, with the hope of eventually analyzing it using stereo or structure
from motion algorithms
● Possibility of eventually using data for thesis, but that's a ways in the future
Third bulleted list shows that it's possible to have a bulleted list within a bulleted list
Current State of web page
What's Missing?
Page has some content, but something is clearly missing in a page about a trip to
a remote location?
Might viewers of the page want to actually SEE the location?
Might the person that went to the location want to show “proof” that
they've actually been there, proof that goes beyond words?
So, what's the logical thing to add?

PICTURES!!!
Want to add the following picture to the page:
Name of the image is northPole.jpg, and it is in the same directory as arctic.html

Adding pictures to the page
Images must be either .gif or .jpg; not all image formats work with HTML in browser
To add an image, use the tag <IMG> with the following parameters/attributes
SRC - This is the SouRCe of the image. This would be the image name or location if not in the same
directory as the HTML page that is calling it.
WIDTH - Use this command to define the width of the image in pixels.
HEIGHT - Use this command to define the height of the image in pixels.
BORDER - Use this command to set a visible border around your image (set it to zero when linking
images if you don't want a visible border).
ALT - The ALT command stands for ALTernate text. Use this command to place a short description on
the image (used for non graphical browsers and backup in case your image does not load).
ALIGN - By adding this tag you will make the text wrap around the image. There are three options (left,
right, and center).
Adding images to a page
Parameters/attributes for the image I want to add
SRC = “northPole.jpg”, since the image is in the same directory

as the HTML page and northPole.jpg is the name of the image
WIDTH = “500”
HEIGHT = “400”
BORDER =”0”
ALT ="Picture of Scott with sign showing he's 1016.4 miles

from North Pole"
ALIGN = not used here; allow default option to be used
Code added to arctic.html to add image to page

<IMG SRC="northPole.jpg" WIDTH="500" HEIGHT="400" BORDER="0"
ALT="Picture of Scott with sign showing he's 1016.4 miles from North Pole">
Placement of image on page depends on where this code is put in arctic.html

Adding images to a page
Want the picture to “stand out” near the top of the page
Decide to place the image right below the “My Trip to the Arctic” heading of the page
arctic.html with image added
<HTML>
<HEAD>
</HEAD>
<IMG SRC="northPole.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of Scott

with sign showing he's 1016.4 miles from North Pole">
...........................
.............................
</BODY></HTML>
arctic.html as viewed in the web browser
What's wrong with it???

arctic.html as viewed in the web browser
“About Me” heading should be on its own line

More Formatting Tags!
HTML does not “recognize” formatting (such as line breaks) in the code, you need to “tell
it” when to end a line and begin a new one
Text will “wrap” by default to fit the computer screen, so no need to worry about
text falling off the screen
For a line break in the text (equivalent to “Enter” or “Return” in a word processor such
as Microsoft Word), simply add the <BR> tag
<BR> tag does not have a closing tag
Add <BR> tag(s) to arctic.html to add the desired line break(s) after the image
...................
<IMG SRC="northPole.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of Scott

with sign showing he's 1016.4 miles from North Pole">
<BR>
<BR>
.....................................
arctic.html as viewed in the web browser –
Now with line breaks!
Adding a couple more images
These pictures added after the bulleted lists and a bold, underlined “Pictures” heading
Code for heading: <B><U>Pictures</U></B>
Need to add a couple line breaks (<BR> tags) between heading and images
Image to add: ridge.jpg
Code to add image:
<IMG SRC="ridge.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of a natural sea ice ridge">
Adding a couple more images
Image to add: seaIce.jpg
Code to add image:
<IMG SRC="seaIce.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of a sea ice 'river'”>

(portion of) arctic.html with pictures
This page is great, but the user isn't going to stay forever
...Maybe there are related sites the user may want to see
...Maybe my site left the user “wanting more” and wanting to see related sites
...Maybe someone's paying me to advertise their website
...Maybe there's a site I like that I want to share with the world
Whatever the reason, I want to add links from my site to other websites (or to
other pages within my website)
Adding links to a website
First, I add a bold links heading: <B>Links</B>
To add a link, use the <A> tag – A in tag stands for anchor
Tag is used for more than “just” making links
However, making links with <A> tag is all we're really going to look at for right now
To create a link, use the <A> tag with the HREF command
Full tag for link is <A HREF=”target”>, where target can be an .html page, an
email address, a link to download a file, or a NAME defined within
the webpage (also using the <A> tag)
All text following the <A HREF=”target”> command will be linked to the
target until the closing </A> tag is used
Add a link to the international polar year website
Address of International Polar Year website is http://www.ipy.org/
Tag is therefore <A HREF=”http://www.ipy.org/”>
Want linked text to say “International Polar Year website”, and I don't want the text
after that to be linked to the site
Code to add link is therefore

<A HREF=”http://www.ipy.org/”>International Polar Year website</A>
Closing </A> tag is very important since it was what “ends” the link; otherwise
the rest of the text on the web page will be linked to the site, which you probably
don't want (and you may very well have seen links that seem “too long”)
arctic.html with link to International Polar Year website
Link color is red: note the <BODY> tag parameters/attributes
Page is a site I've visited before, so the “VLINK” color is used, which is set to be red
Can easily be changed by simply changing the parameters/attributes of the

<BODY> tag
Adding more links
Need to add a line break using <BR> between every line so that links are on different lines
Code added below link to International Polar Year link (and before the </BODY> tag)
<BR>
<A HREF="http://aplis07.iarc.uaf.edu/index.php/Main_Page">APLIS 2007 Beaufort Sea Ice Camp Website</A>
<BR>
<A HREF="http://televisionwithoutpity.com">Addicting site about TV shows</A>
<BR>
<A HREF="http://www.yourhtmlsource.com/">HTMLSource - Has more info about HTML</A>
<BR>
<A HREF="http://en.wikipedia.org/wiki/HTML">Wikipedia page on HTML</A>
Resultant (link portion of) arctic.html page

More That Can be Done
Add a background image as opposed to a background color
Add more content to the page
Did a 4-paragraph write-up about the experience that would fit in well with the page
Add links within the page
What if the user wants to skip right to the pictures?
Actually did all that!

This Introduction Is not all there is to HTML!
There's a lot more to HTML and website creation
If your interested, my best advice is to probably just Google “HTML”

or “HTML tutorials”, you'll get plenty of results
Worth noting that most commercial websites (ESPN, Facebook, etc.) are
not hand-coded using Notepad like you'll do for this class
There are commercial tools such as Dreamweaver and Microsoft

Frontpage as well as free, open-source tools such as SeaMonkey
(formerly Mozilla Composer) for website creation
However, before using these tools, it's important that you understand
the basics of HTML, like learning how to add before using a calculator,
and learning to crawl before you learn how to walk
More Formatting Tags!
Another important tag involving line breaks is the <P> tag, which does have an
accompanying closing </P> tag
<P> tag is used for paragraphs
The <P> paragraph tag puts a blank space above and below the text enclosed
in its tags
ParagraphDemo.html
<BODY TEXT=”white”
BGCOLOR=”purple”>
<P>This is paragraph 1</P>
</BODY>

HTMLBasics Usinf HTML Web Authoring

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTMLBasics Usinf HTML Web Authoring

Uploaded by

Copyright:

Available Formats

How to make a simple web page using HTML

Joke: (from http://www.w3schools.com/html/html_layout.asp):

HTML stands for Hyper Text Markup Language

Tag tells the Internet browser that it is reading an

Closed at end of document with </HTML> tag

All content of web page is between <HTML> and </HTML>

Can think of the <HTML> tag as being a container, since it “holds”

Closed with </HEAD> tag

<META name=“description” content=”Page description“> tag

<meta name="description" CONTENT="ESPN.com provides comprehensive sports coverage.

<meta http-equiv="refresh" content="900" />

<link rel="stylesheet" href="http://static.ak.facebook.com/css/intl.css?12:58147" type="text/css"/><!--[if lte IE 6]><style type="text/css" media="s

<script type="text/javascript" src="http://static.ak.facebook.com/js/intl.js?12:62026"></script><link rel="search" type="application/opensearchdes

From HTML source code of ESPN web site

Google search result:

From HTML source code of Facebook web site

Google search result:

HTML page “pageSkeleton.html”

“pageSkeletonNoTitle.html” is the same as “pageSkeleton.html” except no title is defined;

Display of pageSkeletonNoTitle.html in browser

When pageSkeletonNoTitle.html is displayed in the web browser, all it says is

Example using BGCOLOR:

Example using BACKGROUND:

Example of parameters/attributes within the <BODY> tag

pageSkeletonRedTextYellowBg.html is the same as “pageSkeleton.html”,

Hobby/interest of yours that you want to share with “the world”

Promote a politician or some editorial point of view (for example,

Part of some club/organization and a website is a good way to keep

Trip to Arctic in April of 2007

●Decide that I want

● (Unvisited) link Color: black

● Visited link color: red

● Active link color: purple

● Background Color: yellow

REMEMBER TO SAVE THE DOCUMENT AS A .html FILE (not as a .txt file)

Text is there, but its not the “right size”

arctic.html with <H1> tag

<H1> for largest-sized text, <H6> for smallest-sized text

<BODY TEXT="yellow" BGCOLOR="black">

Result in web browser

Bulleted list I want to add

Display of arctic.html in the browser

● Looked at the motion of sea ice

The Ice Camp

● One of the first events of "International Polar Year"

Might viewers of the page want to actually SEE the location?

So, what's the logical thing to add?

Name of the image is northPole.jpg, and it is in the same directory as arctic.html

SRC = “northPole.jpg”, since the image is in the same directory

ALT ="Picture of Scott with sign showing he's 1016.4 miles

ALIGN = not used here; allow default option to be used

Code added to arctic.html to add image to page

Placement of image on page depends on where this code is put in arctic.html

arctic.html with image added

<IMG SRC="northPole.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of Scott

What's wrong with it???

“About Me” heading should be on its own line

<IMG SRC="northPole.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of Scott

Image to add: ridge.jpg

Code to add image:

Code to add image:

<IMG SRC="seaIce.jpg" WIDTH="500" HEIGHT="400" BORDER="0" ALT="Picture of a sea ice 'river'”>

...Maybe someone's paying me to advertise their website