Creating A Web Page Using HTML, XHTML, and CSS: The Basics: Mary L. Lanigan, PH.D

Creating a Web Page Using HTML, XHTML, and CSS Module 6
Creating a Web
Page Using HTML,
XHTML, and CSS:
The Basics
Mary L. Lanigan, Ph.D.
Copyright © 2010 Third House Inc. 1

Preface
In this module, you will create a web page. The web page will look like a mini-resume.
After completing all the exercises within this module, your page will look something like
the example on the next page.
Please Note: This document is best viewed either

on a computer screen or printed out by a color
printer.
It is also recommended that you print out the

codes for the example web page. The codes are
found on Module 6-3. Click the link immediately
following the link for this job aid.


Exercise 1: Using a Browser
In order to create a web page, you need to be familiar with a browser. There are a number
of browsers available-- the two most common are Microsoft Internet Explorer and
Mozilla Firefox. It is recommended that you use Explorer to complete this module in
order to reduce confusion. Some browsers do not contain all the necessary options to
complete the exercises within this module. Thus, it is critical you use Explorer.
Step 1: Open your browser by clicking the appropriate icon on your

computer.
Step 2: After the browser opens, notice a few things.

A. The Address box.
This box is where you type in the URL of any web page you
are searching for. The box also lists the address of the page you
are presently on.
B. Under File, click Open; click Browse.
Browse
brings up this
box so you
can find the
file you wish
to open.

When you create web pages, sometimes you may elect to open the file by clicking the
browse button. By doing so, you don’t have to be connected to the Internet to view these
files. For now, close your browser and proceed to the next exercise.
Exercise 2: Creating a Data Sheet
Prior to building a web page, you are asked to create a data sheet. The data sheet
information will be used to create your Internet homepage. This step is not required to
create web pages; however, it is needed to complete this module's exercises.
Step 1: Open Word.
Step 2: Create a data sheet that includes your:

⇒ name;
⇒ an overview of work accomplishments;
⇒ work address;
⇒ professional experiences;
⇒ educational background; and,
⇒ additional information you wish people to know about you.
Please Note: This information will be posted on the Internet for all to
see. Only use information you are willing to make public and that is
professional.

Data Sheet Example
Mary L. Lanigan
Dr. Lanigan is a four-time ISPI Award of Excellence winner for her evaluation research (1999), book (2001) and
CD training workshops (evaluation CD in 2005 and performance technology CD in 2007). As an Associate
Professor at Governors State University, she teaches various performance improvement classes and is the recipient
of three Faculty Excellence awards. Dr. Lanigan has presented papers at national and regional conferences
sponsored by the International Society of Performance Improvement and the American Society of Training and
Development. She has written articles for Performance Improvement, Performance Improvement Quarterly, The
Journal of Insurance Trainers and Educators, and the International Journal of Intercultural Relations. Her doctorate
is from Indiana University, specifically, the Instructional Systems Technology program and her Masters degrees
are in Educational Psychology, Communication, and Instructional Systems Technology.
Address:
Department of Communication & Training
College of Arts and Sciences
Governors State University
University Park, Illinois 60466
Professional Experiences:
Professor/Governors State University
Trainer/Publishers Circulation Fulfillment
Trainer/First Midwest Bank
Educational Background:
Ph.D., Instructional Systems Technology, Indiana University
M.S., Instructional Systems Technology, Indiana University
M.S., Educational Psychology, Indiana University
M.S., Communication, Illinois State University
B.A., Speech Communication, University of Illinois, Champaign-Urbana
Important Links Regarding Performance Improvement
To learn more information about earning a degree in instructional design and training (also known as performance
improvement or performance technology), click on the links below.
To obtain specific information such as class syllabi, plan of study examples and more, then go to: Human
Performance and Training
To obtain specific information about admissions and fees, then go to: Governors State University
Perhaps a video on instructional design can be inserted.
Top five things you should know about performance technology:

• The goal of the field is to raise employees' performances to optimal levels.
• To determine if the goal has been met, performance technologist must compare the benchmarks of
optimal performance to what is actually happening on the job.
• After comparing the benchmarks to actual performance, performance technologists determine gaps,
causes, and solutions.
• The solutions implemented will be training and/or non-training interventions.
• All interventions are evaluated and matched back to the benchmarks to see if the solutions enhanced
employees' performances back to optimal levels.
•
If you have questions about the field or the graduate program at Governors State University, contact Dr. Lanigan.

