1. How to create hyper link in MS FrontPage?

Creating a Link
1. Type anything you want or insert an image 2. Hightlight your text or image by holding the left mouse button down and running the mouse ofver the text you want hyperlinked.

3. Click on the insert hyperlink menu

4. To insert a link you may do one of the following:

Type in the URL you want it to link to in the address field browse your current web, ] browsed pages in history recent files Email address can be used as a URL by clicking the email address in the lower left hand side of this window. Select a Bookmarkfrom this or any other page if you have a bookmark anchor within a page and you want to go directly to that portion of the page

5. Set the target if you are working in frames. The target frame is used for when a person clicks on a link the site will load in a new window or in the same window. 6. Click ok .

2. Write down step to insert an image in MS Forntpage. Inserting an image

1. Open up a document in Front Page. 2. Place your cursor on the page where you want to place your image. 2. To insert your image, Click on INSERT => PICTURE => FROM FILE or the Toolbar icon.

3. Browse your hard drive for the image and click on its name to select it.

4. Click ok when you find it. Your image will now show up in your document.

3. What are the steps required in setting page?

Setting Global Page properties Global page properties are those that are the same for the entire page. Background, title, metatags are all page properties. Global page properties will affect all areas of the page that have no specific settings to override them. This tutorial will review the basic options that you will want to set in Front page 2002. 1. Right click on your document and select page properties.

2. TITLE On the General tab you should enter a Title of your page.

3. TARGET If you are using frames, you may want to select the target frame which you want all links to load in. Click the to set the target of your links.

Tip: If you set the target frame for Whole Page (_top) even though your pages are not in frames, this will make all your links load in a full window and will pull your page out of an unwanted frameset.

Same frame: replace the current page being viewed in that frame.

Whole page will replace all frames in the browser New Window will spawn a new window with the page opening in the new window Parent frame will replace the current page however it is viewed. If it was in a frame, it will put it there. If it was the full frame, it will put it there.

Tip: When I use framesets, I often name the frame where I want the pages to load as "main" and target my main frame. Make your changes and click ok. Click on the background tab. Set the following:

Background picture- an image that will tile across your background to fill all the space.

Watermark is available when you select an image. THis will make the background stationary in that it will not scrill with the page text.

4. Enable hyperlink rollover effects will set simple rollovers for your hyperlinks. selections made here will be displayed when a hyperlink is rolled over. choose the style fromthe button after selecting this option. Background colorTIP: Background colorshould always be close to the background picture page Text color should contrast with your color for best viewing. Hyperlink text color is for the unvisited hyperlink visited hyperlink will change the color of a link if you have visited it. Active hyperlink will change the color of the link while visiting it.

5. Margins Web pages default with a top and side margin. If you want your images a certain distance from these sides, set the margins here. In this case, I set the top

margin equal to 0 and the left margin equal to zero so my images and tables will butt up to the sides. 6. Custom This is where you set all the Meta Tags. This is for the advanced user who would like to prepare and submit the page to a search engine. In order to add the meta tags here you will need to know what search engines are looking for. This is why most users will add meta tags created from a meta tag wizard like this one DEVELOPING WEBS METATAG GENERATOR since the choices are set out and it is easy to use and add to a page.

7. Language The language tab allows you to set the default language for the page.

Fixed Background Using FrontPage

Do you have an image in back ground you'd like to stay put? You will need to add a backgroundproperties attribute to the body tag where you have put the attribute for your background image. This will give you the illusion of the page contents moving as you scroll over a static or immobile wallpaper. 1. Right click on your document and select page properties. 2. Click on the Background tab 3. Set your background picture by checking the background picture box and browse for the image you are using. 4. Check Watermark to Prevent the background image from scrolling with the page contents.

Introduction to HTML
It is the most important language to learn, because it is the basis on which most other web design languages are built. This tutorial will take you through step by step. TOOLS My first suggestion is to open your notepad Go to start-programs-accessories-notepad Open your notepad We will use this to create and view our webpage BRACKETS HTML codes are always enclosed in <brackets> anything not in the brackets will come up as text on your page. HTML The very first code on your page is always <HTML> This code makes the browser recognize it as an HTML page. We also need to let the browser know when we are ending the HTML document To end most codes in HTML we simply need to put a backslash before the same code as follows </HTML> Everything else in your HTML page goes between these brackets. <html> </html> HEAD Two things you want to put immediately into your code are the head and title while these are not important right now for anyone to view your page. They will become important later on, when you want to advertise your page or add java script, and other coding you will become familiar with.

It is always a good idea to get into good habits from the beginning. <html> <title>Introduction to web page</title> <head> <h1>welcome</h1> </head> </html> BODY The main part of your page goes into the <body> area. The body area goes after the heading is ended. Here is how your coding should now look <html> <title>Introduction to web page</title> <head> </head> <body> Welcome to our web page.. </body> </html>

Font, Color, And Size And Heading

