Click to edit Master text styles
Objectives for this tutorial include
gaining a basic knowledge and understanding of HTML, Microsoft FrontPage, and
creating a basic web page.
Microsoft FrontPage is a mid level web
A Web Page is a simple page. Many web pages create a web site. A URL, or Universal Reference Link, is the
address of the web page or web site. Example
is www.espn.com or www.umd.edu
Lesson #1 explains the basics of the HTML
language. While we are explaining the
basics, an advanced knowledge of HTML is not necessary in the creation of web
pages using Microsoft FrontPage.
HTML stands for Hypertext Markup Language
and it is the basic language of many web pages. It also serves as a foundation for other web
page languages. Examples are XML,
DHTML, and Java. All HTML code is
written between carrots <>. And
an end to a command contains a backslash < />.
This slide shows some of the basics of
This slide shows a few basic HTML tags
which allow you to code a few more advanced functions.
Teacher: After this slide which ends the
lesson and shows the HTML codes for links, end slide show and open the
Microsoft FrontPage document entitled Lesson #1. Show the class the preview of the web page
and then switch to the HTML tab. In
this view point out the different HTML codes and tags. The title, body, bolded font, italicized
font, bulleted list, etc. Show the
class any other types of HTML coding you wish by clicking on the normal tab,
editing the web page, and then switching back to HTML tab and showing what it looks
like in HTML. Once you are finished
come back to the slide show.
Different things can be contained within
a web page including text, pictures and images, and hyperlinks. It is easiest if you have your web page
planned before you begin so that every item is in a central location.
To plan you want to create an
outline. Consolidate all the web links
you wish to include onto a notepad document so they are there at your
convenience. Put all image files in
either .GIF or .JPG format in the same location. Also, Put all text documents you wish to
include into one location. This will
help you find everything you need when creating your web page.
Lesson #3 explains the basics of the
Microsoft FrontPage program.
Microsoft FrontPage is a mid level web
page creator that is similar to all Microsoft Office Programs and does not
require an extensive knowledge of HTML coding.
The application window is everything you see
when you open Microsoft FrontPage it contains all the windows, menu bars, and
tool bars we are about to discuss.
Here is what the application window looks
The Web Document window is where your web
page is created. In this window you can
create, edit, and view your web page.
The views bar is where the title of your
document is displayed; it shows which web page you are working on.
The title bar displays the Microsoft
FrontPage logo along with the minimize, maximize/restore, and cancel
buttons. Point out each button to your
The Menu bar is towards the top of the
application window. It contains drop down
menus for File, Edit, View, Insert, Format, Tools, Table, Frames, Window, and
Help. Many of the items on these drop
down menus have shortcuts in the tool bars.
The File menu contains the basics such as open, save, and print. The Edit menu contains items such as undo,
along with your clipboard commands of cut, copy, and paste. The View menu gives options to view
different items of your web page including folders, hyperlinks, and navigation. It also is where the toolbar display button
lies. The Insert menu is where you go
to insert items into your page including text boxes, images, breaks, and
horizontal lines. The Format menu
contains background, font, style, bullets, and borders. The most important part of the Tools menu is
the spell check. The Table menu is
where you go if you want to create or insert a table into your page. The Frames menu deals with the frame of your
web page. The Window menu shows you
which windows you have open and gives you links to all pages that are
opened. The Help menu is there to
assist you if you run into problems with creating your web page.
The Standard toolbar gives shortcut icons
that start a new page, open an existing file, save your work, print your work,
undo/redo changes, cut, copy, and paste, create a hyperlink, e-mail your web
page, and even spell check your work.
The formatting tool bar provides you to
format your document including choosing a font, font size, font color,
aligning the text, creating bullets and numbering, and make your font bold,
italicized, and/or underlined.
The status tool bar shows the speed at
which your page will load. You can change
this speed if you desire.
The scroll bar allows you to scroll up
and down, left and right because the entire page is not always in view on the
The workspace tabs include normal view
where you edit your web page, HTML view where the HTML is displayed, and the
preview view which shows the entire project including the hyperlinks and
This lessons gives you the basics in
creating a web page.
To change the background color go to the
format menu bar and select background.
Select a background color and hit ok.
This is what it looks like when you click on the format menu bar.
In the page properties background box that appears select a background
Here you can also change the
color of the text as well as the hyperlinks of the page.
Once you change the color this is what
will appear. Here the background was changed
To insert text all you need to do is
move the cursor where you wish the text to be and then type. Typing in FrontPage is just like typing in
other Microsoft programs such as Microsoft Word.
Here is what text looks like on a web
page. This text is in a larger font so
that it can be seen.
To make a text a hyperlink, highlight
the text and right click on it and select hyperlink.
In the box type in the URL you wish the link
to lead you to.
Then click ok, the text should automatically become a link.
Highlight your text and right
click. Select hyperlink in the
drop-down menu that appears. In the
hyperlink box add in the URL and click ok.
Here the text is a hyperlink.
To insert a picture go to the Insert
menu and select picture and either clip art or from file. Select your picture and click ok.
To insert picture, go to the Insert menu
and select picture and either clip art or from file.
Here we selected from file.
Select your picture from the drive and folder
and click ok.
Here is an example of an inserted file.
To create a hyperlink using a picture,
right click on the picture and select hyperlink. Type in the desired URL in the appropriate
box and click ok.
Right click on the picture and select
hyperlink. Type in the URL in the URL box
and click ok.
Here a picture of Testudo the University
of Maryland mascot has become a link to to the University of Maryland ticket
Teacher: This is the icon for a table. This is located in the standard
toolbar. This function allows the
creation of tables. Tables give a more
organized view of the information being presented. Tables are also very easy to use and make
the document look much more professional.
Teacher: This is a screenshot that shows how to
insert a table. The arrow is pointing to
the table icon in the standard toolbar.
After this is chosen, the size of your table is available to choose.
Teacher: This side shows a two by two table. The procedure to get this two by two table
was shown in the previous slide.
To Save your page go to the save as
option in the File menu. Choose the
drive you wish to save your file in and name your file. Then, click save.
Click File, Save as and the save as
window appears. Choose the drive and folder. Title your web page and save.
Make sure all components of your web
page are saved in the same folder.
What is the difference between a Web Site and a Web Page?
(2) A Web Page is on paper and a Web Site is on the World Wide
(3) A Web Page is an individual page while a Web Site is a group
Answer: (3) A Web Page is an individual page while a Web Site is a group
What are HTML Tags?
(1) The price for the HTML
(2) How to wash the HTML
(3) Simple language for creating web pages
(4) The web address for your web site
Answer: (4) The web address for your web site
Which Toolbar contains all commands for the program?
(1) Standard Toolbar
(2) Menu Bar
(3) Scroll Bar
(4) Formatting Tool Bar
What is very important when saving your page?
(1) To finish the page before you save it
(2) To save the entire page
(3) To save all areas of the page, including pictures, in the
(4) Why save your document?
Answer: (3) To save all areas of the page, including pictures,
in the same folder
What is a hyperlink?
(1) An active piece of your web page
(2) A shortcut to other web pages and sites
(3) An image that moves rapidly across the page
Answer: (2) A shortcut
to other web pages and sites