Module 4: Creating Web Pages
Overview
In this module, we will explore how to create Web pages and link them together into a coherent Web site.
Specific topics will include local Web-page development using Hypertext Markup Language (HTML) and an
introduction to Cascading Style Sheets (CSS). We will discuss the relationship between URLs and hyperlinks,
which allow you to go from one Web page to another by linking, and the use of relative versus absolute
hyperlinks.
We will show you how to create tables and add multimedia, including graphics, audio, video, and animation.
We will conclude the module by explaining the changes in HTML with the introduction of XHTML. We will also
introduce you to Web-related advanced technologies and techniques you can learn in other courses offered at
UMUC.
In module 5, we will show you how to make the HTML pages you created available on the Web by setting up
your Web environment. This will include using UMUC's server to transfer files with FTP and setting file
permissions for the public to view your pages on the World Wide Web.
Report broken links or any other problems on this page.
Copyright © by University of Maryland University College .
Objectives
After completing this module, you should be able to:
plan a coherent Web site
create Web pages using Hypertext Markup Language (HTML)
link multiple Web pages using relative and absolute hyperlinks
format Web pages with tables
insert images and multimedia files using HTML
enhance your site by adding Cascading Style Sheet (CSS) features
apply the changes needed to make your HTML pages XHTML-compliant
Report broken links or any other problems on this page.
Copyright © by University of Maryland University College .
Commentary
Topics
1.
2.
3.
4.
5.
6.
Planning Your Web Site
Creating a Web Page
Web Multimedia
Cascading Style Sheets
XHTML
Advanced Techniques and Technologies: What's Ahead
Module 4: Creating Web Pages
Planning Your Web Site
Types of Web Sites
You must develop a topic for your Web site. Although many different types of sites exist, we could logically
break them down into two categories:
informational sites
e-commerce sites
Informational sites provide content with the purpose of informing rather than selling. These could include
personal Web pages (also called vanity sites), news sites, search engine portal sites, database sites, or even
entertainment sites. E-commerce sites, however, are trying to get you to buy something. Examples of ecommerce sites would include Amazon.com, E-bay, or even general product sites that appear to be
informational but are trying to get you to buy their specific product.
Typically, a Web site has a main page (index.html) that has links to other subsidiary pages within the site.
Each page should have some logical connection to the main page. If you were developing a professional site,
you would not want to include a photo album page of your sister's new baby. If you were developing a site titled
All About Me, you might have internal links to family information, as well as your own professional information,
educational information, and so forth. Planning any project (whether a written paper or a Web project) takes
brainstorming and editing, and it almost always requires revising.
Determine Your Purpose
The first step should be to clarify your purpose in building a Web site. What do you have to offer? Why
do you want a Web site? What are your goals for publishing your information on the Web?
Determining your purpose will help you to determine the look of your site. For example, a professional
site may have a more formal look than a family site, and a commercial product site may have more glitz
than a biography site.
Determine Your Audience
Next, you should determine who your audience is. Are you writing for a group of board members,
kindergarten students, engineers, homemakers, information technology professionals? Knowing the
audience will help you to determine the content you must include and the content that would be
unnecessary.
Does your audience have high-speed Internet connections or are they still using dial-up?
Organize and Name Your Files Carefully
As you begin writing your HTML files, do not include spaces in your file names. Although Microsoft
Windows does allow us to use spaces when naming files, it is not a good practice for online documents.
Some browsers may not understand the spaces and others will insert %20 every time a space occurs.
Module 4: Creating Web Pages
Name your files intuitively. Naming your files "file1.html," "file2.html" or "pic2.gif" will cause confusion
as your site grows. Give them clearly understandable names such as "menu.html" or "AliciaOnCouch.gif"
Keep your naming structure consistent. Normally it is good advice to avoid capitalization when naming
your files, but the trick is to be consistent. If you name your picture "AliciaOnCouch.gif," be sure to keep
the same structure of capitalization to avoid errors in linking your files.
Organize your files into folders (directories) when necessary. It is a good practice to keep all of your
images together in a "graphics" or "images" or "pics" folder so they aren't scattered around with your
other files. Similarly, keep multiple pages of the same category in one folder. For example, because I
have syllabi written for numerous courses, I may keep all syllabi in a folder called syllabi and name each
course syllabus by its course name, such as CMST385. I know when I go into the syllabi folder, I will
have all of my syllabi there.
Sketch Your Design on Paper
Draw out what you plan to create online. This will help you to visualize which pages must be linked to
each other and which pages can be considered additional information from an inside link.
By writing the topic of each page in a square on your flowchart or sketch, you can also see how the
pages relate to each other. Do you have a coherent site or a collection of mismatched pages?
A Web page is usually not like a book. Even a site that uses a table-of-contents format allows the users
to choose which link they wish to go to, in any order. Web sites are nonhierarchical. Web designers
must decide which information should go on the first (or "home") page and which information should go
on other pages. The user will then click on these links to see the other pages. Most users will not scroll
down a page, so you want to make sure that they see the important information within the browser
window. Navigation should be easy for the user, and pages should allow the user to go back to the home
page easily.
Before moving on, review the PowerPoint presentation Designing Your Site.
Flowcharting Multimedia
A flowchart is a pictorial image of the steps of a process. Although flowcharting is not a requirement for
creating a Web site, it is a very helpful tool, especially for large Web sites. A number of flowcharting programs
are available, making it quite easy to draw a flowchart. Two that you can download from the Internet for free,
full-program trials are SmartDraw and RFFlow. Of course, you can also use the diagramming feature in Word or
PowerPoint.
A Web site must be planned, and flowcharts are visual representations of the flow of activity within your site.
A map or flowchart of your site can help you decide how people will see and access the material. Keep in mind
that Web sites are not linear. Users must be able to start at the home page and then move to any other page
they wish. It is rare that the Web designer will completely direct a user's activity. Within a site, the designer
may decide to enable a user to go from one page directly to another without having another choice, but that
user should always be given the choice of getting back to the home page via a link to home.
An example of a directed page-to-page site format is the process of having a user complete a form. The
submit button will automatically bring the user to a page that reads, "Thank you; your application has been
submitted." To get a feel for the multimedia, nonlinear aspect of Web sites, go to a few sites and test the links.
Module 4: Creating Web Pages
Can you choose whichever link you wish? Can you get back to the home page easily? Can you choose not to go
to certain pages?
Your flowchart is a site map of the Web site. It should show not only the pages, but also the flow of direction.
If I can go from the home page to another page and then go back to the home page via a link, that directional
arrow should be shown as double-sided.
If I can go from one page to another but cannot link back to the sending page, that arrow should be shown as
single-sided.
If the link that I direct users to is internal (meaning a page that I created with my online directory), then the
arrow should reflect this by color or type. I may, for example, show all internal arrows as dashed.
External sites are those that I direct the user to that I do not own. An example of this is a link to
www.yahoo.com. I would show these arrows differently than the internal arrows with a one-directional flow and
in a different color.
Remember to add a legend to your flowchart that explains your choice of arrows and which arrows are internal
and which are external.
Some General Rules of Flowcharting
Chart or outline on paper before using a program.
Do not repeat a destination on a chart.
Chart frames as you would any other Web page. (You are not required to use frames; this is for
advanced designers.)
Do not chart browser functions (e.g., Back or Next).
Do not chart keyboard functions (e.g., Esc or Enter).
Do not chart external links (show direction to it and its name, but do not chart those pages).
Try to fit the flowcharts on as few pages as possible.
Local Web Page Development
When you create your Web pages, you must do so on your local computer and then upload the pages to a
remote computer that contains the Web server. Keeping the pages on your computer allows you to narrow
Module 4: Creating Web Pages
down the cause if your Web page does not display properly and to fix errors. You can check your work by
looking at your files locally on your browser (by opening your browser, clicking on File, then Open, and then
selecting the HTML file). It also gives you a chance to double-check all information before it goes live to the
entire world.
Create a folder (directory) on your hard drive that will hold all of your Web project pages, image files, audio
clips, and so on. Maintain the exact Web structure on your hard drive Web folder that you will have after
uploading your pages to your www directory on your server. You can check your work by looking at your files
locally on your browser (by opening your browser, clicking on File, then Open, and then selecting the HTML file).
If you can’t see your page locally, then you won't be able to see it remotely after it is uploaded to the server.
Fixing your problems now avoids the confusion about whether or not the corrected version of your page has
been uploaded.
For example, if your Web page displays properly on your local computer but not on the remote computer, the
problem could be with naming, directories, permissions, or the network using different browsers. Hyperlinks
may be pointing to local files instead of URLs, but you would know that it isn't a coding issue because the page
displays properly on your local computer.
Internet Connection
It is not mandatory to have an Internet connection locally to create a Web site. However, you do need an
Internet access to upload your files, set file permissions, and perform other maintenance on your site. See
module 5 for specific instructions on uploading your pages to a UMUC server.
Creating a Web Page
Authoring software allows you to create a Web page without having to know any HTML code. There are two
categories of authoring software. One is a converter. This type of program takes a normal document and
converts it to HTML for you. Word has Save File as an HTML-type feature. Another category is a program that is
developed to create HTML code for you in a WYSIWYG environment. FrontPage is an example of one of these
programs.
The advantage of using an authoring tool is that you can quickly create a Web page without having to know
HTML. The disadvantages are that HTML is a live language, meaning that new tags are being created
continuously. Your version of the authoring tool may not have the latest tags. Additionally, programs make
mistakes. You may convert or write your page and when you view it in the browser window, it looks strange.
Unless you know how to fix the HTML code yourself, you will have to live with the effect.
It is recommended that you learn HTML first, and then use an authoring tool if you wish. One of the most
advanced authoring tools is Dreamweaver, but you had better know what you are doing in HTML to use it.
Because of the importance of learning HTML before ever using an authoring tool, this class requires straight
HTML coding. Although HTML may be written using a plain text editor, do not use a word processing program to
write your code. Notepad, which you have on your computer under Start, Programs, Accessories, is a text editor,
while Microsoft Word is a word processing program.
Module 4: Creating Web Pages
To learn HTML, it's best that you use a text editor, such as Notepad, to develop your pages so that you will
get hands-on practice. Using a word processor may insert incompatible characters into your HTML document,
causing it to view improperly. After you are comfortable with HTML, you can graduate to a more advanced text
editor that will, among other things, color-code your HTML and automatically close tags for you. Some of these
advanced text editors are available for free on the Internet. The more advanced WYSIWYG editors include
Microsoft's FrontPage and Macromedia's DreamWeaver, but nearly any software (especially Microsoft Office
applications) can be converted into Web pages by using the Save as Web Page feature.
Please note that in this course, you are required to do your HTML coding by hand, using a text editor. Web-page
creation tools such as WYSIWYGs are not permitted. The recommended text editor is Notepad, which can be
found under the Accessories category on any computer using a Microsoft Windows operating system.
When using Notepad, you must remember to change the file type from .txt to all files and name the Web page
with an .htm or .html extension (preferably .html because some Unix-based servers will not recognize your
index page if given an .htm extension.
Organize and Name Your Files Carefully
The first page of a Web site is called the home page. Under the basic rules of HTML, that first page
should use the name index.html (with a lowercase i and a full .html extension). A Web server will look
for the index.html file by default first. If the file does not exist, the Web server will display a directory
list of all the file names within the specified folder and not the page as you wish. When you decide which
page will be your home page, make sure you rename it to index.html before uploading it to the Web
server, if necessary.
As you begin writing your HTML files, do not include spaces in your file names. Although Microsoft
Windows does allow us to use spaces when naming files, it is not a good practice for online documents.
Some browsers may not understand the spaces and others will insert %20 every time a space occurs.
Name your files intuitively. Naming your files file1.html, file2.html, or pic2.gif will cause confusion as
your site grows. Give your files clearly understandable names such as menu.html or AliciaOnCouch.gif.
Keep your naming structure consistent. Normally it is good advice to avoid capitalization when naming
your files, but the trick is to be consistent. If you name your picture AliciaOnCouch.gif, be sure to keep
the same structure of capitalization to avoid errors in linking your files.
Organize your files into folders (directories) when necessary. It is a good practice to keep all of your
images together in a "graphics" or "images" or "pics" folder so they aren't scattered around with your
other files. Similarly, keep multiple pages of the same category in one folder. For example, because I
have syllabi written for numerous courses, I may keep all syllabi in a folder called syllabi and name each
course syllabus by its course name, such as CMST385. I know when I go into the syllabi folder, I will
have all of my syllabi there.
Browser Compatibility
The computer that the viewer of your Web site is using is called the client. You, the Web programmer, do not
have control over the client computer. Among other things, the user may change the default fonts, the size of
the viewing area, or the decision to show images. When you upload a Web page to a server, you don't know
what browser the viewer is using. It is most likely Internet Explorer (IE), but it may be Netscape, or Opera, or
some other browser. Today, many people are viewing Web pages using PDAs or cell phones. Each browser
Module 4: Creating Web Pages
shows Web pages differently. Because most of the world is using either IE or Netscape, you should work to
ensure that your page can be viewed the same in these two.
Don't use plug-ins that work only with IE or only with Netscape. Before deciding to use a plug-in, check to
make sure that it will work in both common browsers.
If you use images for links, you must also have those same links in an easily found location on your page,
written as plain text. If the user has turned off the images or the graphic you selected does not show in the
viewer's browser, that user will still be able to get to your links.
HTML
HTML stands for hypertext markup language. It is not a programming language; it is a markup, or coding,
language. It uses tags to tell the browser what to do. HTML is not static; it is an evolving or changing language
that is governed by the W3C.
HTML uses tags and attributes. Tags are commands that tell the browser to do something in a certain way. An
attribute changes or modifies a tag. The majority of HTML tags have both an open and closing tag. We call a
tag that has an open and close a container tag. The close is designated by typing a / (slash) before the code.
Tags are always in brackets: < >. Attributes are always within the specific tag that they modify.
HTML tags can be written in all caps, small letters, or a combination. BODY, body, and Body are all fine;
however, it is recommended that you use all small letters for your HTML tags. In a later section, we will
introduce you to writing Web pages using XHTML; the XHTML rules require that all tags are written in small
letters. Getting started right now will save you some time later.
To create Web pages in this class, you will write your HTML in Notepad or another simple text editor (your
instructor will give you guidance). You will not use authoring tools like FrontPage or Dreamweaver. The words
you type into Notepad are called code or object code. When you view your page using your browser, you are
viewing the finished product, called the object code.
Below, we have detailed the steps involved in creating an HTML document. Be aware that if you follow along
and type the code shown below, your screen display may be somewhat different, depending on your specific
operating system.
1. Below is the basic HTML code necessary to create a Web page. Open Notepad under your Accessories
menu and type the following HTML code.
Module 4: Creating Web Pages
Explanation of the Sample Above
<html> means that the page will be an HTML document.
<head> is like a header. Between the opening <head> and closing </head> tags belongs the code that
affects how the page works. JavaScript often goes here, and cascading style sheet code for internal style sheets
would go here. The page's title will always go within the header area. Notice that <head> is a container tag. It
has a matching close tag, </head>.
<title> is for the title of the page. This title appears in the browser's title area (not on the page). <title> is
also a container tag. It has a matching close tag, <title>. In this example, the words that will show in the
browser's status bar are title to appear on the blue title bar. Please realize that the title tag is used to show a
title in the browser's window. If you try to add tags to show formatting of any kind to the title, they will be
ignored. Formatting tags like bold, underline, font colors, and sizes are recognized only if they are in the body
of the page.
<body> is used to enclose the body of the page. Everything that goes between the opening <body> and
closing </body> tags is seen and displayed by the browser. The body tag is a container tag. It has a matching
closing tag, </body>. All of the tags and text you want to use regarding the actual page must be within the
opening <body> and closing </body> tags. In this example, the only content that will show on the Web page is
the words this is body of my web page.
Now Save the File As a Web File
2. Select File from your menu bar, then select Save As and type in the file name sample and include
the .html extension. Change the Save as type from Text Documents (*.txt) to All Files and then save the
file in a folder of your choice as follows:
Module 4: Creating Web Pages
If you do not type in the .html extension or change the file type from text, you will have saved a text
file: sample.txt or sample.html.txt (still a text file) rather than an .html file that your Web browser can
view.
Viewing Web Pages
To view Web pages, you need a browser. You're using a browser right now to view this page. Notice that you
can use your browser to view your Web pages on your local computer too, without a Web server. This is
because if you have a Web page that contains only text (HTML, for example), your browser can interpret the
page and display it without talking to a Web server.
3. Do not close Notepad. Open your browser. Go to File, Open. Browse to find the sample.html file. Click
Open. Click OK.
You should see a page like the own shown below. Notice the title bar and the content of the page:
Additionally, when you create your Web page, it's best to view it using each of the four major browsers—
Opera, Mozilla (now FireFox), Netscape, and Internet Explorer—because different browsers may display the Web
page differently.
When you are working with your source code, every time you make a change that you would like to see, click
on Save in Notepad and then click the Refresh or Reload button in your browser. If the Reload or Refresh
doesn't seem to show your changes, try clicking Refresh while holding down the CTRL key if you are an Internet
Explorer user, or click Reload while holding down the SHIFT key if you are a Netscape user.
Module 4: Creating Web Pages
HINT: Have only two programs open at a time. Open Notepad and open your browser. When a program is
open, its name shows on the task bar of Windows (bottom of your screen). To add to the lines of code or to
make a change to your Web page, click on the Notepad that you see on the task bar and type what you wish to
change. Click on Save. Go back to the browser by clicking on its name shown on the task bar. Click the button
Refresh (Explorer) or Reload (Netscape, Firefox). You will instantly see the change(s) that you made in your
page.
More HTML Tags and Attributes
The readings in this module are intended to be used as a reference for developing your Web pages. They are
not intended to be read as a "stand-alone" document. The reading should be done in conjunction with your
instructor's lectures and the course assignments. A useful resource document is the W3C School's HTML Tutorial.
Refer to it as you work through the assignments in this module.
All of the tags shown in the following sections will be written within the <body> and </body> tags. Realize
that the opening <body> and closing </body> tags should appear only once within each page you write. All
formatting tags should be within these body tags.
Backgrounds (Attributes of the <body> Tag)
When choosing background colors for your Web pages, you should be aware of the 216 available Web-safe
colors that should be used. A Web-safe color is one that will appear as expected if a person is viewing your page
using the Internet Explorer browser, the Firefox browser, a PDA, or a cell phone. You never know what browser
your viewer will be using, but limiting your colors to these 216 choices will keep your intended design choice
somewhat consistent for you and your viewer.
To write the color you wish to use, you can use a word for it, such as red or blue, or you can use the
hexadecimal code. Many people refer to hexadecimal codes as hex codes. Hexadecimal codes always start with
a # sign and have a six-digit number following. The hex code for red is #FF0000 and blue is #0000FF. Most
Web developers prefer to always use the hexadecimal codes for colors. Don't worry—you do not have to
memorize 216 hex codes! A number of sites are listed in the Relevant URLs section of this module.
We will look at three ways to change the background of a Web page. In all cases you will be using an
ATTRIBUTE of the <body> tag. Remember, there is only one opening <body> tag and one closing </body> tag
on any Web page. The background color or image changes are always added to the opening <body> tag.
1. <body bgcolor="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. Notice the pound sign in
front of the color code and the use of the quote marks surrounding the color.
o Example: <body bgcolor="#FFD700"> would make the background of the page gold.
You should follow two rules when assigning attributes:
o
o
If you have an equals (=) sign, do not put a space after it.
If you have an equals (=) sign, what follows should be in quotation marks.
Module 4: Creating Web Pages
2. <body bgcolor="color">, where color is the word of the color chosen. Notice that you do not need the
pound sign in front of the color if you use the word for the color rather than the hexadecimal code for
the color.
o Example: <body bgcolor="pink"> would make the background of the page pink.
3. <body background="filename.ext">, where filename is the name of the file and .ext is the extension
of .gif or .jpg to be used as an image. Notice the use of the quotation marks surrounding the file name.
o Example #1: <body background="starrysm.jpg"> In this case, the image file is in the same
directory as the HTML document referencing it.
o Example #2: <body background="images/starrysm.jpg"> in this case, because the image
needed is in a subdirectory, the relative pathname must be written.
Text Color of an Entire Page (Attribute of the <body> Tag)
1. <body text="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. You may also use the color
word; this changes all of the text on the page. If you also add font color tags to some text, that font
color will override the body text= tag. (The font tag will be discussed later in this module). The default
color of text for Web pages is black.
o Example #1: <body text="#660066">
o Example #2: <body text="blue">
NOTE: You can use the body background or body bgcolor along with the text attribute.
o
Example: <body bgcolor="#FFD700" text="#660066">
NOTE: If you use the body background and the body bgcolor, the image will override the color. However, if the
user turned off the images in the browser, the background color will display.
LAST NOTE: Be careful not to choose a background color that is the same as the text color. It is impossible to
read black on black.
Heading Tags <h1>–<h6>
The h stands for heading. Headings are usually used for titles and subtitles. There are six possible heading
sizes ranging from 1 to 6, with 1 being the largest and 6, the smallest. The heading tag is a container tag. If
you use the opening <h1> tag, then you need to use closing </h1>. The heading tag also automatically makes
the line bold and places an extra line space following the heading.
Example: <h1>This is my title!</h1> would display:
This is my title!
Line Breaks and Ending Paragraphs
<p> is the paragraph tag. The paragraph works much like pressing the E NTER key at the end of a paragraph in
Microsoft Word, except that it automatically places an extra line space between the preceding and following text.
In other words, it leaves a blank line and moves to the next line. However, it cannot be used to create extra
Module 4: Creating Web Pages
blank lines on your Web page. In HTML, it is one of the few tags that does not have to be closed. You need not
have a </p>. However, in XHTML, you must close the tag, so you may want to consider doing so right from the
start.
Example: <p>This is a paragraph of text. I can type just like in my word processor and the text will
word wrap. HTML is fun and easy!</p> would display as:
This is a paragraph of text. I can type just like in my word processor and the text will word wrap.
HTML is fun and easy!
<br> means line break. It can be used to create blank lines in your document or to make a soft return
between lines of text. As the <p> tag creates a "return" and a blank line, the <br> tag creates just the "return"
to the next line.
To use the <br> tag for blank lines, you would repeat the tag for every blank line you wish to add.
Example:
<p>This is a line of text</p>
<br>
<br>
<br>
<p>This is a second line of text</p> would display:
This is a line of text
(1 blank line from the <p> tag)
}
}
(3 blank lines from the <br> tags)
}
This is a second line of text
Lists
Using HTML, you can create:
unordered lists, also known as bulleted lists
ordered lists, also known as numbered lists
definition lists
You can also nest lists within a list. However, you must be careful when you nest lists to keep them from
getting too complex. The key is to remember to close each tag you open.
Unordered Lists
You create an unordered list by starting the list with the <ul> tag, followed by the <li> and </li> tags for
each individual item in the list, and close the list using the </ul> tag.
This is the HTML code for an unordered list (the boldface type is used only to emphasize the HTML tags from
the contents):
Module 4: Creating Web Pages
<ul>
<li>CMST
<li>CMST
<li>CMST
<li>CMST
<li>CMST
</ul>
385</li>
386</li>
430</li>
450</li>
498F</li>
This is how the above code would be displayed in a browser:
CMST
CMST
CMST
CMST
CMST
385
386
430
450
498F
Ordered Lists
An ordered list outputs the list in a particular order and each individual item uses the <li> and </li> tags, just
like the unordered list. The only difference is that you use <ol> instead of <ul>.
This is HTML code for an ordered list:
<ol>
<li>CMST
<li>CMST
<li>CMST
<li>CMST
<li>CMST
</ol>
385</li>
386</li>
430</li>
450</li>
498F</li>
This is how the above code would be displayed in a browser:
1.
2.
3.
4.
5.
CMST
CMST
CMST
CMST
CMST
385
386
430
450
498F
Definition Lists
A definition list uses the <dl> and </dl> tags to encapsulate the list, the <dt> tag to designate the definition
term, and the <dd> tag to designate the definition description. The definition for each definition term is
indented and formatted on a new line.
This is the HTML code for a definition list:
<dl>
<dt>CMST 385</dt>
<dd>Prerequisite: Either CMST 300, IFSM 201, or equivalent</dd>.
<dt>CMST 386</dt>
<dd>Prerequisite: CMST 385 or equivalent</dd>.
<dt>CMST 430</dt>
Module 4: Creating Web Pages
<dd>Prerequisite: CMST 386 or equivalent</dd>.
<dt>CMST 450</dt>
<dd>Prerequisite: CMST 386 or equivalent</dd>.
<dt>CMST 498F</dt>
<dd>Prerequisite: CMST 386 or equivalent</dd>.
</dl>
This is how the above code would be displayed in a browser:
CMST 385
Prerequisite:
CMST 386
Prerequisite:
CMST 430
Prerequisite:
CMST 450
Prerequisite:
CMST 498F
Prerequisite:
Either CMST 300, IFSM 201, or equivalent.
CMST 385 or equivalent.
CMST 386 or equivalent.
CMST 386 or equivalent.
CMST 386 or equivalent.
Preformatted Text
If you use spaces, line breaks, or tabs in your HTML code, your browser will ignore them. Spaces, line breaks,
or tab spaces are called whitespace. To get the content in your HTML file to display exactly as you type it, you
could use the <pre> tag, which stands for "preformatted." The text will be shown in the browser's default font
for this tag, usually Courier. The preformat tag does not word wrap paragraphs. If you want a line to show on
the next line, you must press ENTER. The <pre> tag is used to show content such as programming code.
This is an example of preformatted HTML code:
<pre>
CMST 385
CMST 386
CMST 430
CMST 450
CMST 498F
</pre>
This is how the above code would be displayed in a browser:
Module 4: Creating Web Pages
Horizontal Rules
The <hr> tag displays a horizontal line in your browser and is usually used to separate sections of your
document
The <hr> tag is one of the HTML tags that does not have a closing tag.
The basic horizontal rule extends across the browser page, but you can add a number of attributes to this tag,
including size, thickness, and style.
This is an example of using the horizontal rule HTML tag:
Section
<hr>
1
Section
<hr>
2
Section
<hr>
3
This is how the above code would be displayed in a browser:
Module 4: Creating Web Pages
Text Tags
HTML has many tags for formatting your output. The three most commonly used ones are the <b>, <u>, and
the <i> tags.
Surrounding text in your HTML document with the <b> tag outputs the text as bold. Surrounding text in your
HTML document with the <u> tag outputs the text in underline. Surrounding text in your HTML document with
the <i> tag outputs the text in italics.
The following HTML code shows how to use these tags within an unordered list:
<ul>
<li><b>CMST 385</b></li>
<li><u>CMST 386</u></li>
<li><i>CMST 430</i></li>
<li><b><u>CMST 450</u></b></li>
<li><b><u><i>CMST 498F</i></u></b></li>
</ul>
This is how the above code would be displayed in a browser:
CMST 385
CMST 386
CMST 430
CMST 450
CMST 498F
Notice that the example above is also an example of nesting tags within other tags. The list items are made
bold by the additional tags. With nesting, we always open and close the inside tags before closing the outside
tags, thus keeping them "nested."
Text Size, Typeface, and Color
Module 4: Creating Web Pages
We have seen how to format the content of an HTML document to display a particular way in a browser, such
as using unordered lists and bolding. You can change the size of the text by using header tags such as <h1>
through <h7> with the number 1 being the largest and 7 being the smallest. However, the header tags will
display text only in the particular size, typeface, and color that are the default settings for your browser.
If you want more flexibility in how your text is displayed, you can use the <font> tag. The <font> tag allows
you to change the size, typeface, and/or color of selected text in your HTML document. To do this, you can use
three attributes with the <font> tag:
size
face
color
You can use these attributes alone or in combination with others.
Size: The size of the text can be expressed in seven sizes: 1–7. Seven is the largest and one is the smallest;
note that this is the opposite of the header tags.
HTML Tag
Approximate
Point Size
h6
8 pt
h5
10 pt
h4
12 pt
h3
14 pt
h2
18 pt
h1
24 pt
Face: The typeface is the style and shape of your text. You can specify any typeface in your HTML document
as long as the person who is viewing the document has the typeface loaded on his or her computer.
Times Roman and Arial are two fonts that you can be sure everyone will be able to view, regardless of
browser type. If you use other fonts, there are no guarantees. One way to be able to use fancier fonts is to
create the words in a graphics program and save them as images. Then you just add the image as you normally
do.
Color: Remember that there are two ways to specify color for text—with a name or with a hexadecimal
equivalent. For example, orange can be set with <font color = "orange"> or a specific shade of orange with
<font color = "#FF9900">. You may go to the VisiBone site for a visual representation of the colors and
hexadecimal color codes.
The following HTML code shows how to use these tags:
<html>
<head><title>CMST 385 Example</title></head>
<body>
Module 4: Creating Web Pages
<font-size
<font-size
<font-size
<font-size
<font-size
</body>
</html>
=
=
=
=
=
"10pt"
"12pt"
"18pt"
"24pt"
"36pt"
font-family
font-family
font-family
font-family
font-family
=
=
=
=
=
"arial" color = "pink">CMST 385</font></br>
"courier new" color = "blue">CMST 386</font></br>
"verdana" color = "yellow">CMST 430</font></br>
"helvetica" color = "green">CMST 450</font></br>
"times new roman" color = "brown">CMST 498F</font></br>
This is how the above code would be displayed in a browser:
CMST
CMST
CMST
CMST
385
386
430
450
CMST 498F
Character Entities
Character entities, also known as escape sequences, have two purposes:
escaping or replacing special characters
displaying characters you cannot type from your keyboard
For example, the left angle bracket (<) and the right angle bracket (>) have special meanings in HTML; they
tell the browser that the text enclosed in the brackets is an HTML command. Therefore, if you want to actually
display the brackets in the browser, perhaps to demonstrate some coding, you must "escape" or substitute the
characters.
The character entity for the left angle bracket < is &lt; and the character entity for the right angle bracket >
is &gt;
You must have the ampersand (&) to start the command and the semicolon (;) to end it. It is one of the only
tags that will not be in brackets.
See your Relevant URLs for a list of all available character entities.
Superscript and Subscript Tags
The <sup> or superscript tag shows text higher than the surrounding text. It is usually used for showing
exponents or the trademark symbol: (32), (TychoTM).
The <sub> or subscript tag shows text lower than the surrounding text. It is usually used for showing
mathematical forumlas: (16n).
Graphics
Module 4: Creating Web Pages
In addition to text, graphics (or images) are also a large part of the Web. Graphics files include, but are not
limited to icons, bullets, backgrounds, black-and-white photographs, digital art, clip art, line art, banner ads,
and imagemaps.
Three main types of graphics are used on Web pages:
GIF
JPEG
PNG
Your browser can display, if supported, GIFs, JPEGs, and PNGs natively. That is, a browser does not need a
plug-in to display the file. In addition, they are inline graphics.
To add graphics to your Web page, you can use the <img> tag; for example:
<img src="images/picture.gif">
When your browser encounters the <img> tag, it is a signal to the browser that it will have to go somewhere,
download the image, and display it on the page at the location of the <img> tag. The src (source) attribute tells
the browser the location of the image. Like the href in an <a> tag, the src value must specify the appropriate
path to the image file. This path can be relative or absolute. As you know, an absolute path specifies the
complete URL of the image file; for example:
<img src="http://www.umuc.edu/images/picture.gif">
A relative path specifies that the image can be found on the same server as the page that references the
image; for example:
<img src="images/picture.gif">
In the example above, the image file is in a directory called images. For manageability, most Web site builders
put all their images in one directory. You can call this directory whatever you want: images, graphics, pics, or
whatever.
The <img> tag has other attributes as well. The attributes usually follow right after the src attribute. Image
attributes that should always be used are width, height, and alt.
Using height and width tags makes the page load faster because the browser does not have to look to see for
itself what size the image is: width is the actual width of the image being used; height is the actual height of
the image being used. The browser must load only those size settings and then allow the image to fill the
parameters. The width and height attributes are never used to change an image's size—you must use a
graphics program to do that. To determine the size of an image, click on the image to open it in a file viewer,
right-click on the image, and choose properties. You can also open it in a graphics program and look at image
information or properties there.
Module 4: Creating Web Pages
An alternative view is provided by the <alt> tag, which is used as a text substitute for the image. It describes
what is intended to be shown. If I had an image of a flower, I might write the alt attribute within the img src
tag as follows:
alt = "This is a picture of a rose"
Example: <p><img src="images/flower.gif" width="200" height="300" alt="This is a picture of a
rose"<p>
You should be aware of two things when you work with online images:
1. If the Web server cannot find the image or if the browser cannot display the image for any reason, you
will see an icon in place of the image. If this happens, the path specified in your <img> tag could be
incorrect. That is another reason why it is important to include the alt attribute with the <img> tag. The
value of the alt attribute will display if the image does not download. Here is an example of using the alt
attribute:
<img src="images/picture.gif" alt="eagle picture">
If the image does not download, the phrase "eagle picture" will appear in its place.
2. When you download an image from the Internet, you must consider the size of the image. Image files
are considerably larger than HTML files. If the image takes a long time to download, the visitor to your
site may lose interest and go to another site instead. You must recognize this if you include images on
your Web site.
In the advanced course, you will learn more about images, including the important topic of using image
compression to make your images an appropriate size.
Hyperlinks
Arguably, the most important object on a Web page is the hyperlink. You create hyperlinks by using the URL
(each Web page has a unique address called a Uniform Resource Locator, or URL), along with the <a> (anchor)
tag and an href (hypertext reference) attribute.
Hyperlinks are rendered in a color different from the text (blue is the default color for a link that has not been
used; purple for a visited link) by the browsers to distinguish them from the rest of the text.
An anchor is commonly used to point to somewhere (another site altogether, or another specific point within
your site) from the current document. The href attribute stands for hypertext reference and specifies the path
or location of the page. Between the opening and closing anchor tags, you type the text that the visitor clicks on
to go to the page. Here is an example of the anchor element:
<a href="http://www.umuc.edu">University of Maryland University College</a>
The text on the Web page will read "University of Maryland University College" as a hyperlink. Once clicked,
the hyperlink will take the viewer to http://www.umuc.edu, as directed by the code.
Module 4: Creating Web Pages
Relative and Absolute Links
Hyperlinks on the Web come in two types: relative and absolute. Relative links do not have "http://" or a
domain name in front of them; absolute links do. Absolute hyperlinks include the full, complete address of a
page, and relative hyperlinks include only the path within your file structure. Relative linking is for internal
pages only. Because external pages would not be within your file structure, you must use the full address.
This is an absolute link:
<a href="http://polaris.umuc.edu/~ssmith/mydirectory/mypage.htm">My page is located here.</a>
This is a relative link:
<a href="mydirectory/mypage.htm"> My page is located here.</a>
In the examples above, the first link (an absolute link) uses the full address to access "mypage.html" by
leaving your page, going out to the server and then back into your account, to the "mydirectory" folder, and
then to "mypage.html." The second link (a relative link) goes from the current page to the "mydirectory" folder
and then to "mypage.html." The path in the relative link example will work only if the "mydirectory" folder is
under the directory in which the referring page is found.
If the referring page and the referred page are in two directories (folders) at the same level, the HTML code
would be written this way:
<a href="../mydirectory/mypage.htm"> My page is located here.</a>
This tells the browser to go up one level and then look for the directory called mydirectory.
The E-Mail Link
The e-mail link allows viewers of your page to click on the link and open an e-mail compose window. The email window that opens comes from the viewer's e-mail. If an e-mail client is not installed on the system, a
dialog box may appear asking the user to set up an e-mail client. If an e-mail client is installed, the link opens
the e-mail compose window and fills in the To line.
<a href="mailto:emailaddres">Send email</a>
An e-mail link to Tim Berners-Lee would be:
<a href="mailto:timbl@w3.org">Send email to timbl@w3.org</a>
NOTE: Before you send an e-mail to Mr. Berners-Lee, please read his "Before you mail me."
To have the subject line automatically added, add ?subject=TextToShow directly following the mailto and in
front of the closing quote.
<a href="mailto:timbl@w3.org?subject=W3C">Send email to timbl@w3.org</a>
Module 4: Creating Web Pages
Named Anchors
Named anchors are link tags that jump from one part of your document to another by providing a named
anchor is a reference marker for a section of your web page. The internal anchor tags follow a two-part process.
First we must name the area to be targeted, then we make a hyperlink to that named target.
To create the area to be targeted, we would type the following, using the "words to link to" as the text we
wish to show on the page.
<a name="">words to link to</a>
<a> is the opening anchor tag.
Name is the attribute creating a name (bookmark or placeholder) in the file.
"word" is the value of the name. This can be any word you choose to use as your target.
The user would see nothing different about the words used as the anchor. The named anchor tags are
hidden from the user's view.
</a> ends the anchor tag.
To link to the named anchor:
<a href="#word">Go to the same place</a>
<a href> is the anchor and hypertext reference tag.
"#word"' tells the browser to find the anchor we named word above.
</a> ends the anchor tag.
The # symbol instructs the Web browser to look through the HTML document for a named anchor called word.
When you select or click on the hypertext, it brings the part of the document that contains the named anchor to
the top of the screen. The marker name and the link name are case-sensitive. If your anchor name were Top
and you used top or TOP instead in the link, the browser would not find the named anchor.
Using Graphics as Hyperlinks
There are three basic ways you can display links from a Web page:
using text
using graphics
using imagemaps
Text is the most common type of hyperlink and consists of a word or group of words. This link will be a
different color from other content on the page and is usually underlined, most commonly in blue.
You can also use a graphic as a hyperlink. A border that is the same color as other hyperlinks on the page
usually surrounds the image. As with a text hyperlink, you click once on the image to activate the link. To set
an image as a hyperlink, you would have to surround the image source tag with the anchor hypertext reference
tag:
<a href="http://www.umuc.edu"><img src="UMUCpic.gif"></a>
Module 4: Creating Web Pages
An additional hyperlink option is an image map. An image map is an image that contains many embedded
hyperlinks that are mapped to different URLs, making them "hotspots." An image map must be a .gif or .jpg file.
You must also have a program that will "map" the image, noting the specific coordinates to which you assign
URLs. One of the most common mapping programs is MapEdit, and it is available free of charge. See tutorials
on making image maps in your Relevant URLs section.
In addition to clicking on a link to send a URL to a Web server, you can also:
type the URL in the browser's address field
use the browser's drop-down menu to select a URL
Whether you click on a link or use another method to send the URL, the Web browser contacts the Web server
that stores the Web page, as illustrated below:
Figure 4.1
Requesting a Web Site
As long as you have one of the latest browsers, you do not have to type the prefix (http://) when typing the
URL. The browser will supply this part automatically. If you have to type a Web address, it is a good practice to
copy and paste the URL to avoid typographical errors.
Sometimes links do not display an underline or border; you must use other ways to determine that it is a
hyperlink. One way is to move your cursor over the hyperlink. When you do this, the cursor changes to another
shape (depending on your browser settings, the pointer usually becomes a pointing finger) and the URL displays
in the lower-left corner of your browser windows.
Comments
Comments are notes that a programmer can make in his or her code. These notes do not appear on the web
page itself. They can only be seen by looking at the source code. Examples of comments are to write about
copyright issues, to write your name and information (date of creation, etc.), or to add comments explaining
the code itself.
Module 4: Creating Web Pages
To make a comment, <!-- text that is comment -->
Comment tags can be placed anywhere in your code. The browser will not read them.
Creating Tables
If you have ever used a spreadsheet, you are already familiar with the concept of HTML tables. HTML tables
were originally intended to present data in a tabular format (rows and columns of words and/or numbers).
However, tables are now used to format content such as text and graphics on a Web page. Using tables, you
can organize your data and make it more readable and attractive.
You must use at least three tag pairs to make a table:
Tag
Purpose
<table></table>
tells the browsers where to start and stop the table; you can put multiple tables on a page
<tr></tr>
defines the rows that contain the table cells (tr = table row)
<td></td>
defines the table cells in which you put the content, such as text or graphics (td = table
data); the td is the column of the table
Table construction begins from the top left, then across the columns of the first row, then to the second row
and across all of its columns, and so on. To make your table-building as easy as possible, you should do two
things.
Use the border attribute with the <table> tag, and set it to the value 1. This will allow you to see the
cells on the Web page. You can always remove the border attribute later if you do not want your table to
have a visible border.
Always make sure every opening tag has a corresponding closing tag. If you do not, some browsers will
not display the table or the Web page at all.
Below, you will find table-building examples.
A Table with One Column and Six Rows
HTML code (the surrounding <html> and <body> tags are assumed):
<table border="1">
<tr><td>Course</td></tr>
<tr><td>CMST385</td></tr>
<tr><td>CMST386</td></tr>
<tr><td>CMST430</td></tr>
<tr><td>CMST450</td></tr>
<tr><td>CMST498</td></tr>
</table>
This is how the above code would be displayed in a browser:
Course
Module 4: Creating Web Pages
CMST385
CMST386
CMST430
CMST450
CMST498
A Table with Two Columns and Six Rows
HTML code:
<table border="1">
<tr><td>Course</td><td>Course Title</td></tr>
<tr><td>CMST385</td><td>Internet: A Practical Guide</td></tr>
<tr><td>CMST386</td><td>Internet: An Advanced Guide</td></tr>
<tr><td>CMST430</td><td>Web Site Management</td></tr>
<tr><td>CMST450</td><td>Web Design Methodology and Technology</td></tr>
<tr><td>CMST498F</td><td>Web Application Development Using ColdFusion </td></tr>
</table>
This is how the above code would be displayed in a browser:
Course
Course Title
CMST385 Internet: A Practical Guide
CMST386 Internet: An Advanced Guide
CMST430 Web Site Management
CMST450 Web Design Methodology and Technology
CMST498F Web Application Development Using ColdFusion
A Table with Three Columns and Six Rows
HTML code (notice the use of tabs and line spacing to make the code easier to proofread and edit):
<table border="1">
<tr>
<td>Course</td>
<td>Course Title</td>
<td>Short Course Description</td>
</tr>
<tr>
<td>CMST385</td>
<td>Internet: A Practical Guide</td>
<td>An introduction to the Internet and the World Wide Web.</td>
</tr>
<tr>
<td>CMST386</td>
<td>Internet: An Advanced Guide</td>
<td>A study of advanced applications for the Internet and the World Wide Web.</td>
</tr>
<tr>
<td>CMST430</td>
<td>Web Site Management</td>
<td>An in-depth survey of Web site maintenance for small businesses.</td>
Module 4: Creating Web Pages
</tr>
<tr>
<td>CMST450</td>
<td>Web Design Methodology and Technology</td>
<td>An in-depth survey of the design and delivery of professional Web content.</td>
</tr>
<tr>
<td>CMST498F</td>
<td>Web Application Development Using ColdFusion </td>
<td>A structured approach to building and maintaining dynamic and interactive Web applications.</td>
</tr>
</table>
This is how the above code would be displayed in a browser:
Course
Course Title
Short Course Description
CMST385
Internet: A Practical Guide
An introduction to the Internet and the World Wide Web.
CMST386
Internet: An Advanced Guide
A study of advanced applications for the Internet and the World
Wide Web.
CMST430
Web Site Management
An in-depth survey of Web site maintenance for small
businesses.
CMST450
Web Design Methodology and
Technology
An in-depth survey of the design and delivery of professional
Web content.
CMST498F Web Application Development
Using ColdFusion
A structured approach to building and maintaining dynamic and
interactive Web applications.
Formatting Tables
Attributes can also be added to help format the tables. Text color, style, and font; background color; rounded
corners; cell spacing and cell padding can all be added.
<table border="4" cellspacing="4" cellpadding="4">
<tr>
<td bgcolor="yellow"><font color="blue">Yellow background with blue text</font></td>
<td bgcolor ="#00ff00">Lime background</td>
</tr>
<tr>
<td bgcolor ="#9900ff">Purple background</td>
<td bgcolor ="#00ffff">Aqua background</td>
</tr>
</table>
This is how the above code would be displayed in a browser:
Yellow background with blue text
Lime background
Purple background
Aqua background
Module 4: Creating Web Pages
Web Multimedia
The content on your Web page can consist of more than just text. Your Web page can contain multimedia.
Using multimedia on your Web page can enhance the presentation of your page, communicate the information
better, and provide a dynamic look and feel.
Audio, Video, and Animation
Audio, video, and animation can be found all over the Web. Incorporating these elements into a Web page is
not that difficult. However, it can be challenging to use multimedia in meaningful ways that do not detract from
the design and content of the Web page or from the visitor's experience. Having audio that plays when a page
loads or having a graphics that overpower a page's content is not a beneficial use of multimedia. Use
multimedia to enhance your content, but keep content as your primary goal.
Below are some of the more popular multimedia file types, along with their file extensions:
File Type
File Extension
animation
.gif
animation
.swf
audio
.au
audio/video
.avi
audio/video
.mov
audio/video
.mpg
audio/video
.wav
music
.mp3
streaming audio
.ra
streaming video
.rm
Audio files can be played on your Web page either inline (as part of the Web page) or through a plug-in. To
set the audio file inline, you can use the <bgsound>, <embed src>, or the <object> tags:
<bgsound="file.wav"> This is not a standard HTML or XHTML element and it is supported only by
Internet Explorer.
<embed src="file.wav"> This element is supported by both Internet Explorer and Netscape, but it is not
a standard HTML or XHTML element. The World Wide Web Consortium (W3C) recommends using the
<object> element instead.
<object> <param name="FileName" value="file.wav"> </object>
Both Internet Explorer and
Netscape support the <object> tag.
Details on which format of audio file to use and how to incorporate them into your Web site can be found at
the W3Schools. See the following links for additional resources.
Module 4: Creating Web Pages
Playing Video on Your Web Page
http://www.w3schools.com/media/media_browservideos.asp
http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061
Web designers use a number of file formats and technologies to create multimedia files. You will learn about
many of these technologies in the advanced Internet course. In addition, most multimedia (other than inline
graphics) requires a plug-in. However, for you to actually hear or see the multimedia files, there are two
methods used to get them to you: non-streaming and streaming.
Because some non-streaming files can be very large, the download time can be long, especially if you are
accessing the Web via a dial-up modem. In addition, non-streaming audio files are easily created and use
standard static formats that are transferred using the FTP protocol.
Streaming files are downloaded from a streaming server. The file begins to play after a part of the file is
downloaded and continues to play as more of the file is sent to the player. Not only does this technique take up
no hard drive space, but it also allows for media to be sent live to client machines as an event happens.
Although streaming is faster than non-streaming, there are some drawbacks. If you do not have a high-speed
Internet connection, streaming media may not look as good as the media on your local hard drive. In addition,
for each client connected to the streaming server, there is one stream connection. As more clients connect, the
quality of the stream suffers because the available bandwidth decreases.
Cascading Style Sheets
With HTML, we can format our pages with tables and individual tags to set our font colors, sizes, background,
and so on. It can become quite tedious to match the formatting elements by retyping the codes on each page to
make our pages into a coherent site. Human forgetfulness also plays a factor. For example, I may want to
define my own headings instead of using the HTML heading tag. If I decided to define each of my headings to
be a 14-point Arial, bold and navy blue font, I would have to write the following HTML code:
<font face="arial" size="4" color="#000080"><b>heading</b></font>
for each heading I type, assuming that the font size "4" will be approximately 14 points.
There is an easier and more exact way to accomplish this. Cascading style sheets (CSS) allow us to define
some or all of our formatting tags used in our HTML code. If I were to write the same settings as above with an
inline style, I would write:
<h1 style="font-family: arial; font-size: 14pt; font-color: #000080; font-weight:
bold">heading</h1>
This may seem longer, but we are able to set the exact point size of the font. In addition, as you will see later,
we can define settings that are impossible with plain HTML.
Notice that when using CSS, you will not have quote marks around the values you use.
Module 4: Creating Web Pages
When you use inline styles, you are not using style sheets. Instead, the styles will be written within the page.
You can apply an inline style to a single word, a sentence, paragraph, or section; and one page can have
multiple styles applied. It is called an inline style because you write it within the line to which you want to apply
it.
Styles follow rules. A rule establishes how the style will be applied. A rule consists of two main parts: the
selector, which is an HTML element or tag, and the declaration, which holds the properties and values of how
the tag is to be applied. The property part of the declaration is an attribute and the value. The attribute and the
value will be separated by a colon. If there is to be more than one selector, each will be separated from the
other by a semicolon.
Everything that follows the equals (=) sign is the declaration.
If you have only one declaration, you will not use the semicolon at the end. Here is an example:
<p style="color: blue">
Another method of using CSS is to use an internal style or embedded style, which allows you to set the styles
for an entire page. The styles become embedded or an integral part of the Web page. If I were to use an
internal CSS code to set the same settings used above, I would write the following code within the <head>
section of my HTML page. Then, every time I use the tag to which I've made the settings, the formatting will be
set automatically:
<html>
<head><title>CSS
SAMPLE</title>
<style
type="text/css">
h2{
font-family:
arial,
serif;
font-size:
14pt;
font-weight:
bold;
color:
}
</style>
</head>
<body>
<h2>Heading</h2>
#000080;
Module 4: Creating Web Pages
</body>
</html>
Every time we use the <h2> tag in the above page, the formatting will be set as we have designated: with
Arial 14-point bold in navy blue. We do not have to type all of the formatting tags over and over. We just use
<head> whenever we want to to have it on the page, and the formatting we set in the <head> of our HTML
document will be applied.
There are only a couple of differences between writing an inline and an internal style.
1. The inline style had selector style =. The embedded style has selector open curly brace: {
2. The inline style placed the declaration within quotation marks. The embedded style does not use the
quotation marks.
Cascading style sheets are called cascading because of the precedence of inline, internal, and external style
sheets. Each style sheet is followed one after the other in an order of precedence, in a cascading fashion.
The inline codes override the internal styles.
The inline codes override the external style sheets
The internal style sheets override the external style sheets.
An external style sheet is a plain-text file that defines our tags. We then link that file into our HTML pages in
the <head> of the HTML code. This style sheet tool is very handy to set consistent styles for every page in your
site.
This is the process used to create an external style sheet:
1.
2.
3.
4.
Create a new text document. Use a text-only program such as Notepad.
Type the name of the tag whose properties you wish to define (h1, h2, p, or whatever).
Type { to mark the beginning of this tag's properties.
Define as many properties as desired for this tag, separating each new property with a semicolon.
Example: h1 {text-align: center; color: green; font: 20 pt. Times Roman}
5. Type } to mark the end of the entire tag's properties.
6. Repeat the above steps as needed for different tag names (also called selectors).
7. Save the document using the Save As Type to be All Files in the desired directory, giving the document
the extension .css to designate the document as a cascading style sheet.
Below is an example of an external style sheet. Notice the absence of HTML tags; you should not have any
HTML coding in your external style sheet except to designate the formatting for your tags. Notice also the use of
colons rather than the equals sign to introduce the style attributes. Similar to HTML coding, the basic use of
tabs and empty spacing is not recognized. The format of the style sheet below is organized for ease in
readability. The tags (or selectors) are aligned to the left to be easily identified and the opening and closing
brackets are on their own lines to clearly identify that one or the other is not forgotten. Additionally, we have
added comment lines to explain some of the formatting sections. The comment lines in CSS will be written as
standard coding comments with the /* comment */ tags.
body
{background-color:
url(./images/left_border19.jpg);}
#90EE90;
background-image:
Module 4: Creating Web Pages
/*
the
background
color
has
been
The page has an image on the background as well. */
set
to
be
light
green.
h1
/*
{
opening
bracket
*/
text-align:
/*
all
/*
<h1>
the
center;
tags
letter-spacing:
letters
will
will
have
between
be
an
centered
additional
*/
0.5em;
1/2
space
them
*/
background:
/*
the
background
a
of
text
will
be
highlighting
color:
/*
font:
/*
the
normal
the
Roman.
20
font
If
font
pt
size
Neuva
The
is
Roman
will
Roman,
20
is
pt
one
font
that
used
is
not
to
be
font
available
a
generic
available
view
always
offer
a
/* closing bracket */
the
face
on
the
generic
page.
font
of
the
A
matter
Web
as
Nueva
viewer's
generic
what
page
the
*/
serif
Regular.
font.
no
to
yellow
Regular,
Lithos
called
will
(similar
*/
yellow;
be
Lithos
in
use
third
being
be
green
tool)
color
Nueva
will
browser,
}
the
green;
font
client
designers
last
is
should
alternative.
*/
p
{
text-align:
/*
the
paragraph
will
have
justify;
an
even
left
&
right
margin
*/
text-indent:
/*
the
font:
paragraph
15pt
will
be
Myriad
/*
paragraph
font
the
font.
If
browser,
generic
Myriad
use
Verdana.
font
indented
8
Roman,
will
Roman
8pt;
be
is
If
15pt
not
is
size
in
is
not
¼
the
available
Verdana
that
points,
about
Verdana,
on
inch
*/
sans-serif
Myriad
the
available,
similar,
sans-serif.
Roman
viewer's
use
a
*/
}
p.intro
/*
styles
this
is
a
for
class
selector,
which
the
text-indent:
font-style:
allows
same
us
to
tag.
set
multiple
*/
{
0;
italic;
Module 4: Creating Web Pages
font-weight:
bold
}
A:link
/*
all
background
of
my
links
rather
will
than
display
the
as
standard
green
text
on
underlined
yellow
blue
background:
*/
{
yellow;
color:
green
}
A:visited
/*
visited
is
the
setting
for
links
that
have
been
visited
background:
*/
{
orange;
color:yellow
}
A:hover
/*
hover
is
viewer's
the
mouse
setting
for
is
links
to
over
change
the
color
when
link
the
*/
{
background:
red;
color:
white
}
A:active
/*
active
is
viewers
the
click
setting
for
links
on
to
change
the
color
link
when
the
*/
{
background:
white;
color:
black
}
Once you have created your text file, save it with a .css extension; for example, "mystyle.css." Be certain that
you change your Save As Type to All Files to avoid having a .txt extension added to your CSS, like this:
"mystyle.css.txt." Information on uploading these files will be presented in module 5.
We now must write the code to call up the style sheet from the HTML page(s). Notice that the line in green
below is written within the head of the HTML document.
<html>
<head>
<title>Testing CSS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
Module 4: Creating Web Pages
</head>
<body>
<h1>This Is a Main Heading</h1>
<p>My information would be placed here. Each paragraph I create will take the formatting applied via the style
sheet.</p>
<p>This second paragraph has the same styles as the first one. If I add an inline style to some part of this
paragraph, it will override the style sheet settings. <span style="color: blue; background-color:#CC00FF;
font-weight: bold"> See the change? </span></p>
<p>To insert another main heading, all we have to do is use our h1 tag. We don't have to type each style
characteristic anymore.</p>
<h1>Another Heading</h1>
</body>
</html>
Click here to see this page in a browser.
Great examples of using CSS are shown at the W3school's See How It Works page. After you have looked at
the examples, try it yourself at the W3school's CSS Try It site.
The CSS Validator
To ensure that you have written your cascading style sheet correctly, you should check it with the W3C CSS
Validation Service. You can check a CSS page that has been uploaded to a Web server, check it from your local
computer, or copy and paste the code into the Validator window.
XHTML
Finally, we must discuss XHTML. Hypertext Markup Language (HTML) has added extensible to its name with
XHTML, a combination of HTML and XML. XML is a structured set of rules for how one may define any kind of
data to be shared on the Web. XHTML is the bridge language between HTML and XML. The Extensible Hypertext
Markup Language (XHTML) has been developed to replace HTML. XHTML consists of all the elements in HTML
4.01 combined with the syntax of XML; although it is very similar to HTML 4.01, its structure is stricter and
cleaner. One of the major benefits of XHTML is that it can be used for portable devices like PDAs where a
straight HTML document, which requires a plug-in, can't be used.
XHTML 1.0 is the first major change to HTML since HTML 4.0 was released in 1997. XHTML is a W3C
recommendation and has been developed to counter the extensive bad HTML coding that confronts the Web. As
mentioned in earlier modules, Web pages must be viewed not only via browsers on desktop computers, but also
via mobile phones and handheld PDAs. These mobile devices do not have the ability to interpret "bad" markup
language. By combining HTML and XML into XHTML, we can have a markup language that is backwardcompatible (viewable by older browsers still in use) and useful in the future for our mobile Web devices.
According to the W3C, "XHTML pages can be read by all XML-enabled devices AND while waiting for the rest of
the world to upgrade to XML-supported browsers; XHTML gives you the opportunity to write 'well-formed'
documents now that work in all browsers and that are backward browser-compatible" (Refsnes Data, 2005b).
Module 4: Creating Web Pages
Before moving on, view the XHTML: The Extensible Hypertext Markup Language slide show by Dave
Raggett at the W3C LA event in Stockholm, Sweden, on March 24, 1999.
Alan Richmond's EncycloZine is one of the first Web sites implemented using XHTML.
Although HTML 4.01 and XHTML are similar, according to the W3C, there are some significant rules that must
be followed (Refsnes Data, 2005c):
XHTML elements must be properly nested.
XHTML documents must be well-formed.
Tag names must be in lowercase.
All XHTML elements must be closed.
Closing All XHTML Tags
Arguably the most difficult habit to change is leaving off closing tags—XHTML requires us to close all tags. For
those of you who are just learning HTML, this should be a simple rule to follow. For those of you who have
written HTML for years, you will find that you must break the habit of leaving off the closing tags for your
paragraphs, horizontal rules, line breaks, image tags, and so forth.
For example, in the "old days," we could write a paragraph without actually closing the <p> tag at the end.
is
<p>This
where
I
write
paragraph
one.
Wrong!
<p>Now I am starting paragraph two.
Although it was always good practice to close your paragraph tags before, we now must include the closing
tags:
<p>
This
is
where
I
write
paragraph
one.</p>
Right!
<p>Now I am starting paragraph two.</p>
A more unusual change is the addition of closing tags for those HTML tags that originally didn't have them,
such as <hr> or <br> or <img>. These were called empty tags, and it wasn't necessary to close them.
Instead of writing <br> for a line break, we must now write <br />. Notice the space between the tag and the
forward slash. This is the same for horizontal rule tags: <hr />.
For the image source tag, we must add an ending tag /> as shown below:
<img src = "elephant.gif" alt="elephant at the zoo" />
Properly Nesting Your Code
In XHTML, the bold and italics tags are still <b></b> and <i></i>. However, with simple HTML, your browser
may forgive your mistake of improperly nesting the tags:
<b><i> writing in bold and italics </b></i>
Wrong!
Module 4: Creating Web Pages
If you have two opening tags, you must close each tag in the opposite order. All tags must be properly opened
and closed in a nesting order to be XHTML-compliant and, more important, to be acceptable for future browsers
and mobile Web technologies:
<b><i> writing in bold and italics </i></b>
Right!
Writing Well-Formed Code
You must always have the base format of your HTML tags included in your page for it to be XHTML-compliant.
For example, your browser may once again forgive your omission of a closing </html> tag, but XHTML will not.
The id attribute replaces the name attribute.
<img src="picture.gif" id="picture1" />
NOTE: When using Transitional XHTML, use both the id and name attributes:
<img src="picture.gif" id="picture1" name="picture1" />
You must add the alt attribute to every image on your page.
<img
src="picture.gif"
id="picture1"
name="picture1"
alt=
"This
is
a
picture
of
my
house." />
All XHTML documents must also have a DOCTYPE (document type) declaration. The html, head, and body
elements must be present, and the title must be present inside the head element. All attributes must be placed
in quotations. The Doctype sets out the rules and regulations for using XHTML. The DTD (document type
definition) must be the first line of every XHTML document.
This is an example of a strict doctype declaration:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
The DOCTYPE and all XHTML code must be included in your page in the correct order. In other words, the
</title> must be closed before closing the </head> tag, and the </head> tag must be closed before opening
the <body> tag.
Module 4: Creating Web Pages
The "DOCTYPE" is not technically part of the XHTML code and therefore does not need a closing tag, nor does
it have to be written in all lowercase letters; however, it is necessary for defining the type of document you are
writing.
Parts of the Document Type
DTD specifies the syntax of a Web page in SGML. (To read about SGML, go to the W3C, Introduction to
SGML.
DTD is used by SGML applications such as HTML to specify rules that apply to the markup of documents
of a particular type, including a set of element and entity declarations.
XHTML is specified in an SGML document-type definition, or DTD.
An XHTML DTD describes in precise, computer-readable language the allowed syntax and grammar of
XHTML markup.
There are currently three XHTML document types:
strict
transitional
frameset
XHTML 1.0 Strict (Refsnes Data, 2005)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use this when you want really clean markup, free of presentational clutter. Use this together with cascading
style sheets.
XHTML 1.0 Transitional (Refsnes Data, 2005)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use this when you want to take advantage of HTML's presentational features and when you want to support
browsers that don't understand cascading style sheets.
XHTML 1.0 Frameset (Refsnes Data, 2005)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use this when you want to use HTML Frames to partition the browser window into two or more frames.
Writing Tag Names in Lowercase
HTML is not case-sensitive, but XML is. Because XHTML is technically an XML application, it is also casesensitive. All tags must now be written in lowercase letters.
Module 4: Creating Web Pages
If you once wrote <HTML>, you must now write <html>. This is true for all of the tags and attributes in your
document. For example, <table width="100%"> must be written <table width="100%">.
See a list of common XHTML code errors at http://en.wikipedia.org/wiki/XHTML#Common_errors.
The XHTML Validator
To ensure that you have written your HTML code correctly, you should check it with the W3C Markup
Validation Service. You can check a Web page that has been uploaded to a Web server, check it from your local
computer, or copy and paste the code into the Validator window.
Advanced Techniques and Technologies: What's Ahead
In this course, we have only touched the surface of Web development and design. UMUC offers a structured
approach for obtaining the skills necessary to be a competent and professional Web developer and/or designer.
Check the current UMUC School of Undergraduate Studies Catalog to see the Web development and design
courses available to you.
Below are descriptions of the advanced Web development and design technologies you will find in other UMUC
courses.
Topic
Description
Web Site Design
creating content, visuals, delivery, purpose, look and feel, images, sounds, and
navigation—it is about what you see
Web Site
Development
creating dynamic, interactive sites, including databases, programming, e-commerce
capabilities, and special effects
Web Server
Administration
managing and maintaining the Web server
Web Site
Maintenance
changing or updating text, graphics, or other current site content, including the addition of
new pages and technologies that do not alter the overall design of the site
Web Site
Promotion
getting the word out about your Web site and configuring your site so that it is easy to find
Web Security
protecting Web data so that the wrong people will not change it, requiring proper
authentication, and ensuring that data sent to a Web server goes to the correct server
Web Site Analysis
making sure your Web site is being seen, checking for security flaws, and comparing your
Web site with that of your competition
Web Accessibility
designing sites to address the needs of disabled individuals
Web Site Costs
analyzing all of the costs involved in Web site design, development, operation, and
maintenance
Web Site Hosting
deciding what services you need and finding a reputable provider to store your site
E-Commerce
selling and buying goods and services, using the Internet as the means of communication
Web Multimedia
integrating audio, video, text, and animation
Module 4: Creating Web Pages
Web Page Editors
creating and editing a Web page and managing your Web site, including uploading files to
the Web server and checking links
Web Servers
managing the Web site environment
CSS (cascading
style sheet)
defining how HTML elements are displayed by using a system of rules and markups
JavaScript
building dynamic, interactive Web pages with JavaScript, a programming language that
allows more options than HTML
DOM
specifying how Web page objects such as text, images, and links are represented,
associated, and manipulated, using DOM (Document Object Model)
Java Applet
referencing this small program from a Web page and sending it to a browser to perform
some type of action, such as animation or calculations, on the client
DHTML
working with DHTML (Dynamic HyperText Markup Language), a combination of HTML, CSS,
a scripting language, and DOM
XHTML
using XHTML (Extensible HyperText Markup Language), the follow-on version and
reformulation of HTML 4.x, as an application of the XML
XML
creating your own tags and sharing both the format and the tags' content on the Web
using XML (Extensible Markup Language)
CGI Programming
specifying how a Web server talks to an application program, such as a database, using
the Common Gateway Interface (CGI) standard
ColdFusion
working with a programming language that combines HTML, other technologies, and CFML
(ColdFusion Markup Language) and that is used to write dynamic Web pages on the fly
(compare to ASP, PHP, and CGI scripts)
References
Refsnes
Data.
(2005a).
W3Schools:
XHTML
DTD.
Retrieved
December
19,
2005,
from
http://www.w3schools.com/xhtml/xhtml_dtd.asp
———.
(2005b).W3Schools:
XHTML—Why?
Retrieved
December
19,
2005,
from
http://www.w3schools.com/xhtml/xhtml_why.asp
———. (2005c).W3Schools: Differences between XHTML and HTML. Retrieved December 19, 2005, from
http://www.w3schools.com/xhtml/xhtml_html.asp
Return to top of page
Report broken links or any other problems on this page.
Copyright © by University of Maryland University College .
These are the popups for this section, in order of their appearance.
Popup 1:
Module 4: Creating Web Pages
/CMST385/0602/Modules/M4-Module_4/popups/Presentation/frame.htm
Popup 2:
WYSIWYG—What You See Is What You Get. A WYSIWYG application is one that enables you to see on the
display screen exactly what will appear when the document is printed. Formatting applications such as Microsoft
Word, FrontPage, and Macromedia Dreamweaver are WYSIWYG applications.
Popup 3:
http://www.w3schools.com/html/default.asp
Popup 4:
http://www.lynda.com/hex.html
Popup 5:
http://html-color-codes.com/
Popup 6:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Graphics
Popup 7:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#GIF
Popup 8:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#JPEG
Module 4: Creating Web Pages
Popup 9:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#PNG
Popup 10:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Inline
Popup 11:
Image compression—Image compression makes your image file smaller but does not change the image's
dimensions.
Popup 12:
http://www.umuc.edu/
Popup 13:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Relative
Popup 14:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Absolute
Popup 15:
http://www.w3.org/People/Berners-Lee/#Before
Popup 16:
Hotspot—A specific geographic location in which an access point provides public wireless broadband network
services to mobile visitors through a WLAN. Hotspots are often located in heavily populated places such as
airports, train stations, libraries, marinas, convention centers, and hotels. Hotspots typically have a short range
of access.
Module 4: Creating Web Pages
Popup 17:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Multimedia
Popup 18:
http://www.w3schools.com/media/media_soundformats.asp
Popup 19:
http://www.w3schools.com/media/media_browservideos.asp
Popup 20:
http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061
Popup 21:
Non-streaming—A non-streaming file (also called a static file) must be downloaded to your hard drive
completely before it can be seen or heard.
Popup 22:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#Streaming
Popup 23:
Inline CSS—Cascading Style Sheet formatting used within the HTML coding of a Web page. Inline style sheets
have the highest priority over Internal style sheets and external style sheets.
Popup 24:
Internal CSS—Cascading style sheet formatting text placed within the head section of an HTML page. Internal
CSS has priority over external CSS.
Module 4: Creating Web Pages
Popup 25:
External CSS—A cascading style sheet saved as a text file and linked to each HTML page that uses the
formatting settings. External style sheets have the lowest hierarchy; inline and internal style sheets will
override their settings.
Popup 26:
T h i s
I s
a
M a i n
H e a d i n g
My information would be placed here. Each paragraph I create will take the formatting applied via the
style sheet.
This second paragraph has the same styles as the first one. If I add an inline style to some part of this
paragraph, it will override the style sheet settings. See the change?
To insert another main heading, all we have to do is use our h1 tag. We don't have to type each style
characteristic anymore.
A n o t h e r
Popup 27:
http://www.w3schools.com/css/demo_default.htm
Popup 28:
http://www.w3schools.com/css/css_examples.asp
Popup 29:
http://jigsaw.w3.org/css-validator/
Popup 30:
H e a d i n g
Module 4: Creating Web Pages
http://www.w3.org/Talks/1999/03/24-stockholm-xhtml/
Popup 31:
http://encyclozine.com/
Popup 32:
SGML—Standard Generalized Markup Language, a system for organizing and tagging elements of a document.
SGML was developed and standardized by the International Organization for Standards (ISO) in 1986. SGML
itself does not specify any particular formatting; rather, it specifies the rules for tagging elements.
Popup 33:
http://www.w3.org/TR/1998/REC-html40-19980424/intro/sgmltut.html
Popup 34:
http://en.wikipedia.org/wiki/XHTML#Common_errors
Popup 35:
http://validator.w3.org/
Popup 36:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#ASP
Popup 37:
/CMST385/0602/Modules/M4-Module_4/../G1-Glossary.html#PHP
M o d u l e
4 :
C r e a t i n g
W e b
P a g e s
Module 4: Creating Web Pages
Self-Assessment
Directions: Test yourself on how well you know the material. You will get the correct answers when you
click the Check Answer button below each question. There are no grade points for this online review.
Multiple choice: Select the best answer for each of the following:
1. Which of the following statements is not true?
A. You cannot view a Web page on your local computer without a Web server.
B. You can host a Web site from your home computer.
C. If you switch Web hosters, you do not have to change your domain name.
D. Web pages will look different when viewed using different browsers.
2. The term for reserving a domain name for future use is:
A. parking
B. selling
C. hiding
D. leasing
3. What type of hyperlink points to a page located on the same Web server as the page the link is
on?
A. absolute
B. intermediate
C. relative
D. local
4. The following code is an example of what type of hyperlink?: <a href
"http://www.umuc.edu/mydirectory/mypage.htm"> My page is located here.</a>
A. absolute
B. intermediate
C. relative
D. local
5. Which of the following is not one of the basic table tags?
A. <tr>
B. <td>
C. <tt>
Module 4: Creating Web Pages
D. <table>
6. You should use what attribute to allow you to see the table cells' borders when creating your Web
page?
A. visible
B. border
C. show
D. cell
7. The combination of still graphics, audio, video, and/or animation on a Web page is called:
A. multifile
B. multimedia
C. multipurpose
D. multihyper
8. What type of graphic is part of the Web page and is loaded and displayed by your browser, right
along with the text of the page?
A. embossed
B. included
C. embedded
D. inline
9. Which of the following is not a graphic type your browser can display natively?
A. GIF
B. JPEG
C. BMP
D.PNG
10. What type of multimedia files are not downloaded to your hard drive but are continuously
downloaded to a media player?
A. streaming
B. running
C. flowing
D. digitizing
Report broken links or any other problems on this page.
Copyright © by University of Maryland University College .
Module 4: Creating Web Pages
M o d u l e
4 :
C r e a t i n g
W e b
P a g e s
Exercises
There are no exercises for module 4.
Report broken links or any other problems on this page.
Copyright © by University of Maryland University College .