Step 3: Save the data sheet you created.
Step 4: Minimize the window.
Exercise 3: Constructing a Web Page
What are HTML, XHTML, and CSS Coding?

Hypertext Markup Language (HTML) is the coding that aids browsers in reading online
documents. Extensible Hypertext Markup Language (XHTML) is a stricter variation of
HTML, which mandates certain rules for all web designers. For example, in the past
when web designers only used HTML, they were able to write code both in upper and
lower case letters. Now with XHTML that is no longer the case. Web designers must
write code all in lower case. CSS are style sheets that describe the web page colors,
fonts, and more. For this module, we will be predominantly using XHTML and CSS
coding.
To see what web source code looks like, go to any web page on the Internet. In the
Internet Explorer browser: click View; click Source. For the debrief below, use the codes
from my web page example that I asked you to print out on page 2 of this document.
The top code on a source page

typically indicates the XHTML
version. Notice that the top code
also indicates that this web page
is in compliant with
www.w3.org, which is a
consortium whose goal is to
create consistency for all web
designers.
Next, the head section includes

the title and styles.
The CSS styles listed include the

margin size, body fonts,
background color, and more.
Scroll down the source code

page until you see these codes:
</style>
</head>
<body>

The closed style and head

tags </style> and </head>
are telling the browser that
the style section and
heading section are now
closed.
The open body tag <body>

tells the browser that the
body, which contains the
written content of the web
site, is now starting.
The words written in black

text are the actual words
that appear on the web
page. The words written in
blue and red are the
XHTML and HTML codes.
Things You Need Prior to Creating Your Web Page

You are going to create a web page using HTML, XHTML, and CSS codes. Before
beginning this exercise you need to complete the following steps.
1. You are going to create your web page using Notepad ++, which is NOT the
Notepad that is under the Accessory folder on your computer. Instead it is
advanced software that indicates the code in the red and blue colors. In regular
Notepad, all contents and coding are in black; this makes coding more difficult.
To download Notepad++, go to: http://sourceforge.net/projects/notepad-plus/files/

For more information about the company that produces Notepad++, go to:
http://notepad-plus.sourceforge.net/uk/site.htm
2. You will also need a picture of yourself that has been saved as a .jpg image.
3. Create a folder on your hard drive and call it htmlexercise and put your picture in
this folder. You will also be saving your code and anything else you put on your
web site in this folder.
Once you have completed the above three steps you are ready to begin coding.

Writing Code
Remember, the end result of this exercise is to create a web page that looks similar to the
example on the Preface pages of this module. The only difference is you will be
substituting your information and images for mine.
Step 1: Open Notepad++.

You should see a blank screen.
Step 2: Type the following information into your Notepad document.

Type it exactly as it appears below. You can also follow along from the
coding source page you printed out earlier.
The above information is the Document Type Definition, which indicates

to the browser the type of document it is; the XHTML version; and, the
language the designer is using. In this case, the language = English (en).
Step 3: Next, you are going to type the head information. The heading contains
coding that does NOT appear on the web page. Similar to the Document
Type Definition section, it communicates information to the browser. In
the example below, it is communicating:
• the content type; and,
• the title of the web page.
Go ahead and type the code exactly as you see it, including the meta and
content tags and information.

The title is very important because the browser uses this information when
users search for web sites. For example, if someone did a Google search
on Mary’s Homepage, then this page would be on the top of the search
results. As such, you may want to title your page with your first and last
name.
Note: Notice how the title has an open title tag and a closed title tag.
Open tag
Closed tag
Almost all XHTML coding has open and closed tags such as this. If you
forget to open or close a tag, then errors will occur in your web page.
Notice: We have an open head tag but we have not closed

it yet because we are still working in the heading section.

Here are some examples of open and closed tags.
Tags Purpose
<head> </head> To create and end a heading.
<title> </title> To indicate a page title beginning and

ending.
<body> </body > To indicate the body of the document

has begun and then to indicate it is ending.
<h1> </h1> This indicates that you want a group of text

to be written in the first heading level. This
is the largest heading possible.
<h2> </h2> This indicates that you want a group of text

to be written in the second heading level.
 To begin and end a paragraph.