COLOR The body tag can have attributes to it.The first attribute we are going to learn is how to add color change the <body> tag to <body bgcolor="blue"> Here is your current code <html> <title>Introduction to web page</title> <head> </head> <body bgcolor=blue> Welcome to our web page.. </body> </html> FONT SIZE We are going to learn font attributes The first attribute is size. Size can use the Heading tag <H1> or the Size Attribute tag, <font size="1"> You do not need to memorize these sizes. Most web developers guess at sizes or use a size chart. You should have an idea of the sizes though. <html> <title>Introduction to web page</title> <head> </head> <body>

<font size=7>Welcome to our web page..</font> </body> </html> HEADING Headings are used to capture attention on pages. Headings goes from <h1> being the largest and <h6> being the smallest. Headings should be ordered from largest to smallest on the page. <html> <title>Introduction to web page</title> <head> </head> <body> <h1>Welcome to our web page..</h1> <h2>Welcome to our web page..</h2> <h3>Welcome to our web page..</h3> </body> </html> FONT SIZE Size <font size="1"></font> goes from 1 being the smallest to 7 being the largest. We are going to try a couple of these in your text to see how they look. <html> <title>Introduction to web page</title> <head> </head> <body> <font size=1>welcome </font> to BPIBS </body> </html>

Introduction To Pre, Br, Basic Font Formatting Tag, Center

PRE FORMATED While you can see the sizes changed, did you notice something peculiar? Even though we returned after the word html and before the word page, there is no line break there. This is because HTML does not recognize the carriage return. We can make it see the returns by using the <pre></pre> tags with <pre> the text is taken just as you type it. This can however become a hassle because you will not be able to change size, color or format the text in any other way between the <pre> tags. So usually other tags are used. <html> <title>Introduction to web page</title> <head> </head>

<body> <pre> Hello How are you wel this Text app look as it in html Document.. </pre> </body> </html> BREAKS To control line breaks we can use one of the following codes

<br> means break to the next line <nobr> means no break, and will not let your text break(this causes the reader to scroll over) <wbr> will put a break into a <nobr> area, so this text won't break EXCEPT for where you put this code to force the break <br clear="all"> will cause a line break to the next full line. <p></p> means break two lines for a new paragraph

CENTER <center> </center>can be used to center objects and text on a line. Please the begine center tag <center> in front of the line of text, and the end center tag </center> at the end of the objects or text you want centered. If you place the center tag around the text in your HTML <html> <head> <title>The title of your page</title> </head> <body bgcolor="#0000ff"> <font color="#ffffff"> <CENTER> <font size="1">My</font><BR> <font size="2"> very </font><BR> <font size="4">first</font><BR> <font size="6"> html </font><BR> <font size="7">page</font><BR> </CENTER> </font> </body> </html> ALIGNMENT We can also align our text to left, center or middle using a simple attribute of the Heading <H1></H1> tag, the Paragraph<p></p> tag or the Division<div></div> Tag. To do this we use the following attributes within these tags.

align="center" Align="left" align="right"

Because the alignment is an attribute of a tag, Aligns must go inside the main tag it is set to align. They can go into the following tags

<H1 align="center"> </h1> To center the heading <p align="center"> </p> To have a double line break before centering <div align="center"> </div> To center without having to double line break

<html> <head> <title>The title of your page</title> </head> <body bgcolor="#0000ff"> <font color="#ffffff"> <p align="right"> <font size="1">My</font><BR> <font size="2"> very </font><BR> <font size="4">first</font><BR> <font size="6"> html </font><BR> <font size="7">page</font><BR> </p> </font> </body> </html> BOLD Text can be accented in many different ways. The first of these is BOLD. Bold is symbolized by a <b> in front of the text you want bold, and a </b> at the end of the area you want bold. Inserting text into your file that is surrounded by the bold tag will accentuate the text. This text is bold. This text is normal. ITALICS Text can be made to stand out by using ITALICS. This causes the text to slant. The tag is a simple <i> in front of hte text that you want italicized and a </i> at the end of the text you want italicized. This text is in italics. This text is not. UNDERLINE Text can also be made to stand out by using the UNDERLINING text. The tag for this is <u> </u> and is used similar to the bold and italics. Many web designers do not use this tag often since the underline is perceived on the web as a hyperlink. This text is underlined. This text is not. Often 2 or three of these are used together. <html> <head>

<title> </title> </head> <body bgcolor="#ffff00"> <font color="#0000ff"> <h1 align="center"> My very first html page</h1> <font size="5"><b>Welcome to my <i>html</i> page <br> where I am showing my html skills <p align="right><font size="3"> I want to learn <u>everything</u> I can about html<br> So I can make <i>cool</i>web pages</b></font> </body> </html>

