| |
Table
of Contents > How to Make Web Pages
How to Make Web Pages
Creating, Developing, and Previewing Web Page Files (-or- a "web
site")
Create (web site layout)
An important and helpful first step is to brainstorm about what sort of web
site you want to have. Brainstorming should include how many web page files
you want to have, what sort of content will be on those pages, and an overall
purpose for your web site. Keep in mind that:
- Students have a space limit
(or quota) of 100 Mb
- Faculty/staff have a space
limit (or quota) of 25 Mb.
Graphics, audio and video
files are large and use up space quickly. Brainstorming a conception
of your web site will allow you to do a preliminary web site layout.
Composing your web site layout
beforehand will save you time and decrease the likelihood of broken
links or mistakes. There are many ways to compose your web site's layout.
For example, write out on paper the web page files that you plan on
creating to make up your web site.
Web sites have the potential
to contain many web page files, so keeping an updated copy of a web
site layout will help you keep track of the web pages that you have
to maintain, and how each web page file fits into the overall spectrum
of your web site.
Create (file naming)
Before creating an actual web page file, read these tips for file naming and
saving.
Create (options for web
page creation tools)
There are two very
different methods of going about web-page creation. Choose the method
that is most appropriate for your skill level and resources.
1. HTML (Hypertext Markup
Language) code |
HTML code is
the language (i.e., series of code) you use to create a functioning
web page. If you are familiar with writing HTML code, you have
a few options for creating and editing web pages, and can write
the HTML directly into your pages.
- HTML can be coded
in Notepad (for PC users) or TextEdit (for Macintosh
users) saved with the .html (or .htm) extension.
You will then upload these files into your public_html subdirectory
(see "How to Upload Your Web Site
on to WebFiles and Make it "Live").
- HTML editors such
as BBEdit (for Macintosh platforms) and Macromedia
HomeSite (for a Windows platform) are the most efficient
ways to code HTML. These programs will save you time and errors.
Once the file is created and saved with a .html (or .htm)
extension, you can upload the file onto WebFiles, in the www directory.
See "How to Upload Your Web Site
on to WebFiles and Make it "Live."
Below is an example
of basic HTML tags that comprise a web page file.
The code:
Example
3. The HTML code shown above, depicts a basic web page file.
The "tags" around the text tell web browsers how the
text should be formatted, what image to use, and where to link
to.
The result:
Example
4. Using the HTML code shown above in Example 2., this is the
web page file that is produced.
Learn HTML
If you would
like to learn HTML, Continuing Education offers classes for beginners,
as well as intermediate and advanced students.
HTML Online Resources
|
-OR-
2. What You See is
What You Get (WYSIWYG) HTML editor |
A WYSIWYG HTML
editor allows you to edit a web page without having to know or
write the HTML code. Basic WYSIWYG editors work very much like
a word-processor or page layout program, and typically have an
internalized publish (FTP) function that will allow you to easily
upload your web page files. For more information on this publish
function see "How to Put Your Web Site on the WWW: publishing
(FTP of your web pages into public_html)."
There are a couple of
free editors available, and some more elaborate ones you can
purchase. If you'd like to try a free HTML editor, check out Mozilla
Suite, which comes with an HTML editor called Composer. Below is an example
of a WYSIWYG editor in action. As you can see, it functions like
a word processor. This particular WYSIWYG editor is Mozilla Composer,
which is a free application that comes bundled with Mozilla Suite.
You can download Mozilla Suite for free at www.mozilla.org/products/mozilla1.x/ Example
5. A WYWIWYG HTML editor works much like a word processor application,
and it also write the HTML code according to your formatting.
WYSIWYG Resources
It is recommended that you read the instructions or participate
in a tutorial for the WYSIWYG editor you choose. Most instructions
can be found in the "Help" drop-down menu within your program. |
Compose (web page files)
Using the information
above, you should have picked the web-page creation tool that is best
suited for your needs and skills.
There are three main elements
of web pages: text, graphics (including pictures), and links.
- Text relays a message to
your audience and acts as the primary form of communication.
- Graphics or pictures can
also relay a message, but in most instances serve as the "eye candy" that
will keep your audience interested and visiting your site. Don't
forget to cite the source of the graphics or pictures that you're
using on your web, if you haven't created your own.
- Links are the ess of the
Web and are navigational elements of your site. Links allow your
audience to jump from page to page within your web site, as well
as to connect to external sites on the Web.
All three of these elements
combined create an interesting and functional web page.
Now you're ready to develop
your web pages:
- Open the application that
you are using, whether it be to code HTML by hand or the WYSIWYG
editor of your choice, and create a new file.
- Write the HTML code or
visually format the content, pictures, and links of your page.
- Save your file (with
either a .html or .htm extension) into a folder on
your computer, which is devoted solely to your web site and which
includes your images and other necessary files that comprise your
web site.
Previewing your web site
on the Web.
Before you upload your web page files, either by publishing through
your WYSIWYG editor or using an FTP program, you can preview
the web page.
Internet Explorer, Safari,
Mozilla (Firefox) users:
Select File > Open File. Browse to the
folder where you are saving your web page files. Select the file you wish
to preview and click Open.
|
|
|