<a href= “filename”> </a> This code indicates a link to another file.
<ol> <li> </ li > </ol > Creates an ordered list.
<ul> < li > </ li > </ul> Creates an unordered list.

Step 4: Following the title you want to complete the heading section by putting in
all these CSS codes. Type the codes in as illustrated and then I’ll explain
each.


NOTE: You have just embedded your styles into your web document. Style sheets can
be internal such as the one you just created or external. External style sheets reside in
their own files (that end with .css). If you were using an external style sheet, you would
not put in all those style codes into your web page. Instead you would create a link to the
external style sheet.
For example:
<link rel="stylesheet" href="../generalLayout.css" type="text/css" />

Let’s review the internal style codes that you entered into your web page.
Notice that we started the section with: <style type=”text/css”>. This code tells the
browser that from the open style tag to the closed style tag, we are communicating style
codes.
Whenever you see /* and */ between text that is a statement or note to the web designer.
In other words, if you want to write a reminder to yourself, but you don’t want the
browser to read it, then you can type in words as long as you bookend the wording with
/* and */.
For example: /* Global Styles Defined */
This is just a note to the web editor that the styles are being defined below.
Whenever you indicate a style, you begin the code with a { and end it with a }.
For example: *{
padding:0;
margin: 2;
}
This style is communicating to the browser that there is no padding property around the
four sides of the web page; hence, padding:0. But we are giving margin space or white
space around the border at a 2.
Note: A web page consists of a larger box called a margin. Inside that box is an inner box
called a border. Inside the border is a smaller box called the padding.

Our next style code is defining the body of the web page.
For example:
body {
font-family: Arial, Helvetica, sans-serif; /*Note: this line tells the browser the order to
search for fonts*/
font-size: 1em;
line-height: 1.25em;
color: black;
background-color: #ccccff;
height: 100%;
}
Here we are telling the browser to look for the Arial font first to display the body text. If
the browser can’t find Arial, then it will look for Helvetica next and any sans-serif font
after that. Next we are indicating the default font-size; line-height, and text color.
Subsequently, we are indicating the background color using a hex code such as #ccccff,
which is a type of bluish-gray color.
NOTE about COLOR: Most colors use a number sequence in order to communicate to
the browser what the colors are. There are only 16 predefined colors were you can write
out the color name. Those colors are:
• Aqua
• Black
• Blue
• Fuchsia
• Gray
• Green
• Lime
• Maroon
• Navy
• Olive
• Purple
• Red
• Silver
• Teal
• White
• Yellow
If you are not using these colors, then you can go to the web site below to locate the hex
color codes for all other possible colors.
http://html-color-codes.com/

In the next group of style codes, we are defining our links.
The a:link indicates an active link. As you can see, we are telling the browser we want
all active links in maroon color and we want them bolded.
The a:visited indicates a visited link. After a user clicks on the link, the color will
change from maroon to purple.
The a:hover indicates the color when a user hovers over a link but doesn’t click the link.
In this case the link turns yellow and the background color around the link turns a tan
color.
Here is what the links look like on the web page.
The first link

shows what a
hover link looks
like.
The second link

shows a visited
link.
The third link

shows a link that
has not been
clicked.

