Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
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 page creator.
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 HTML coding.
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 like.
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 students.
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 screen.
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 animation.
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 color.  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 blue.
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 homepage.
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?
(1) Nothing
(2) A Web Page is on paper and a Web Site is on the World Wide Web
(3) A Web Page is an individual page while a Web Site is a group of pages
Answer: (3) A Web Page is an individual page while a Web Site is a group of pages
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
Answer: (2) Menu 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 same folder
(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