Images Processing
Let's talk about images. When you use an image, basically you are linking to it. It is wise to upload the image to your site. If an image is uploaded to your web site, you do not have to link the entire web address, only the picture name. For our purposes, we will use some images on this site. The tag to add an image is the IMAGE tag, <img>. We have to tell them where the image is, so we use the src attribute to specify the image. We do that like this: <img src="../waterimage.jpg"> BACKGROUNDS We Can also use images as backgrounds. This is an attribute of the BODY tag. The good thing about background images is that they automatically tile. To use an image as a background image, we put it in our body tag. Change your current body tag to this: <body background="../waterimage.jpg"> This link specifies the image on our server by using the exact url of the image. Image Attributes There are main attributes we can add to the image tag which describe or alter the appearance of the image. ALIGN One we already touched on is the align tag. When used with the image it allows the image to be oriented in some horizontal location on the page in relationship to the text, or with slight vertical adjustments. Typical align values are right, center, left, top, middle.

BORDER The other code is border="number". This border code is used when you link the picture to a page, as we will learn to do in the next lesson. It can be used to add the border around an image that is unlinked too. ALT The alternate attribute is Alt="" such as <img src="http://www.porshiana.com/waterimage.jpg" alt="island"> This code is used to display the word "island" should your picture not show up for some reason. This works out well for people who are visually impared or use text only browsers. WIDTH The width tag will tell the browser how wide to display the image. This will set the placeholder for hte image as it loads, and/or can be used to adjust the size the image is displayed at on your page. The numbers we use for width are pixels. For comparison, most monitors are 800 pixels across and 600 down. You can also use percentages, where 100% would be full width. Let's go over a few codes

height - the height of the image width - the width of the image align - the horizontal alignment of the image

top----------aligns the text with the top of the picture bottom-------aligns text with bottom of picture middle-------aligns the text with the middle of the image right--------aligns image at right margin, and text will wrap on the left side of it left---------aligns picture at the left margin, and text will wrap on the right of it

hspace should be the amount of space you want on the sides your picture in pixels vspace should be the amount of space you want on the top and bottom of your picture in pixels

Linking pages
The ANCHOR tag: The links are called anchors in HTML. The tag for anchors is <a href=""> a stands for anchor. href stands for home reference. To end an anchor, simply use </a>. Adding an ANCHOR to Text:

Let's make a link to developing webs on our page.

To do this, add the following tag. (Always remember to add the http:// at the beginning to indicate it is out on the web) <a href="http://www.developingwebs.net">

Now we need something for them to click on, Let's use the words Developing Webs <a href="http://www.developingwebs.net">Developing Webs

Close the anchor tag with a </a>

<a href="http://www.developingwebs.net">Developing Webs</a>

So here is our anchor tag in the html code

Adding an ANCHOR to an image: Anchors can also use images. We use the image source for this.

Let's link our picture to porshiana.com. Using the <a href> tag again, right before our picture.

<a href="http://www.porshiana.com"><img src="http://www.porshiana.com/waterimage.jpg" align="right" height="300"></a>

Links to Sound: There is one more kind of link we can do. This is a sound link.

To make a sound link, simply add the address of an uploaded sound. Here I will use one at my page. Add this code to your page

<a href="http://www.porshiana.com/sample.mid">This is a sample sound link</a> Link Colors: One little problem, our links don't show up on this background. Let's change the color of them.Link color is determined for the page in the body tag. Change your body tag to this: <body background="http://www.porshiana.com/water.jpg" LINK="#ffff00" vlink="#000000">

link attribute is for the color of the unvisited link. vlink is for the color of the visited link alink is for the color of the active link.

Different Type Of List And Horizontal Rule In Html

Unordered Lists: An unordered list has what is commonly called "bullets". We can add a bulleted list by adding an unordered list. The unordered list is contained within the Unordered list tags, <ul> </ul> tags. Each item in the list will be contained within the list item tags, <li> </li> The unordered list will look like this: Reasons I like Html

I can make my pages as I want them Once I learn html, the other languages come easily Even if I use an html editor, I can now adjust aspects of the page I can look at other peoples html code to learn how to do neat things

Ordered Lists: An ordered list has what is commonly called "numbered list". We can add a numbered list by adding an ordered list. The ordered list is contained within the Ordered list tags, <ol> </ol> tags. Each item in the list will be contained within the list item tags, <li> </li> The Ordered list will look like this below. Notice you have not assigned a number to any line, but the coding figures it out. Things I have learned 1. 2. 3. 4. 5. 6. 7. 8. Html base code How to align text Font attributes Inserting images Image attributes Creating links Sound attributes Making lists

Use of the Horizontal Rule: Horizontal Rules are pretty simple! They are a separating lines that are used to separate parts of a page. The code for a horizontal rule is <hr>. The <hr> code has attributes

size="4"--use any number to decide how fat the rule is width="50%" decides how long the rule is. This can be percent or pixel numbers.

Align="right"-- used only when using a width, can be right, left, or center

Put the following code into your document, Right before your picture and after <div align="left"> So I can make cool web pages</div> here is the code: <HR SIZE=5 WIDTH="80%" ALIGN=CENTER> <HR SIZE=4 WIDTH="60%" ALIGN=CENTER> <HR SIZE=3 WIDTH="40%" ALIGN=CENTER>