Notice on all the styles we discussed so far that none of them begin with periods. In other
words, body and a:link are not preceded by periods. These styles are elements common to
all browsers. There are times when you may wish to create your own made-up elements.
To do so, you want to place a period in front of your made-up element.
For example: .style1; .style2; .style3; and, .style4 are all made-up elements. What this
means is when I place a style1 in my body code (which you will see when we get to the
body), it tells the browser to override the default and make my font 48 and make it bold.
Technically, since the font-family indicated in style1 is the same as the default, you don’t
really have to list that in the code. However, if you wanted style1 to use Times New
Roman, then you could have written the font-family as Times New Roman.
.style1 {
font-size: 48px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style2 {
font-size: 16px;
}
.style3 {
font-size: 14px;
}
.style4{
font-size: 14px;
text-align: center;
}
As you can see, style 2 has a reduced font size and style 3’s font is further reduced.
Notice in style4, not only do we want the font-size 14, but we are also commanding the
browser to center the text.

To see how these styles work, let’s review the top portion of my web page.
Notice in line 135, I

use a style3 code.
Thus, I want the text
copy to appear at a
font size of 14 pixels.
But in line 142, I tell

the browser to display
that information as a
style4. Here I not only
want the text at 14
pixels but I want the
text centered.

The next grouping of style codes are telling the browser how images should appear in
relation to the text.
* Set the generic styles for display of images through the use of dependent classes */
img.leftAlign {
background-color: white;
border: solid 15px #006699;
float: left; /* Textual content will float to the right of the image. */
padding: 10px;
margin: 10px 25px 10px 5px;
}
img.centerAlign {
border: solid 1px #b09c9d;
text-align: center; /* Image will be centered. Text above and below image. */
padding: 10px;
}
Let’s look at the first example:

img.leftAlign {
border: solid 15px #006699;
float: left; /* Textual content will float to the right of the image. */
padding: 10px;
}
Here we are telling the browser to align the image left of the text. Thus, the text will
appear to the right of the image. We are also indicating that we want a border around the
image. We are indicating that the border be solid, 15 pixels, and that the color is
#006699, which is a bluish color.
The image will float to the left of the text and have a padding of 10 pixels and a margin
of 10, 25, 10, and 5 around, which is, top-right-bottom-left.
The second example is similar to the first, but the image is centered. Notice the border
and border color are also different.
If you return to the previous page, you’ll see the image is to the left of the text. Here is
how the body code incorporates the style.
Line 134 shows the

image code with
the leftAlign code
built-in to tell the
browser to align
the Mary image to
the left.

The last style codes we created are illustrated below.
h1 {
color: navy;
text-align: center;
}
h2 {
color: navy;
text-align: center;
}
</style>
</head>
The h1 and h2 are pre-defined elements. There are six heading elements. Similar to the
other codes, here I have created specific features for each heading. For example, in
heading one I tell the browser to list h1 text in navy and to align the text to the center. By
default, the h1 heading will appear as 24 point font and h2 will be 18 point. The h2
heading is also coded to appear as navy and centered.
Notice after I get done coding all the styles, I close the style section with a closed style
tag, that is, </style>. This tells the browser I am done listing my styles.
Next, I close the head section with a closed head tag. This tells the browser I am done
with the head section.
Step 5: Begin Creating the Body.

You are now ready to create the body for your homepage. First, you need
to create an open body tag. Type the open body tag as indicated below.
<body>
Next we will throw in some break elements. A break element is the

equivalent of pressing the Enter key on your computer. It creates a hard
return.
The break element is an empty element. It has no contents and it contains

both the open and closed tags all in one. Thus, the break element is written
like this: (that is ).

<body>
 
<h1>Mary L. Lanigan, Ph.D.</h1>

 
Notice I added an open and closed p element, which is a block-level

element. The six heading elements mentioned earlier are also block-level
elements. Most in-line elements such as breaks, images, links, etc. need to
be sandwiched between block-level elements, which you will see as we
continue adding code to the body of our web page.
After adding three break elements sandwiched between open and closed p
elements, next you will create your first header. Type the h1 code just as it
appears above. After the h1 code, type in your name and then close the
h1 tag as illustrated above. Afterwards, add three more break commands
along with the p elements as illustrated above.
Note: The browser doesn’t recognize hard returns after codes. As such,
you could place the break elements immediately following the h1 closed
tag and still get the same result. However, it is recommended to create
space to help you visually see what you created. Otherwise, you can get
lost in the codes.
Before viewing our work, let’s add an image and some text. To make this
process a little less time consuming, you are going to enter the appropriate
codes and then copy and paste the text from your Data Sheet completed in
Exercise 2. You are also going to use the image of yourself that you saved
in the htmlexercise folder.
Next type the image source code as illustrated on line 134. However,
instead of typing me.jpg use the name of your image. So if you saved your
picture as: mypic.jpg, then type that name between the quotes.
Notice in the image source code line, you have to indicate an alt. The alt is
the text name of your image. This text appears when the user hovers over

the image and it is used for the disabled. For my image, I indicated the alt
to equal “Mary.” Following the alt are the width and height of the image.
I’m indicating my picture size to be 200 by 100 pixels. You can adjust
these sizes to see how the picture varies when you change the height and
width. After playing with the image height and width, next you will begin
your first line of text. Type the following code:

Notice: When indicating the style within the body of the web page code,
you do NOT put the period in front of the style number. Simply type the
style number as illustrated above.
Do you remember from our coding style sheets what we are telling the
browser to do when we indicate style3?
The <p part of the code acknowledges the beginning of a new paragraph
and the class=“style3” indicates that we are using the style3, which is font
size 14. After the greater sign, copy and paste the information you typed
on your data sheet regarding your career accomplishments.
After pasting in your career accomplishments, on the next line type a

closed paragraph tag, that is, .
On the next line, add three break elements sandwiched between an open
and closed p element.
Step 6: Saving and Viewing Your Work.

At this point, you are probably wondering what your web page looks
like. Before viewing the document in the browser, you need to save your
work.
In Notepad++, click File; click Save As.

Make sure you save the page in your htmlexercise folder.

When the Save As box appears, give your page a file name. Notepad++ automatically
saves your document as .html. As such, you can either click save, or if you want your
document to be saved as an .htm file, then you need to add the file extension in the file
name. For example: template.htm.
Note: Both .html and .htm are web document file extensions. Some web designers prefer
to use the .htm file extension because it is one less letter to type in the URL. It is up to
you which extension you want to use.
After you have saved the document, you are ready to view your work. In Notepad++, go
to the top menu and click Run.
Afterwards, click Launch in IE.
Next, Internet Explorer opens and your web page

appears in the browser window.

Step 7: Adding Section Titles.

Let’s create four distinct sections with the titles: Address; Professional
Experience; Educational Background; and, Important Links
Regarding Performance Improvement. We will bold these titles by
using the strong open and closed tags. You will see in the h2 line tags that
I added and before and after each title to bold the
titles.
Side Note: The code to italicize text is:
 The text goes here and you close the tag. 
Let’s end each section with three break elements sandwiched between the
open and closed p elements. We are also going to copy and paste in the
data from the data sheets we created in Exercise 1. Follow the headings
and styles codes used in the illustration on the next page.
Look at the following illustration. Type in the code

exactly as you see it in red and blue; but insert your
information into the content area (that is, the text
written in black).
REMEMBER: Make sure you put in all quotation

marks, greater than and less than signs, etc. Otherwise,
your code will get messed up.


Step 8: Save and View Your Work.

After entering the appropriate codes above and copying and pasting your
data into the content text, next view your work.
In Notepad++, click the disk icon at the top of the page to save.
Next, click Run; click Launch in IE.
If you did your code correctly, then the middle of your web page should
look something like this image.

If your image doesn’t look like this, recheck your coding to make sure you wrote all the
text correctly. If you did, then the problem might be that you launched the web page in a
different browser than Microsoft Internet Explorer. All browsers have unique features
that interpret code differently; and as a result, web pages don’t always appear the same in
different browsers even though the code is exactly the same. Re-run your work and make
sure you clicked to launch in IE.
Step 9: Adding Links.

After viewing your web page, let’s return to the Important Links
Regarding Performance Improvement section. We are now going to add
links to connect to external web pages:
One link will go to: http://www.hpandt.com
The second link will go to: http://www.govst.edu
The code to create a link is:

<a href="http://theURL">The text to describe the link</a>
Thus, you have the open <a href= " " > and the closed </a>.
Let’s see how this code looks in Notepad++.

Notice how the links are written above. We first begin the paragraph with
our paragraph tag and style codes. Next, we write some text that will go
before the link. We then create the link, followed by the text which will be
activated, and then we close the link tag with </a>. Thus, in the above
examples, the words, Human Performance and Training and Governors
State University are the linked text. The image below shows how the code
appears on the web site.

Step 10: Embedding a YouTube video.

The links we created above moved the user from your web page to another
external web page. This time we want the user to remain on our site as
well as bring a YouTube video into our web page. To complete this task,
go to: http://www.youtube.com and find yourself a video on instructional
design. After you locate a video, then follow the instructions below.
Click the Embed button.
You will see the code that you

will copy and paste into your
Notepad++.
You will also see the options to

pick your border colors and
screen size.
Make sure you select your

border colors and screen size
before copying the embedded
code because the code will be
different depending on the
options you select.
Once you copy the code, paste

it into Notepad++.

Your Notepad++ code will look something like the bolded text below.
Before the text, add some wording such as: To view a YouTube video on
instructional design and training, click on the video presentation below.
Notice how the wording is placed into a paragraph tag and closed off with
a closed paragraph tag. Next, I added two break elements. After the
embedded YouTube coding, I placed four break elements.
To view a YouTube video on instructional design and training, click on the video
presentation below.
 
<object width="500" height="405"><param name="movie"

value="http://www.youtube.com/v/jiLLz1SaxGc&hl=en_US&fs=1?color1=0x006699&amp
;color2=0x54abd6&border=1"></param><param name="allowFullScreen"
value="true"></param><param name="allowscriptaccess" value="always"></param><embed
src="http://www.youtube.com/v/jiLLz1SaxGc&hl=en_US&fs=1?color1=0x006699&c
olor2=0x54abd6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="500" height="405"></embed></object>
 
 
Let’s save the code in Notepad++ and launch it to see how it looks.
NOTE: After launching the page in Internet Explorer, make sure you click
the active content bar. Click the yellow box.
Next, click Allow Blocked Content.
If you don’t allow blocked content, your video will not show up.

Your web page should look something like the image below.

Step 11: Creating Lists.

Another coding feature you may wish to implement into your web page is
ordered and unordered lists. An ordered list uses numbers while an
unordered list uses bullet points.
In my web page example, I created an ordered list as illustrated

below.
You will do the same. To do so, we will use the <ol> open command, followed by <li>
open and closed </li> commands for each listed item, and then we will close the list with
a </ol>. Thus, first type your first paragraph codes introducing the list. Then on the next
line, type your <ol>. On the next line type <li class=“style3”>. This command tells the
browser we are entering a listed item but want the font to appear as 14 (as indicated by
style3). Then close the first listed item with a </li> tag. Follow the same process for the
remaining listed items. After listing each, close the ordered list with a closed tag.
Save and view your web page.

Step 12: Creating Anchors.

Anchor elements allow users to move from one part of the web page to
another. An anchor is a type of internal link.
On my web page, I created two anchors.

If you have questions about the field or the graduate program at Governors State
University, contact <a href="mailto:[email protected]">Dr. Lanigan</a>. 
 
<a href="#top">Back to Top</a>
</body>
</html>
Let’s begin with the second anchor, that is, the Back to Top link. Most (not
all) browsers recognize the code “#top” as an indication to send the user
back to the top of the page. As such, you can simply type the code as
illustrated.
Thus, when the users click the words, Back to Top, the link will send them
to the top of the page.
Unlike the Back to Top anchor, most anchors need an id to link to. For
example, on the top of my page, I created an anchor link between the
words performance improvement classes as illustrated below.
Dr. Lanigan is a four-time ISPI Award of Excellence winner for

her evaluation research (1999), book (2001) and CD training workshops
(evaluation CD in 2005 and performance technology CD in 2007). As an
Associate Professor at Governors State University, she teaches various <a href
="#anchor1">performance improvement classes </a>and is the recipient of three
Faculty Excellence awards. Dr. Lanigan has presented papers at national and
regional conferences sponsored by the International Society of Performance
Improvement and the American Society of Training and
Development. She has written articles for Performance Improvement,
Performance Improvement Quarterly, The Journal of Insurance Trainers and
Educators, and the International Journal of Intercultural Relations. Her doctorate is
from Indiana University, specifically, the <a
href="http://site.educ.indiana.edu/Default.aspx?alias=site.educ.indiana.edu/ist">In
structional Systems Technology </a>program and her Masters degrees are in
Educational Psychology, Communication,
and Instructional Systems Technology.


Next, I created an id to tell this anchor were to go when the user activates
the link. In this example, I placed the id at the bottom of my web page.

If you have questions about the field or the
graduate program at Governors State University, contact <a
href="mailto:[email protected]">Dr. Lanigan</a>. 
 
</body>
</html>
Thus, when the user activates the above link, the browser will send them
down to the bottom of the web page.
To practice the anchor link, insert the anchor into the top portion of you
text similar to the way I did it. Then add an anchor id to the bottom of
your page. Follow the coding just as I illustrated in the above two
examples.
Afterwards, save and view your web page. Click on the links to make sure
they work.
Step 13: Mailto Link.

You may have noticed at the end of my web page, I write the following.
The Dr. Lanigan words are linked with a mailto code. The mail to code is:
<a href="mailto:[email protected]">Dr. Lanigan</a>.
Thus, you use the <a href = code and in between the quotation marks, you
type in mailto: and an e-mail address. Between the greater and less than
signs, you type text that describes whose e-mail address it is. Close the tag
with </a>.
(Please Note: This tag does not work in all browsers. It does work in
Microsoft Internet Explorer, typically opening up Outlook.)
At this point, my web page is complete. Assess your own web page to
make sure all the codes are in order.

ADDENDUM
Adding Audio
You may wish to add sound to your web page. For example, you may
want music, or your voice, etc. After you have saved an audio file, then
decide where you wish to place the audio link on your web page.
To link a sound file, type the following code into your web page.
<a href="name of audio file.extension"></a>
For example: Let’s say I have an audio file called, introduction.wav.
The link would be:

<a href="introduction.wav"></a>
And if I wanted to link the audio to the words, “Click here to listen to the
audio,” then the link would be as follows.
 <a href="introduction.wav">Click here</a> to

listen to the audio.
Notice I placed a style code within my p element in order to communicate

to the browser how to read my text, that is, “Click here to listen to the
audio.” The text will appear as a style3 or a 14 point font.
If you wish to have a picture act as an icon to activate your sound, then
your code would look something like this.
<a href ="name of audio file.extension"><img src="picture.jpg"></a>

Creating A Web Page Using HTML, XHTML, and CSS: The Basics: Mary L. Lanigan, PH.D

Uploaded by

Creating A Web Page Using HTML, XHTML, and CSS: The Basics: Mary L. Lanigan, PH.D

Uploaded by

Creating a Web Page Using HTML, XHTML, and CSS Module 6

Mary L. Lanigan, Ph.D.

Copyright © 2010 Third House Inc. 1

Please Note: This document is best viewed either

It is also recommended that you print out the

Copyright © 2010 Third House Inc. 2

Copyright © 2010 Third House Inc. 3

Exercise 1: Using a Browser

Step 1: Open your browser by clicking the appropriate icon on your

Step 2: After the browser opens, notice a few things.

B. Under File, click Open; click Browse.

Copyright © 2010 Third House Inc. 4

Exercise 2: Creating a Data Sheet

Step 1: Open Word.

Step 2: Create a data sheet that includes your:

⇒ an overview of work accomplishments;

⇒ educational background; and,

⇒ additional information you wish people to know about you.

Copyright © 2010 Third House Inc. 5

Data Sheet Example

Important Links Regarding Performance Improvement

Perhaps a video on instructional design can be inserted.

Top five things you should know about performance technology:

Copyright © 2010 Third House Inc. 6

Step 3: Save the data sheet you created.

Step 4: Minimize the window.

Exercise 3: Constructing a Web Page

What are HTML, XHTML, and CSS Coding?

The top code on a source page

Next, the head section includes

The CSS styles listed include the

Scroll down the source code

Copyright © 2010 Third House Inc. 7

The closed style and head

The open body tag <body>

The words written in black

Things You Need Prior to Creating Your Web Page

To download Notepad++, go to: http://sourceforge.net/projects/notepad-plus/files/

Copyright © 2010 Third House Inc. 8

Step 1: Open Notepad++.

Step 2: Type the following information into your Notepad document.

The above information is the Document Type Definition, which indicates

Copyright © 2010 Third House Inc. 9

Notice: We have an open head tag but we have not closed

Copyright © 2010 Third House Inc. 10

Here are some examples of open and closed tags.

<title> </title> To indicate a page title beginning and

<body> </body > To indicate the body of the document

<h1> </h1> This indicates that you want a group of text

<h2> </h2> This indicates that you want a group of text

<p> </p> To begin and end a paragraph.

<ol> <li> </ li > </ol > Creates an ordered list.

<ul> < li > </ li > </ul> Creates an unordered list.

Copyright © 2010 Third House Inc. 11

Copyright © 2010 Third House Inc. 12

Copyright © 2010 Third House Inc. 13

Copyright © 2010 Third House Inc. 14

For example: /* Global Styles Defined */

Copyright © 2010 Third House Inc. 15

Copyright © 2010 Third House Inc. 16

In the next group of style codes, we are defining our links.

Here is what the links look like on the web page.

The first link

The second link

The third link

Copyright © 2010 Third House Inc. 17

Copyright © 2010 Third House Inc. 18

Notice in line 135, I

But in line 142, I tell

Copyright © 2010 Third House Inc. 19

Let’s look at the first example:

Line 134 shows the

Copyright © 2010 Third House Inc. 20

The last style codes we created are illustrated below.

Step 5: Begin Creating the Body.

Next we will throw in some break elements. A break element is the